project (5) 썸네일형 리스트형 [React] 인스타 클론코딩 기록 (4-1) - css 서버사이드렌더링 front에 npm i babel-plugin-styled-components 설치 해주고요 파일 .babelrc 생성 { "presets": ["next/babel"], "plugins": [ ["babel-plugin-styled-components", { "ssr": true, "displayName": true }] ] } 확인 next/babel은 이미 깔려있다는 가정 모든 페이지의 공통요소인 _app.js 에 먹이고 싶은데 어떻게? 그 상위의 요소인 _document.js를 pages 디렉토리 안에 생성 import React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import {.. [React] 인스타 클론코딩 기록 (4) - 서버사이드렌더링과 쿠키설정 앞서 next가 서버사이드렌더링을 편하게 해주기 때문에 설치해 사용했습니다. 클라이언트사이드렌더링은 브라우저 -> 프론트서버 -> (!) 브라우저 -> 프론트서버 (!) -> 백서버 -> 프론트서버 -> 브라우저 순서로 데이터를 요청하고 받아오게 되면서 (!) 사이의 단계일 때, 모양은 있지만 데이터가 없는 화면이 보여지게 됩니다. 서버사이드렌더링은 웹페이지를 리프레쉬 하면 브라우저에서 백엔드 서버로 요청을 보내 데이터를 받아오게 됩니다. 브라우저 -> 프론트서버 -> 백서버 -> 프론트서버 -> 브라우저 요청 한번으로 초기 로딩속도가 좀 빨라지는 듯한 느낌을 줍니다. pages 의 index 페이지의 서버사이드렌더링을 위해 초기에 로딩되어야 하는 액션을 파악하고, const Home = () => { .. [React] 인스타 클론코딩 기록 (3) - redux-saga, REST API 미들웨어는 redux가 비동기 액션을 dispatch 할 수 있도록 합니다. 이전 글의 코드 부분에 middlewares가 있었는데 이 부분이 비동기를 디스패치를 해주는 역할을 합니다. const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.log(action); return next(action); }; 여기서 미들웨어는 dispatch가 실행될 때 마다 동작하고 action은 dispatch가 일어날 때의 action입니다. next는 다음 미들웨어를 호출하는 역할을 합니다. 다음 미들웨어가 없으면 dispatch 됩니다. 위의 loggerMiddleware 는 액션을 실행할 때 마다 콘솔이 찍히도록 되어.. [React] 인스타 클론코딩 기록 (2) - redux 여러 페이지, 컴포넌트의 공통적인 데이터(ex 로그인 정보)를 부모에 저장하고, 자식에 잘 전달해주는 과정이 필요합니다. 이 과정을 관리, 전달 해주는 기능으로는 contextAPI(React), Redux, MobX 등이 있습니다. 몹엑스의 인기가 많아지고 있지만 저는 초보니 많이 쓰이는 리덕스를 사용하려고 합니다. 리액트는 객체나 배열로 전달된 데이터를 업데이트할 때, 불변성을 지키며 업데이트 해줘야 합니다. (...state, { } 이런 느낌으로...) 이 과정이 참 번거롭고 해서 이후에는 immer 를 사용해 불변성을 신경쓰지 않을 방법으로 업데이트 예정입니다. 설치 갑니다. react-redux, redux, next-redux-wrapper 다 설치해 줍니다. npm i react-redux.. [React] 인스타 클론코딩 기록(1) React와 next.js를 활용해 인스타그램 클론(??)을 시작해 보겠습니다! 저는 react-create-app을 사용하지 않고 필요한, 사용할 것들을 확인하며 해보려 합니다. 오늘은 개발환경 설정 기록이 많을 것 같습니다. 노드 잘 설치 됐는지 확인 해보고 프로젝트 디렉토리에 npm init 으로 시작을 합니다. 시작~ npm init react, react-dom, next 9버전 설치합니다. npm i react react-dom npm i next@9 next는 자동으로 pages 디렉토리 안의 파일들을 개별적인 페이지로 인식하고, 코드 스플리팅 된 페이지로 만들어줍니다. 그 안의 index.js 가 index 페이지가 되는 원리입니다. 또 좋은 점이 import React from 'reac.. 이전 1 다음
