기억 설명서

로그인을 했다면 로그아웃을 할때는 간단하다. cookie와 session을 지워주면 된다. user의 logout router를 하나 만들어 준다. 이후 session을 파괴한다. // routes/user.js const router = require('express').Router(); // POST /user/logout router.post('/logout', (req, res) => { req.logout(); req.session.destroy(); res.send('logout ok'); });

보안을 위해 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..

로그인 전략을 세웠으면 이제 app.js에서 미들웨어를 추가해준다. 먼저 express-session과 cookie-parsser를 npm install 해준다. $npm install express-session $npm install cookie-parser const express = require('express'); const server = express(); const session = require('express-session'); const passport = require('passport'); const passportConfig = require('./passport'); passportConfig(); server.use(cookieparser()); server.use(sess..

1. 로그인을 위해 user/login 라우터를 하나 만든다. // back/app.js const express = require('express'); const server = express(); const userRouter = require('./routes/user'); server.use('/user', userRouter); server.listen(3065, () => { console.log('서버를 실행중입니다.'); }); back/routes/user const router = require('express').Router(); // POST /user/login, 로그인 router.post('/login', (req, res, next) => { // todo }); 2. bac..

회원가입을 진행해보니 아래와 같은 에러가 발생하는 것을 확인할 수 있었다. CORS 문제이다. CORS(Cross-origin resource sharing)란? 간단하게 말하면 서로 다른 도메인에서 요청이 오갈때 발생하는 문제이다. 이 문제는 브라우저에서 차단하기 때문에 발생한다. Access to XMLHttpRequest at 'http://localhost:3065/user' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is prese..

전에 app.js 에서 나눴던 router를 server.use()를 통해 불러 왔었다. const express = require('express'); const server = express(); const userRouter = require('./routes/user'); server.use('/user', userRouter); server.listen(3065, () => { console.log('서버를 실행중입니다.'); }); 이제 프론트에서 회원가입 시 post 요청을 통해 회원가입 정보를 보낼 것이고 이를 서버에서 받아 database에 넣어준다. routes/user.js const router = require('express').Router(); const bcrypt = req..

이제 npm run dev 를 통해 서버를 실행하면 Unkown database "데이터베이스의 이름" 라는 error가 뜰 것이다. 아직 명령어를 통해 db를 만들어 주지 않았기 떄문이다. 아래의 명령어를 통해 sequelize로 db를 만들어주자. $npx sequelize db:create 아래와 같이 결과가 나온다면 성공적으로 db가 생성된 것이다. MySQL_Workbench를 통해 성공적으로 table이 생성 되었는지 확인해보자.

관계형 database이다 보니 table간 data들의 관계를 맺어줘야 하는데, 관계를 설정할 때 알아야할 것이 있다. 1 : 1 관계 User.hasOne(db.Profile) - User는 하나의 Profile을 갖는다. Profile.belongsTo(db.User) - Profile은 다수의 User에게 하나씩 속해있다. 1 : N 관계 User.hasMany(db.Post) - User는 다수의 Post를 가지고 있다. Post.belongsTo(db.User) - Post는 다수의 User에 속해있다. N : N 관계 N : N 관계의 경우는 중간 테이블의 이름을 through를 통해 명시해 주어야 한다. User.belongsToMany(db.Project, {through: UserPro..

MySQL에 table이 sequelize에서는 Model이다. 테이블을 만들 때, 분리할지 분리하지 않을지는 하나의 테이블에 복수의 정보가 들어가는지의 여부에 따라 나누면 된다. 이제 로그인 회원가입 시 활용할 user 테이블을 가지고 예시를 들며 적으려한다. 1. models에 user.js 파일 생성 (models/user.js) module.exports = (sequelize, DataTypes) => { const User = sequelize.define( 'User', { // 가로행에 들어갈 정보, MySQL에는 users 테이블 생성 (자동으로 소문자가 되고 복수로 바뀜) / id가 기본적으로 들어있다. email: {}, nickname: {}, password: {}, }, { //..

서버에서 router를 만들고 이제 data를 저장하기 위해 관계형 database인 MySQL을 사용하기로 했다. 사용하기 전에 MySQL을 조작하기 위해 사용법을 익히면 좋으나 손쉽게 javascript로 조작할 수 있는 방법을 찾았다. sequelize란? node.js의 ORM(Object-Relational Mapping)이다. 여기서 ORM은 간단하게 말하자면 객체지향 패러다임을 활용하여 관계형 database의 data를 조작하게 하는 기술이다. 1. 설치 및 초기화 /back $npm install sequelize $npm install mysql2 $npm install sequelize-cli mysql: node와 mysql을 연결해주는 드라이버 sequelize-cli: seque..

back/routes 폴더를 만들고 안에 post.js와 user.js 파일을 만든다. 기존의 app.js안에 코드를 보자. const express = require('express'); const server = express(); server.get('/', (req, res) => { res.send('hello express in e도서관'); }); server.listen(3065, () => { console.log('서버를 실행중입니다.'); }); 여기서 요청할 url 마다 코드를 작성하기에는 줄이 길어지고 곂치는 url이 생겨 유지.관리나 코드를 작성하다보면 헷갈리고 불편할 경우가 있을 것이다. 때문에 router를 나눠서 사용하는 것이 좋다. 나누는 방법은 아래와 같다. 1. bac..

서버를 실행하기 위해 아래의 명령어를 사용해왔다. $node app.js 이 명령어는 코드가 수정될 때마다 매번 실행해 줘야하는 불편함이 있다. 때문에 코드가 수정될 때마다 자동으로 서버를 실행해주는 nodemon을 사용할 것이다. 1. nodemon 설치 $npm nodemon 2. package.json의 scripts 설정 { "name": "e_library_back", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "nodemon app" }, "author": "KYH", "license": "ISC", "dependencies": { "express": "^4.17.2" }, "devDependen..

http로 서버를 구성하기에는 직관적이지 못하며 구고적이지 못하다는 단점이 있었다. 그럼 구조적이고 직관적으로 코드를 작성하기 위해 express 프레임워크를 사용하려한다. $npm install express const express = require('express'); const server = express(); server.get('/', (req, res) => { res.send('hello express in e도서관'); }); server.listen(3065, () => { console.log('서버를 실행중입니다.'); }); server 뒤에 사용할 method를 붙여주고 그 안에 url을 설정한 뒤 callback 함수로 요청과 응답을 처리해주면 된다. 매우 간단하다. list..

먼저 시작하기 전에 node.js는 server가 아니다. node.js 공식문서에 어디에도 node.js가 server라는 말은 없다. node.js는 chrome v8 javascript 엔진으로 빌드된 javascript 런타임이다. javascript 런타임이란? javascript 언어가 구동되는 환경이다. runtime은 프로그래밍 언어가 구동되는 환경을 뜻하는데 javascript runtime이라고 하면 node.js나 크롬 브라우저 등을 말할 수 있다. (javascript 언어가 구동되는 환경) 그럼 이제 node로 서버를 구동해보자. 1. node 설치 2. back 폴더 안에서 git init $git init 3. back/app.js const http = require('htt..

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';..