redux-saga folder structure

프로젝트를 구성할 때 가장 고민되는 폴더구조

특히 리덕스 사가는 명확한 Best Practice가 없어 더욱 결정하기가 힘들었다.

가장 일반적으로 redux를 사용할 때 잡는 폴더 구조는 다음과 같다

src

• actions
• components
• containers
• reducers
• store

여기서 store 폴더를 없애고 상단의 엔트리인 index.js에 집어넣을 수 도 있다.

redux-saga를 사용하기 위해 사가들이 들어갈 sagas
Sass가 들어갈 폴더 styles
이미지, 폰트가 들어가는 폴더 assets
서버와의 통신을 위한 api가 들어가는 폴더 api
constant와 lib가 들어가는 폴더 utils를 추가해 아래 이미지와 같이 세팅했다.

이 구조가 베스트는 아니겠지만, 현재의 정보에서는 최선이라 생각했고,
그대로 프로젝트를 진행하려 한다.

추가로 더 나은 방법이나 구조가 있으면, 댓글 부탁드립니다.

일일이 웹팩, 바벨을 손보는 시간을 아껴서 개발에 투자하기 위해 react CLI인 create-react-app을 사용해 프로젝트를 생성

현재 18년 11월 기준으로 create-react-app은 version 2로 업데이트 되면서
Webpack 4, Babel7 , PostCSS, Sass 등을 기본적으로 지원하게 되었고
v1과 비교했을 때 추가적인 기능을 사용하기 위해서 웹팩에 따로 세팅한 부분이 없었다.

create-react-app (프로젝트명) 으로 프로젝트를 생성하면 간단하게 최신버전으로 프로젝트가 만들어지고,
yarn start 명령어를 통해 3000포트로 리액트 앱을 띄울 수 있다.

현재 토이 프로젝트로 진행중인 쇼핑몰 프로젝트의 package.json은 다음과 같다.

{
  "name": "mall-front",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "cross-env": "^5.2.0",
    "i18next": "^11.9.1",
    "i18next-browser-languagedetector": "^2.2.3",
    "node-sass": "^4.9.3",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-i18next": "^8.0.8",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.0.4",
    "redux": "^4.0.0",
    "redux-saga": "^0.16.0"
  },
  "scripts": {
    "start": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    "test": "cross-env NODE_PATH=src react-scripts test",
    "precommit": "lint-staged",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "lint-staged": {
    "*.js": [
      "prettier --trailing-comma es5 --double-quote --write",
      "git add"
    ]
  },
  "devDependencies": {
    "husky": "^1.1.0",
    "lint-staged": "^7.3.0",
    "prettier": "^1.14.3",
    "redux-logger": "^3.0.6"
  }
}

패키지 각각에 대한 용도는 다음과 같다.

1. dependencies

• axios - 비동기 통신
• classnames - react의 className을 편하게 사용하기 위함
• cross-env - 프로젝트의 환경변수 및 경로 시작점을 정하기 위함 / src 폴더를 기준으로 절대경로를 작성해 import 시 상대경로 위치를 고민할 비용을 줄임
• i18next - 페이지 번역을 위한 라이브러리 ( 한/영 페이지 구성 )
• node-sass - Sass 사용
• react-router-dom - 리액트 라우터 v4
• redux, react-redux, redux-saga - 리덕스, 리덕스 사가
• redux-logger - redux 흐름 파악
• husky, lint-staged, prettier - 커밋이 되기 전 코드 스타일을 통일 시키기 위함

1. scripts

• src를 기준점으로 스크립트 시작, 빌드, 테스트를 실행 할 수 있도록 변경
• 프리커밋을 통해 lint-staged의 내용대로 코드 스타일 자동 변경
• eject - 안할예정..

1. lint-staged

• —trailing comma es5 - 객체나 함수, 배열 등의 마지막 인자 뒤에 콤마를 붙임
• —double-quote - 쌍따옴표 사용
• git add - 커밋 전에 lint-staged를 실행

나머지는 기본값을 그대로 유지

번역 라이브러리를 제외하고 위와 같은 세팅값을 가지기 위한 커맨드
yarn add axios classnames cross-env node-sass react-redux react-router-dom redux redux-saga
yarn add --dev husky lint-staged prettier redux-logged

이렇게 프로젝트는 세팅 완료.

React 설치

패키지 매니저 npm 또는 yarn을 통해 설치

yarn이 더 빨라서 yarn을 통한 설치방법을 알아보자.

yarn 설치

우선 npm이 설치되어 있다는 가정하에 순서를 적어보면,

npm install --global yarn, homebrew가 깔려있다면 brew install yarn을 통해 yarn 설치 ( 자세히는 모르지만 후자로 설치하는것이 이슈가 덜 발생하는것으로 알고잇음 )

yarn 업데이트 방법은 yarn self-update이다.

yarn init

터미널에서 프로젝트 파일로 들어간 뒤 yarn init으로 package.json 파일을 생성한다.

npm과 같이 이 파일은 프로젝트에 관한 정보를 담고있다.

그 다음으로 yarn add react 를 통해 프로젝트에 리액트를 추가할 수 있다.

이 때 yarn.lock 파일은 현재 프로젝트에 설치된 패키지의 일관성을 보장하기 위해 버전과, 종속성을 적어두는 역할을 한다.

패키지를 삭제할 땐 yarn remove (패키지명)

패키지를 업데이트할 땐 yarn upgrade (패키지명)를 사용

react 설치 라는 말이 어색한데 붙일말이 딱히없음.,

올해의 목표

티스토리 블로그에서 github 블로그로 마이그레이션

예전에 포스팅한 내용들을 다시 보면서 수정, 보완, 추가 예정이며 열심히 해야겠음

화팅!