들어가며
- Express를 공부하면서 작성해본 연습용 코드입니다.
목표
- 로그인을 하는 것처럼 만들어보기
- 회원가입 페이지에서 사용자가 적은 내용을 전달 받는다.
- app.set을 이용해 사용자가 전달해준 값을 저장한다.
- 빈 배열에 전달받은 값들을 모두 저장해 놓는다.
- 로그인 페이지에서 사용자가 적은 내용을 전달 받는다.
- 로그인 페이지에서 사용자가 적은 내용과 배열에 저장된 값을 비교해서 로그인 성공여부를 결정한다.
- 로그인에 성공하면 메인페이지에서 닉네임을 출력한다.
파일 목록
📦express_practice
┣ 📂public
┃ ┣ 📂css
┃ ┃ ┗ 📜index.css
┃ ┗ 📂js
┃ ┃ ┗ 📜index.js
┣ 📂views
┃ ┣ 📜index.html
┃ ┣ 📜join.html
┃ ┣ 📜login.html
┃ ┗ 📜welcome.html
┣ 📜.gitignore
┣ 📜package-lock.json
┣ 📜package.json
┗ 📜server.js주요 Code
server.js
app.get("/", (req, res) => {
const user = app.get("login");
if (user !== undefined) {
const nickname = user["nickname"];
res.render("index", { nickname: `${nickname}님 안녕하세요` });
} else {
res.render("index");
}
});- localhost:3000으로 들어오면 app.settings에 login이라는 key로 설정된 값이 있는지 체크한다.
- 값이 있다면 로그인을 했다고 생각해 닉네임과 안녕하세요라는 메시지를 출력한다.
[로그인 전]
[로그인 후]
app.post("/join", (req, res) => {
const { id, pw, nickname } = req.body;
app.set("login", { id, pw, nickname });
user.push({ id, pw, nickname });
res.redirect("/welcome");
});- 회원가입 페이지에서 사용자가 작성한 값을 받아 app.settings에 login이라는 key로 저장한다.
- 전역에 선언해둔 user 배열에 추가해준다.
- 환영 페이지로 이동시켜 준다.
app.get("/welcome", (req, res) => {
const login = app.get("login");
app.set("login", undefined);
res.render("welcome", login);
});- 환영 페이지에서 app.settings에 login이라는 key로 저장된 값을 불러와 login 변수로 받는다.
- app.settings에 login을 초기화 시켜준다.
- login 변수를 환영 페이지에 전달해 준다.
const isIdPwCorrect = (id, pw) => {
for (let i = 0; i < user.length; i++) {
if (user[i]["id"] === id && user[i]["pw"] === pw) {
app.set("login", { id: user[i]["id"], pw: user[i]["pw"], nickname: user[i]["nickname"] });
return true;
}
return false;
}
};- id와 pw를 체크하는 함수이다.
- 매개 변수로 id, pw를 받아서 user 배열에 있는 값들과 비교해 일치하면 true 아니면 false를 리턴해준다.
app.post("/login", (req, res) => {
const { id, pw } = req.body;
if (isIdPwCorrect(id, pw)) {
res.redirect("/");
} else {
res.render("login");
}
});- 로그인 페이지에서 사용자가 작성한 값을 받아 id와 pw 변수로 받는다.
- isIdPwCorrect 함수에 id, pw를 인자로 전달해주고 결과를 리턴받는다.
- 로그인에 성공했다면 메인 페이지로 가게 되고 실패 했다면 login 페이지를 다시 로드한다.
