[프로젝트] okky 사이트 클론 초기세팅
이번 프로젝트 초기세팅 중 시행착오를 겪었던 몇 가지에 대해 적어보고자 한다.
1. public 폴더
정말 초보적인 내용인데,,
로고 이미지를 Public에 넣어주었다.
그런데 왜 꼭 Public 이어야 하지?
Public 은 컴파일이 되지 않는 폴더이고
Src는 컴파일이 되는 폴더이다.
그래서 컴파일이 필요없는 기본적인 이미지 같은 경우는 public 에 넣어주고
경로는 항상 절대경로로 사용한다.
2. css 아키텍처
팔레트를 어떻게 만들까 하다가
styled-component 와 scss 두 개를 사용했다.
이유는 페이지별로 스타일을 잡고 싶은 마음에 scss를 사용하고 싶었고
그 안에 상세한 컴포넌트들은 styled-component 를 사용해
목적성에 다르게 스타일 라이브러리를 사용하고 싶었다.
그랬더니 팔레트를 어디에 만들어주지? 싶어서
scss 는 global.scss 에 만들어주고
styled-component 는 themeprovider 를 사용했다.
그런데 컬러 변수 선언이 2군데에 해주었다보니
유지보수 생각해서 한 군데만 수정할 수 있도록 하기 위해서
index.css 에 컬러 선언하고 index.tsx에 임포트했다.
그렇게 해서 컴포넌트도 가져다 쓸 수 있고, scss 에도 쓸 수 있도록 했다.
그런데 멘토님께 이 상황에 대해 여쭤보니
왠만하면 css 혹은 css in js 둘 중에 하나만 사용하거나
각각 정한 목적성에만 사용하도록 분리하면 좋을 것 같다고 조언을 해주셨다.
3. 폴더구조
폴더구조를 어떻게 초기에 잡을까 하다가
다른 메인 프로젝트를 참고해서 폴더를 만들어주었다.
이 폴더구조를 피드백 받았을 때, dummy 와 interface 폴더를 하나로 합쳐서 api 폴더에 넣어주면 좋을 것 같다고 조언을 받았다.
프론트 초기세팅의 순서를 나름 적어보았다.
1) 컨벤션 정하기
- 깃헙 플로우
- 브랜치 protection
- pr, issue 템플릿
- dev 에다가 초기세팅
2) 프리티어, ES Lint 설치 (개발환경)
- 익스텐션 설치
- 설정파일 추가
- prettier, eslint npm 으로 설치 (package.json 확인)
3) 필수 라이브러리 설치
typescript, react-router-dom, styled-component, 등등
4) 폴더구조 잡기
5) 스타일 아키텍처
- bem 방법론
- styled-reset css 초기화
- 팔레트
6) 라우터구조
- 전반적인 라우팅 구조를 짜기