@변찬혁
'osamhack2021/WEB_BarberForce_Duty-Free' 레포지토리의 코드스페이스를 만들고, 코드스페이스의 VSCode 설정을 내 컴퓨터의 설정과 비슷하게 맞춤. (프론트에 필요한 Prettier 나 Vetur 익스텐션 등등만 가져옴)frontend 브랜치를 하나 만들어 프론트엔드 개발용 브랜치로 사용.frontend, backend 폴더 등등으로 분리하여 구조화하기로 하고, frontend 폴더에 Nuxt 프로젝트를 하나 생성함.npx create-nuxt-app frontend
Nuxt 프로젝트 생성 과정에서 입력한 값project name: frontend
programming language: javascript
package manager: npm
ui framework: tailwind css
nuxt.js modules: axios, pwa
linting tools: eslint, prettier
testing framework: none
rendering mode: universal (ssr / ssg)
deployment target: server
development tools: jsconfig.json
continuous integration: none (추후 도입? - github actions?)
version control system: git
기본 프로젝트 구조가 생성되었고, 쓸모없는 샘플 페이지들을 삭제할 예정. (내일(09.12) 하자)
(Nuxt 생성 과정에서 PWA 모듈을 선택한 건 처음인데 @nuxtjs/pwa 모듈 문서도 한번 스윽 훑어봐야 할 듯)
레포지토리 내부 frontend 폴더의 .prettierrc 설정을 내 기호에 맞게 변경함.
Codespace VSCode 설정에서 세이브 시, eslint autofix를 실행하도록 설정함.
(.vue에서 프로퍼티 순서(@click 이 class 보다 뒤로 가게 등) 등 코딩스타일 강제)
scaffolding 된 파일들을 설정한 prettier, eslint 를 바탕으로 formatting 함.
프로젝트 생성 시 같이 생성된 샘플 컴포넌트들을 삭제함. (NuxtLogo, Tutorial)
지금까지 설정한 Codespace 세팅을 쉽게 설정할 수 있게 하기 위해서 devcontainer 설정을 만듬.
(osam.kr 가이드북을 바탕으로 만드는 중. 프론트엔드랑 백엔드 환경은 성능 상 각자 필요한 것만 넣는게 낫겠지? - 현재 frontend 폴더에 있는 .devcontainer 설정파일 폴더는 데이터베이스 등 서버쪽 개발에 필요한 요소들은 제외한 상태임)