리액트에서 상태를 더 효울적으로 관리하는데 사용하는 상태 라이브러리.

왜 하필 Redux인가?

컴포넌트끼리 직접 소통하는 방법도 있지만, 코드가 굉장히 많이 꼬여버리기 때문에 권장하지 않는 방식.

App 컴포넌트는 구조상 부모 컴포넌트에서 모든걸 관리하고 내려주는 것이기 때문에 직관적이고, 관리하기 편하지만, 앱의 규모가 커지면 보여지는 컴포넌트 개수도 늘어나고, 데이터도 늘어나고, 유지보수가 힘들어진다.

예시) props를 차례대로 아래쪽으로 흘려 보냄. 내려가는 과정: A->E->G

그럼 Redux는?

리덕스에는 알아야 하는 개념 5가지가 있습니다.

1. Store
2. Subscribe
3. Dispatch & Action
4. Reducer
5. Listener

ㆍStore

ㆍ어플리케이션의 상태 값들을 내장하고 있다. (중앙에서 변수 관리 개념이라고 생각하면 편하다.) ㆍ리듀스에 의해서만 state의 값이 변경된다.

ㆍSubscribe

ㆍ스토어 값이 필요한 컴포넌트는 스토어를 구독함. ㆍ리액트 컴포넌트에서 리덕스 스토어를 구독하는 작업은 후에 react-redux의 connect 함수가 대신 한다. ㆍ리덕스의 내장 함수를 사용해 subscribe, unsubscribe 함수를 사용가능.

Dispatch & Action

ㆍDispatch는 액션을 스토어에 전달하는 것을 의미.

Action:

ㆍ상태 변화를 일으킬 때 참조하는 객체이다.

함수는

const mapActionToProps=(dispatch)=>{}

를 사용한다.

ㆍAction이라는 단어는 Event와 같다고 생각하면 된다. ㆍDispatch 인수에서 Reduce로 넘길 객체(Type)를 정의한다. ㆍAction이 실행되고 끝나면 type을 반환하는데 이는 Reduce로 간다.

Reducer

ㆍStore(스토어)의 문지기라고도 불리는 존재 ㆍ액션 객체를 받으면 타입에 따라 어떻게 상태를 업데이트 해야 할 지 정의를 해줌.

ㆍ리듀서 함수는 state(현재 상태) 와 action(액션 객체) 두가지의 파라미터를 받는다. ex)

export function reducer(state = {state : 10, age:100}, action)

ㆍReducer 함수를 생성 할 때 살찐 에로우를 사용하지 않는다. ㆍReducer 함수는 순수 함수여야 한다. 결과 값을 출력 할 때는 파라미터 값에만 의존해야 하며, 언제나 같은 결과를 출력해야 함 ㆍReducer에서 state를 사용하면 반드시 초기화 해야 함 ㆍReducer에서 state의 변화가 일어남 ㆍ값의 갱신은 반드시 reducer에서

Listener

ㆍ상태에 변화가 생기면, 구독한 컴포넌트에게 새로운 상태를 받게 해주는 함수

정리

리덕스를 이용하면 스토어를 사용해 상태를 컴포넌트 구조의 바깥에 두고, 스토어를 중간자로 두고 상태를 업데이트 하거나 새로운 상태를 받을 수 있다.

즉, 여러 컴포넌트를 거치지 않고 깊숙한 컴포넌트에 있다 하더라도 직속 부모에서 받아오는것처럼 편리하게 관리가 가능하다.

참고

ㆍ https://velog.io/@mokyoungg/Redux-Redux%EC%9D%98-%EA%B8%B0%EC%B4%88-%ED%9D%90%EB%A6%84 ㆍ https://hwan1001.tistory.com/38 ㆍ https://k39335.tistory.com/76 ㆍ https://velopert.com/3528

Next.js에서는 Node.js Serverless function으로 api endpoint를 쉽게 만들 수 있다. /pages/api 디렉토리에 함수 하나만 만들면 된다.

옵션에 따라 Serverless 가능

page/api/user.js 는 상태코드 200과 함께 json 형식의 응답을 한다.

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

확인해보자.

다른 HTTP method(POST, GET, DELETE 등)를 처리하기 위해 'req.method'를 사용할 수 있다.

예시)

export default function handler (req, res) => {
     if (req.method === 'POST') {
    // POST request 처리
  } else {
    // 다른 HTTP method 처리
  }
}

ㆍreq : 요청 데이터 ㆍres : 응답 데이터

Dynamic API Routes

API Routes도 dynamic routes를 제공해준다.

예를 들어, pages/api/post/[pid].js 파일이 다음과 같다고 하자.

export default function handler(req, res) {
  const { pid } = req.query
  res.end(`Post: ${pid}`)
}

/api/post/abc를 호출하면 'Post: abc'가 나타날 것이다. 동적 경로 라우팅과 같다.

RESTful API 만들기

RESTful api 패턴은 대표적으로 아래와 같다.

RESTful api가 무엇인지는 여기 를 참고하자.

ㆍGET api/posts -블로그 글들의 리스트를 불러온다. ㆍGET api/posts/12345 - 글 아이디(예시)가 12345인 글의 api 결과를 불러온다.

두가지 방법으로 구현할 수 있는데,

-Option 1: /api/posts.js /api/posts/[postId].js

-Option 2: /api/posts/index.js /api/posts/[postId].js

두 개는 동일하다. 두 방법 모두 리스트가 반환될 지, 글 한 개가 반환될 지 코드를 구분해서 사용할 수 있기 때문에 추후에 Serverless 형태로 가기 좋은 구조이다. 실제로 서버 구현할 때 많이 사용되는 방법이다.

/api/posts/[postId].js 만 사용하는 세번 째 옵션은 유효하지 않다. Dynamic Routes(Catch-all routes를 포함하는)가 'undefined' 상태를 가지지 않기 때문에! 그래서 /api/posts 는 /api/posts/[postId].js 와 매치되지 않을 것이다.

Catch all API routes

하위 경로를 전부 포함하기

위에서 api/post/12345 가 url 하나에만 매칭되었다면, api/post/12345/a, api/post/12345/a/b 와 같이 여러 depth에 걸친 url을 함께 다루기도 가능하다.

방법은 파일명의 대괄호 안에 점 3개(...)를 추가하여 모든 경로가 잡히도록 확장시키는 것!

예시)

pages/api/post/[...slug].js 는 /api/post/a 와 매치된다. 또한, /api/post/a/b 와 /api/post/a/b/c 등에도 전부 매칭이 이루어진다.

만약 api/post/a url이 매칭되면 req객체의 query는 다음과 같다.

{ "slug": ["a"] }

url이 api/post/a/b/c인 경우,

{ "slug": ["a","b","c"] }

예시)

export default function handler(req, res) {
  const { slug } = req.query
  res.end(`Post: ${slug.join(', ')}`)
}

리턴 값은 "Post: a,b,c"가 된다.

상위경로 포함하기

추천하는 방법은 아니지만, api/post와 api/post/a 두 개의 경로를 한 번에 다룰수 있기는 하다. 방법은 파일명에 대괄호 두 번 사용하기!

pages/api/post/[[...slug]]

query 값은 아래와 같이 나올 것이다.

{} // api/post { "slug": ["a"] } // api/post/a { "slug" : ["a","b"] } //api/post/a/b

우선순위

사전 정의된 api 라우트 > 동적 api 라우트 > catch all api 라우트

API Middlewares

req를 해석하는 built-in된 미들웨어

ㆍreq.cookies : 요청에 쿠키가 보내졌는지 담는 객체. 기본 {} ㆍreq.query : 쿼리스트링을 포함하는 객체. 기본 {} ㆍreq.body : content-Type 별로 해석된 body를 담는 객체, body에 아무것도 없으면 null

모든 api 경로는 config 객체를 사용하여 기본 설정을 변경할 수 있다.

export const config = {
  api: {
    bodyParser: {
      sizeLimit: '1mb',
    },
  },
}

sizeLimit은 해석된 body에 담길 최대 크기이다. (byte 단위)

bodyParser는 body parsing을 활성화, Stream으로 처리하고 싶으면 비활성화

export const config = {
  api: {
    bodyParser: false,
  },
}

아래의 externalResolver 속성은 경로가 외부 확인자(express or connect)에 의해 처리되고 있음을 서버에 알리는 플래그이다. 해당 옵션을 사용하면 확인되지 않은 요청에 대한 경고가 비활성화 된다.

export const config = {
  api: {
    externalResolver: true,
  },
}

Connect/Express middleware

적합한 middleware를 connect 연결할 수 있다. 예로, api endpoint를 위해서 CORS 설정이 필요한 경우에 cors 패키지를 활용하여 수행할 수 있다.

cors란? Cross-Origin Resource Sharing(CORS)은 추가적인 HTTP header를 사용해서 애플리케이션이 다른 origin의 리소스에 접근할 수 있도록 하는 메커니즘을 말한다. 하지만 다른 origin에서 내 리소스에 함부로 접근하지 못하게 하기 위해 사용된다.

cors를 설치하자.

npm i cors or yarn add cors

그 후, cors를 api route에 더해주면 된다.

import Cors from 'cors'

// Initializing the cors middleware
const cors = Cors({
  methods: ['GET', 'HEAD'],
})

// Helper method to wait for a middleware to execute before continuing
// And to throw an error when an error happens in a middleware
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

async function handler(req, res) {
  // Run the middleware
  await runMiddleware(req, res, cors)

  // Rest of the API logic
  res.json({ message: 'Hello Everyone!' })
}

export default handler

Response Helper

api route의 response는 개발자 환경을 개선시키고, 새로운 api endpoint를 만드는 속도를 높이기 위해, Express.js와 유사한 method set을 포함한다.

ㆍres.status(code) : 상태 코드를 설정하는 함수이다. 코드는 유효한 HTTP 상태 코드여야 한다. (보통 200이 성공) ㆍres.json(body) : json 응답을 보낸다. body는 직렬화가능한 객체여야한다. ㆍres.send(body) : HTTP 응답을 전송한다. body는 문자열, 객체, 또는 버퍼일 수 있다. ㆍres.redirect([status,] path) : 지정된 경로, url로 리디렉션된다. status는 유효한 HTTP 상태 코드여야 한다. 지정하지 않을 시, 상태 코드는 307(임시 리디렉션)으로 기본 설정된다.

참고 책은 p.135부터 참고하면 될듯하다. (typescript기반이지만 비슷할듯하다.)

Next.js에서는 두 가지 형태의 사전 렌더링이 존재

1. 정적 생성: 빌드 시에 페이지를 HTML로 만들어 요청시 제공한다.
2. 서버 사이드 렌더링: 페이지 요청 시, 서버 사이드 렌더링을 통하여 HTML을 제공한다.

외부 데이터를 필요로 하지 않는다면, Next.js는 빌드 시에 페이지를 렌더링하여 요청시마다 제공한다.(정적 생성)

외부 데이터를 필요로 한다면, 서버 사이드 렌더링을 통하여 외부 데이터를 이용하여 렌더링을 한 후 HTML을 제공한다.

getServerSideProps

Next.js는 getServerSideProps라는 페이지의 데이터를 서버로부터 제공받는 기본 API를 가지고 있음.

서버에서 데이터를 Fetch하여 초기 데이터를 전달하도록 구성

서버 측에서 props를 받아오는 기능을 하게됨.

페이지를 요청할 때마다 미리 실행되어서 Page 컴포넌트의 props로 넘겨주게 됨.

export default function Home({user}) { // 미리 실행된 getServerSideProps() 함수의 결과 값을 props로 넘겨받음.
    const username = user && user.name;
    return (
        <div>
            {username}
        </div>
    )
}

// 미리 실행됨 
export const getServerSideProps = async () =>{
    try {
        const res = await fetch('https://api.github.com/users/raccoonback')
        if(res.status === 200) {
            const user = await res.json()
            return { // 결과를 Home 컴포넌트의 props로 넘겨줌 
                props: {user} 
            }
        }
    } catch (e) {
        console.error(e)
        return { // 결과를 Home 컴포넌트의 props로 넘겨줌 
            props: {}
        }
    }
}

getServerSideProps 에서 반환한 props 값들은 페이지의 props로 전달되게 된다.

getStaticProps

getStaticProps는 getServerSideProps와 다르게 빌드 시에 데이터를 불러와 결과를 json으로 저장하여 사용하게 됨. 즉, 일관된 데이터를 보여주게 됨.

사전 렌더링된 html에 날짜 데이터가 들어가 있는 것을 확인할 수 있다.

뿐만 아니라, next build && next start 명령어를 통해 빌드하여 실행하게 되면 새로고침 이후에도 데이터가 갱신되지 않는 것을 확인할 수 있다.

9.5 버전부터는 revalidate: 시간(초) option을 주면 주어진 시간(초)마다 갱신되도록 설정할 수 있다.

getStaticPaths

getStaticPaths 이용하여 미리 paths를 지정할 수 있다. 즉, 해당 경로가 외부 데이터에 의존할 때 사용한다.

SSR & CSR

정적 페이지 라우팅

next/Link

• 페이지 전체를 새로 불러오지 않고 주소 이동시켜주는 컴포넌트
• History API 이용하여 뒤로 가기 등을 할 때 이전에 렌더링된 페이지를 가져오게 됨

// seo, 웹 접근성에 유리 
// history api로 주소 이동 
<Link href={'/test'}>
        <a>move<a/>
</Link>

// 주소 이동은 하지만, seo/웹 접근성이 불리 
<Link href={'/test'}>
        <p>move<p/>
</Link>

// 컴포넌트 전체에 라우팅 기능을 추가하고 싶다면, <Child/> 컴포넌트를 <a> 태그로 감싸주어야 함
const Child = () => {
    return <p>Move to '/tomato'</p>
}

<Link href={"/"}>
    <a>
    <Child/>
    </a>
</Link>

동적 페이지 라우팅

• [].jsx 같이 대괄호로 감싼 이름으로 파일을 만들면 이는 동적 페이지임을 의미

• 파일 이름에서 대괄호 안에 있는 값은 라우터 객체(router)의 query 속성으로 들어가게 됨

• router 객체 값은 useRouter() hooks 로 확인 가능

    import {useRouter} from "next/router";
  
    const router = useRouter()
    console.log(router.query)

Router 객체 사용하여 라우팅하기

• 함수 내에서 라우팅해야 하는 경우에는 router 객체에서 사용하는 메서드를 이용해서 정적 주소 이동 or 동적 주소 이동 이 가능하다.

Appendix

• History API
• react-router-dom

Next는 암시적으로 import React from "react"를 적용해줌

Eslint: 정적 분석 도구

미리 에러를 방지하고, 코드 스타일을 규정할 수 있음

• ref: https://github.com/airbnb/javascript/tree/master/react

Prettier: 코드 스타일을 정해진 규칙대로 변환해주는 코드 포맷터

Prettier를 사용해서 세미콜론을 자동으로 붙여주거나 따옴표 사용을 쌍따옴표로 자동 변환할 수 있음

• jetbrain 학생 인증
• git 설치(블로그)

IDE 환경 구성

• webstorm 설치

• node 설치(windows installer)

  • 설치 후 버전 확인
    • node -v
    • npm - v

• yarn 설치

  npm install --global yarn