진행 상황

참고사항

• 뭐 모듈을 찾을 수 없다 이런 오류 나면 cd frontend/daengdaeng 하고 npm i 로 의존성 설치하기

• 실행은 npm run dev 로 하기

• 크롬에서 F12 누르고 아래처럼 설정해야 모바일 화면으로 나옴

  

• 기본 폰트 사이즈가 10px로 설정돼 있어서 css로 폰트 사이즈 잘 조절해주기

  • 이때 단위는 rem 으로 !!! 10px === 1rem (계산하기 편하려고 기본 폰트 사이즈를 10px로 맞춘 것 10px은 너무 작아서 꼭 조절해줘야 함)
  • 예시
    • font-size: 16px 로 설정하고 싶으면 font-size: 1.6rem 으로 써주기

• 폰트 굵게 하고 싶으면 font-weight: 800; 설정

VSCode에 ESLint, Prettier 설정하기

1. ESLint Prettier 검색해서 설치하기

   

   

2. ctrl + , 눌러서 설정 들어간 다음 setting. 검색해서 edit in setting.json 눌러서 setting.json 파일에 아래 내용 넣기 (아예 파일 내용 전체를 냅다 바꿔버리면 기존 설정해 놓은 게 날아갈 수 있으니 비교하면서 넣기~ 날아가도 상관 없으면 냅다 바꿔도 됨 아마도)

   {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "files.autoSave": "afterDelay",
     "explorer.confirmDelete": false,
     "javascript.preferences.quoteStyle": "single",
     "prettier.singleQuote": true,
     "launch": {
       "configur*ations": [],
       "compounds": []
     },
     "workbench.settings.applyToAllProfiles": [],
     "prettier.printWidth": 100,
     "liveSassCompile.settings.includeItems": [],
     "editor.formatOnType": true,
     "editor.tabSize": 2,
     "javascript.format.semicolons": "insert",
     "typescript.format.semicolons": "insert",
     "[javascript]": {
       "editor.maxTokeniza*tionLineLength": 2500
     }
   }
   

환경 변수 설정

환경 변수 파일은 git에 올리지 않아서 로컬에서 생성해줘야 한다.

1. frontend/daengdaeng 아래 .env 파일 생성

2. 아래 내용 작성

   NEXT_PUBLIC_API_URL=https://j9a103.p.ssafy.io/api
   NEXT_PUBLIC_KAKAO_JS_KEY=daeb2ca36e8ff5ee4d164382851bf9d9
   

3. 프론트 서버 재실행

의존성 설치

1. cd frontend/daengdaeng
2. npm i

디렉토리 구조 간단 설명