재테크 블로그 프로젝트(1)-초기세팅

개요 

다음주 본격적인 개발에 앞서 초기세팅을하고 팀원들에게 설명을 주말에 해주는게 좋을거 같아서 초기세팅을 진행했다.

 

확실히 정해지지 않은 라이브러리는 나중에 해당 기능을 개발할 때 차차 추가하도록하고, 나머지 사항들을 세팅하며 프로젝트를 생성해보려한다.

 

프로젝트 생성

항상 사용하는 옵션을 사용했다

지금까지 이 옵션으로 쭉 사용했다.

Next를 통해 프로젝트를 만들면서 typescript, es-lint, Tailwind-CSS는 항상 고정으로 사용했다. 

 

다만,이번에 css 라이브러리를 전에 썼던 styled-components를 사용할까 했지만 내가 tailwind도 그렇고 처음 배웠을 때 tailwind가 적응도 빠르고 남의 코드 볼 때도 더 이해가 잘됐기에 tailwind를 이번에도 사용하기로 했다.

 

src폴더의 사용도 없이 사용하는 폴더구조를 봤는데 규모가 조금만 커져도 꽤나 복잡한 구조이기에 src폴더구조는 그대로 선택했다.

 

app router의 경우에도 page폴더구조를 안써보기도 했고 app router에서만 가능한 병렬 렌더링, 중첩 레이아웃을 쓰고자 사용했다(게다가 추천한다는데 안할이유가?)

 

import alias마지막은 잘 몰라서 검색해봤는데 경로를 간단하게 하는거라서 ../../buttons를 @/buttons와 같이 가져올 수 있는데 일단 이거의 경우 경로를 직관적으로 보이는걸 좋아하는 팀원들도 있을 거 같아서 no로 하고 나중에 폴더구조가 복잡해져 경로가 길어질 경우 설정을 추가하려한다.

 

prettier, lint 설정

eslint의 경우 항상 사용했던 air-bnb옵션으로 설정하고 개발하며 불편하거나 필요했던 옵션들은 추가, 제거하면서 사용하려한다.

• eslint-config-prettier
• eslint-plugin-prettier

를 통해서 prettier와 lint 룰이 충돌하지 않게 하고, lint에 prettier규칙을 위임하도록 했다.

airbnb rule에서 불필요한 경고 및 에러는 off로 만들었다. 콘솔의 경우에도 조만간 추가할 것 같다.

개발할 때 콘솔쓰고 머지할 땐 안쓰게끔 하려하는데 번거로울 경우 그냥 옵션을 추가하려한다. 

"rules": {
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "no-unused-imports": "warn",
    "@typescript-eslint/no-unused-vars": [
      "error",
      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
    ]
  }

 

prettier설치 후 .prettierrc의 경우 다음과 같이 설정했다.

{
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "arrowParens": "always"
}

 

마지막으로 package.json에 포매팅 scripts 커맨드를 생성해 팀원들이 커밋 전 포매팅을 꼭 하라고 당부해야겠다.

- husky

추가로 허스키를 설치해 커밋 전 lint가 실행되도록 선언했는데 가장 최근에 진행한 프로젝트에서 다른 팀원이 허스키가 자동으로 설치 되지않아, 수동으로 설치했는데 어째서인지 커밋 전 실행이 안되어서 팀원에 커밋에 걸려야할 내용이 내가 pull받은 상태에서 커밋할 때마다 생겨서 제거 했는데 요번에도 해보고 팀원이 또 설치가 안되면 다른 방법으로 설치해야할 것 같다 일단 보류

 

폴더구조

 

폴더구조는 다음과 같이 이전에 진행한 프로젝트와 유사하게 만들었다.

 

public : 각종 이미지, 폰트 ,svg파일들을 저장, svg의 경우 Icon 공용 컴포넌트를 최대한 활용할 예정이지만, 간혹 내부에 선이 많거나, 복잡한 도형의 svg의 경우 공용 컴포넌트로 선언하기에 힘들어 따로 저 파일에 분류하려고 한다.

_types : 각종 type과 interface를 담는 파일로 폴더 내에서 파일 명의 경우 기능 혹은 페이지 단위 별로 작성하고, 속성이 꽤나 겹치는 경우엔 상속받아 새로운 타입으로 생성한다.

(route) : page와 layout, error파일 등을 저장하는 페이지 라우팅 폴더로 페이지들을 해당 폴더에서만 관리하고자 생성했다. 참고로 아이콘 익스텐션이 해당 (route)엔 없어서 흑백 폴더로 나오는데 settings.json을 통해 따로 지정했다.

api : api 라우팅을 위한 폴더로 기능 혹은 페이지별로 내부에서 폴더를 쪼개고, 최대한 한 route.ts에서 다양한 메소드를 처리하게끔 하려한다. 이전에 service 폴더를 만들어 외부서버로 가는 요청을 관리하곤 했는데 이번에도 그렇게 할지, 혹은 해당 폴더의 route.ts에서 직접 경로를 받아 요청할지 고민 중이다. 그래서 service 폴더는 아직 제작하지 않았다.

components : 각종 컴포넌트들이 위치하는 폴더로, 내부엔 여러 컴포넌트들이 뭉친 containers 폴더로 해당 containers들이 기능별로 쪼개지게 해서 크게 3단계로 나눌 생각이다.

constants : 각종 상수들을 저장하는 폴더

hooks : 생성한 커스텀 훅들을 저장하는 폴더 프로젝트를 진행하며 모달의 열고닫음을 관리하는 useModal훅은 항상 요긴하게 쓰여서 이번에도 미리 생성했다.

store : Zustand를 사용하며 각 store를 관리 및 설정하는 폴더.

styles : ui에 관련된 파일들을 담는 폴더로 각종 css 파일들이 주로 저장된다.

utils : 공통으로 쓰이곤 하는 함수를 저장하는 폴더, hooks와는 달리 리액트 요소가 사용되지 않는 경우엔 해당 폴더에 생성 본인은 시간 변환 함수나, 쿠키 관리, 토큰 관리 함수를 주로 저장하곤 했다.