1. Main Page - asdfgl98/Project-CodeBuddy GitHub Wiki

๐Ÿ“Œ Main ํŽ˜์ด์ง€ ์ฃผ์š”๊ธฐ๋Šฅ

โœ… Session ์œ ๋ฌด์— ๋”ฐ๋ฅธ ์„œ๋น„์Šค ์ด์šฉ ์ œํ•œ

  • nunjucks ๋ฌธ๋ฒ•์„ ์ด์šฉํ•ด Session ๊ฐ’ ์œ ๋ฌด์— ๋”ฐ๋ผ ์„œ๋น„์Šค ์ด์šฉ ๊ฐ€๋Šฅ ๋ฐ Loginํƒญ ์ •๋ณด ๋ณ€๊ฒฝ
  • ๋น„ ๋กœ๊ทธ์ธ ์ƒํƒœ์—์„œ Code Chat ํด๋ฆญ ์‹œ, Login ํŽ˜์ด์ง€๋กœ ์ด๋™
  • ๋น„ ๋กœ๊ทธ์ธ ์ƒํƒœ์—์„œ Code Arena ํด๋ฆญ ์‹œ, Login ํŽ˜์ด์ง€๋กœ ์ด๋™
  • ๋น„ ๋กœ๊ทธ์ธ ์ƒํƒœ์—์„œ Login ํด๋ฆญ ์‹œ, ๋กœ๊ทธ์ธ ๋ฐ ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€๋กœ ์ด๋™
  • ๋กœ๊ทธ์ธ ์‹œ, DB์—์„œ ์‚ฌ์šฉ์ž ์ •๋ณด ๊ฒ€์ƒ‰ ํ›„ Session์œผ๋กœ ์ €์žฅ ๋ฐ Login ํƒญ ์‚ฌ์šฉ์ž ์ด๋ฆ„์œผ๋กœ ๋ณ€๊ฒฝ

๐Ÿ’ป CodeDetail

๋กœ๊ทธ์ธ ์œ ๋ฌด์— ๋”ฐ๋ฅธ ๋ผ์šฐํ„ฐ ์ฒ˜๋ฆฌ


routes -> page.js (line 37)

//Code Chat ์ฑ„ํŒ…๋ฐฉ ๋ฆฌ์ŠคํŠธ http://localhost:3000/page/CodeChat
router.get('/CodeChat',(req,res)=>{
    let seName = req.session.userName
    let seLevel = req.session.userlevel
    let seLogin = req.session.login
    // ๋น„ ๋กœ๊ทธ์ธ ์ƒํƒœ์—์„œ ์ ‘์† ์š”์ฒญ์‹œ, ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋กœ ์ด๋™
    // ๋กœ๊ทธ์ธ์‹œ ์ •์ƒ์ ์œผ๋กœ ์ด๋™
    if(seLogin){
        res.render('codeChatList',{login : seLogin, name : seName, level : seLevel})
    }
    else{
        res.render('join')
    }
})

//Code Arena ์ฑ„ํŒ…๋ฐฉ ๋ฆฌ์ŠคํŠธ http://localhost:3000/page/CodeArena
router.get('/CodeArena',(req,res)=>{
    let seName = req.session.userName
    let seLevel = req.session.userlevel
    let seLogin = req.session.login
        // ๋น„ ๋กœ๊ทธ์ธ ์ƒํƒœ์—์„œ ์ ‘์† ์š”์ฒญ์‹œ, ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋กœ ์ด๋™
        // ๋กœ๊ทธ์ธ์‹œ ์ •์ƒ์ ์œผ๋กœ ์ด๋™
        if(seLogin){
        res.render('codeArenaList',{login : seLogin, name : seName, level : seLevel})
        }
        else{
            res.render('join')
        }
})
Session ์œ ๋ฌด์— ๋”ฐ๋ฅธ ๋ณด์—ฌ์ง€๋Š” html ์š”์†Œ ๋ณ€๊ฒฝ


Main.html (line 147)

 <!-- ์„ธ์…˜ ๋กœ๊ทธ์ธ ์Šคํฌ๋ฆฝํŠธ -์ง€ํ›ˆ- -->
  <script>
    // ๋กœ๊ทธ์ธ ํ–ˆ์„ ์‹œ ์‚ฌ์šฉ์ž ์ด๋ฆ„ ํ‘œ์‹œ
    let login = '{{login}}'
    let logout = '{{logout}}'

    if (login) {
      document.querySelector('#login_btn').style.display = 'none'
      document.querySelector('#userInfo_btn').style.display = 'inline'
    }
    if (logout) {
      document.querySelector('#login_btn').style.display = 'inline'
      document.querySelector('#userInfo_btn').style.display = 'none'
    }

๐Ÿ–ผ๏ธ Preview

Main.gif

main-session

โš ๏ธ **GitHub.com Fallback** โš ๏ธ