깃허브 Repo

노션 링크

json-server 와 CRA 앱이 실행될 두 개의 포트가 필요합니다. 각각 5000번, 3000번 포트로 실행됩니다.

npm run dev 로 json-server 와 CRA 앱을 실행합니다. 실행에 실패한다면 포트를 확인해주세요.

styled-components
- css in javascript 를 통한 조건부, 컴포넌트 단위의 스타일링을 위해 사용했습니다.
redux
- 카드와 모달 등을 관리하기 위해 redux 를 사용했습니다.
- contextAPI 를 사용해도 되지만, redux-tool 을 이용해 브라우저 상에서 상태를 확인하는 경험을 해보고 싶어서 redux 를 사용했습니다.
craco
- import 를 상대적인 경로로 할 경우 너무 길어지는 문제가 있었습니다.
- CRA 로 만든 react 어플리케이션은 웹팩 설정이 너무 어려우므로 craca 의 힘을 빌려서 작성했습니다.
react-router-dom
- 라우팅 관리를 위해 설치
- 사용법은 공식홈페이지 를 참고했습니다.
json-server
- 간단한 mock 서버를 위해 설치했습니다.
- 사용법은 공식홈페이지 를 참고했습니다.

이전까지의 코드를 보면 폴더의 구조, 파일의 이름등이 명확히 드러나지 않는 경우가 많았습니다. 특히 폴더의 구조는 그날따라 달라졌던거 같습니다. (물론 CRA 를 사용하면 어느정도의 구조는 잡혀지지만, 이렇게 만들어지는 파일 그 이상을 작성할 때 문제가 있었다.)