티스토리

기억 설명서

검색하기

블로그 홈

기억 설명서

hyeoky.tistory.com/m

개발하며 찾아보고 배운 경험일지

구독자: 0

방명록 방문하기

주요 글 목록

내 로그인 정보 매번 불러오기 로그인 이후 새로고침을 하게 되면 로그인이 풀리는 문제가 발생한다. 어떻게 해결해야 될까? 1. 프론트에서 페이지가 새로고침이 될때마다(useEffect) 로그인 된 user의 정보를 매번 불러준다. 2. 백엔드 서버(user router)에서는 get을 통해 로그인 된 user의 정보를 매번 불러온다. - passport 전략에 의해 로그인, req.user의 정보가 있으면 user의 정보를 매번 반환하고 - 없다면 null을 보내면 된다. 1. user 정보를 가져올 router를 만들어준다. (get) // routes/user.js const router = require('express').Router(); const { User } = require('../models'); // GET /us.. 공감수 0 댓글수 0 2022. 1. 18.
squelize findAll 공식문서 참고: https://sequelize.org/master/manual/model-querying-basics.html Manual | Sequelize Model Querying - Basics Sequelize provides various methods to assist querying your database for data. Important notice: to perform production-ready queries with Sequelize, make sure you have read the Transactions guide as well. Transactions are important t sequelize.org router에서 정의한 model(table)의 정보를 가져올 때.. 공감수 0 댓글수 0 2022. 1. 18.
credentials로 cookie 공유하기 로그인을 하거나 로그아웃을 할 때 또는 어떤 이벤트가 발생할때, middleware를 만들어 router를 검사하고 로그인 여부에 따라 접근가능 여부를 검사했다. 그런데 로그인을 해도 서비스를 이용할때 로그인이 필요하다는 401 에러가 발생한다. 이유는 cookie가 공유가 안돼서 그렇다. 그렇다면 로그인 후 cookie를 어떻게 공유할까? 그전에 브라우저의 원리에 대해 이해가 필요하다. 이전에 브라우저와 서버와의 도메인이 달라 CORS문제를 겪은바가 있다. cookie를 공유하는 것도 브라우저와 서버의 도메인이 다르면 cookie 전달이 안된다. cookie가 전달이 되어야 백엔드 서버가 지금 요청을 보낸 사용자가 누구인지 알 수가 있다. 이 문제를 해결하기 위해 proxy방식을 사용할 수 있지만 co.. 공감수 0 댓글수 0 2022. 1. 18.
middleware로 router 검사하기 로그인을 하거나 게시글 작성 등.. 사용자가 무언가를 하려고 할 때, 로그인이 된 상태에서만 접근할 수 있는 router가 있고, 로그인을 하지 않은 상태에서 접근할 수 있는 router가 있다. 따라서 midlleware를 하나 만들어 router를 검사해주는 것이 좋다. 각각의 router마다 이 기능을 넣기에는 코드가 중복이 되므로 routes/middleware.js를 따로 만들어 분리하고 불러다 사용하는 것이 좋다. // routes/middleware.js exports.isLoggedIn = (req, res, next) => { if (req.isAuthenticated()) { next(); // 비어있으면 다음 미들웨어로 간다 } else { res.status(401).send('로그.. 공감수 0 댓글수 0 2022. 1. 18.
[node.js] 로그아웃 하기 로그인을 했다면 로그아웃을 할때는 간단하다. 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'); }); 공감수 0 댓글수 0 2022. 1. 17.
cookie/session과 로그인 흐름 로그인 전략을 세웠으면 이제 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.. 공감수 0 댓글수 0 2022. 1. 17.
[node.js] passport로 로그인 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.. 공감수 0 댓글수 0 2022. 1. 17.
[node.js/CORS] CORS 문제 해결하기 회원가입을 진행해보니 아래와 같은 에러가 발생하는 것을 확인할 수 있었다. 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.. 공감수 0 댓글수 0 2022. 1. 16.
[node.js - express]회원가입 구현하기 전에 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.. 공감수 0 댓글수 0 2022. 1. 16.
sequelize 실행하기 이제 npm run dev 를 통해 서버를 실행하면 Unkown database "데이터베이스의 이름" 라는 error가 뜰 것이다. 아직 명령어를 통해 db를 만들어 주지 않았기 떄문이다. 아래의 명령어를 통해 sequelize로 db를 만들어주자. $npx sequelize db:create 아래와 같이 결과가 나온다면 성공적으로 db가 생성된 것이다. MySQL_Workbench를 통해 성공적으로 table이 생성 되었는지 확인해보자. 공감수 0 댓글수 0 2022. 1. 16.
sequelize 관계 설정하기 관계형 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.. 공감수 0 댓글수 0 2022. 1. 16.
sequelize model 만들기 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: {}, }, { //.. 공감수 0 댓글수 0 2022. 1. 16.
MySQL과 sequelize 연결하기 서버에서 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.. 공감수 0 댓글수 0 2022. 1. 16.
express 라우터 분리하기 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.. 공감수 0 댓글수 0 2022. 1. 16.
서버 자동실행을 위한 nodemon 서버를 실행하기 위해 아래의 명령어를 사용해왔다. $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.. 공감수 0 댓글수 0 2022. 1. 16.
express로 라우팅하기 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.. 공감수 0 댓글수 0 2022. 1. 16.
node로 서버 구동하기 먼저 시작하기 전에 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.. 공감수 0 댓글수 0 2022. 1. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.