React Next 기본 틀

git clone https://github.com/hyejjun/Next_Redux_Setting.git

# Next 사용하기

 

npm init        // node js 개발환경 만들기

npm i react react-dom next

 

pages 폴더 만들기

index.jst 파일 생성 해서 테스트 해보기

 

실행하려다 보니 npm run dev 명령어가 없어서 

package.json 에 작성해줌

 

"scripts": {

    "dev" : "next dev",

    "build" : "next build",

    "start" : "next start"

  },

 

pages 폴더 안에 _app.jsx 만들어줌

 

그 전과 다르게 pageProps 내용을 삽입함

 

styleComponent 때문에 _document.jsx 파일과 babel 설정해주기

 

[_document.jsx]

npm i styled-components

이건 거의 복붙...? 외울 필요는 없음

내용이해 노노

코드 복붙 - styled component 할 때 서버사이드 렌더링 안되서 css를 서버 사이드 랜더링을 처리하려고함

 

[.babelrc]

서버사이드 렌더링 css 처리하려고 추가적으로 바벨 설정함

추가적으로 babel 내용을 넣을게 있어서..

어떤 내용? styeld Component 내용만 넣을거임

json 형태 

{

    "presets":["next/babel"],

    "plugins":[["babel-plugin-styled-components",{"ssr":true, "displayName":true}]]

}

# 디렉토리

폴더 세분화

 

> Components -  button, input 작은 요소 단위

> Layouts   - header, footer, navi 같은 컴포넌트

> Providers - Store 내용을 Theme 

> reducers - actions 내용과 reducer 내용을 넣는 곳

> saga    -  redux middleware 인 saga 내용을 넣는 곳

> pages   -  페이지의 화면 쪽. 대표화면에 대한 컴포넌트

> utils - 커스텀 훅이라던가 데이터 정리할 수 있는 코드들

----------------

## Providers

> rootprovider.js 거쳐가는 녀석 - 감싸주는 녀석

: 페이지 컴포넌트에서 감싸줄 녀석 (데이터 적인걸 처리)

 

## Layouts

> ThemeLayout.jsx 여기도 children 처리

: 페이지 컴포넌트를 감싸줄건데 UI 적인 녀석

 

# Redux 세팅

npm i redux react-redux next-redux-wrapper redux-saga

 

npm install redux-devtools-extension    // 크롬에서 사용하기 위해서

npm install axios       // saga에서

# Redux 세팅할 때 제일 먼저 할것? - Store 만들기

 

> Providers => createCtx.js

 

applyMiddleware   conpose   얘네 둘은 세트라고 생각

 

이거를 만들었으니 사용방법은

 

> _app.jsx 에다가 사용한다.

import wrapper from "../Providers/createCtx"

 

reducer 와 saga 폴더에 index.js 를 각각 만들어준다.

왜냐면 createCtx.js 에서 index import 했기 때문

> saga / index.js

all fork 사용함

 

all은 함수안에 배열 갖고올 saga들을 넣어주면 된다

fork 는 실행시킨다.- postSaga라는걸 가져온다. 없지만 일단 import 해줌

 

index.js 의 역할 다른 미들웨어들을 묶어주는 역할

> saga / postSaga.js 생성하고

Saga 만든다.

 

takeLatest 어떤 엑션값일때 실행될꺼냐?

여러번을 클릭했을때 웹서버가 가장 마지막것만 받아서 실행하는

getPost()

call 은 비동기로 작업할때 함수 하나만 실행시키는건 fork 와 같음

 

let BaseURL = process.env.NODE_ENV.backurl || 'http://localhost:3001'

 

backurl 임시

https://jsonplaceholder.typicode.com/posts/

put 은 dispatch랑 같은애라고 보면됨

 

> reducers/index.js 

이렇게 쓴다고 그냥 받아들이고 알면되고

코드를 어떻게 사용하는지 알기만 하면됨

reducer 를 묶어주는 역할

 

> post.js

post 관련된 actions 내용을 넣고

action.type 에 따른 state 를 바꾸는 작업을 함

이렇게 만든 코드는... 항상 재사용..!

깃헙에서