boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS #25 REGISTER PAGE 드디어 마지막 강의이다.. ㅋㅋ 10월부터 듣기 시작했는데 11월에 계약직 일을 하고 우아한테크코스 준비도 좀 하느라 늦어졌다. 는 핑계 ~ 아무튼 마지막까지 왔다는 게 뿌듯하다.ㅎㅎ 마지막 강의에서는 회원가입 페이지를 만든다. 전에 만들어 두었던 register.js에 회원가입 컴포넌트 클래스를 만들것이다. 1. 회원가입 컴포넌트 클래스 생성 components > RegisterLogin > register.js import React, { Component } from 'react'; class Register extends Component { render() { return ( hello..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS #24 LOGIN PAGE (2) 이번 강의에서는 redux를 사용하여 react 앱의 전체 상태를 관리하는 부분이 있는데 redux에 대해 자세히 몰라 내용을 찾아봤다. (redux의 flow에 관한 자세한 설명은 여기) 위 그림을 보면 redux의 상태변화는 모두 reducer를 통해 이루어지는 것을 볼 수 있다. reducer에서는 action에 의해 어떤 상태로 변경될지가 결정된다. action은 기본적으로 아래와 같이 type과 payload를 가지는 객체이다. { type: "액션의 종류를 한번에 식별할 수 있는 문자열 혹은 심볼", payload: "액션의 실행에 필요한 임의의 데이터", } dispatch를 통해 ..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS #23 LOGIN PAGE (1) 1. 로그인 컴포넌트를 위한 파일 생성 components > RegisterLogin 폴더 생성 > index.js, register.js 파일 생성 2. 로그인 페이지 라우터 추가 App.js > /login 경로에 로그인 컴포넌트 연결 import React from 'react'; import {Route, Switch} from 'react-router-dom'; import About from './about'; import Login from './RegisterLogin'; function App() { return ( ); } export default App; 3. 로그인 페이..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS #22 Setting up REDUX redux란? 필요한 이유? 기본 개념 --> 여기에 잘 나와있다.. 아래 글은 학습하는 과정에서 혼자 이해한 내용을 정리한 것이니 참고만.. react는 컴포넌트 기반으로 구성되어 화면(UI - user interface)을 구성하는 것을 좀 더 편리하게 다룰 수 있다. 각각의 컴포넌트들은 state를 가지는데 이 state를 기반으로 변화가 발생한 컴포넌트만 변경되는 로직이 수행된다. 즉, state를 통해 view를 관리한다. 또 하나의 특징으로 react의 데이터흐름은 단방향으로만 진행된다. 그래서 컴포넌트가 많아지게 되면 최상위 컴포넌트에서 최하단 컴포넌트까지의 데이터 전달이 복잡해..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS #21 Proxy Concurrently 참고 create react app 문서 - proxying 리액트 기본 포트가 3000포트 이기 때문에 백엔드 포트를 3000 -> 5000으로 변경했다. 따라서 현재 프로젝트는 프론트는 3000번, 백엔드는 5000번 포트를 사용한다. 1. proxy 설정 프론트에서 백엔드의 api를 사용할 때 다른 호스트나 포트로 리다이렉션 할 필요 없이 proxy 설정을 해놓으면 편하게 사용할 수 있다. http-proxy-middleware 를 설치한다. npm install -D http-proxy-middleware client 루트에 setupProxy.js 파일을 생성하고 아래 코드를 작..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS #20 REACT ROUTER DOM React-Router-DOM 이란? 리액트 라우터는 리액트의 서드파티 라이브러리로 화면전환을 도와주는 역할을 한다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 리액트 라우터를 통해 Link 태그를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로, 페이지 이동 시에도 굳이 화면 전체를 새로고침 할 필요가 없기 때문이다. 사실 리액트 라우터 없이도 컴포넌트 업데이트를 통해 화면전환을 할 수 있다. 그럼에도 리액트 라우터를 사용하는 이유는 사용자에게 새로고침, 뒤로가기, 즐겨찾기 등의 기능을 제공하기 위함이다..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS#18 AXIOS Blog ReactJS NodeJS #19 about page axios는 브라우저와 node.js를 위한 프로미즈 기반의 HTTP client 이다. 프론트에서 사용할 것이기 때문에 client 폴더 내부에서 아래 명령어를 실행해야 한다. npm i axios --save 리액트 생성시 기본적으로 생성됐던 구조는 아래와 같다. 여기서 사용하지 않는 App.css, App.test.js, logo.svg 는 지우고 src 폴더에 components 폴더를 생성하고 App.js를 옮긴다. 그리고 index.js에서 App.js 파일의 경로를 불러오는 부분을 수정한다. 모두 완료하면 아래와 같다. 그리고 App.js..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS#17 CREATE REACT APP 이번 강의부터는 드디어 react를 이용한 프론트 개발에 들어간다. client 폴더를 만들고 해당 폴더 내부에서 create-react-app으로 react app을 생성한다. mkdir client cd client npx create-react-app . 생성 완료가 되면 아래처럼 Happy hacking 이라는 문구가 나온다. 생성된 리액트 프로젝트를 실행해본다. npm start 실행 결과

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS#15 LOGOUT 이번 강의에서는 로그아웃을 구현한다. 로그인시 사용자에게 토큰이 발급되고 사용자는 이 토큰을 이용해 로그인 상태를 유지하는데 로그아웃시에는 이 토큰을 사용자 DB에서 제거하는 작업을 진행하여 로그아웃을 구현한다. 1. index.ts에 logout api를 추가한다. auth 미들웨어에서 user정보가 request에 담겨진다. 이 request에 담긴 user의 id를 통해 DB를 갱신한다. 이 때, token값을 빈 값으로 채운다. app.get("/api/user/logout", auth, (req:express.Request, res:express.Response)=>{ User.findOneAndUpd..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS#14 AUTHENTICATION MIDDLEWARE 사버의 자원을 이용하기 위해서는 사용자는 인증(Authentication)을 통해 서버로부터 허가(Authorization)를 받아야 한다. 이번 강의에서는 미들웨어를 추가하여 Authorization을 구현했다. 사용자가 로그인을 통해 발급된 token으로 인증 요청을 보내면 미들웨어에서 토큰(인증수단)을 검증하고 올바른 경우 필요한 정보(자원)를 응답해준다. 이 로직을 만드는 것이 이번 강의 내용이다. 현재 강의까지 진행된 프로젝트 구조 src/server에 middleware폴더를 추가하고 admin, auth 파일을 생성했다. 1. auth.js 사용자로부터 요청이 오면..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS#13 LOGIN FUNCTION WITH JSONWEBTOKEN 이번 강의에서는 JWT(jsonwebtoken)을 사용하여 로그인을 구현한다. JWT는 정보를 안전하게 전송하기 위해 정의된 공개된 표준 (RFC 7519) 이다. (자세한 설명은 여기) 1. jsonwebtoken 모듈 및 type definition 패키지 설치 npm i -S jsonwebtoken npm i -D @types/jsonwebtoken 2. UserSchema에 로그인 시 사용할 comparePassword, generateToken 메소드 추가 jsonwebtoken 모듈을 import 하고 UserSchema에 comparePassword, ..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS#12 HASH PASSWORD with BCRYPT 패스워드같은 보안 정보가 DB에 그대로 저장되면 안되기 때문에 암호화 기법 중 하나인 해싱 알고리즘 bcrypt를 적용하여 저장한다. 1. bcrypt 모듈 및 type definition 패키지 설치 npm i -S bcrypt npm i -D @types/bcrypt 2. user.ts 수정 mongoose 스키마의 pre 함수는 어떤 작업을 하기 직전에 실행되는 함수이다. 여기서는 user정보를 저장하기 전에 호출한다. password를 저장할 때만 bcrypt를 적용할 것이기 때문에 user.isModified('password') 의 조건일 경우에만 해시를 적용한다. ..