Logged In User #01

์ด๋ฒˆ์—๋Š” ์œ ์ €๋ฅผ ๊ธฐ์–ตํ•˜๋Š”๊ฑธ ๋งŒ๋“ค์–ด ๋ณผ๊ฑฐ๋‹ค.

๋ˆ„๊ฐ€ ๋กœ๊ทธ์ธ ํ–ˆ๋Š”์ง€ ๋ง์ด๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์‚ฌ์‹ค ๊ธฐ์–ตํ•œ๋‹ค๋Š” ๋ง์ด ์•ˆ ์–ด์šธ๋ฆด์ง€๋„ ๋ชจ๋ฅด๊ฒ ๋‹ค.

์™œ๋ƒํ•˜๋ฉด ๊ธฐ์–ตํ•œ๋‹ค๋Š”๊ฑด ์˜ค๋Š˜ ๋ญ”๊ฐ€๋ฅผ ๋ฐฐ์šฐ๊ณ  ์ž ์— ๋“ค์—ˆ๋‹ค๊ณ  ํ•ด๋ณธ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋‹ค์‹œ ์ผ์–ด๋‚˜๋ฉด ๋ฐฐ์šด๊ฑธ ๊ธฐ์–ตํ•˜๊ณ  ์žˆ์„๊ฑฐ๋‹ค. ํ•ธ๋“œํฐ ๋ฒˆํ˜ธ๋ฅผ ๊ธฐ์–ตํ•˜๊ณ  ์žˆ๋“ฏ์ด

์ž ์— ๋“ค๊ณ  ๋‹ค์‹œ ์ผ์–ด๋‚˜๋”๋ผ๋„ ํ•ธ๋“œํฐ ๋ฒˆํ˜ธ์„ ๊ธฐ์–ตํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ

๊ทธ๋Ÿฐ๋ฐ ์„œ๋ฒ„๋Š” ์ด๋ ‡๊ฒŒ ํ•  ์ˆ˜ ์—†๋‹ค. ์„œ๋ฒ„ํ•œํ…Œ๋Š” ๋ชจ๋“  ์š”์ฒญ์œผ๋กœ ๋ถ€ํ„ฐ id๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

์ด๊ฑธ ๋‹ค ๊ธฐ์–ตํ•  ์ˆ˜๋Š” ์—†์œผ๋‹ˆ๊นŒ ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ "๋„ˆ์˜ ํ•ธ๋“œํฐ ๋ฒˆํ˜ธ๋Š” ๋ญ๋‹ˆ?" ๋ผ๊ณ  ๋ฌผ์–ด๋ดค๋Š”๋ฐ

๋ˆ„๊ตฐ์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค๋ฉด id์นด๋“œ๋ฅผ ๋ฐ›์•„์„œ "์ด๊ฒŒ ๋„ˆ์˜ ํ•ธ๋“œํฐ ๋ฒˆํ˜ธ๊ตฌ๋‚˜!" ๋ผ๊ณ  ์•Œ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ž ์— ๋“ค์—ˆ๋‹ค ๋‹ค์‹œ ์ผ์–ด๋‚˜์„œ ํ•ธ๋“œํฐ ๋ฒˆํ˜ธ๊ฐ€ ๋ญ๋ƒ๊ณ  ๋‹ค์‹œ ๋ฌผ์–ด๋ณด๋ฉด

"๋„ˆ๊ฐ€ ๋ˆ„๊ตฐ๋ฐ?" ํ•˜๊ณ  ๋ฌผ์–ด๋ณด๊ณ  id์นด๋“œ๋ฅผ ๋ฐ›์•„์„œ id์นด๋“œ๊ฐ€ ์žˆ์œผ๋ฉด ํ•ธ๋“œํฐ ๋ฒˆํ˜ธ ์•Œ๋ ค์ค˜๋„

๋˜๊ฒ ๋„ค ํ•˜๊ณ  ์•Œ ์ˆ˜ ์žˆ๋Š”๊ฑฐ๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ์–ด๋–ค ์‚ฌ๋žŒ๋“ค๋„ ๊ธฐ์–ตํ•˜์ง€ ์•Š๋Š” ๊ฑฐ๋‹ค.

id์ •๋ณด๋ฅผ ๊ฐ€์ง„ DB๋ฅผ ๋งŒ๋“ค๊ณ  ๋ˆ„๊ตฐ๊ฐ€ id์นด๋“œ๋ฅผ ๋“ค๊ณ  ์ฐพ์•„์˜ค๋ฉด ๊ทธ๋•Œ ํ™•์ธํ•˜๋Š”๊ฑฐ๋‹ค.

๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ๊ธฐ์–ตํ•˜๋Š”๊ฑฐ๋ผ๊ณ  ๋งํ•˜๊ธฐ๋Š” ์–ด๋ ต๋‹ค. 1์ดˆ๋งˆ๋‹ค ๊นŒ๋จน๋Š” ์‚ฌ๋žŒ์ด๋ž‘ ๋Œ€ํ™”ํ•˜๋Š”๊ฑฐ๋ž‘ ๋˜‘๊ฐ™์€๊ฑฐ๋‹ค.

๊ทธ๊ฒŒ ๋ฐ”๋กœ ์„œ๋ฒ„์ด๋‹ค.

์ด์ œ ์—ฌ๊ธธ ๋ณด๋ฉด ์„ธ์…˜ DB๊ฐ€ ์žˆ๋Š”๋ฐ

_LJRIAPlxO7fUVAYnBkjUDGQgdzvap0E: {
    cookie: { originalMaxAge: null, expires: null, httpOnly: true, path: '/' }
  },

๋ญ˜ ํ• ๊ฑฐ๋ƒ๋ฉด userController๋กœ ๊ฐ€์„œ

์œ ์ €๊ฐ€ ๋กœ๊ทธ์ธํ•˜๋ฉด ๊ทธ ์œ ์ €์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์„ธ์…˜์— ๋‹ด์„๊ฑฐ๋‹ค.

  const ok = await bcrypt.compare(password, user.password);
  if (!ok) {
    return res.status(400).render("login", {
      pageTitle,
      errorMessage: "Wrong password",
    });
  }
  req.session.loggedIn = true;
  req.session.user = user;
  return res.redirect("/");
};

๊ทธ๋ฆฌ๊ณ  ๊ฐ ์œ ์ €๋งˆ๋‹ค ์„œ๋กœ ๋‹ค๋ฅธ req.session object๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋Š”๊ฑธ ๊ธฐ์–ตํ•œ๋‹ค.

์™œ๋ƒํ•˜๋ฉด ๋ชจ๋‘ ์„œ๋กœ ๋‹ค๋ฅธ id๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋‹ˆ๊น ๋ง์ด๋‹ค. req.session.loggedIn = true๋ผ๊ณ  ์“ด๋‹ค.

๊ทธ๋ฆฌ๊ณ  req.session.user๋กœ๋Š” DB์—์„œ ์ฐพ์€ user๋ฅผ ์“ธ๊ฑฐ๋‹ค.

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์„ธ์…˜์— ์ •๋ณด๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š”๊ฑฐ๋‹ค.

๊ฐ ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ์„œ๋กœ ๋‹ค๋ฅธ ์„ธ์…˜์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋Š”๊ฑธ ๊ผญ ๊ธฐ์–ตํ•œ๋‹ค.

๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋˜‘๊ฐ™์€ ์„ธ์…˜์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๊ฒŒ ์•„๋‹ˆ๋‹ค. ๋‹ค ๋‹ค๋ฅด๋‹ค.

์ด์ œ ์„ธ์…˜์— loggedIn์„ true๋กœ ์ถ”๊ฐ€ํ–ˆ๊ณ  user๋ฅผ ์„ธ์…˜์— ์ €์žฅํ•˜๊ณ  ์žˆ๋‹ค.

์ƒˆ๋กœ๊ณ ์นจํ•˜๊ณ  login์œผ๋กœ ๊ฐ€๋ณธ๋‹ค. ์„ธ์…˜ DB๋ฅผ ํ•œ๋ฒˆ ํ™•์ธํ•˜๊ณ  ๋กœ๊ทธ์ธ์„ ํ•ด๋ณธ๋‹ค.

๋ณด๋‹ค์‹œํ”ผ template์—๋Š” ์•„๋ฌด ๋ณ€ํ™”๊ฐ€ ์—†์ง€๋งŒ ์„ธ์…˜ DB๋ฅผ ํ™•์ธํ•ด๋ณด๋ฉด ์ฟ ํ‚ค id์ธ ์„ธ์…˜

id๊ฐ€ ์žˆ๋Š”๊ฑธ ๋ณผ์ˆ˜ ์žˆ๋‹ค. loggedIn์ด true์ด๊ณ  user๋„ ์žˆ๋‹ค.

์ด์ œ ๋‹ค์‹œ Home์œผ๋กœ ๊ฐ€์„œ Search๋กœ ๊ฐ€๋ณธ๋‹ค. Upload Video๋กœ๋„ ๊ฐ”๋‹ค๊ฐ€

๋‹ค์‹œ Home์œผ๋กœ ๊ฐ€๋ณธ๋‹ค. ๋˜ Search๋กœ ๊ฐ€๋ณด๊ณ , ์ด๋ ‡๊ฒŒ ํ™”๋ฉด์„ ์ด๋™ํ• ๋•Œ๋งˆ๋‹ค

๋ฐฑ์—”๋“œ์—์„œ ๋‚ด๊ฐ€ ๋กœ๊ทธ์ธ ํ–ˆ๋‹ค๋Š”๊ฑธ ์•Œ๊ณ  ์žˆ๋‹ค. ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €๋กœ๋„ ํ•ด๋ณธ๋‹ค.

๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €์—์„œ Search๋กœ ๊ฐ€๋ณด๋ฉด ์ด์ œ 2๊ฐœ์˜ ์„ธ์…˜์ด ์ƒ๊ธด๊ฑธ ๋ณผ์ˆ˜ ์žˆ๋‹ค.

๋กœ๊ทธ์ธํ•œ ์œ ์ €๊ฐ€ ํ•˜๋‚˜ ์žˆ๊ณ  ๋กœ๊ทธ์ธ ํ•˜์ง€ ์•Š์€ ์œ ์ €๋„ ํ•˜๋‚˜ ์žˆ๋‹ค.

์ด๋ ‡๊ฒŒ ๋ˆ„๊ฐ€ ๋กœ๊ทธ์ธํ–ˆ๋Š”์ง€ ์•ˆํ–ˆ๋Š”์ง€ ์•Œ์ˆ˜ ์žˆ๋Š”๊ฑฐ๋‹ค.

์ด์ œ ์ด๊ฑฐ์— ๋งž๊ฒŒ template์„ ์ˆ˜์ •ํ•ด ๋ณผ๊ฑฐ๋‹ค. ๋งŒ์•ฝ session.loggedIn์ด true๋ผ๋ฉด

Join๊ณผ Login์„ ๊ฐ€๋ฆด๊ฑฐ๋‹ค. ๋Œ€์‹  Logout์„ ๋ณด์—ฌ์ฃผ๊ฒŒ ๋งŒ๋“ค๊ฑฐ๋‹ค.

๊ทธ๋Ÿฌ๋ฉด ํ…œํ”Œ๋ฆฟ์—์„œ ์„ธ์…˜์— ์ ‘๊ทผํ• ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•ด๋ณธ๋‹ค.

base.pug์—์„œ

body 
        header
            h1=pageTitle
            nav 
                ul 
                    li  
                        a(href="/") Home
                    if !req.session.loggedIn
                        li 
                            a(href="/join") Join
                        li 
                            a(href="/login") Login
                    li  
                        a(href="/search") Search
                    li 
                        a(href="/videos/upload") Upload Video

๋งŒ์•ฝ loggedIn์ด ์•„๋‹ˆ๋ผ๋ฉด Join๊ณผ Login์„ ๋ณด๊ฒŒ ๋ ๊ฑฐ๋‹ค.

base.pug์—์„œ req.session.loggedIn์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•ด๋ณธ๋‹ค.

์ƒˆ๋กœ๊ทธ์นจํ•ด๋ณด๋ฉด ... ์•ˆ๋œ๋‹ค. ๊ดœ์ฐฎ๋‹ค ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์œผ๋กœ ํ•˜๋ฉด ๋œ๋‹ค.

๋ˆ„๊ฐ€ user์ธ์ง€ ์•Œ์ˆ˜ ์žˆ๊ธฐ์— ์—ฌ๊ธฐ ์žˆ๋Š” ์„ธ์…˜ DB์—์„œ ๋ง์ด๋‹ค.

user: {
      _id: '625942ace3564e09811a5f21',
      email: 'pkpanda@naver.com',
      username: 'Cyber Lover',
      password: '$2b$05$WMO/VH/yctvvPJST0SyLq.QRQfSNeLJ5zAJPFfRMwLgg5ZFq1KtBm',
      name: 'Mercury',
      location: 'NYC',
      __v: 0
    }

๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ๋ˆ„๊ฐ€ ์œ ์ €์ธ์ง€๋Š” ์•Œ์ˆ˜ ์žˆ๋Š”๋ฐ ๊ทธ ์ •๋ณด๋ฅผ pugํ…œํ”Œ๋ฆฟ๊ณผ ๊ณต์œ ํ•˜์ง€ ๋ชปํ•˜๋Š” ๊ฑฐ๋‹ค.

์ด๊ฑธ ๊ณต์œ  ํ• ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค. ์ด๊ฑด ๋‹ค์Œ ํŒŒํŠธ์—์„œ ํ•ด๋ณด๊ธฐ๋กœ ํ•œ๋‹ค.

์–ด๋–ค ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋Š”์ง€์— ๋Œ€ํ•ด ์ž˜ ์ดํ•ดํ•˜๊ณ  ๋„˜์–ด๊ฐ€๋Š”๊ฒŒ ์ค‘์š”ํ•˜๋‹ค.

req.session object์— ์ •๋ณด๋ฅผ ์ €์žฅํ•˜๊ณ  ์žˆ๋‹ค. ์œ ์ €๊ฐ€ ๋กœ๊ทธ์ธ์— ์„ฑ๊ณตํ–ˆ๋Š”์ง€ ์•ˆํ–ˆ๋Š”์ง€

์ƒ๊ด€์—†์ด ๋ง์ด๋‹ค. ์–ด๋–ค ์ •๋ณด๋“ ์ง€ ์ถ”๊ฐ€ ํ• ์ˆ˜ ์žˆ๋Š”๋ฐ loggedIn๊ณผ user๋ผ๋Š” ์ •๋ณด๋ฅผ ์ถ”๊ฐ€ํ–ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์„ธ์…˜์ด ๋‘๊ฐ€์ง€๊ฐ€ ์žˆ๋Š”๋ฐ ํ•˜๋‚˜๋Š” ๋กœ๊ทธ์ธํ•œ ์„ธ์…˜์ด๊ณ  ๋‹ค๋ฅธ ํ•˜๋‚˜๋Š” ๋กœ๊ทธ์ธํ•˜์ง€ ์•Š์€ ์„ธ์…˜์ด๋‹ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ