기억 설명서

현재 useEffect를 통해 매번 페이지가 렌더링 될 때마다 로그인 된 user의 정보를 불러왔는데 이 방식은 아직 CSR(Client Side Rendering) 방식이다. CSR의 대해 간단하게 말해 보자면 CSR은 SPA로, Client 사이드에서 HTML을 먼저 받아와 JS가 동작하면서 데이터만을 주고 받으며 Client에서 렌더링을 해준다. CSR 동작과정: HTML 다운로드 > JS 다운로드 > JS 실행 > DATA 서버로부터 받아옴 > Content로 확인 가능 CSR 장점 - 전통적인 방식인 SSR 처럼 전체 페이지를 요청하지 않고 필요한 부분만 변경하기 떄문에 렌더링 속도가 빠르다. CSR 단점 - 브라우저가 없기 떄문에 html만 가져와서 검색에 노출되지 않음 (검색 엔진 최적화(S..

보안을 위해 DB Password나 session의 secret key를 감춰야 하는데 .env를 이용해보자. $npm install dotenv app.js require('dotenv').config(); // dotenv server.use(cookieparser(process.env.COOKIE_SECRET)); server.use(session({ secret: process.env.COOKIE_SECRET, resave: false, saveUninitialized: false })); // 세션 활성화 back/config/config.js require('dotenv').config(); // dotenv module.exports = { development: { username: 'ro..

import React, { useCallback, useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; import Head from 'next/head'; import Router from 'next/router'; import useInput from '../hooks/useInput'; import { Wrapper01, Wrapper02, Box, Ptag, CheckBoxRapper } from '../style/signupSt'; import AppLayout from '../components/AppLayout'; import { SIGNUP_REQUEST } from '../reducers/user';..

아직 백서버를 구현하기 전이기에 프론트 딴에서 데이터가 없어 dummyData를 이용해 기능을 구현해야 했다. 그래서 내가 짠 코드를 보며 아래에 설명을 간략하게 적으려한다. 먼저 next.js를 도입하며 AppLayout을 구현했고 pages안에 login.js 페이지를 만든 뒤 로그인 폼을 만들고 그 안에 기능을 구현했다. 먼저 input 창에 user가 정보를 입력할 때 변화하는 state를 구현하기 위해 함수를 하나 만들었으나.. 각각의 입력창 마다 같은 함수를 만들어야 했기에 반복되는 작업을 줄이기 위해 custom hook을 적용하여 이를 줄일수 있었다. // hooks/useInput.js import { useState, useCallback } from 'react'; //! custom..

Redux를 사용하다보니 dispatch가 동기적으로 이루어지는 것을 겪을 수 있었다. 내가 reducer에서 동작을 구현할 때, 한개의 dispatch가 성공적으로 작동할 경우 다음으로 넘어가고 싶은데 그럴때마다 설정한 state값을 불러와 상태 변화가 있을 경우 다음 dispatch를 또 실행해 주어야하는 번거로움이 있었다. 즉, dispatch를 여러번 할 때, 그만큼 dispatch를 여러번 써야했다. 그래서 비동기적으로 상태를 관리하기 위해 redux-saga를 도입했다. redux-saga는 비동기적으로 dispatch를 할 수가 있는데 put을 통해 dispatch를 할 수 있다. 또한 내부 메서드를 통해 실수를 방지할 수 있는 기능이 있다. 예를 들자면, takeleast, thuttle ..

dispatch를 한번에 묶어서 할 수 있게 해준다. redux-middleware: redux 기능을 향상 시켜주는 역할 Redux를 사용하면서 비동기적으로 작업을 처리하기 위해 thunk를 사용한다. redux-thunk도 좋지만 비동기처리에 있어 편리한 기능이 많은 redux-saga를 사용할 계획이기에 나는 이번 프로젝트에서는 일어나는 모든 액션들의 대해 살피고자 이 미들웨어를 추가했다. (추후 발생하는 버그나 에러를 잡기위함임) redux-thunk, (비동기 action creator 하나 추가) 일어나는 모든 액션 console.log에 담기 // configureStore.js import { createWrapper } from 'next-redux-wrapper'; import { ap..

react에 리덕스를 도입하기 위해 node module package를 install $npm install react-redux 추후 브라우저의 확장프로그램인 redux devtool를 이용하기 위해 install (상태 추적에 용이) $npm install redux-devtools-extension next.js에 redux를 사용하기 위해서 install $npm install next-redux-wrapper next.js에서 redux를 사용하기 위해 해야될 일이 있다. 1. front/store/configureStore.js 생성 // configureStore.js import { createWrapper } from 'next-redux-wrapper'; import { applyMi..

프로젝트를 진행하며 각각의 기능들을 구현하다보니 상태변화에 대해 다루는 것이 굉장히 정신이 없었고 props를 전달하는 과정 또한 반복해서 component를 따라 하나씩 전달해야하는 과정이 불편했다. 이에 한번에 저장소를 만들어 state를 관리하며 제어할 수 있는 Redux를 도입하게 되었다. Redux란? 오픈소스 javascript 라이브러리의 일종으로 state를 한곳에서 관리해줄수 있는 저장소 역할을 한다. Redux 공식문서: https://ko.redux.js.org/ React Redux 공식문서: https://react-redux.js.org/ React Redux | React Redux Official React bindings for Redux react-redux.js.org ..

계획한 프로젝트의 상단 메뉴 구성은 e도서관(Home), 책추천 및 구매(books), 커뮤니티(community), 실시간 대화방(chatRoom), 로그인(login), 회원가입(signup)으로 구성되어 있다. 먼저 front/components/Applayout.js 를 만든다. (상단 메뉴바는 따로 만들어 component를 분리함) import React from 'react'; import PropTypes from 'prop-types'; const AppLayout = ({ children }) => { return ( e도서관 책추천 및 구매 커뮤니티 실시간 대화방 {children} footer ); }; AppLayout.propTypes = { children: PropTypes...

공식문서 참고: https://nextjs.org/docs/getting-started Getting Started | Next.js Get started with Next.js in the official documentation, and learn more about all our features! nextjs.org 프로젝트/font 안에 next와 react, react-dom을 설치 $npm install next $npm install next react react-dom package.json의 script를 설정해준다. { "name": "front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev"..