JNarin Development Story

저번 시간에는 로그인 페이지를 만들었었다. 이번에는 마지막으로 회원가입 페이지를 만드는 시간을 가지려 한다. 1. LoginPage.js를 가져와 추가하기 // client > src > components > views > RegisterPage > RegisterPage.js import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { registerUser } from '../../../_actions/user_action'; function RegisterPage(props) { const [Email, setEmail] = useState(""); const [Password, setPass..

오늘은 드디어 대망의 로그인 화면 구현하기를 정리하려 한다. 내용이 쉽지 않아서 정리하고도 이해가 잘 될지 걱정이 되지만 그래도 포기하지 않고 적어보려 한다. 이 부분은 한번에 이해가 쉽지 않기에 지속적인 반복으로 이해가 필요하다. 1. 메인 화면 디자인 // client > src > components > views > LandingPage > LandingPage.js import React, { useEffect } from 'react'; import axios from 'axios'; function LandingPage() { // 일부 생략 return ( 시작페이지 ) } export default LandingPage 일단 전체적으로 가운데로 모아주는 작업으로 디자인 작업을 했다. 그러..

이전에 조금 어렵게 느껴졌던 React hook를 좀 더 쉽게 설명이 된 자료가 있어서 참고하여 작성을 해보았다. class Components function Components class component의 경우 라이프사이클을 사용을 할 수 있어 성능적인 면은 좋으나, 속도가 느려진다. 반대로 function component의 경우 라이프사이클의 성능은 못쓰지만, 속도는 빠르고 간결한 코드작성이 용이하다. 이를 업그레이드 하기 위해 hook이 탄생하게 된 것이다. React 16.8이 업그레이드 된 후 Hook이 탄생하게 되었다. class Components function Components 여기서 constructor = useState, componentDidMount = useEffect라..

오늘은 리액트의 핵심이라고 할 수도 있는 리덕스를 정리해보았다. 1. 라이브러리 설치 yarn add redux react-redux redux-promise redux-thunk 여러 개를 한 번에 설치하고 싶을 때는 스페이스로 구분을 하여 명령어를 한 번에 할 수 있다. 여기서 redux-promise, redux-thunk는 redux를 오류를 최소화하기 위해 추가적으로 설치하는 middleware다. 2. 리덕스와 어플리케이션을 감싸줄 provider 개선하기 // client > src > index.js // 생략 import {Provider} from 'react-redux'; import 'antd/dist/antd.css'; import { applyMiddleware, createSt..

오늘은 서버와 클라이언트를 매번 두 번 다 실행을 하기 위해서는 매번 실행을 각각 해야 하는데 그 방법을 한 번에 할 수 있는 방법을 알아보려고 한다. 1. concurrently 설치하기 yarn add concurrently 2. package.json명령어 추가하기 { // 생략 "scripts": { "start": "node index.js", "backend": "nodemon index.js", "test": "echo \"Error: no test specified\" && exit 1", "dev": "concurrently \"npm run start\" \"cd ../client && npm run start\"" }, // 생략 } 여기서 주목해야 하는 부분은 dev다. "dev":..

오늘은 axios에 대한 공부를 진행해보았다. 1. axios 설치하기 axios는 벡앤드와 프론트앤드 통신을 쉽게 하기 위한 비동기 통신 라이브러리다. axios를 설치하는 명령어는 다음과 같다. npm install axios --save yarn add axios 2. axios 사용해보기 axios를 한번 사용해는데 방법은 다음과 같다. // client > src > components > views > LandgingPage > LAndingPage.js import React, { useEffect } from 'react'; import axios from 'axios'; function LandingPage() { useEffect(() => { axios.get('/api/hello')..

오늘은 로그아웃 기능을 만들어 보려고 한다. 1. 로그아웃 Router 만들기 // index.js app.get('/api/users/logout', auth, (req, res) => { }) 먼저 로그아웃 router를 만들어주고 auth middleware도 추가해준다. 2. 로그아웃 하려는 유저를 DB에서 찾기 app.get('/api/users/logout', auth, (req, res) => { User.findOneAndUpdate({ _id: req.user._id }, }) }) 여기서 findOneAndUpdate를 사용하여 로그아웃하려는 유저 ID를 찾는다. 3. 찾은 유저의 토큰을 삭제 app.get('/api/users/logout', auth, (req, res) => { U..

오늘은 Auth 기능을 공부하였는데 아직도 이해가 가지 않는 부분도 있지만 따라 해보려 한다. 먼저, 추후에 쓰일 예정이지만 Express라는 라우터를 사용하기 위해 현재 쓰이는 API들의 경로를 디테일하게 나누었다. 이렇게 해야 현재 라우터가 어디에 관련된 라우터인지 알 수 있기 때문이다. users, products, comment 등 다양하게 존재하기 때문이다. index.js 상단에는 auth를 import를 해야 사용할 수 있다. 또한 middleware값에서 Authenticaation이 True일 경우 원하는 유저정보를 제공하여 가져올 수 있다. middleware/auth.js 아직은 이 순서가 이해가 가면서도 이해가 잘 가지 않지만, 원래 어려웠던 것이니 일단 이렇게 하는구나 하고 넘어가..