오늘의 CODE

부제 : 두 번째 백엔드 서버 개발기: 프론트개발자의 도전 회사에서 AI 관련 프로젝트가 우수수(?) 생기기 시작했다.사실... 우수수까지는 아니고.. 이번이 세번째 프로젝트.. 헷하나 빼고(그건 다른 팀에서 진행) 어쩌다보니 내 두번째 백엔드 서버 개발 도전기 (아니 나 진짜 프론트개발자인데...? 근데 이게 ......이게... 뭐지...? 근데 재밌네...? 새로와... 새로운거 조와....아이고 머리야...  뭐지 이 기분... 🤯)   프로젝트 시작!프로젝트 생성가상환경 만들고, 기본 세팅하면서 신나게 시작!코드 작성 중...스페이스 때문에 에러 한번 내주고DB 연결 로직 작성세션 관리 코드 작성CRUD 관련 파일도 생성필요한 유틸 함수도 만들고...그 다음은...? 또 들여쓰기 에러 한 번 ..

동시에 2개의 프로젝트를 두개의 계정으로 따로 사용해야 하는 경우가 있다.회사 계정과 개인 계정을 사용해야 할때도 그렇고 프로젝트 각각 사용해야 하는 계정이 정해진 경우도 그렇다. ** tip2020년 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├ storeassetscss, image, font 나 LESS, SASS, Javascript 같은 컴파일되지 않은 에셋들을 포함한다.componentsVue.js 컴포넌트를 포함하는 디렉토리로 애플리케이션에서 사용될 컴포넌트를 포함한다.해당 경로에 위치된 컴포넌트들은 Nuxt.js의 비동기 데이터 함수인 asyncData 또는 fetch를 사용할 수 없다.layouts애플리케이션 전체에 대한 레이아웃을 포함한다.기본으로 default.vue가 생성되어 있을 것이고 상황에 맞게 layout을 생성할 수 ..

특징자동 변환 및 번들링 (웹팩 및 바벨 포함)코드 Hot reloadSSR, 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 commandnpx create-nuxt-app orn..

1. 설치npm i --save @fortawesome/fontawesome-svg-corenpm i --save @fortawesome/free-solid-svg-iconsnpm i --save @fortawesome/vue-fontawesomenpm i --save @fortawesome/free-regular-svg-iconsmain.js//fort-awesomeimport { library } from '@fortawesome/fontawesome-svg-core'import { faUserSecret } from '@fortawesome/free-solid-svg-icons'import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'librar..

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)를 덮..