본문 바로가기
728x90
728x90

경일/nodejs26

[node.js] kakao(카카오) OAuth 2.0 로그인 기능 0.목차 1. 개요 2. 카카오 디벨로퍼 3. 기능개발 1. 개요 드디어 OAuth 2.0 을 기반으로 한 소셜로그인 기능을 구현 해본다. 제일 해보고 싶었던 것 중에 하나라 하는 내내 재밌게 할 수 있었다. 2. 카카오 디벨로퍼 우선 카카오 디벨로퍼 사이트에 들어가서 카카오 로그인을 한 뒤, 커다란 시작하기 버튼을 눌러주자. 애플리케이션을 추가하기를 누른뒤에 필요한 정보들을 입력해주자 그리고 생성한 애플리케이션을 클릭하면 이런 애가 나온다. 여기서 기억해야될 내용은 REST API 키 이다. 소중하게 잘 보관하자. 여기로 들어오면 이런내용이 보인다. 수정 버튼을 눌러서 카카오 로그인 이후 이동할 페이지를 적어주자 그리고 저 redirect URI 도 잘 보관해두자. 이번엔 일로 가면 된다. 여기가면 이.. 2022. 3. 16.
[node.js] 백엔드 서버에 저장된 이미지 프론트 서버에 전달 0. 목차 1. 개요 2. 백 서버에 저장 3. 프론트 서버에 전달 1. 개요 이거 하다가 의문이 들었다. 서버컴퓨터에 파일을 저장은 했는데 프론트 서버에서 '님 아까 저장한 파일 좀 써야됨 그거 어딧음?" 이라고 요청을 보내면.. 나는 이거 어떻게 전달을 해줘야되지...? 라는 의문이 생겨서 이것저것 해보았다. 2. 백서버에 저장 // routes/upload/upload.js router.post('/', upload.single('imgUpload'), (req, res) => { const { filename } = req.file; const { subject } = req.body; const filePath = `http://localhost:4001/${.. 2022. 3. 15.
[node.js] multer 이용해서 파일 업로드 파일업로드 1. 개요 2. FRONT 3. BACK 1. 개요 파일 업로드를 하는 방법을 알아볼거다. 그런데 직접 구현 하는건 거의 불가능에 가까우ㄴ니 외부 라이브러리를 사용하자 사용할 라이브러리의 이름은 multer 이다. 2. FRONT 우선 서버에다 파일을 보낼 HTML을 만들어준다. 전송 기본적은 form 태그이다. 그런데 기존에 만들던 form 태그와 다른점은 form 태그의 enctype이란 속성이 들어가있다. form태그로 전달해줄 Content-type을 지정해주는 역할을 한다. 파일 업로드에 사용되는 Content-type은 multipart/form-data 이다. (default는 x-www-form-urlencoded 이다) 그리고 한가지 더 input type에 file을 이용해준.. 2022. 3. 15.
[node.js] jwt, jsonwebtoken 라이브러리 이용해서 로그인하기 0.목차 1. 개요 2. 세팅 3. 토큰생성(sign) 4. 디코드 payload(veryfy) 1. 개요 2022.03.03 - [경일/nodejs] - [node.js] 쿠키와 세션, 그리고 JWT [node.js] 쿠키와 세션, 그리고 JWT 0. 목차 1. JWT가 뭔데. 2. JWT 구현 3. JWT로 로그인 해보기 1. JWT가 뭔데 JSON Web Token 의 약자다. 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미한다. 그런데 우리 이런 역할을 하 kong-dev.tistory.com 위 포스팅에서 jwt 방식으로 로그인을 구현했었다. 그리고 crypto 를 사용해서 직접 토큰을 암호화 하고, 64진수로 변환했던 payload를 다시 복호화 해서 사용했었다. 내용이 어렵.. 2022. 3. 9.
[node.js] CORS 해결 방법 (SOP와 CORS) 0. 목차 1. 개요 2. SOP와 CORS 3. 해결방법 4. CORS 외부 라이브러리 1. 개요 개발자들은 참 신비로운 존재다. 뭘 그렇게 쪼개는걸 참 좋아한다. 그리고 코드가 중복적으로 사용되는걸 겁나 싫어한다. 그리고 이젠 하다하다 서버도 둘로 쪼갠다. 프론트서버랑 백서버 백서버에서는 주로 db와 통신을 하고, 프론트에서는 db와 통신한 데이터를 이용해 화면을 구성한다. 아 그렇구나.. 라고 받아들이기 직전에 ..이게 되나? 라는 생각이 든다. 서버가 두개라는 거는 서로다른 포트를 통해 통신을 한다는 건데, A라는 포트에서 열린서버가 B라는 포트에서 열린서버에 요청을 보내는게 된다고? 당연히 안된다. 근데 되게 만든다. 왜 안되는지와 어떻게 되게하는지에 대한 포스팅이다. 2. SOP와 CORS 실.. 2022. 3. 7.
[node.js] axios를 이용한 비동기 통신 0. 목차 1. 개요 2. axios 설치 3. get 요청 4. post요청 1.개요 비동기 통신을 하는 방법에는 크게 3가지 방법이 있다. 1. XMLHttpRequest 2. fetch 3. axios 1번은 한번 쳐보고 데이터가 어떻게 전달되고 전달 받는지만 보면 충분한 것 같고, 2번은 실제로 사용해을 해보았다. 2022.02.17 - [경일/nodejs] - [node.js] ajax, fetch, async, await, 로그인 기능 구현 [node.js] ajax, fetch, async, await, 로그인 기능 구현 0. 목차 1. 개요 2. 해결 3. 후기 1. 개요 2022.02.15 - [경일/nodejs] - [node.js] fetch(async, await)로 로그인기능 만들.. 2022. 3. 7.
[node.js] 쿠키와 세션, 그리고 JWT 0. 목차 1. JWT가 뭔데. 2. JWT 구현 3. JWT로 로그인 해보기 1. JWT가 뭔데 JSON Web Token 의 약자다. 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미한다. 그런데 우리 이런 역할을 하는 다른애들을 이미 알고 있다. 바로 쿠키와 https://kong-dev.tistory.com/129 [nodejs] 쿠키 먹는거 말고 0.목차 1. http 통신 2. 브라우저 3. 쿠키 1. http 통신 서버에 요청을 보낼때는 일정한 규격에 따라 요청을 해야한다. 그런데 이 규격만 맞춰 준다면 새로운 내용을 작성해서 보내줄 수도 있다. 이제 kong-dev.tistory.com 세션이다. https://kong-dev.tistory.com/131?category=9.. 2022. 3. 3.
[node.js] mysql2, connection pool, async, await 으로 사용 0. 목차 1. 개요 2. 일단 한번 써보기 3. mysql2 async, await 깔끔 ^^ 4. db.js 파일 분리 1. 개요 [mysql] connecting pool (feat.node.js) 0. 목차 1. 개요 2. connecting pool 쓰는 이유 3. node.js connecting pool 생성 1. 개요 https://kong-dev.tistory.com/125?category=998366 [nodejs] node에서 mySQL 연결(Error: connect ECONNREFUSED ::1:330.. kong-dev.tistory.com 이어지는 글이다. 수업에서 connecting pool 을 사용하면 코드가 더러워진다고 했다. 그런가.. 그렇기때문에 코드를 조금이라도 깔끔.. 2022. 2. 18.
[node.js] ajax, fetch, async, await, 로그인 기능 구현 0. 목차 1. 개요 2. 해결 3. 후기 1. 개요 2022.02.15 - [경일/nodejs] - [node.js] fetch(async, await)로 로그인기능 만들어보기 [node.js] fetch(async, await)로 로그인기능 만들어보기 0. 목차 1. 개요 2. 기본세팅 3. HTML 4. fetch 5. 결과 1. 개요 수업시간에 ajax 비동기 통신에 대한 내용이 나와서 ajax 검색해보다가, promise 를 리턴하는 fetch 문법 사용이 더 편리할것 같아서 fetch 문법.. kong-dev.tistory.com 이거 하다가 마지막에 뻘짓을 했었는데 말이지.. ㅎㅎ 해결했다. 2. 해결 app.post('/user/login', (req, res) => { const { us.. 2022. 2. 17.
[node.js] fetch(async, await)로 로그인기능 만들어보기 0. 목차 1. 개요 2. 기본세팅 3. HTML 4. fetch 5. 결과 1. 개요 수업시간에 ajax 비동기 통신에 대한 내용이 나와서 ajax 검색해보다가, promise 를 리턴하는 fetch 문법 사용이 더 편리할것 같아서 fetch 문법 사용해봄 로그인 기능 만들거임 2. 기본세팅 const express = require('express'); const nunjucks = require('nunjucks'); const session = require('express-session'); const MemoryStore = require('memorystore')(session); const fs = require('fs'); const userList = [ { userid: 'kong12.. 2022. 2. 15.
[node.js] 프론트 없이 POST request 확인하기(feat. 포스트맨) 0. 목차 1. 개요 2. curl 3. Content-type 4. 포스트맨 1. 개요 최근 몇번의 팀플을 위한 팀플 연습..? 을 통해 브랜치를 나누고 깃헙에 push 하면서 프론트와 백을 나눠서 작업하는 걸 해봤다. 프론트와 백이 동시에 작업을 시작했는데, 몇 가지 문제 점이 있었다. 1-1. ..? input name 뭘로 할거임..? 예를 들어 로그인 기능을 만든다고 해보자. id : pw : 로그인 프론트가 신나게 front 브랜치에다가 html 태그를 작성을 했다. 그리고 백엔드도 신나게 user branch 에다가 라우터를 만들었다. app.post('/user/login', (req, res) => { const { id, pw } = req.body; ... res.render('ind.. 2022. 2. 15.
[nodejs] 회원만 이용가능 한 게시판 만들기 (feat. mySQL) 0. 목차 1. 개요 2. DB 3. 파일 쪼개기 4. CRUD 기능개발 5. 후기 1. 개요 2022.02.11 - [경일/nodejs] - [node.js] express-session, mySQL 로그인 기능 구현 [node.js] express-session, mySQL 로그인 기능 구현 0. 목차 1. 개요 2. mySQL 3. 기본셋팅 / 파일 쪼개기 4. 기능개발 5.후기 1. 개요 mySQL 안한지 너무 오래됐다. 까먹을거 로그인기능 mySQL 이용해서 만들거다. 회원가입기능은 다음에.. 2. mySQL 데이터 베 kong-dev.tistory.com 위 포스팅에서 만든거에다가, 회원만 이용가능한 게시판을 만들거다.ㅎ 2. DB user table board table 이런 식으로 디비를 .. 2022. 2. 12.
[node.js] express-session, mySQL 로그인 기능 구현 0. 목차 1. 개요 2. mySQL 3. 기본셋팅 / 파일 쪼개기 4. 기능개발 5.후기 1. 개요 mySQL 안한지 너무 오래됐다. 까먹을거 로그인기능 mySQL 이용해서 만들거다. 회원가입기능은 다음에.. 2. mySQL 데이터 베이스에 요렇게 데이터 입력 해놨다. 이거 입력하는건 2022.02.03 - [경일/DATABASE] - [mySQL] mySQL 기본 사용법, CRUD(Create, Read, Update, Delete) [mySQL] mySQL 기본 사용법, CRUD(Create, Read, Update, Delete) 0.목차 1. 개요 2. CREATE DATABASE 3. CREATE TABLE 4. CRUD 1. 개요 https://kong-dev.tistory.com/122?c.. 2022. 2. 11.
[nodejs] express-session 이용해서 로그인 기능 구현 0. 목차 1. 개요 2. 기본세팅 및 임시데이터 생성 3. 라우터 나누기 4. 미들웨어 나누기 5. ?? 이젠 HTML도 쪼갠다고? 6. 기능구현 1. 개요 2022.02.09 - [경일/nodejs] - [nodejs] express-session 사용하기 [nodejs] express-session 사용하기 0. 목차 1. 개요 2. 기본 세팅 3. express-session / MemoryStore 설치 및 적용 1. 개요 2022.02.09 - [경일/nodejs] - [nodejs] 세션으로 구현한 로그인 기능 라우팅 [nodejs] 세션으로 구현한 로그인 기능 라우.. kong-dev.tistory.com 이전 포스팅에서 다룬 express-session 이용해서 로그인 기능 구현해볼거임 .. 2022. 2. 9.
[nodejs] express-session 사용하기 0. 목차 1. 개요 2. 기본 세팅 3. express-session / MemoryStore 설치 및 적용 1. 개요 2022.02.09 - [경일/nodejs] - [nodejs] 세션으로 구현한 로그인 기능 라우팅 [nodejs] 세션으로 구현한 로그인 기능 라우팅 0. 목차 1. 개요 2. express 라우터로 나누기 3. 미들웨어 나누기 1. 개요 2022.02.08 - [경일/nodejs] - [nodejs] 세션 이용해서 로그인기능 만들기 [nodejs] 세션 이용해서 로그인기능 만들기 0. 목차 1. 개요 2.. kong-dev.tistory.com 위의 포스팅에서 가라로 session 을 만들어서(그냥 빈객체 하나 생성해서 사용) session을 통한 로그인 기능을 구현했었다. 이번에.. 2022. 2. 9.
[nodejs] 세션으로 구현한 로그인 기능 라우팅 0. 목차 1. 개요 2. express 라우터로 나누기 3. 미들웨어 나누기 1. 개요 2022.02.08 - [경일/nodejs] - [nodejs] 세션 이용해서 로그인기능 만들기 [nodejs] 세션 이용해서 로그인기능 만들기 0. 목차 1. 개요 2. 세션 3. 세션으로 로그인기능 구현 1. 개요 오늘은 세션으로 로그인 기능을 구현하는걸 해보기로 함. 그럼 우선 세션이 뭔지 세션과 쿠키의 차이점은 뭔지 아는게 우선이다. 2. kong-dev.tistory.com 2022.02.08 - [경일/nodejs] - [nodejs] express 라우터기능/ 미들웨어 나누기로 파일 쪼개기 [nodejs] express 라우터기능/ 미들웨어 나누기로 파일 쪼개기 0. 목차 1. 개요 2. 라우터 쪼개기 .. 2022. 2. 9.
[nodejs] express 라우터기능/ 미들웨어 나누기로 파일 쪼개기 0. 목차 1. 개요 2. 라우터 쪼개기 3. 미들웨어 쪼개기 1. 개요 라우터가 뭘까? 이제껏 만들었던 server.js 들에 만들었던 app.get 또는 app.post 같은 애들을 전부 라우터라고 한다. https://kong-dev.tistory.com/128?category=998366 [nodejs] todoApp async await 으로 조지기 0. 목차 1. 개요 2. 프로미스 인스턴스 객체를 리턴하는 함수 만들기 3. 적용 4. 후기 1. 개요 https://kong-dev.tistory.com/127 [nodejs] todoApp 만들기 feat. mySQL 0. 목차 1. 개요 2. 기본세팅 3. CRUD 4... kong-dev.tistory.com 내가 만들었던 todoApp은 .. 2022. 2. 8.
[nodejs] 세션 이용해서 로그인기능 만들기 0. 목차 1. 개요 2. 세션 3. 세션으로 로그인기능 구현 1. 개요 오늘은 세션으로 로그인 기능을 구현하는걸 해보기로 함. 그럼 우선 세션이 뭔지 세션과 쿠키의 차이점은 뭔지 아는게 우선이다. 2. 세션 우선 쿠키는 https://kong-dev.tistory.com/129 [nodejs] 쿠키 먹는거 말고 0.목차 1. http 통신 2. 브라우저 3. 쿠키 1. http 통신 서버에 요청을 보낼때는 일정한 규격에 따라 요청을 해야한다. 그런데 이 규격만 맞춰 준다면 새로운 내용을 작성해서 보내줄 수도 있다. 이제 kong-dev.tistory.com 이런거다. ㅎ. 쿠키방식의 가장 큰 특징으로는 데이터가 브라우저에 저장된다는 점이다. 반면 세션은 쿠키를 전달하긴 하지만, 그 쿠키를 암호화 해서 .. 2022. 2. 8.
[nodejs] 쿠키 이용해서 로그인 / 로그아웃 해보기 0. 목차 1. 개요 2. 세팅 3. 페이지구성 4. 기능구현 5. 멍청이짓 수정 6. user data 2개 이상일 때 5. 멍청이짓 수정2 1. 개요 https://kong-dev.tistory.com/129 [nodejs] 쿠키 먹는거 말고 0.목차 1. http 통신 2. 브라우저 3. 쿠키 1. http 통신 서버에 요청을 보낼때는 일정한 규격에 따라 요청을 해야한다. 그런데 이 규격만 맞춰 준다면 새로운 내용을 작성해서 보내줄 수도 있다. 이제 kong-dev.tistory.com 쿠키가 뭔지 대충 알았으니까 쿠키를 이용해서 로그인과 로그아웃기능을 만들어볼거다. 2. 세팅 세팅을 먼저하자. 우선 필요한 라이브러리는 express랑 nunjucks 인듯하다. 그리고 exprss 업데이트 사용할수.. 2022. 2. 7.
[nodejs] 쿠키 먹는거 말고 0.목차 1. http 통신 2. 브라우저 3. 쿠키 1. http 통신 서버에 요청을 보낼때는 일정한 규격에 따라 요청을 해야한다. 그런데 이 규격만 맞춰 준다면 새로운 내용을 작성해서 보내줄 수도 있다. 이제껏, response body 영역만 작업을 했었는데, 이번에는 header 영역작업을 해볼거임. res.setHeader() method를 이용해서 response header에 새로운 텍스트를 추가함 첫번째 인수가 key로, 두번째 인수가 value로 들어간다. app.get('/', (req, res) => { res.setHeader('headerkey', 'headerValue'); res.render('index.html'); }); Dev tool → network →response .. 2022. 2. 7.
728x90
728x90

티스토리툴바