react51 [React] redux 를 이용하여 게시판 만들기(1) - 떽떽대는 개발공부 2021/01/24 - [React] - [React] react-router-dom, redux 를 이용한 페이지 이동 - 떽떽대는 개발공부 [React] react-router-dom, redux 를 이용한 페이지 이동 - 떽떽대는 개발공부 오늘은 그동안 공부했던 것을 바탕으로 react-router-dom 과 redux 를 이용한 페이지 구현하는 부분을 포스팅 해보겠다. 원레는 게시판을 만들어보려고 했는데 오늘은 이 부분 구현하는 데 시간을 많 ddeck.tistory.com 오늘은 전 글에 이어 게시판을 만들어볼 것이다. 전 글에서 ui 는 거의 다 작성해 두었고, 오늘은 boardReducer를 만들고, 글을 등록해서 store 에 저장하면 store를 구독하고 있는 list 에서 게시글 목록을.. 2021. 1. 25. [React] react-router-dom, redux 를 이용한 페이지 이동 - 떽떽대는 개발공부 오늘은 그동안 공부했던 것을 바탕으로 react-router-dom 과 redux 를 이용한 페이지 구현하는 부분을 포스팅 해보겠다. 원레는 게시판을 만들어보려고 했는데 오늘은 이 부분 구현하는 데 시간을 많이 소요했다.ㅎ.ㅎ 위와 같이 Write 버튼 클릭 시 글 작성 페이지로 이동되며, footer 부분의 버튼 중 Write 버튼이 사라지게 되는 부분이다. 먼저 디렉토리는 아래와 같다. 먼저, redux 를 사용하기 위해 index.js 에서 store 를 생성하고, Provider 로 App.js 를 감싸준다. src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-.. 2021. 1. 24. [React] express 를 이용하여 서버사이드렌더링 - 떽떽대는 개발공부 오늘은 front-end(Client) 와 back-end(Server) 를 분리하여 편리하게 개발하기 위해 서버사이드렌더링을 해 보았다. 먼저 express 를 install 한다. npm install express --save 서버 사이드 렌더링의 경우 Cross-Origin Resource Sharing(CORS) 오류가 발생하는데, 이를 해결을 위해 cors 를 install 한다. npm install cors --save Client와 Server 사이의 중계기 역할인 프록시(Proxy) 사용을 위해 http-proxy-middleware'를 install 한다. npm install http-proxy-middleware --save 이제, 아래와 같이 server, routes 디렉토리를.. 2021. 1. 23. [React] redux 를 이용한 예제 - 떽떽대는 개발공부 2021/01/21 - [React] - [React] props 전달받기 예제 - 떽떽대는 개발공부 [React] props 전달받기 예제 - 떽떽대는 개발공부 react 를 공부하는데 있어 props 값이 기본이지만 이해하는데 어려움이 있었다. 이번엔 컴포넌트 3개를 이용하여 container, input, result 각각 작성하여 props 값 넘기기 예제를 작성해 보았다. 먼저, 아래 ddeck.tistory.com 이전 글에서 props 를 이용하여 예제를 만들어 보았다. 동일한 예제를 props 가 아닌 redux - store 를 사용하여 만들어 보았다. npm install redux react-redux 먼저, store 를 사용하기 위해 index.js 에 store 를 만들어 준다... 2021. 1. 22. 이전 1 ··· 6 7 8 9 10 11 12 13 다음
