전체 글 (157) 썸네일형 리스트형 쿠키의 속성들 내가 만든 cookies~~~ 너를 위해 구웠지, but u know that it aint for free 어쩌면 뉴진스는 이미 세션과 쿠키에 대한 이해를 끝낸것일수도 있겠다는 생각을 한다. 1. secrets 우리가 쿠키에 sign 할 때 사용하는 string이다. sign을 하는 이유는 백엔드가 쿠키를 줬다는것을 보여주기 위함이다. 누군가가 이 secret string을 훔쳐서 나인척을 할 수 있기 때문에 이는 보호 되어야 한다. 2. domain 해당 쿠키를 만든 백엔드가 누구인지 알려준다. 나의 경우에는 localhost 이다. 브라우저는 도메인에 따라 쿠키를 저장하도록 되어있고, 쿠키는 도메인에 적혀있는 백엔드로만 전송된다. 3. expires 말 그대로 세션이 만료되는 시간이다. defaul.. 로그인 한 사용자에게만 세션을.. 현재 기튜브는 해당 사이트를 방문한 모든 all of them 에게 세션을 부여하고 있다. 이는 좋지 않은 방법이다. 로그인을 하지 않고 단지 웹사이트를 구경하기 위해 온 사람이거나, 그냥 이유없이 실수로 들어온 사람이거나 상관없이 모두 세션을 부여하는건 db의 낭비이다. 따라서 나는 로그인 한 사람에게만 세션을 부여하고 싶다. app.use(session({ secret: "Hello!", resave: false, saveUninitialized: false, store: MongoStore.create({ mongoUrl: "mongodb://127.0.0.1:27017/kitube" }), })); 이 코드는 이전 코드와 달리 resave 와 saveUninitialized 가 false 이다. .. MongoStore 지금까지는 세션이 있기는 했지만 서버가 재시작 되거나 서버를 껐다가 키면 해당 세션이 전부 사라져 있었다. 이는 기본적으로 세션이 서버의 메모리에 저장되고 있었기 때문에 벌어진 일이다. 내가 원하는 것은 서버가 재시작 되어도, 세션이 유지되어 사용자가 로그인했는지 등의 정보를 알고 싶은 것 이기 때문에 세션을 몽고와 연결하여 사용 해야 한다. app.use(session({ secret: "Hello!", resave: true, saveUninitialized: true, store: MongoStore.create({ mongoUrl: "mongodb://127.0.0.1:27017/kitube" }), })); 일단 npm i connect-mongo 를 설치하고, MongoStore을 import.. 세션 사용하기 세션을 사용하여 특정 유저가 로그인 했는지, 등을 알 수 있으므로 로그인 할 때 나는 세션 객체에 값을 추가 해야 한다. 로그인을 담당하는 postLogin 함수에 다음과 같은 코드를 작성한다. req.session.loggedIn = true; req.session.user = user; 아까 말했듯이 세션은 객체와 같아서 원하는 값을 추가할 수 있다. 위의 코드와같이 loggedIn 이라는 키 값에 true 라는 밸류를 넣어 해당 유저가 로그인 해 있는지를 알 수 있다. 또, user라는 키 값에 우리가 findOne으로 가져온 유저정보를 넣을 수 있다. 이제 나는 pug 템플릿에서 해당 유저가 로그인이 안 되어있는 상태라면, 네비게이션 바에 홈,회원가입,로그인,검색,업로드 를 보여주고, 로그인이 되.. 세션 & 쿠키 로그인을 했다면, 브라우저가 로그인한 사용자에 대한 정보를 알고 있어야 해당 사용자가 구독한 채널들, 사용자에게 추천해줄 영상 등등을 보여줄 수 있다. 이럴때 알아야하는게 세션과 쿠키이다. 1. 쿠키 사용자가 어떤 사이트에 접속했을때, 브라우저는 서버로 요청을 보낸다. 그리고 서버는 이에대한 응답을 보내주면서 쿠키를 같이 보내준다. 이 쿠키는 나중에 사용자가 다시 접속 했을때 서버로 다시 보내주면서 "전에 왔던 나에요!" 와 같은 역할을 하게 한다. 그리고 이 쿠키에는 다른 정보도 들어갈 수 있어서 예를들어 내가 "영어로 된 페이지로 보여줘" 라는 정보를 쿠키에 담아서 서버에 요청했다면 , 나중에 다시 방문했을때 서버는 쿠키를 받고 영어로된 페이지를 보여줄 것이다. 2. 세션 서버는 사실 우리를 항상 까.. 로그인 페이지 사용자 계정을 만들었다면 로그인을 해야한다. hr div span 이미 계정이 있으신가요? a(href="/login") 로그인 하기 → 일단 회원가입을 담당하는 html인 join.pug 에 위와같은 코드를 작성해서 이미 계정이 있는 사람들은 login.pug로 연결해주고 로그인 할 수 있게 만들었다. extends base block content if errorMessage span=errorMessage form(method="POST") input(name="username",type="text", required, placeholder="사용자 이름") input(name="password",type="password", required, placeholder="비밀번호") input(type.. Form validation Form validation은 쉽게 말해서 사용자 이름이 이미 사용중인 이름인지, 이메일이 이미 가입된 이메일인지 등의 유효성을 검사하는 것이다. 1. 사용자 이름 & 이메일이 이미 가입된 유저와 같은 경우 const { name, username, email, password, password2, location } = req.body; const usernameExists = await User.exists({ $or: [{ username }, { email }] }); if (usernameExists) { return res.status(400).render("join", { pageTitle: "회원가입", errorMessage: "이미 사용중인 이름/이메일 입니다." }); } 일단 유저가.. 사용자 비밀번호 해싱 이전의 코드대로 사용자 정보를 디비에 저장하면 비밀번호가 그대로 노출되어서 큰일난다. 그래서 해싱이라는 기술을 사용한다. 이는 문자열을 이해할 수 없는 문자열로 바꾸어주는 기능을 한다. 일단 해싱을 사용하기 위해 설치를 해야한다. npm i bcrypt 그리고 bcrypt.hash(해싱 이전의 비번, 해싱횟수, 콜백함수) 를 사용한다. 우리는 사용자 정보가 create되기 전에 해싱을 하고 저장하고 싶기 때문에, 미들웨어를 사용한다. 스키마를 만들었던 파일로와서 해당 스키마가 모델링 되기전에 .pre 메서드를 사용해준다. userSchema.pre("save", async function () { console.log("사용자 비번:", this.password); this.password = await.. 이전 1 2 3 4 5 6 ··· 20 다음
