오늘의 CODE

동시에 2개의 프로젝트를 두개의 계정으로 따로 사용해야 하는 경우가 있다. 회사 계정과 개인 계정을 사용해야 할때도 그렇고 프로젝트 각각 사용해야 하는 계정이 정해진 경우도 그렇다. ** tip 2020년 7월 모든 Git 작업에 대해 토큰 기반 인증을 사용해야 한다고 발표했다. 2021년 8월 13일부터는 github.com에서 더이상 계정 비밀번호로 git 작업에 대한 권한을 가질 수 없었다. user.name과 user.email을 global로 하지말고 프로젝트 별로 설정해서 사용하는 방법도 괜찮다는 것을 뒤늦게 알았다.... 그래서 덕분에 SSH를 사용하기 위해 엄청난 시간과 공을 들여 내용을 확인하고 또 확인하고... 자주 사용하던 게 아니기에 자꾸 까먹고... 계정은 또 늘어나고... 그래서..

TypeScript 추가하기 vue2에서 TypeScript를 사용하는 두가지 방법을 알아보자 🚗 프로젝트 생성할 때 추가하기 1. vue-cli로 프로젝트 생성 vue create 프로젝트명 2. Manually select features 선택 3. TypeScript 및 필요한 항목 선택 4. 선택한 항목에 대한 옵션 선택 5. 프로젝트 생성 완료 🚙 프로젝트 생성 후 추가하기 1. TypeScript를 제외한 프로젝트를 생성 2. 해당 프로젝트의 터미널에서 아래의 명령어 입력 vue add typescript 3. 필요한 옵션 선택 4. 타입스크립트 추가로 생성되있던 기존 파일 중 일부 변경 및 새로운 파일 추가(자동) 🔥 주의 사항 기존 프로젝트에 TypeScript를 추가하는 경우, 옵션 선택..

Nuxt.js에 스캐폴딩된 디렉토리 구조를 파악해보자. (기본 템플릿 사용) nuxt ├ assets ├ components ├ layouts ├ middleware ├ pages ├ plugins ├ static ├ store assets css, image, font 나 LESS, SASS, Javascript 같은 컴파일되지 않은 에셋들을 포함한다. components Vue.js 컴포넌트를 포함하는 디렉토리로 애플리케이션에서 사용될 컴포넌트를 포함한다. 해당 경로에 위치된 컴포넌트들은 Nuxt.js의 비동기 데이터 함수인 asyncData 또는 fetch를 사용할 수 없다. layouts 애플리케이션 전체에 대한 레이아웃을 포함한다. 기본으로 default.vue가 생성되어 있을 것이고 상황에 ..

특징 자동 변환 및 번들링 (웹팩 및 바벨 포함) 코드 Hot reload SSR, SPA, 정적 생성 선택 가능 정적 파일 제공 (./static/은 /에 매핑됩니다) nuxt.config.js 파일로 구성 가능 사용자 정의 레이아웃 (layouts/ 디렉토리 ) 미들웨어 제공 모든 페이지에 대한 코드 분할 중요한 CSS 만로드 (페이지 수준) 전 처리기 지원 : SASS, LESS, Stylus 등 요소 관리 (, , 기타) ES2015+ 지원 전제조건 Node - 최소 v10.13 최신 LTS 버전 텍스트 편집기 - VS Code(Vuter 확장) 또는 WebStorm 터미널 - VS Code의 통합 터미널 또는 WebStorm 터미널 1-1. Create Project command npx cre..

1. 설치 npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/vue-fontawesome npm i --save @fortawesome/free-regular-svg-icons main.js //fort-awesome import { library } from '@fortawesome/fontawesome-svg-core' import { faUserSecret } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontaweso..

ESLint, Prettier를 이용하면 코드 스타일을 획일화 하는 작업(코딩 컨벤션 자동 설정)을 손쉽게 할 수 있다. 협업을 하거나 혼자 개발하거나 가독성이 좋은 코드 품질을 유지하기 위해서는 이 방법으로 개발하는 것이 유용하다. 그리고 저장할 때 자동으로 코드 스타일을 맞춰주기 때문에 어이없는 에러를 만들 확률이 줄어든다. 소스를 작성하고 저장했을 때 개행이나 세미콜론 등의 코드 형식을 정해서 사용할 수 있는게 prettier 인데 .prettierrc라는 설정파일을 만들어서 설정해도 되지만, 그럴 경우, prettier와 ESLint가 충돌 할 수 있기 때문에 ESLint로만 설정하도록 한다. .eslintrc.js 파일을 생성해 작성한다. vscode에서 eslint 플러그인을 설치한 후 최상단..

설치 npm install -g @vue/cli # vue-cli 3.x npm i -g vue-cli. # vue-cli 2.x yarn global add @vue/cli 버전 확인 vue --version 업그레이드 npm undate -g @vue/cli yarn global upgrade --latest @vue/cli 새 프로젝트 생성 vue create 프로젝트명 # vue-cli 3.x vue init webpack 프로젝트명 # vue-cli 2.x 로컬 서버 실행 npm run serve # vue-cli 3.x npm run dev. # vue-cli 2.x 2.x 템플릿 가져오기 (레거시) Vue CLI 3은 동일한 vue 바이너리를 사용하므로 Vue CLI 2(vue-cli)를 덮..