지금 진행 중인 원티드 프리온보딩 프론트엔드 코스에서 매주 최소 1개-2개의 미니 프로젝트를 팀원들과 함께 진행하면서 느낀 점은, CRA - 프로젝트 폴더 구조 구축 - 각종 기본 세팅 - 깃헙 레포 생성…까지의 과정을 다들 조금씩 부담스러워한다는 것이다. 물론 나도 그렇다.

혹여나 패키지 하나를 까먹고 안 깔지 않았을까-부터 대문자로 써야 할 것을 소문자로 쓰지는 않았을까-까지 생각이 미치면서 괜히 팀원들의 눈치를 보게 되기 때문이다(물론 나만 그런 것일 수도 있다.)

그래서 아예 이번 주말에 프로젝트 세팅 체크리스트를 나만의 메뉴얼처럼 만들어 놓으면 어떨까-라고 생각하게 되었고, 그렇다면 이번 기회에 나의 과거부터 현재까지의 프로젝트 폴더 구조를 연대기처럼 나열해보자! 라고 마음먹게 되었다(프로젝트 폴더 구조 구축이 기본 세팅의 중요한 과정 중 하나이기 때문…)

오랜만에 예전-이라고 하기에는 고작 8개월도 안 되었지만…- 프로젝트를 들춰보려니 민망하기도, 아련하기도 하지만 각설하고 시작해보자.

과거의 폴더 구조👶🏻

21.02.23 ~ 21.03.06 첫 프로젝트

워…😮 반년 전의 나는 정말 아무것도 몰랐다. 굳이 폴더를 하나 더 들어가서(web_project) CRA를 한 것도 그렇고, 폴더 구조랄 것도 없는 저 단순한 파일들의 나열만 봐도…

components라는 폴더를 만들었지만 아무 소용이 없다. 페이지 파일들을 컴포넌트 폴더 안에 몰아넣어 두었으니까. 컴포넌트와 페이지를 전혀 분리하지 않은 것이다. 그렇다고 파일 안에서 컴포넌트를 분리해놨거나 한 것도 아니다 (다소 민망하니 파일 내용까지 올리진 않겠다)

CSS도 모든 페이지 파일들에 하나씩 만들어 두었다. 당연하다. styled-components의 존재를 몰랐으니까.

그럴 만 했다고는 생각한다. React를 2주간 속성으로 배운 참이었고, Api를 어떻게 호출하는 건지도, 아니, Api가 뭔지도 몰랐던 때였다. 프로젝트 초기화? 세팅? 그런 건 기대하지 말았어야 했던 시기였다. 그래도 컴포넌트랑 페이지 정도는 분리해두지…라는 아쉬움이 들기는 한다.

21.03.29 ~ 21.04.17 두 번째 프로젝트

너무 길어서 두 번 나눠서 캡쳐했다. 여전히 CRA를 폴더 내에서 해서 depth가 하나 더 들어가 있다. 대신 컴포넌트와 페이지를 명확히 분리해둔 점이 눈에 들어온다.

이때 Material-UI를 처음 써봤었는데, 지금 생각해보니 CSS styling 방식이 styled-component와 매우 유사하다.

styles 폴더를 templates 폴더와 pages 폴더 각각에 하나씩을 만들어서 그 안에 몰아넣은 것이 보이는데, 지금 보면 굳이 templates과 pages를 나눴어야 했나 하는 생각이 든다. templates는 말 그대로 페이지의 틀, 템플릿을 만들어서 넣어둔 폴더인데, page와 component로 분리한 것으로도 충분하지 않았을까 하는 아쉬움. 역할이 명확하지 않은 느낌이 이제 와 든다.

그리고 styles 폴더도 아예 src 밑에 따로 빼서 거기에서 모든 페이지의 styling을 관리했으면 조금 더 뭐랄까, 중앙집권적(?)으로… 편하지 않았을까.

여전히 App.js, App.css와 index.js, index.css가 존재하는 것도 아마추어의 티가 나는 것 같다. 프로젝트 전체에 적용되는 CSS styling은 styled-components의 globalStyle 파일을 따로 만들어서 관리하는 게 좋다는 걸 알아버린 이상, 앞으로 index.css를 남겨둘 일은 없을 거 같다.

그리고 data 폴더가 눈에 띄는데,

이런 식으로 프로젝트에 쓰이는, 객체 형식의 데이터가 들어가 있다. 이런 파일들도 그냥 public 폴더 내에 data 폴더를 만들어서 JSON 형태로 넣어두고 fetch해서 사용하는 게 맞는 방법이지 않았을까.

그 외에는… 자잘하게 프로젝트 내에서 사용되지 않는 파일들(logo.svg, reportWebVitals.js 등)을 삭제했으면 더 깔끔했을 거 같다.

그래도 어느 정도 구조라는 것을 갖추어가고 있는 것처럼 보인다😇

21.05.10 ~ 21.06.12 세 번째 프로젝트

폴더 depth 얘기, App.js, App.css 얘기, 안 쓰는 파일 놔둔 것 등등…은 이제 그만 해도 되지 않을까 싶고… 이번엔 data와 images 폴더를 public 폴더 내에 만들어서 관리하고 있다.

근데 다시 보니 src 밑에도 data 폴더를 만들어두었다. 그때 데이터가 제대로 fetch되지 않는 이슈가 있어서 굳이 저렇게 했었던 거 같긴 한데, 이슈를 해결하고 public/data 안에 프로젝트에 쓰이는 모든 data를 모았어야 했다😥 후회되는군…

그래도 JSON 형태로 data를 두고 사용했었구나. 조금이나마 발전한 모습이다.

그리고 이번에는 components와 pages로만 분리해서 관리했고, styling을 따로 빼지 않고 파일 내에 다 포함시켰다.

대신 이렇게 특정 페이지의 내용을 담은 파일의 이름을 index.js로 처리해두었는데, 이렇게 하기보다는 에러나 버그가 발생했을 때 발생 위치를 쉽게 알기 위해 페이지 명으로 파일을 만들었으면 더 좋았을 듯하다. (ex. Closet/Closet.js)

url 폴더를 만들어서 base url을 관리하려 했었는데,

Config.js 파일을 src 밑에 두고 그 안에서 상수로(BASE_URL) 할당해두었으면 사용에 있어서 더 직관적이었을 것이다.

그리고 Constant.js 파일에 각종 상수를 한 번에 몰아두고 관리했으면 좋았을 것 같다.

최근의 폴더 구조👩🏻‍💻

21.08.02 ~ 21.08.06 최근 프로젝트

Pre-Onboarding 과정을 통해 다른 사람들의 코드도 많이 보면서 배우고 있고, 폴더 구조 또한 프로젝트를 본격적으로 시작하기 전에 어느 정도 의논을 한 뒤 구축하기 때문에 확실히 많이 발전된 모습을 갖추게 되었다.

눈에 띄는 점을 꼽아보자면, 우선 Layout 폴더를 만들어서 프로젝트 전반에서 쓰이는 Footer, Header와 전체적으로 반영되어야 하는 layout을 넣어둔 점이다.

그리고 Routes 폴더에 회원 권한에 따른 특정 페이지 접근 제어를 위한 PrivateRoute와 PublicRoute를 만들어서 넣어두었다.

Styles 폴더에는 프로젝트의 전체적인 CSS를 초기화시키는 GlobalStyle.js와 테마 속성이 담긴 Theme.js가 들어가 있다.

Hook이나 Validation, Storage 등을 위한 util functions이 담긴 Utils 폴더를 둔 것도 차이점이다.

바로 위에서 얘기한 Config.js와 Constant.js 파일도 따로 만들어서 모든 상수와 base url를 관리하였다.

추가로 .eslintrc 파일과 .prettierrc 파일로 팀 프로젝트를 위한 개발 환경을 설정해 둔 것도 나에게는 나름 큰 발전이었다.

그래서 앞으로는?🤔

1. 폴더 depth 신경 써서 CRA (깃헙에 올릴 때도 depth 한 번 더 안 들어가게 주의) - 참고
2. index.js 제외 CRA 기본 파일 삭제
3. 폴더 구조 구축
4. 필요한 package install

• npm i react-router-dom -save
• npm i styled-components, styled-components.macro, styled-reset -save
• npm i -D prettier eslint-plugin-prettier eslint-config-prettier -save

1. .eslintrc, .prettierrc, .gitignore( 참고 ) 파일 작성

기본적인 폴더 구조

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
src
│  config.js
│  constant.js
│  index.js
│  Routes.js
│
├─(assets)
│      (Images)
│      (Icons)
│
├─components
│
├─layout
│
├─pages
│
├─routes
│
├─styles
│      GlobalStyle.js
│      (theme.js)
│
└─utils

지금까지 사용해 온 elint, prettier 설정

1
2
3
4
5
6
// .eslintrc

{
    "extends": ["react-app", "plugin:prettier/recommended"],
    "rules": {     "prettier/prettier": ["error", { "endOfLine": "auto" }]   }
}

1
2
3
4
5
6
7
8
// .prettierrc

{
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true
}

*eslint와 prettier 설정은 팀원들과 의논 후 결정해도 좋다.

느낀 점👀

이렇게 첫 프로젝트부터 쭉 훑어보니 그래도 내가 천천히 앞으로 나아가고 있구나, 라는 생각이 새삼스럽게 든다.

그리고 확실히 좀 번거롭더라도 폴더 구조나 프로젝트 세팅할 때 잊으면 안 되는 것들 등을 정리해두니까 불안감이 덜해졌다. 앞으로는 내가 직접 팀원들을 대표(?)해서 프로젝트를 세팅해봐도 될 거 같다😎

앞으로 남은 약 한 달 동안 더 많이 배우고 발전하고 싶다💪🏻!