React로 nodebirdSNS 만들기 (인프런)
-
#3-5 redux devtools 사용하기React로 nodebirdSNS 만들기 (인프런)/#3 리덕스 익히기 2020. 1. 8. 13:44
- 구글 크롬에서 redux를 설치 - 코드를 몇개 추가해줘야 리덕스 데브툴즈를 제대로 사용할 수 있다. // 기존 컴포넌트의 기능을 확장해준다. // NodeBird= ({store})에서 store를 props로 넣어준다 export default withRedux((initialState, options) => { const middlewares = []; // 이부분만 바뀜 const enhancer = compose( applyMiddleware(...middlewares), !options.isServer && typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== "undefined" ? window.__REDUX_DEVTOOLS_EXTENSION__() : f ..
-
#3-4 redux와 react 연결하기React로 nodebirdSNS 만들기 (인프런)/#3 리덕스 익히기 2020. 1. 8. 13:23
- _app.js 에 리덕스와 리액트를 넣어주면 모든 컴포넌트들이 공유 가능하다. - 사이에껴주면 됨 - import { Provider } from "react-redux"; // 리덕스 state를 제공해줌 - npm i next-redux-wrapper - 리액트에 리덕스를 붙이는거와, next에 리덕스를 붙이는거는 다름, next에는 npm i next-redux-wrapper 해줘야함 - const NodeBird에 store를 구현할 코드가 없는데 그 부분을 npm i next-redux-wrapper가 해줌 - withRedux 사용방법은 그냥 외우면되는데, 모든 프로젝트에서 똑같이 쓰이기때문임 - 마지막 코드부분에 return store를 해줘서 cost NodeBird= ({store})..
-
#3-4 불변성과 리듀서 여러개 합치기React로 nodebirdSNS 만들기 (인프런)/#3 리덕스 익히기 2020. 1. 8. 13:01
...state를 쓴 이유는 불변성 때문이다. state는 어떠한 이유에서든 절대 변해서는 안된다. 리액트에선 setState를 사용했음 - front폴더->reducers폴더->index.js - user.js, post.js파일에있는 reducers들을 하나로 합친것 (중앙통제시스템) import { combineReducers } from "redux"; import user from "./user"; import post from "./post"; const rootReducer = combineReducers({ user, post }); export default rootReducer; - user.js // store (state) export const initialState = { isL..
-
-
#3-1 Redux 주요 개념 소개React로 nodebirdSNS 만들기 (인프런)/#3 리덕스 익히기 2020. 1. 7. 18:37
- 리덕스와 리덕스사가를 통해 state를 관리할 것임 - 리덕스란? - 하나의 큰 통제실을 두고, 여러 컴포넌트들에게 state를 배분하는것 - Redux(state) -> React의 state는 쓰지 않아도 됨 *(But, 리덕스의 state를 관리하기가 번거로워서 간단한 작업엔 React의 state를 사용하고, 복잡한 작업일 경우 리덕스의 state를 사용한다.) - 리덕스는 안전성과 state 통제에 용이 하다. 리덕스 간단 개념 설명서 - Action -> state를 바꾸는 행동,리액트는 setState로 state를 변경했음 ex)로그인 액션 - Dispatch -> Action을 실행 ex)로그인 액션 dispatch ( 액션을 디스페치 해야만 함, 한 몸이라고 생각) - Reducer..
-
#2-7 컴포넌트 분리하기React로 nodebirdSNS 만들기 (인프런)/#2 SNS 화면 만들기 2020. 1. 7. 18:16
- 반복문 조건문 form 등이 쓰인 코드들을 컴포넌트로 많이 분리함 - index.js import React from "react"; import PostForm from "../components/PostForm"; import PostCard from "../components/PostCard"; // index.js는 타임라인 역할 const dummy = { isLoggedIn: true, imagePaths: [], mainPosts: [ { User: { id: 1, nickname: "정중식" }, content: "첫 번째 게시글", img: "https://img.hankyung.com/photo/201807/03.17342954.1.jpg" } ] }; const Home = () ..
-
#2-5 메인 화면 만들기React로 nodebirdSNS 만들기 (인프런)/#2 SNS 화면 만들기 2020. 1. 7. 16:18
- index.js import React from "react"; import { Form, Input, Button, Card, Avatar, Icon } from "antd"; // index.js는 타임라인 역할 const dummy = { isLoggedIn: true, imagePaths: [], mainPosts: [ { User: { id: 1, nickname: "정중식" }, content: "첫 번째 게시글", img: "https://img.hankyung.com/photo/201807/03.17342954.1.jpg" } ] }; const Home = () => { return ( {dummy.isLoggedIn && ( 이미지 업로드 짹짹 {dummy.imagePaths.map..