프로젝트 폴더 구조

https://velog.io/@raverana96/react-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%9D%98-%ED%8F%B4%EB%8D%94%EA%B5%AC%EC%A1%B0

[react] 리액트 프로젝트의 폴더구조

 

assets

나머지 폴더들도 간략하게 확인해보겠다. assets 안에는 우리가 프로젝트에 쓸 font, image 등이 담겨 있다. 처음에는 assets와 public 폴더를 많이 헷갈렸었는데, 우리 프로젝트의 시작 지점인 app.js를 기준으로 생각해보면 이해하기 쉽다. assets은 자기 디렉토리 안쪽, public은 바깥쪽에 있다. 프로젝트 내에서 public 폴더에 접근하기 위해서는 process.env.PUBLIC_URL을 사용해야 한다. 참고

 

 

 

hooks

나를 포함한 팀원들이 만든 custom hook들을 담아 놓은 폴더이다. 다만 모든 hook들이 들어있지는 않은데, react-query를 사용한 hook들은 따로 분리해서 모아두었다.

utils

유틸 함수들을 모아둔 폴더이다. 예를 들어, 랭크 점수 계산, email regex check, 등의 잡다한(?) 함수들을 모아두었다.