일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- SCSS use
- SCSS extend
- 쌓임맥락
- 이벤트 수식어
- 리스트 렌더링
- nextjs사용법
- git 같은계정 다른 컴퓨터
- KDT 프로그래머스 데브코스 프론트엔드
- 프로그래머스 K_Digital Training
- 고양이 사진 검색기
- SCSS forward
- vuex map
- vue 이벤트 수신
- 프로그래머스 데브코스
- postcss
- vue 지역 컴포넌트
- flex
- 폼 입력 바인딩
- netlify redirect
- KDT 프로그래머스
- 리액트
- Vue
- vue mixin
- 프로그래머스 프론트엔드 데브코스
- 프로그래머스 데브코스 프론트엔드
- 다른컴퓨터에서 git사용
- react next
- intersection opserver
- Spacer
- SCSS import
- Today
- Total
목록NodeJS (8)
혼자 적어보는 노트
express 서버로 사용자 로그인을 구현했지만 새로고침 시에 로그인이 풀리는 현상이 발생한다. 로그인 자체가 해제된 것 처럼 보이지만 개발자 도구의 Cookie를 확인해보면 connect.sid에 passport와 express에서 만든 session id 값이 들어있는 것을 확인할 수 있다. 새로고침을 할 때마다 쿠키를 서버에 전송하고 로그인 한 유저의 정보를 서버에 요청을 하여 정보를 받아오는 방법을 사용할 수 있다. [ router ] router.get("/", async (req, res, next) => { try { if (req.user) { // 로그아웃 한 상태라도 요청을 보내기 때문에 체크해 준다. const user = await User.findOne({ where: { id: ..
로그인을 한 후 포스트를 게시하려고 하는데 401 에러가 발생했다. 401 에러는 로그인 한 유저인지 확인하기 위해 작성을 해놓았던 부분이다. exports.isLoggedIn = (req, res, next) => { if (req.isAuthenticated()) { next(); } else { res.status(401).send("로그인이 필요합니다."); } }; post 업로드 요청을 보냈을 때 서버의 middleware에 위와 같이 로그인을 감지하도록 했고 로그인한 상태가 아닐 경우 401코드로 응답하게 했다. 하지만 로그인을 한 상태임에도 불구하고 포스트를 작성하면 오류가 생긴다. 왜일까? 로그인 이후 서버에 요청을 보낼 때 쿠키값을 함께 전달하여 서버에서 로그인 한 유저를 알 수 있는데..
로그인이나 로그아웃, 회원가입 등 서버에 요청을 보냈을 때 바로 응답을 하지 않고 먼저 검증을 할 수 있는 미들웨어를 만들어 보자. 로그인요청을 할 경우 로그인이 되어있지 않은 상태여야 하고 로그아웃 요청을 할 경우 로그인을 한 상태여야 한다. 또한 로그인 상태를 체크하는 route들이 많아질 수 있기 때문에 반복적인 코드를 줄이기 위해 미들웨어를 추가로 적용하는 것이 좋다. 📄 알아야 할 것 const express = require('express'); const router = express.Router(); router.get('/', function(req, res) { res.send('Hello world!'); }); module.exports = router; router의 get, po..
로그인 시 DB에서 유저의 ID를 조회하여 유저의 정보를 전달 해주었는데 유저의 데이터는 사용자의 입력으로 생성된 email, nickname, password뿐이며 이 정보만 전달해서 보낼 경우 유저가 올린 게시글 정보 등 연관된 데이터는 알 수가 없다. 또한, password는 프론트로 보내서 state에 저장할 필요가 없다. 즉, front에 데이터를 보내기 전에 뺄 건 빼고 추가할 건 추가해서 보내주어야 한다. const userData = await User.findOne({ where: { id: user.id }, attributes: { exclude: ["password"], // user데이터에서 password만 빼고 가져오기 }, include: [ // 추가로 포함시킬 데이터, a..
https://www.npmjs.com/package/bcrypt bcrypt A bcrypt library for NodeJS.. Latest version: 5.0.1, last published: a year ago. Start using bcrypt in your project by running `npm i bcrypt`. There are 3237 other projects in the npm registry using bcrypt. www.npmjs.com 비밀번호 암호화 라이브러리 📂 설치 npm i bcrypt 🔑 비밀번호 암호화 bcrypt.hash(myPlaintextPassword, saltRounds).then(function(hash) { // hash == 암호화된 비밀번호 }..
이전 포스팅에서 모델을 정의하고 MySQL을 연결하는 것 까지 진행했었다. 데이터를 연결하면서 관계설정에 대해 알게 되었는데 약간 개념이 헷갈리게되어 예시 상황을 만들고 정리해보면서 개념을 다시 제대로 이해해보기로 했다. 독립적으로 사용하는 데이터가 있는 반면 보통 연관성이 있는 데이터가 많다. 게시판을 구현하기 위한 간단한 User, Post, Comment 세 가지의 모델끼리만 해도 User은 자신이 등록한 게시물인 Post, 자신이 작성한 Comment의 정보를 가지고 있어야하고 Post는 게시물을 등록한 User과 포스트에 달린 Comment의 정보를 가지고 있어야한다. 또한 Comment는 댓글을 단 User와 어느 포스트에 달린 댓글인지에 대한 Post의 정보를 가지고 있어야한다. 이렇게 연관..
🔨 Community Server / Workbench 설치 https://dev.mysql.com/downloads/ MySql Community Downloads에서 DB server를 위한 MySql Community Server와 데이터베이스 내부에 저장된 데이터를 시각적으로 확인하기 위해 MySql Workbench를 설치해준다. 두 개를 따로 따로 설치하기 싫다면 MySQL Installer for Windows를 설치하는 과정에서 Community Server와 Workbench를 선택해서 설치할 수 있다. 나는 Installer for Windows를 사용했다. Installer for Windows로 설치할 때 아래의 세 가지 부분만 체크하고 나머지는 기본 값으로 설정하면 된다. 1. 설..
http-server / live-server node.js가 아닌 상태에서 간단하게 웹을 테스트 할수 있는 두가지의 패키지이다 http-server npm install --global http-server 글로벌로 다운을 받는다 http-server 설치 후 실행창에 위와 같이 입력만 하면 바로 실행된다. https://www.npmjs.com/package/http-server live-server npm install live-server live-server은 수정시에 자동으로 반영이 된다. 말그대로 라이브로 확인이 가능하다. live-server 이것도 http-server과 같이 설치 후 위와같은 간단한 입력으로 실행할 수 있다. 개인적으로 live-server이 좀 더 나은 것 같다. 여러..