🌱 → 🌳

📌 passport : 로그인 기능을 다방면으로 도와주는 모듈 google, facebook, github 등 소셜 로그인 구현을 위한 기능 제공 ✅ passport 설치 소셜로그인이 아닌 local 방식 구현을 위해 passport-local도 같이 설치 npm i passport npm i passport-local 서버 코드에 모듈 추가(passport: 세션을 사용) const passport = require('passport'); const LocalStrategy = require('passport-local').Strategy; // Session app.use( session({ secret: 'bay', resave: false, saveUninitialized: true, cookie..

📌 session : 서버의 쿠키 📍 HTTP Session 이란? 브라우저가 아닌 서버에 저장되는 쿠키 사용자가 서버에 접속한 시점부터 연결을 끝내는 시점을 하나의 상태로 보고 유지하는 기능을 함 -> 로그인 유지 서버는 각 사용자에 대한 세션을 발행하고 서버로 접근(request)한 사용자를 식별하는 도구로 사용 쿠키와 달리 저장 데이터에 제한 없음 만료 기간 설정이 가능하지만, 브라우저가 종료되면 바로 삭제 📍HTTP Session의 동작 방식 사용자가 최초로 서버 연결을 하면 하나의 session-id(임의의 긴 문자열)가 발행 발행 된 session-id는 서버와 브라우저의 메모리에 쿠키 형태로 저장됨 서버는 사용자가 서버에 접근 시, 쿠키에 저장된 session-id를 통해 사용자를 구분하고 ..

📌 Cookie : HTTP 쿠키는 서버가 사용자의 웹 브라우저에 전송하여 저장하는 작은 데이터 저장소 JS의 객체처럼 key 값과, data가 들어 있음 브라우저는 쿠키로 데이터를 저장해 두었다가, 동일한 서버에 다시 요청을 보내게 될 때 쿠키에 저장된 정보를 함께 전송 서버에서는 쿠키를 통해 요청이 어떤 브라우저에 들어왔는지(혹은 요청이 동일한 브라우저에서 들어왔는지) 등을 파악할 수 있음 서버에 저장해야 할 정보를 관리 -> 로그인 정보, 장바구니, 팝업 하루 동안 안 보기 등 중요한 정보(이름, 데이터, 만료일, 경로 등)는 로컬에 남게 되므로 절대 저장해서는 안됨 ✅ Cookie의 동작 방식 ✅ 프론트에서 쿠키 사용하기 (사용 X, 편법) document.cookie로 사용 expires값과 브..

front의 form으로 back에게 데이터 보내기 form XMLHttpRequest Jquery Fetch() 📌 users.ejs에 form 추가 📍form action : 보내고자 하는 주소 값 method: 보내는 method 설정(get, post 만 가능) input의 name 속성은 서버에서 받을 때 필드 값이 됨 버튼 type으로 submit을 하면 해당 폼의 내용을 지정한 방식 + 주소로 전달 아이디 이름 이메일 Submit ✅ body-parser 모듈 사용 : form에서 전송 된, 정보를 req.body에 담에서 obj로 전달해주는 역할 body-parser를 사용하지 않으면 아래와 같은 코드로 데이터를 body에 넣은 다음, 인코딩처리까지 해줘야함 (body-parser는 자동으..

서버 err가 발생하면 err를 발생시킨 다음 err 메시지와 status 코드를 전달해 줘야함 📍error 던지기 router.get('/:id', (req, res) => { const userData = USER.find((user) => user.id === req.params.id); if (userData) { res.send(userData); } else { const err = new Error('ID not found'); err.statusCode = 404; throw err; } }); 이런 방식으로 err가 발생한 지점에서 new Error를 통해 err 객체를 만들어서 throw로 전달 이런 식으로 err가 발생하는데 이런 페이지는 가급적 피하는 편이 좋으므로 app.js에서 ..

📌 view engine ✅ EJS 가장 기본이 되는 view engine HTML 문법 사용 레이아웃 기능 X ✅ pug HTML 문법을 단순화하여 사용 레이아웃 기능 O ✅ nunjucks HTML 문법을 그대로 사용 레이아웃 기능 O ✔️ EJS 사용하기 npm i -d ejs express에 어떤 view engine 사용할지 알리기 (서버코드) app.set('view engine', 'ejs'); 폴더 가장 외부에 views 폴더 만들고 내부에 index.ejx 파일 만들기 localhost:port번호/users 기본 요청이 들어오면 index.js 파일 띄우기 userRouter.get('/', (req, res) => { res.render('index'); }); 📍 ejs 동적 웹 시..

📌 file-system : node의 모듈이라 commonJS 방식으로 불러 올 수 있음 const fs = require('fs'); ✅ readFile : 파일을 읽을 때 사용하는 메소드 파일을 읽는 것도 시간이 필요한 작업이므로 -> callback 사용 fs.readFile('파일위치','유니코드포맷',callback(err, data) {}) err : 파일 읽기가 잘 안되었을 때, error 코드 반환 data: 파일 읽기가 잘 되었을 때, 읽은 data 반환 const fs = require('fs'); fs.readFile('readme.txt', 'utf-8', (err, data) => { if (err) { console.log(err); } else { console.log(dat..

📌 DOTENV : 중요한 정보(서버 접속 정보 등)을 외부 코드에서 확인이 불가능 하도록 도와주는 모듈 📍 설치 npm i dotenv -s 📍 app.js에 모듈 호출하기 require('dotenv').config(); 📍 .env파일을 최상단 폴더에 만들기 중요한 정보를 .env 파일에 저장 (PORT, mongoDB URI 등 ) 해당 정보가 필요한 곳에서 process.env.저장명 으로 사용 const uri = process.env.DB_URI; 📍 .env 파일은 중요한 정보이기 때문에 git에 등록하지 않음 ! (gitignore에 등록) 따라서, 해당 파일은 직접 업로드 하면서 사용 ✅ 참고, .gitignore이 안될때 ! git도 캐쉬를 사용하기 때문에 로컬에 해당 내용이 남아 있..