일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Flutter
- javscript
- TypeScript
- DART
- pug
- JavaScript
- GRID
- CSS
- NextJs
- 리액트
- nodejs
- 자바스크립트
- ES6
- ECMAScript
- HTML
- node.js
- Component
- frontend
- Mongoose
- form
- heroku
- Session
- react
- MongoDB
- API
- graphQL
- express
- backend
- clonecoding
- CLONE
- Today
- Total
목록JavaScript (192)
Enjoy Programming

바로 들어가자 npm i express-session 익스프레스 세션을 설치 해주고 app.js에 import passport로 초기화및 세션을 저장해주기 전에 사용해 주자 session은 option을 지정해 주는데 쿠키나 도메인을 원하는데로 바꿔줄 수 있고 유효기간도 설정해 줄 수 있다. 그중 중요한 옵션인 secret을 지정해주자 - random string으로 쿠키에 있는 session ID를 암호화 하기 위한 것이다. session id를 보낼때 실제로 그 값을 그대로 보내진 말자.. 중요정보다 암호화 해주자 randomkeygen.com/ RandomKeygen - The Secure Password & Keygen Generator RandomKeygen is a free mobile-fri..

자 이제 기존에 설정한 로컬 미들웨어를 수정해보자 기존에는 가짜 인증을 만들어서 로그인을 시켰었고 이제는 실제 정보가 있다 res.locals.user = req.user - passport가 user정보를 object로 만들어서 이 정보를 request에 올려준다. 이로써 template들이 local로 유저정보에 접근할 수 있게 해준다. 아 그리고 한가지 or null을 쓴 이유는 유저 정보가 없으면 템플릿에 뿌려줄 정보가 없다.. 이때는 null을 넘겨주도록 하자. 그리고 app.js로 가자 cookieparser 밑에 passpor모듈을 임포트 해줬다. 그리고 passport.js도 import 해주자. 그리고서 localsmiddleware위에 이 두녀석을 사용해 주자. 이렇게 작성하면 cook..

자 이제 사용자 인증을 쉽게 구현해 줄 passport Js를 사용해 봅시다. 앞서 포스팅한 쿠키와 세션인증을 도와줄 녀석이다. 자 쿠키와 세션 다시 한번 복기 하자. 유저를 기억하는 방법중 한가지는 유저에게 쿠키를 보내주는 것이다. 세션은~~ 서버와 브라우저간에 어떤 활동을 했는지 기억하는 것을 말한다. 어떤 사이트에 로그인 했다면 현재 사용하고 있는 브라우저와 내가 만든 백엔드 사이에 세션이 존재한다. 세션은 유효기간이 있기 때문에 일정시간이 지나면 사라진다. http는 stateless이기 때문에 브라우저와 서버가 한번의 요청과 응답이 끝나고나면 session이 종료된다. 유저가 백엔드에 요청을 할때마다 누가 요청했는지 지속적으로 알 수 있어야 하는데 이것을 유지시켜 주기 위해 세션Id를 쿠키에 담..
사용자 인증을 구현해 줄 passport js 쿠키 : 브라우저에 저장할 수 있음 , 모든 request에 대하여 back-end로 전송될 정보들이 담겨 있음 예를 들어 회원 가입 정보같은 것을 유저가 입력하고 submit하면 쿠키의 형태로 브라우저에 담기고 브라우저는 이 쿠키들을 서버로 자동적으로 보내준다. passport는 쿠키를 생성하고, 브라우저에 저장하고 유저에게 해당 쿠키를 전송한다. passport-local-mongoose 모듈 : 사용자 기능을 추가 (user functionality) ------------------------------------------------------------ user model 생성 passport-local-mongoose 설치 ( 패스워드 설정, 확..

자바스크립트가 es6로 넘어오면서 기본값 함수 매개변수(default function parameter)를 사용하면 값이 없거나 undefined일 경우 이름 붙은 매개변수를 기본값으로 초기화 할 수 있게 되었다. mutiply라는 함수에 a, b 두개를 매개변수로 주고 함수를 실행시 인자가 하나만 들어가거나 아에 안들어가는 상황이 생기면 NaN이 리턴되었다 default값이 없었던 시절에는 저걸 해결할 방법이 있었나 모르겠지만 es6에서는 위처럼 a= 2, b= 3이라는 기본값을 주고 만약 인자가 정상적으로 두개가 들어온다면 들어온 인자값으로 return 구문을 실행하지만 만약 위처럼 5하나만 들어온다면 b의 default값인 3이 기본 인자로 전달 되어 5 * 3이 리턴된다. mdn을 살펴보자 jav..

이번엔 자바스크립트 함수중 몇가지 함수를 살펴보자(배열에서 쓰이는) 1) Array.prototype.find() 이 함수는 주어진 함수를 만족하는 첫 번째 요소의 값을 반환한다. 없다면 undefined를 반환. find()함수 괄호 안의 매개 변수는 callback 함수가 오고 위 사진처럼 arrow function으로 무지 간단하게 함수가 구현되었다. es6이전의 방식이라면 이렇게 코드량이 많아진다. 자 좀더 설명하자면 find함수는 callback함수가 true를 반환할 때까지 해당 배열의 각 요소에게 callback함수를 실행한다. 만족하는 요소를 찾았다면 해당 요소를 즉시 반환하고, 못찾았다면 undefined를 반환한다. find는 호출대상인 배열을 mutate하지 않는다. 그리고 처리할 배..