1. Git 서버에 프로젝트를 생성한다. * vs code에서 프로젝트를 clone 한다. 2. F1 > git:clone 3. 다음 창에서 1에서 생성한 Repository URL을 입력한다. 4. 프로젝트의 경로 선택 5. clone이 완료되면 새 창에서 열기를 선택한다. 6. 터미널을 현재 프로젝트의 상위 폴더에서 연다. 7. vue create 프로젝트명 을 입력한다. 이때 프로젝트 이름은 폴더 명과 같은 이름으로 작성 8. git 설정을 어떻게 할지 결정한다. - Merge 선택 --> 프로젝트 생성 완료 9. git ignore를 확인하고 node_module가 제외되는지 확인한다. .DS_Store node_modules /dist # local env files .env.local .env..

이전에는 PC를 포멧하고 깨끗히 설정한 후 이미지 만들어 놓기는 즐겼는데 어느새부터 귀찮아지기 시작했다. 역시 나이 때문일까.ㅜㅜ 그동안 쭉써오던 이클립스에 대한 설정도 매번 한땀 한땀 하면서 정성을 들였었는데(백업을 몰라서 그랬던것은 아니다.!!).. 귀찮다. 사실 요즘 VSCode가 훨씬 매력적으로 다가오면서 관심이 덜해진게 이유이기도 하다. 간만에 이클립스 설정을 백업하고 복원해보려고 한다. 1. 백업하기 먼저 현재의 설정을 내보낸다. 내보내기는 export가 선수다. context 메뉴에서 export 선택 후 General --> Preferences를 선택한다. 백업할 내용을 선택하고 파일 이름을 입력한다. 백업 파일을 잘 관리하면 되겠다. 2. 복원하기 export의 반대말은 당연 impor..

cli 기반으로 Vue를 만들다 보면 main.js에 이해하기 어려운 코드가 적혀있다. import Vue from 'vue' import App from './App.vue’ new Vue({ render: h => h(App), }).$mount('#app') 바로 render라는 속성이 정의된 부분인다. h=>h(App)이라고 적힌 부분이다. 이 문장의 얌전한 표현은 다음과 같다. render: function (createElement) { return createElement(App); } 즉 내부적으로 createElement라는 함수를 파라미터로 받고 이 함수에 App을 넘겨줘서 element를 생성한다. 여기서 createElement는 함수 입장에서는 단지 변수명이기 때문에 h로 바꿔보자..

vue 프로젝트 생성 시 eslint를 포함시키면 package.json 파일에 eslint에 대한 설정이 포함된다. "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": { "no-console": "off" }, "parserOptions": { "parser": "babel-eslint" } }, 이때 rules 부분에 global하게 추가하고 싶은 규칙들을 적어주면 yarn lint 명령을 통해서 작성한 javascript가 권장 규칙에 맞는지 확인할 수 있다. 예를 들어 위의 no-console:off 부분은 no-conso..

1. [이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다.] 오류 처리 관리자 권한으로 powershell 수행 후 PS D:\workspaces\vscode\vue\andy\ch11_vuex> Set-ExecutionPolicy RemoteSigned 2. 하위 디렉토리까지 삭제하기 구문 Remove-Item [-Path] [-Confirm] [-Credential ] [-Exclude ] [-Filter ] [-Force] [-Include ] [-Recurse] [-Stream ] [-UseTransaction] [-WhatIf] [] 축약형: rm -r -fo

node js library 검색 엔진 - https://www.npmjs.com/package/package package Easy package.json exports. www.npmjs.com babeljs.io - https://babeljs.io/repl Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io eslint.org/docs/rules: eslint의 rule 목록 - https://eslint.org/docs/rules/ List of available rules eslint.org

유용한 플러그인 1. Live Server : html을 바로 웹 서버에서 실행해준다. 2. prettier 3. Path Intellisense : file의 경로를 자동완성함 4. auto rename tag html, xml의 시작 태그를 고치면 자동으로 끝 태그도 수정해준다. 5. Vue Peek 사용된 Vue Component를 쉽게 추적할 수 있게 도와준다. 8. Material Icon Theme 9. Blockman 아이콘이 이뻐진다. ㅎㅎ

이번 포스트에서는 vscode에서 snippets 작성에 대해 살펴보자. vscode snippets 사용 snippet 작성 file --> preferences --> user snippets 를 선택하면 어떤 파일 타입에 snippets을 작성할 것인지 물어본다. 예를 들어 html에서 사용할 snippet이라면 html.json을 선택한다.(없다면 만든다) 또는 사용중인 file에서 F1 입력 후 command palette에서 Snippets 선택 후 위의 화면에 진입할 수도 있다. 이후 아래와 같은 형태로 snippet을 등록한다. "router": { "prefix": "router 등록", "body": [ "" ], "description": "router" }, snippets 사용 아..