학습한 내용 및 문제를 해결했던 경험을 상기시키며 정리하는 용도로 만들게 된 블로그입니다.
Loadable을 사용하여 페이지에 필요한 스크립트만 동적으로 불러올 수 있도록Code-Spliting코드분할 작업을 하였습니다.- HMR 및 번들링 기능이 내장된
Razzle을 사용였습니다. - 컴포넌트 내에서 재사용가능한 코드를 커스텀 Hooks로 리펙토링 하였습니다.
- 전역상태를 관리하기 위해
Context API를 사용하였습니다. - 데이터 패칭을 위해
Apollo-Client및GraphQL을 사용하였습니다. Scss와Bootstrap를 활용하여 스타일시트를 작성하였습니다.AWS EC2에 프로젝트를 배포했습니다.
- 프로젝트 내려받기
$ git clone https://github.com/donghoon4907/frisklog.git
$ cd frisklog
- 패키지 설치
yarn을 사용하는 경우에만 패키지 잠금이 적용됩니다.
- Using yarn
$ yarn install
- 환경 변수 설정하기
.env 파일을 구성하여 환경 변수를 설정하세요. .env.example를 통해 예시를 확인할 수 있습니다.
- GraphQL 서버 설치 가이드
| 루트경로 | 디렉토리명 | 설명 |
|---|---|---|
/src |
/assets |
아이콘 컴포넌트 목록입니다. |
/components |
재사용 가능한 컴포넌트 목록입니다. | |
/context |
Context API 관련 모듈을 정의하였습니다. | |
/graphql |
GraphQL Query 및 Mutation 목록입니다. | |
/hooks |
커스텀 Hooks를 정의하였습니다. | |
/json |
정적 데이터 목록입니다. | |
/lib |
공통으로 사용되는 헬퍼 모듈 목록입니다. | |
/pages |
페이지 컴포넌트 목록입니다. | |
/sass |
스타일 시트 목록입니다. |