React + Unstated-next로 간단한 플젝 만드기  🚀

​

React 프로젝트 초기 설정   🛠

​
create-react-app 사용
​

​

  • 두 번째 시도
    ​
    1
    npx create-react-app login-poc --template typescript

​

  • 1
    2
    3
    4
    5
    npx create-react-app my-app --template typescript

    # or

    yarn create react-app my-app --template typescript
  • ❗ 예전에는 --typescript를 붙이면 됐는데 --template 형식으로 바꼈나보다!

​

eslint 설정   🛠

​

  • eslint 설치

    • @typescript-eslint/parser 설치 : eslint가 typescript를 lint 할 수 있도록 해줌

    • @typescript-eslint/eslint-plugin : typescript에 구체화된 eslint rule을 포함한 플러그인 설치
      ​

      1
      yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

    • devDependencies에 추가하고 싶으면 뒤에 --dev or yarn add -D
      ​



⁉️   이슈

​

tsconfig 의 jsx 부분에서 이슈가 있었는데
​

Specify JSX code generation: 'preserve', 'react', 'react-jsx', 'react-jsxdev' or'react-native'. Requires TypeScript version 2.2 or later.

VScode의 이슈였당.. ​

​

Prettier 설정   🛠

​

​

환경 변수 설정   🛠

​

​

Unstated-next 설치   🛠

​

​

Apollo/client 설치   🛠

​

  • ApolloClient를 생성하려면 uri가 필요한데, 고정적인 값이 아닌 환경에 따라 다른 값이 들어가야함
  • cra에서 환경변수를 설정하는 방법
    • Adding Custom Environment Variables 참고

Axios 설치   🛠

​

  • apollo/client를 위해 설정한 환경변수가 root에 .env.development 이런 식으로 되어있는데, axios의 base url은 apollo거랑은 다름

    • .env.development에 이렇게 환경변수 이름을 다르게 줌
      ​
      1
      2
      REACT_APP_APOLLO_BASE_URL='https://url주소'
      REACT_APP_AXIOS_BASE_URL='https://url 주소'

​

  • 유연한 axios 인스턴스 만들기

Router 설정   🛠

​

  • create-react-app에는 routing을 위한 로직이 없기 때문에 react router를 따로 설치해줘야 함

  • routing : 다른 주소에 따라 다른 뷰를 보여주는 것
    ​

  • 참고 : https://jeonghwan-kim.github.io/dev/2019/07/08/react-router-ts.html
    ​

  • yarn add react-router-dom
    ​

  • yarn add -D @types/react-router-dom : react-router-dom의 type 정의 라이브러리
    ​

    • <BrowserRouter /> : HTML5 히스토리 API를 사용하여 주소를 관리하는 라우터
    • <Switch />: 하위에 중 하나를 선택
    • <Route /> : 요청 경로와 렌더링할 컴포넌트를 설정
    • <Redirect /> : 요청 경로를 다른 경로롤 리다이렉션
      ​

  • page > index.ts 에서 Home 컴포넌트 lazy 로딩
    ​

    • lazy loading 왜?
      ​

      • React의 lazy는 코드분할 을 하도록 해주는데, 코드 분할을 하면 사용자가 필요로 하지 않는 코드를 불러오지 않게 해주어서 앱의 초기 로딩에 필요한 비용을 줄여준다.
        ​

    • 참고
      ​

      • https://ko.reactjs.org/docs/code-splitting.html
        ​

      • React.lazy + Suspense
        ​

        • React.lazy
          ​

          • 컴포넌트를 렌더링하는 시점에서 비동기적으로 로딩할 수 있게 해주는 util 함수
          • 동적 import를 사용해서 컴포넌트를 렌더링
          • React 컴포넌트를 포함하며 default export를 가진 모듈로 결정되는 Promise로 반환
          • lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 함.
            ​

        • Suspense
          ​

          • 리액트 내장 컴포넌트
            ​

          • 코드 분할 된 컴포넌트(lazy 컴포넌트)를 로딩하도록 해주고 로딩이 끝나지 않았을 때 보여줄 UI(예비 컨텐츠)를 설정할 수 있음
            ​

          • 1
            <Suspense fallback={<div>loading...</div>}

          • fallback props를 통해 로딩 중에 보여 줄 JSX를 지정할 수 있음

​

⁉️   이슈

  • App.tsx 에서 만들어주고 routes를 map으로 돌리는 과정에서 key 값을 uuid 라는 라이브러리를 사용해서 유니크한 값을 사용하려고 했는데 에러 발생
    ​

    ‘uuid’ should be listed in the project’s dependencies. Run ‘npm i -S uuid’ to add it import/no-extraneous-dependencies
    ​

    • @types/uuid 만 설치해주면 되는 줄 알았는데 uuid 도 설치했어야했다.
    • @types는 자바스크립트 라이브러리를 타입스크립트 추론이 가능하도록 도와주는 보조 라이브러리
      ​

Unstated-Next 구조 잡기   🛠

​

​

Node-sass 설치   🛠

​

⁉️   이슈

​

etc   📝

  • Promise.allSettled는 뭐지?