[🔥송이와 🥕홍] 프론트 초기세팅

초기세팅 기록하고 공유하는 게 좋을 거 같아서 작성하였습니다. 읽고 궁금하신 점 있으시면 얼마든지 질문주십쇼!

---

🧚 create-next-app

타입스크립트 템플릿을 지원해주길래 아래 명령어로 설치하였습니다.

npx create-next-app@latest --ts

typescript config 파일도 알아서 해주길래 했습니다.

touch tsconfig.json

cra와 다르게 아래의 스크립트로 실행합니다. 아래 명령어 치면 eslint나 등등등... 뭔가 자동으로 해주는 것 같았습니다.

npm run dev

---

🧚 eslint 설정

알아서 .eslintrc.json를 만들어주고 강한 규칙을 적용해주는 걸로 추정되었습니다.

"extends":"next/core-web-vitals"

그런데 약간 부실하다고 느껴져서 npx eslint --init으로 airbnb 규칙과 다른 패키지를 설치하여 보강하였습니다. 이 규칙이 너무 엄격해서 몇가지는 룰로 제거하였습니다.

"rules": {
    "import/prefer-default-export": "off",
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "react/jsx-props-no-spreading": "off",
    "import/extensions": 0,
    "implicit-arrow-linebreak": 0,
    "import/no-unresolved": 0,
    "react/function-component-definition": "off"
  }

🧚 prettier 설정

원래 프로젝트 때 하던 규칙 그대로 생성하였습니다. eslint랑 충돌 안내게 해주는 패키지 몇개를 추가 설치하였습니다!

🧚 stylelint 설정

사실 저희는 styled-components를 쓰기에 큰 쓸모는 없지만 readme파일 포멧을 깔끔하게 해주는게 마음에 들어서 설치하였습니다.

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}

---

🔧 구조 설계

세팅을 잘 모르겠어서 전적으로 Next.js + Typescript + Styled-components 쉽게 구축하기 이 포스팅을 따라하였습니다.

1. components 안에는 미리 아토믹 디자인 패턴 적용하였습니다.
   
   

2. hook 커스텀 훅 쓰는 곳 입니다.
   
   

3. pages 안의 api는 기본 설정에 있던 파일입니다. 특이하게 여기 안에서 api를 모아두는 것 같았습니다.(자세히 모름..)
   _app.tsx와 _document.tsx는 styled-Components를 사용하기 위해서는 필수적인 설정이라고 합니다.

   • _app.tsx는 커스텀 app으로 원래 cra의 app.tsx 기능을 하는 것으로 생각됩니다...
   • _document.tsx는 styled-components를 사용하면 ssr인 nextjs에서는 초기 화면에 스타일이 안먹혀서 먹히도록 세팅하는 것으로 생각됩니다........

   
   

4. public은 원래의 그 기능을 합니다.
   
   

5. shared는 interpace나 유틸 같은 걸 모아두는 곳입니다.
   
   

6. styles는 스타일 관련된 것들을 모아뒀습니다. 글로벌 스타일과 테마 적용 마쳤습니다.

     color: {
      veryPeri: '#6667AB',
      veryPeri500: 'rgba(102, 103, 171, 0.5)',
      veryPeri300: 'rgba(102, 103, 171, 0.3)',
      lightViolet: '#AAB6FE',
      black: '#000000',
      black600: 'rgba(0, 0, 0, 0.6)',
      gray: '#989898',
      gray500: 'rgba(152, 152, 152, 0.5)',
      gray300: '#DCDCDC',
      gray100: '#F4F4F4',
      gray50: 'rgba(244, 244, 244, 0.5)',
      red: '#FF8A80',
    },
    boxShadow: {
      onButton: {
        default: '0px 3px 2px rgba(21, 16, 83, 0.6',
        push: 'inset 0px 3px 2px rgba(21, 16, 83, 0.6)',
      },
      offButton: {
        default: '0px 3px 2px rgba(186, 181, 201, 0.98)',
        push: 'inset 0px 3px 2px rgba(186, 181, 201, 0.98)',
      },
      modal: '0px 2px 5px 2px rgba(0, 0, 0, 0.25)',
    },

   크게 컬러/박스 쉐도우로 나눴습니다. onButton은 활성화버튼, offButton은 비활성화버튼을 말하고 모달은 모달입니다.

   
   

---

💅 styled-components

사용하기 위해서는 몇가지 설정을 하였습니다.
1. _app.tsx, _document.tsx
2. .babelrc

with-styled-components-babel 이 레포를 참조하였습니다.

---

그외 파일

next-env.d.ts
환경변수 타입설정하여서 자동완성되게 하는 파일인데, 사용할때 사용법을 읽어보고 써야할 것 같습니다.

next.config.js
config 설정 추가 하는 곳이라고 생각합니다. 시키기는 대로 추가해서 설정은 읽어봐야할 것 같습니다. 지금은 svg쪽 추가되어있는 거 같습니다?