혼자 적어보는 노트

로그인을 하게 될 경우 세션에 유저 정보를 추가하고 세션 id를 브라우저 쿠키에 저장하고 서버에 요청을 할 때마다 쿠키정보를 함께 전송함으로써 서버에서 어떤 유저가 요청을 보내는지 파악할 수 있다고 이론 적인 부분만 알고있었다. 하지만 직접 구현을 하려고 하니 생각보다 복잡한 인증 절차가 있다고 한다. (social 로그인시) passport를 사용하여 간단하게 로그인을 구현해보고 머릿속에 개념에 대해 간단하게나마 저장을 해보려 한다. 📄 준비된 것 - 회원가입 기능 구현 완료. (DB에 User의 데이터가 있는 상태) - 프론트에서 로그인 버튼 클릭 시 {email, password} 데이터 전달하는 코드 작성 - Node Express를 이용한 서버 세팅 - Sequalize를 사용하여 모델 세팅 -..

const URL = "http://localhost:8080" function logInAPI(data) { return axios.post(`${URL}/user/login`, data); } function logOutAPI() { return axios.post(`${URL}/user/logOut`); } function signUpAPI(data) { return axios.post(`${URL}/user`, data); } 반복되는 URL을 사용해야 할 때 상단에 URL을 입력하고 불러와서 사용을 했었는데 axios 자체에서 baseURL을 설정할 수 있다는 것을 알게 되었다. axios.defaults.baseURL sagas/index.js import { all, fork } from "..

프론트서버(Next.js), 백엔드서버(Express), 데이터베이스(MySQL)를 연결하여 회원가입을 하는 기능을 구현해보자 📄 준비된 것 - 프론트에서 회원가입 submit시 데이터 전달을 하는 코드 작성 - Node Express를 이용한 서버 세팅 - Sequalize를 사용하여 모델 세팅 - MySQL으로 연결하여 데이터를 넣을 테이블 세팅 현재 Sequalize에서 만든 모델들을 MySQL에 연결해 놓은 상태이기 때문에 그 이후 과정을 진행해보겠다. 😇 연결 전 기억해야 할 것 1. 브라우저와 프론트서버의 포트는 동일하다. 프론트의 포트를 변경할 경우 front의 package.json에서 변경을 해준다. "scripts": { "dev": "next -p 3060" }, 2. 백엔드 서버의 ..

회원가입 구현을 하는 도중에 데이터를 서버로 넘기는데 자꾸 아래와 같은 에러가 발생했다. parent: Error: Data too long for column 'password' at row 1 처음에 password column의 속성으로 DataTypes.STRING(30) 로 설정해서 문자열 길이가 30으로 설정이 되어있었다. 그래서 단순하게 100으로 변경을 하고 저장을 했는데 자꾸 저 에러가 떴다. 200으로 변경을 해보고 암호화된 password를 콘솔로 찍어봤는데 길이가 100이 넘지 않았다. 연동이 안되는 것 같아서 mysql 워크벤치로 확인을해보니 역시나 이전 설정 그대로인것! 변경하는 것을 알아보니 sequelize의 Table 속성은 변경할 수 없고 삭제하고 다시 생성을 해야 한다고..

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 == 암호화된 비밀번호 }..

Node.js를 사용할 때 변경된 사항이 있을 경우 서버를 종료하고 다시 실행해주어야 하는 불편함이 있다. 디렉토리에 파일이 수정될 경우 그 것을 감지하고 자동으로 재실행을 해주는 nodemon을 사용해보자. https://www.npmjs.com/package/nodemon npm i -D nodemon dev모드에서만 사용할 것이기 때문에 -D 키워드를 사용한다. 글로벌로 설치했을 경우 nodemon [실행하려는 파일명]이라는 키워드로 실행이 되지만 -D 키워드로 설치하면 해당 키워드가 작동이 안되기때문에 npx nodemon [실행하려는 파일명] 위의 키워드를 사용하거나 //package.json "scripts": { "start": "nodemon app.js" }, package.json파일에..

이전 포스팅에서 모델을 정의하고 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. 설..