npm ERR! code EISGIT

...

npm ERR! git /Users/*****/node_modules/path-directories: Appears to be a git repo or submodule.

와 같은 에러로그를 뿜으며 설치가 안될 때

rm -rf node_modules/*/.git

프로젝트 경로에서 위 파일 삭제 후 다시 npm i

아님 그냥 노드모듈 폴더를 날리고 새로 인스톨하자

설치 후 재부팅

화면기록권한 부여 필요

디스플레이에서 미러링 등 본인에 맞게 설정 필요

빅서뿐만 아니라 몬테레이도 지원하는 걸로 보인다. (1.4.3 version)

다만 깜박임 이슈가 있는듯

https://support.frescologic.com/portal/en/kb/articles/fl2000-mac-driver-beta-release

1. launch.json 파일 편집

- 디버깅 탭에서 launch.json 파일을 열 수 있다. 

launch.json (vs code 설정파일)

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "client: chrome",
        "url": "http://localhost:8082",
        "webRoot": "${workspaceFolder}"
      },
      {
        "type": "node",
        "request": "launch",
        "name": "server: nuxt",
        "args": ["dev"],
        "osx": {
          "program": "${workspaceFolder}/node_modules/.bin/nuxt"
        },
        "linux": {
          "program": "${workspaceFolder}/node_modules/.bin/nuxt"
        },
        "windows": {
          "program": "${workspaceFolder}/node_modules/nuxt/bin/nuxt.js"
        }
      }
    ],
    "compounds": [
      {
        "name": "fullstack: nuxt",
        "configurations": ["server: nuxt", "client: chrome"]
      }
    ]
  }

2. nuxt 프로젝트 설정파일 수정

nuxt.config.js 에 extend 추가 

  build: {
    extend(config, ctx) {
      if (ctx.isDev) {
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      }
    },

3. 기타

vs code는 Node.js와 크롬을 위한 자체 js디버거를 내장한다.

Nightly버전을 쓰려면 기존의 Javascript Debugger를 제거하고 확장 탭에서 아래의 이름으로 검색해 설치한다.

@id:ms-vscode.js-debug-nightly

이후 디버깅탭에서 fullstack:nuxt로 새 크롬창이 열리면 중단점이 적용되고 호출스택과 조사식을 통해 디버깅도 가능하다. (js파일 및 vue파일 포함)

Keyboard Shortcuts

Get the most out of Sequel Pro by remembering the following keyboard shortcuts.

Main Tabs

Table StructureTable ContentTable RelationsTable InfoCustom QueryTable Triggers

General Shortcuts

New Window (Connection File)New Tab(Connection File)Add Connection To FavoritesOpen (Connection File or SQL File)Open current Connection File in New WindowSave (Connection File)Save As (Connection File)Save QueryClose (Connection File)Close All (Connection File)PrintImportShow Console WindowClear ConsoleBack in HistoryForward in HistorySelect Next TabSelect Previous TabInsert NULL valueCopy Create Table SyntaxShow Create Table SyntaxRefresh DatabasesChoose DatabaseShow Server VariablesShow Server ProcessesRefresh TablesFlush PrivilegesUser Accounts…Copy selection / Copy selected row(s)Copy selected row(s) with column namesCopy selected row(s) as SQL INSERTShow/Hide ToolbarFilter Table ContentFilter TablesBundle EditorNavigator

Select

Select current wordSelect current lineSelect enclosing bracketsSelect all

Table Structure Tab

Add a new fieldDelete selected fieldDuplicate selected fieldRefresh table structureEdit table details

Table Content Tab

Add a new rowDelete selected row(s)Duplicate selected rowRefresh table contents

Custom Query Tab

Version 1.0 and laterRun all queriesRun current query or selectionVersions 0.9.9.1 and earlierRun all queriesRun current query or selection Shift line or selection rightwardsShift line or selection leftwards(Un)Comment line or selection(Un)Comment current queryCompletion (narrow-down list / fuzzy search)    Insertion of an item    Insertion full schema reference    Keep Window Open after Insertion    Fuzzy Search    Close WindowSpell Checker Completion (narrow-down list)Select current queryShow MySQL help for current word or selectionOpen query favorites popup menuOpen query history popup menuInsert previous history item (successively)Insert next history item (successively)Show all database names as completion listShow all table and view names as completion listShow all table names from current database as completion list

Symbol

A JavaScript Symbol is a primitive datatype just like Number, String, or Boolean.  

It represents a unique "hidden" identifier that no other code can accidentally access.  

For instance, if different coders want to add a person.id property to a person object belonging to a third-party code, they could mix each others values.  Using Symbol() to create a unique identifiers, solves this problem:

ES6에 추가된 타입.

심볼은 유일하고 변경할 수 없는 타입으로, 객체의 프로퍼티를 위한 식별자로 사용할 수 있습니다.

typeof 

피연산자 타입을 반환   

객체 프로퍼티 참조

객체이름.프로퍼티이름
or
객체이름["프로퍼티이름"]

[에시코드]

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>JavaScript DataType</title>
</head>

<body>

  <h1>심볼 타입</h1>
  <p id="result"></p>

  <script>
    const p = { name: 'Doe' }
    var sym = Symbol("Age");		// 심볼 타입
    p[sym] = 17
    var symObj = Object(sym); 			// 객체 타입

    document.getElementById("result").innerHTML = (typeof sym) + "<br>" + (typeof symObj);
    console.log(p)

  </script>

</body>

</html>

Call stack, Callback Queue, Event-loop

console.log('1')
    setTimeout(() => {
      console.log('2')      
    }, 0);
    setTimeout(() => {
      console.log('3')      
    }, 0);
    console.log('4')
    // call stack:호출된 함수들의 스택, event-loop는 콜스택이 완전히 빌때까지는 다음 콜백을 처리하지 않음
    // callback queue(MessageQue)는 앞으로 실행할 콜백(함수와 그 인자)을 쌓아두는 큐
    // event : fileI/O, network..

- URL 해시

#id를 사용해 지정한 anchor(책갈피)로 이동 (한 페이지 내에서 특정 요소 위치로 이동)

Vue Router에서는 기본적으로 해시모드를 사용하나 아래와 같이 히스토리 모드를 사용할 수도 있다.

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

hash mode 에서는 URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않으나 history모드에서도 history.pushState API를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있다.

url에 #이 포함되지 않길 원하면 히스토리 모드를 사용한다.

• 해시 모드가 아닌 히스토리 모드에서 서버는 이 페이지가 새로운 페이지라는 것을 알지 못한다. 예를 들어, 로그인 링크를 클릭했을 때 url이 이동을 하더라도 서버 입장에서는 모른다.
• 따라서 히스토리 모드에서는 우리의 앱이 적절한 서버 설정이 없는 단일 페이지 클라이언트 앱이기 때문에 사용자가 직접 http://oursite.com/login 에 접속하면 404 오류가 발생한다.
  
  • HTML5 히스토리 모드 | Vue Router

vs-code에서 위와 같은 오류가 나면 power-shell을 관리자 권한으로 실행해 아래 명령어 입력, Y

 Set-ExecutionPolicy RemoteSigned

!important 무한대 점수(최우선이나 되도록 사용하지 않는 것 추천)

인라인 요소 : 1000점 (마찬가지로 되도록 사용하지 않는 것 추천)

전체선택자 ( * ) : 0점

태그 : 1점

클래스 : 10점

ID : 100점

최고점이 동일 점수면 가장 아래 (해석이 맨 나중) 코드가 우선적용

예시)

index.html

(...)
<body>    
    <div class="hello">        
        Hello World!
    </div>    
</body>
</html>

main.css

.div {
  color: antiquewhite;
}

div.hello {
  color: gold;
}

.hello {
  color: blue;
}

.div : 10점

div.hello : 1 + 10 점

https://start.spring.io/

위 사이트에서 Generate

Group :  프로젝트를 식별 고유 아이디.
 ex) com.cafe24.test

Artifact : 버전 정보를 생한 이름(jar, war) , 프로젝트 ID

 ex) Test Project

Application.java

@SpringBootApplication:  @EnableAutoConfiguration, @ComponentScan, @Configuration을 하나로 묶은 어노테이션

실행 시 서버가 가능되는 걸 볼 수 있다.

- 시작페이지를 만들기 위해

resources > static 하위에 index.html 파일을 생성

시험적으로 body의 내용을 바꾸고 localhost:8080페이지를 열어보면 index.html의 내용을 확인가능

- 컨트롤러 생성

Inaugurate/src/main/java 경로에 TestController.java파일 생성

package com.cafe24.itwillbs2.Inaugurate.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {

	@RequestMapping(value = "/home")
	public String home() {
		return "index.html";
	}
}

http://localhost:8080/home 경로 접속 시 index.html 의 내용이 출력된다

@ResponseBody 로 data 전달

Controller.java

(...)
@ResponseBody
	@RequestMapping("respTest")
	public String respTest() {
		String val = "Response Test!";
		return val;
	}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
	$.ajax({
		type: "GET", url: "/respTest", 
		success: (data) => { console.log(data); 
		$('#contents').html(data); }
	});
</script>


</head>
<div id="contents"></div>
<body>Hello World!
</body>
</html>

- Rest컨트롤러 이용하기

 -  RestController는 Spring 4.0이상에서 지원하며 @RestController 는  @ResponseBody 어노테이션은 기본적으로 활성화되어있어 추가 불필요

class 이름을 RestController로 하면 어노테이션과 이름이 충돌되기 때문에 TestRestController로 클래스 생성

TestRestController.java

(...)
@RestController
public class TestRestController {
	
	@RequestMapping(method = RequestMethod.GET, value = "/restTest")
	public String getValueTest() {
		String testVal = "restController Test";
		return testVal;
	}

}

index.html에서  ajax요청 url만 바꿔서 테스트 해보면 TestRestController클래스의 메소드의 테스트값이 출력되는 걸 확인가능하다.

* 스프링 부트 프로젝트 폴더구조

src
└─ main
   └─ resource
      └─ templates (View: Thymeleaf, Groovy, Velocity 등)
      └─ static    (정적 컨텐츠 : html, css, js, image 등)

- view로 JSP 사용하기

src/main/webapp/WEB-INF/views 에 index.jsp파일 생성  (폴더 없으면 생성)

pom.xml에 의존성 추가

<dependencies>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>
</dependencies>

application.properties에 환경설정 추가

spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

Controller.Java 소스 추가작성

@RequestMapping("test")
	public ModelAndView test() throws Exception {
		ModelAndView mav = new ModelAndView("index");
		mav.addObject("name", "gildong");
		List<String> testList = new ArrayList<String>();
		testList.add("a");
		testList.add("b");
		testList.add("c");
		mav.addObject("list", testList);
		return mav;

	}

서버실행 후 확인해보면 index.jsp의 화면을 보여줌을 알 수 있다.

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>Hello Spring Boot!</h1>
	<div>JSP List Test</div>
	<c:forEach var="item" items="${list}" varStatus="idx"> ${idx.index}, ${item} <br />
	</c:forEach>

</body>
</html>

stackoverflow.com/questions/15266533/jquery-attrchecked-checked-works-only-once

답은 간단하게 .attr 대신  .prop 를 사용하는 것이다.

//$('input:checkbox[id="is_include_fees"]').attr("checked", false);
$('input:checkbox[id="is_include_fees"]').prop('checked', false);

You can change the attribute, and that will also change the property, if the element is untouched. Once the element leaves this initial state, changing the attribute no longer affects the property. The exact behavior probably varies between browsers.

Instead of .attr('checked', 'cheked') use .prop('checked', true)