Skip to content

Latest commit

 

History

History
83 lines (70 loc) · 2.86 KB

README.md

File metadata and controls

83 lines (70 loc) · 2.86 KB
Raw

[리뉴얼] React로 NodeBird SNS 만들기

인프런 조현영님의 [리뉴얼] React로 NodeBird SNS 만들기 강좌를 보며 스터디한 프로젝트입니다.

🔨 설치

  1. Node : v16.7.0
  2. 패키지 생성 : npm init ➡️ 패키지명 설정(저는 react-node bird-front로 하였습니다.)
  3. Next.js(12버전) : npm i next@12
  4. package.json 수정
    • author 입력
    • scripts
      • test ➡️ "dev": "next"
  5. prop 타입 체크 설치(prop-types) : npm i prop-types
  6. 코드 컨벤션 서포트 라이브러리 설치 : -D를 붙이면 개발용으로만 쓰임
    • npm i eslint -D
    • npm i eslint-plugin-import -D
    • npm i eslint-plugin-react -D
    • npm i eslint-plugin-react-hooks -D
    • npm i -D babel-eslint
    • npm i -D eslint-config-airbnb
    • npm i -D eslint-plugin-import
    • npm i -D eslint-plugin-react-hooks
    • npm i -D eslint-plugin-jsx-a11y
    • eslint 설정은 아래를 참고
  7. 디자인을 위한 css 프레임워크 설치
    • npm i antd
    • npm i @ant-design/compatible (antd 4버전과 5버전 호환을 도와줌, ex)없어진 컴포넌트 지원 등...)
    • npm i @ant-design/icons
    • npm i styled-components
  8. 자동완성을 위한 라이브러리 설치
    • npm i @types/react
  9. redux 설치
    • npm i react-redux
    • npm i redux
    • npm i next-redux-wrapper@6 (redux 작성을 도와주는 라이브러리)
    • npm i redux-devtools-extension (브라우저 개발자도구와 연동을 도와주는 라이브러리)
    • npm i redux-saga (redux에서 비동기 호출을 위한 라이브러리)
    • npm i immer (redux의 불변성을 편하게 사용할 수 있게 도와주는 라이브러리)
  10. 이미지 캐러셀(이미지 슬라이더) : 유저가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위한 기법
  • npm i react-slick
  1. 비동기 라이브러리 설치 : npm i axios
  2. 랜덤 id를 만들어 주는 라이브러리(더미데이터 용) : npm i shortid
  3. 더미데이터를 만들어주는 라이브러리 : npm i @faker-js/faker
  4. 인스타 피드 처럼 데이터가 많은 경우 데이터 가상화 처리 : npm i react-virtualized
    • 화면에 보이는 데이터를 제외한 나머지 데이터들을 메모리에 가지고 있으므로써, 브라우저 메모리 오버플로우를 방지함

eslint 설정 (.eslintrc)

{
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "import",
    "react-hooks"
  ],
  "rules": {

  }
}