💬 잡담

---

저번 주부터 이번 주까지 배운 내용은 모두 백엔드 관련이었다.

서버 코드를 구현할 때 당시 이 챕터만 넘기면 다시 프론트를 배우지 않을까?
하는 생각이 있었지만 정신 차려보니 더욱더 심화적인 백엔드를 배우고 있었다.

ㅋㅋㅋㅋㅋㅋ...
나쁘지는 않지만, 프론트엔드를 빨리 배우지 않으면 감도 잃어버릴 것 같았고
무엇보다 이러다가 그냥 풀스텍을 해버리는 거 아니야? 하는 쓸데없는 걱정도 늘었다.

노마드코더 Next.JS 강의도 괜스래 듣고 있던 2주였다.

그동안 설렁설렁 진행했던 것은 아니므로, 수업 들으면서 남겨놨던
세세한 기록들을 이제 풀어보도록 하겠다! 후우 💨💨

🔥 Review

---

🍪 Cookie

기능 구현하기

1. 클라이언트 : 서버로 로그인 요청을 보내기
   a. 아이디, 비밀번호를 입력해서 로그인 버튼을 클릭한다.

2. 서버 : 로그인 요청을 처리하기
   a. 요청으로 전달받은 아이디와 비밀번호가 회원가입이 되어있는 정보인지 확인한다.
   b. 회원이라면, 응답에 쿠키와 회원 정보를 담아 전달한다.

3. 클라이언트 : 응답을 받아 React 상태를 업데이트

4. 클라이언트 : 화면 리렌더링 → 조건부 렌더링으로 마이페이지 표시
   만약 로그인할 때 ‘로그인 유지’ 옵션을 선택했다면, 해당 페이지에 재접속할 때 다시 로그인할 필요 없이 서버에서 받아온 쿠키를 사용해서 회원 정보를 받아오게 됩니다.
   로그아웃을 일부러 하지 않는 이상, 쿠키 유지 시간만큼 자동 로그인이 유지됩니다.

5. 클라이언트 : 로그아웃 버튼을 눌러 서버에 로그아웃 요청 보내기

6. 서버 : 로그아웃 요청 처리
   a. 쿠키를 삭제하고 클라이언트로 응답을 보낸다.

7. 클라이언트 : 응답이 잘 돌아오면 React 상태 초기화

8. 클라이언트 : 화면 리렌더링 → 조건부 렌더링으로 로그인 페이지 표시

쿠키로 로그인 유지 구현하기

---

1. 클라이언트 : 서버로 로그인 요청을 보내기

• 클라이언트의 Login.js 파일을 확인해 보세요.

  • 상태가 3가지가 있습니다.

    • input창에 아이디, 비밀번호를 입력하면 업데이트되는 loginInfo
    • 로그인 유지하기 체크 상태를 의미하는 checkedKeepLogin
    • 에러 발생 시 로그인 버튼 밑에 에러 메시지를 표시하는 errorMessage

• 일단 아이디, 비밀번호 중 하나라도 입력이 되지 않았다면 에러를 띄우도록 코드를 작성해 줍니다.

• const loginRequestHandler = () => {
  
  	if (!loginInfo.userId || !loginInfo.password) {
  	      setErrorMessage('아이디와 비밀번호를 입력하세요')
  				// 입력되지 않은 값이 있는거니까 요청을 보내볼 필요도 없이 바로 리턴해줍니다.
  				return;
  	}
  
  	...
  }
  

• Axios 요청을 보낼 때, 로그인을 처리하는 엔드포인트를 입력해 줍니다. → "http://localhost:4000/login"

  • 이 엔드포인트로 어떤 데이터를 보내줘야 할까요? 서버의 login.js를 확인해 보세요.
    • req.body에서 loginInfo, checkedKeepLogin를 확인하고 있으니 Login.js의 상태를 그대로 실어서 보내줍시다.
    • req.body는 어떻게 보내나요? Axios로 post 요청을 보낼 때에는 엔드포인트 다음 인자로 넣어주면 됩니다.

    • .post("http://localhost:4000/login", {loginInfo, checkedKeepLogin})

• 서버에서 요청을 잘 받아오는지 확인해 봅시다. (npm start로 서버를 열어놓아야 제대로 확인할 수 있습니다.)

  • 서버의 login.js에 console.log(req.body)를 작성하고 저장한 다음 로그인 버튼을 눌러보세요.
  • 서버 터미널에서 아래 이미지와 같이 받아온 정보가 뜬다면 요청을 잘 받아오고 있는 것입니다.

• 요청이 잘 들어왔다면, 들어온 정보를 활용하여 요청을 처리한 다음 응답을 보내주도록 합시다.

구현 코드 & 결과 화면

204 요청까지 잘 뜨고, req.body까지 정상적으로 뜨는 것을 확인할 수 있었다.

아직은 로그인 요청을 처리하는 로직을 구현하지 않아서, 마이페이지 화면에 이동하지 않는다.

2. 서버 : 로그인 요청을 처리하기

⚙️ /login.js

---

• 파일 안에 작성된 주석을 따라서 로직을 차근차근 작성해 봅시다. 일단 userInfo라는 변수가 무엇인지 알아볼까요?

• const userInfo = {
      ...USER_DATA.filter((user) => user.userId === userId && user.password === password)[0],
    };

  • sever/db/data.js 에서 가져온 정보를 필터링해서 req.body로 들어온 아이디, 비밀번호와 일치하는 유저 정보만 남기고 있습니다.

• 직접 확인해 볼까요? console.log(userInfo)를 추가로 작성한 후에 로그인 요청을 보내보세요.

  • 일치하는 데이터가 있으면 유저 정보가 담겨서 들어옵니다. 없으면 빈객체가 들어옵니다. 요청으로 들어오는 값에 따라 조건문으로 분기하여 각각 다른 응답을 보내주겠습니다.
    • userInfo가 빈 객체라면? 로그인이 실패했다는 응답을 보내줍시다.
      • 이때. if (userInfo === undefined)로 분기하면 안 됩니다.
        • 빈 객체도 주소 값을 가지므로 제대로 작동하지 않게 됩니다.
      • userInfo에 아무 키나 찍어서 분기해 주세요. 다음 코드는 첫 번째로 들어오는 유저 정보의 id로 분기하고 있습니다.
      • if (userInfo.id === undefined) { ... }

• 로그인 실패 응답 코드는 구체적으로 어떻게 작성하면 좋을까요? 테스트 케이스를 확인해 보세요.

• // 테스트 케이스에 맞춰서 코드를 작성해 줍니다.
  if (userInfo.id === undefined) {
  	res.status(401).send('Not Authorized')
  } 

• 로그인에 성공한다면, 클라이언트에 쿠키를 전송해야 합니다. 주석을 읽어보니 cookieId에 userInfo.id를 담아야 한다고 설명되어 있습니다.

  • Express 서버에서 쿠키 보내기 위해서는, res.cookie 메서드를 사용하면 됩니다.
  • res.cookie 메서드는 전달인자로 쿠키 이름, 쿠키 값, 쿠키 옵션을 받습니다.

• 여기서 쿠키 옵션은 개념학습에서 배운 내용입니다. (링크) 개념학습의 내용을 순서대로 보면서 하나씩 작성해 보겠습니다.

• { 
      domain: 'localhost',
      path: '/',
      // domain과 path 옵션은 쿠키를 전달할 경로를 지정해줍니다.
      // 엉뚱한 곳으로도 쿠키를 보내고 싶지 않다면, 잘 작성해주도록 합시다.
      
      // MaxAge, Expires 옵션은 로그인 유지 체크 여부에 따라 달라질테니 일단 패스합니다.
      
      secure: true,
      // 지금은 서버와 클라이언트 모두 localhost라 작성하지 않아도 상관 없지만,
      // 가능하면 secure 옵션은 true로 설정하도록 합시다.
      // https를 통해 쿠키를 주고받아야 쿠키가 암호화 되기 때문입니다.
      
      httpOnly: true,
      // httpOnly 옵션은 무조건 true로 설정해주는 것이 좋습니다.
      // false일 경우 쿠키가 탈취될 위험이 생기기 때문입니다.
      
      sameSite: 'strict',
      // 서버는 http://localhost:4000, 클라이언트는 http://localhost:3000을 사용합니다.
      // 이 때, 두 주소는 TLD(.com, .org ...)를 갖고있지 않아 eTLD+1도 없지만,
      // 동일한 host(localhost)를 갖기 때문에 sameSite로 판단합니다.
      // 두 주소가 sameSite이고, 쿠키로 담아줄 정보가 로그인 관련 정보인 만큼,
      // sameSite 내에서만 쿠키를 주고받을 수 있도록 strict로 설정해줍시다.
  } 

  • 이렇게 작성한 쿠키 옵션을 cookiesOption이라는 이름의 객체로 만든 다음 전달인자로 넣어주겠습니다.

  • if (userInfo.id === undefined) {
    	... 
    } else {
    	res.cookie('cookieId', userInfo.id, cookiesOption)
    }

• 주석을 보면 영속성 있는 쿠키를 보내려면 max-age 또는 expires 옵션을 설정하세요라는 설명이 있습니다. 이는 로그인을 유지하고 싶으면 해당 옵션을 작성하라는 뜻입니다. 이 옵션을 작성하지 않으면 브라우저를 꺼버리면 쿠키가 사라집니다.

  • 로그인 성공 로직을 checkedKeepLogin으로 한 번 더 분기하고, true일 경우(로그인을 유지할 경우)에 해당 옵션을 추가로 작성해 주세요.

  • ...
    } else if (checkedKeepLogin === true) {
    	// 로그인을 유지하고 싶은 경우, cookiesOption에 max-age 또는 expires 옵션을 추가로 설정해주겠습니다.
    
    	// max-age 옵션으로 작성하는 경우
    	cookiesOption.maxAge = 1000 * 60 * 30
    	// 단위는 ms(밀리세컨드 === 0.001초)이니 주의하세요! -> 이렇게 작성할 경우 30분동안 쿠키를 유지합니다.
    
    	// expires 옵션으로 작성하는 경우에는, 이렇게 작성하시면 됩니다.
    	cookiesOption.expires = new Date(Date.now() + (1000 * 60 * 30) )
    	// 지금 시간 + 30분 후에 쿠키를 삭제한다는 의미입니다.
    
    	res.cookie('cookieId', userInfo.id, cookiesOption)
    } else {
    	// 로그인을 유지하고 싶지 않은 경우, max-age 또는 expires 옵션을 작성하지 않은 상태 그대로 쿠키를 설정합니다.
    	res.cookie('cookieId', userInfo.id, cookiesOption)
    }   

• 여기까지 작성하고 주석을 확인해 보면, 클라이언트에게 바로 응답을 보내지 않고 서버의 /useinfo 엔드포인트로 리다이렉트 시켜주라고 합니다.

  • 리다이렉트는 어떻게 하는 건가요? redirect 메서드에 엔드포인트를 전달해 주면 됩니다. → res.redirect("/userinfo")
    아까 로그인하면 쿠키랑 회원 정보를 보내줘야 한다고 했는데, 어떻게 된 걸까요? → /login에서는 쿠키만 발급하고, /userinfo에서 회원 정보를 보내주게 됩니다!

구현 코드 & 결과 화면

처음에 아이디를 아무거나 치고 로그인 시도를 했었는데, 정상적으로 userinfo가 보이지 않아서 당황했다.

알고보니 현재로서는 모의 데이터로 구현하는 것이므로, data.js 안에 있는 정해진 값을 전해줘야 했다.

다음과 같이 아이디와 비번을 입력해주면, 정상적으로 로그인 버튼을 눌렀을 시,
터미널에서 userinfo가 정상적으로 전달되는 것을 볼 수 있었다.

그리고 언급된 리다이렉트에 대해서는 아래 Error note에서 다루겠다.

⚙️ /login.js

---

• 쿠키를 검증해서 유저 정보를 전달해 줍시다.

  • 일단 쿠키를 확인해 봅시다. 브라우저에 쿠키가 있다면 따로 코드를 작성해주지 않아도 요청을 보낼 때마다 자동으로 서버로 전달됩니다.
    • console.log(req.cookies)로 쿠키를 확인할 수 있습니다.
  • 주의 : 로그인이 성공적으로 이루어져야 쿠키가 만들어집니다. data.js를 확인하고 작성되어 있는 정보로 로그인을 시도해 주세요.
  • /login에서 쿠키가 잘 만들어졌다면, 쿠키를 생성할 때 넣어준 userinfo.id가 들어있는 걸 볼 수 있습니다. 이 값을 사용해서 클라이언트로 전달해 줄 유저 정보를 필터링합시다.

• login.js에 있는 필터링 로직을 그대로 가져와서 재활용하겠습니다.

• const cookieId = req.cookies.cookieId
  const userInfo = {
      ...USER_DATA.filter((user) => user.id === cookieId)[0],
   };

  • 주의할 점
    • user.userId가 아니라 user.id로 필터링해야 합니다. 헷갈리기 쉽습니다!
    • 유효한 id가 아닌 경우 userInfo가 비어있을 수도 있습니다.
    • 쿠키가 없을 때도 userInfo 값이 제대로 들어오지 않습니다.
      • 따라서 로그인 실패 조건문은 if ( !cookieId || !userInfo.id )로 작성합니다.

• 응답 코드 작성하기

• if (!cookieId || !userInfo.id){
      res.status(401).send('Not Authorized');
  } else {
  		// 비밀번호는 민감한 정보라서 삭제 후에 보내야 합니다.
      delete userInfo.password
      res.send(userInfo)
  }

• 이제 서버에서 응답하는 코드를 완성했습니다. 클라이언트에서 잘 들어오는지 확인해 보겠습니다.

  • 클라이언트의 Login.js 에서 console.log(res.data)를 추가합니다.

  • return axios
    	.post(...)
    	.then((res) => {
    		// 요청을 보내고 응답을 받아온 다음 확인해야하므로 이 위치에서 작성합니다.
    		console.log(res.data)
    	})
    	...

  • 그 후 로그인 요청을 보냈을 때 브라우저 콘솔창에 다음과 같은 값이 잘 들어온다면 응답을 정상적으로 받고 있는 것입니다.
    • 응답받은 값으로 클라이언트의 상태를 업데이트하면 됩니다.

구현 코드 & 결과 화면

위와 같이 작성 시, 정상적으로 login 로직(쿠키 발급) 처리 후,
redirect로 인해 userinfo 까지 로직이 구현되는 것을 알 수 있다.

또한 콘솔창에서 정상적으로 응답받고 있는 값을 확인할 수 있었다.

3. 클라이언트 : 응답을 받아 React 상태를 업데이트

• 우선 클라이언트의 App.js에서 Login.js로 필요한 props를 내려주세요. (setIsLogin, setUserInfo)

  • Login.js에서 props를 받아오는 코드도 작성해 주세요.

• 받아온 상태 변경 함수로 상태를 업데이트합니다.

  • setIsLogin(true) : 로그인되었음을 상태로 저장하기
  • setUserInfo(res.data) : 로그인한 회원의 정보를 상태에 저장하기

• catch를 통해 에러 처리도 해주겠습니다. 에러는 console.log(err.response.data)로 확인하고, 에러메시지는 setErrorMessage(”로그인할 수 없습니다")로 설정합니다.

  • 에러 메시지가 계속 남아 있으면 안 되니까 로그인 성공했을 경우에는 초기화도 해 주세요.

  • 꼭 아래처럼 초기화할 필요는 없습니다. 유효성 검사를 해줄 때(아이디, 비밀번호가 입력되어 있는지 없는지 확인할 때) 해주는 것도 한 방법입니다.

  • return axios
          .post("http://localhost:4000/login", {loginInfo, checkedKeepLogin})
          .then((res) => {
            setUserInfo(res.data)
            setIsLogin(true)
    
    				//여기에서 에러 초기화
            setErrorMessage("")
          })
          .catch((err) => {
            console.log(err.response.data)
            setErrorMessage("로그인에 실패했습니다.")
          });
        

  • 여기까지 작성했으면 Login.js도 완성입니다!

구현 코드 & 결과 화면

이제 클라이언트 코드를 구현했으므로, 로그인 버튼을 누르면 화면이 넘어가기는 한다.

하지만 아직 Mypage.js 구현이 완료되지 않았으므로 당연히 에러가 뜬다.

4. 클라이언트 : 화면 리렌더링 → 조건부 렌더링으로 마이페이지 표시

• App.js에서 Mypage에 props로 userInfo를 내려주지 않을 경우 오류가 발생합니다. props를 제대로 내려주세요!

• userInfo를 내려준 후 다시 로그인하면 아래와 같이 Mypage가 제대로 표시됩니다.

구현 코드 & 결과 화면

이제 정상적으로 마이페이지가 화면에 보인다 !

아직 구현이 하나 남았다.

5. 클라이언트 : 로그아웃 버튼을 눌러 서버에 로그아웃 요청 보내기

• Mypage에 있는 로그아웃 버튼을 누르면, 로그아웃을 처리하는 엔드포인트로 요청을 보낼 수 있게 코드를 작성해 주세요!
  • .post("http://localhost:4000/logout")

구현 코드 & 결과 화면

로그아웃 엔드포인트를 설정해준 것처럼 터미널을 확인하면 logout을 볼 수 있다 !

하지만 코드 구현이 아직 끝나지 않았기 때문에 오류가 난다.

6. 서버 : 로그아웃 요청 처리

⚙️ /logout.js

• 서버는 쿠키를 삭제하고, 상태코드로 205를 돌려주면 됩니다.
  • 쿠키를 삭제할 땐 res.clearCookie 메서드를 사용하면 됩니다.
    • 인자는 ( 쿠키 이름, 쿠키 옵션 ) → 쿠키 이름은 cookieId, 옵션은 login.js에서 만들어준 cookiesOption 객체를 가져와서 쓰면 됩니다.

  • const cookiesOption = {
        domain: 'localhost',
        path: '/',
       secure: true,
        httpOnly: true,
        sameSite: 'strict',
      }
    res.status(205).clearCookie('cookieId', cookiesOption).send("logout") 
       

구현 코드 & 결과 화면

이제 정상적으로 쿠키가 삭제되었고, 터미널을 확인해보면 요청도 정상적으로 처리된다.

7. 클라이언트는 상태를 비운다.

• Mypage에 props로 상태변경함수를 받아와서 상태를 비워줍니다.
  • setIsLogin(false) : 로그아웃 되었음을 상태로 저장하기
  • setUserInfo(null) : 저장해 두었던 회원의 정보를 비우기
• 에러도 마저 작성해 줍니다.
  • console.log(err.response.data)

구현 코드 & 결과 화면

이제 로그아웃 버튼을 누를 시, 동시에 정상적으로 홈페이지로 이동하는 것을 볼 수 있다.

8. 조건부 렌더링으로 로그인 페이지가 표시된다.

• 이제 로그아웃 버튼을 누르면 로그인 페이지로 다시 오게 됩니다. 그런데, 로그인 유지 옵션을 선택하고 로그인해도, 브라우저를 끄고 다시 접속했을 때 로그인이 유지가 되지 않는 것을 확인할 수 있습니다.

• 로그인 유지 로직이 작성되어있지 않기 때문입니다. App.js를 확인해 봅시다.

  • useEffect가 페이지를 렌더링할 때마다 최초 1번씩 authHandler를 실행시키고 있는 것을 볼 수 있습니다.
  • 때문에 로그인 페이지로 접근했을 때, 클라이언트에 쿠키가 있다면, 서버로 요청을 보낼 때 쿠키도 자동으로 보내게 됩니다.

• 쿠키를 확인하고 일치하는 유저 정보를 보내주는 엔드포인트는 어디인가요? → /userinfo

  • 이 엔드포인트로 요청을 보내고 응답을 받아서 상태를 업데이트해주면 됩니다.
  • 그럼 쿠키가 유지되는 동안에는 로그인 상태를 유지할 수 있게 됩니다

  • return axios
          .get("http://localhost:4000/userinfo")
          .then((res) => {
            setIsLogin(true)
            setUserInfo(res.data)
          })
          .catch((err) => {
            console.log(err.response.data)
          });

  • 여기까지 작성하시면 서버, 클라이언트 테스트 케이스도 모두 통과하게 됩니다.

구현 코드 & 결과 화면

💡 Error Note.

---

💡 res.redirect

• res.redirect는 웹 애플리케이션에서 사용자를 다른 URL로 리디렉션하는 데 사용되는 Node.js의 Express 프레임워크에서 제공하는 함수이다. 이 함수는 클라이언트의 요청을 다른 URL로 보내고, 해당 URL에서 새로운 페이지를 로드하도록 유도한다.

• res.redirect 함수는 다음과 같은 목적으로 사용될 수 있다:

  1. 라우팅: 클라이언트가 특정 경로로 접근했을 때, 다른 경로로 리디렉션하여 해당 경로의 핸들러로 요청을 전달할 수 있다. 이는 애플리케이션의 라우팅 로직을 구성하는 데 도움이 된다.
  2. 인증과 권한 부여: 보호된 페이지에 접근하려는 사용자가 인증되지 않았을 경우, 리디렉션을 통해 로그인 페이지로 보낼 수 있다. 또는 사용자의 권한에 따라 특정 페이지로 리디렉션하는 데 사용할 수도 있다.
  3. 외부 사이트로의 리디렉션: 애플리케이션에서 외부 사이트로 사용자를 보낼 때, res.redirect 함수를 사용할 수 있다. 예를 들어, 소셜 미디어 인증을 위해 사용자를 OAuth 제공업체로 리디렉션하는 데 사용될 수 있다.

• res.redirect 함수의 필요성은 다음과 같다:

  1. 사용자 경험 개선: 리디렉션은 사용자가 새로운 페이지로 자연스럽게 이동할 수 있도록 도와준다. 사용자가 올바른 경로로 안내되어 효과적인 웹 탐색을 할 수 있도록 해준다.
  2. 보안과 인증: 리디렉션을 사용하여 인증되지 않은 사용자의 접근을 제어하거나, 보호된 리소스에 대한 액세스 권한을 확인할 수 있다.
  3. SEO(Search Engine Optimization): URL 리디렉션은 검색 엔진 최적화를 위해 중요하다. 올바른 리디렉션을 사용하여 오래된 URL을 새로운 URL로 리디렉션시킬 수 있으며, 이는 검색 엔진에서 링크 주소를 갱신하는 데 도움이 된다.

• 요약하자면, res.redirect 함수는 웹 애플리케이션에서 사용자를 다른 URL로 보내는 데 사용되며, 사용자 경험, 보안 및 인증, 그리고 SEO 관련 목적을 위해 필요합니다.
  
  

💡 props를 정확하게 전달하자 !

• // ✅ 올바른 예시
  export default function Mypage({ userInfo, setIsLogin, setUserInfo }) {
    const logoutHandler = () => {
      // TODO: Logout 버튼을 눌렀을 시 Login 페이지로 돌아갈 수 있도록 구현하세요.
      return axios
        .post("http://localhost:4000/logout")
        .then((res) => {
          setIsLogin(false);
          setUserInfo(null);
        })
        .catch((err) => {
          console.log(err.response.data);
        });
    };

• // ❌ 틀린 예시
  export default function Mypage({ userInfo}) {
    const logoutHandler = ({setIsLogin, setUserInfo}) => {
      // TODO: Logout 버튼을 눌렀을 시 Login 페이지로 돌아갈 수 있도록 구현하세요.
      return axios
        .post("http://localhost:4000/logout")
        .then((res) => {
          setIsLogin(false);
          setUserInfo(null);
        })
        .catch((err) => {
          console.log(err.response.data);
        });
    };

• 아래처럼 코드를 작성하면 logoutHandler 함수가 클로저(Closure)의 개념을 무시해버리기 때문에 코드가 당연히 제대로 돌아가지 않는다. 따라서 위와 같이 제대로 수정해주도록 하자!

💾 Session

---

세션으로 로그인 유지 구현하기

• 이번 과제는 쿠키 튜토리얼에서 진행했던 흐름에서 서버가 쿠키 대신 세션을 이용하도록 바꿔주면 됩니다. 클라이언트는 쿠키 튜토리얼의 코드를 그대로 가져다 사용하세요.

• 세션도 쿠키를 사용하긴 하지만, 쿠키로 구현했던 것처럼 유저 id를 직접 담는 게 아니라, 서버에서 세션 id를 받아와서 사용하게 됩니다.

  • 서버는 세션 저장소에 세션을 저장하고, 여기에 해당하는 세션 id를 암호화해서 클라이언트의 쿠키로 저장해 둡니다. 그리고 요청이 올 때마다 쿠키에 있는 세션 id를 확인해서 유저인지 확인합니다.
  • 이때 세션 저장, 세션 id 생성 등 세션으로 구현하는 데 필요한 로직은 express-session이 맡아서 처리해 주기 때문에 우리는 express-session의 사용법에 맞춰서 사용하기만 하면 됩니다.
    index.js를 보면 express-session 라이브러리로 쿠키 설정이 이미 되어있으므로, 이번에는 쿠키 설정을 따로 해주지 않아도 괜찮습니다.

• CORS 설정은 잊지 말고 해 주세요! 쿠키 때랑 똑같이 해주시면 됩니다.

• const corsOptions = {
    origin: "http://localhost:3000",
    credentials: true,
    methods: ['GET', 'POST', 'OPTION']
  };

⚙️ /login

---

• 쿠키 튜토리얼 때와 로직은 똑같습니다. 세션을 쓰냐 쿠키를 쓰냐 차이일 뿐이라, 조건문 분기는 똑같이 해주면 됩니다.

• 클라이언트에 세션 id를 저장해 봅시다.

  • req.session을 사용해 세션 객체에 userInfo.id를 저장하세요.

  • // 이번에는 쿠키 튜토리얼과 다르게 res가 아니라 req에 작성해야됩니다. 정해진 사용법이니 주의!!
    req.session.sessionId = userInfo.id

  • 이제 maxAge를 설정해주고 싶은데, 세션에 쿠키 옵션을 어떻게 설정해 줄 수 있을까요?

    • console.log(req.session)으로 세션의 구조를 확인해 보세요.

    • req.session.cookie 안에 넣어주면 될 것 같습니다.

    • 옵션을 넣어주고 redirect까지 작성해 줍니다.

  • if (!userInfo.id) {
      res.status(401).send("Not Authorized")
    } else if (checkedKeepLogin) {
      req.session.sessionId = userInfo.id
    
      // 세션 구조 들여다보기 -> 터미널에 표시됩니다
      console.log(req.session)
    
      // 쿠키 옵션 설정하기
      req.session.cookie.maxAge = 1000 * 60 * 30
    
      res.redirect('/userinfo')
    } else {
      req.session.sessionId = userInfo.id
      res.redirect('/userinfo')
    }

구현 코드 & 결과 화면

클라이언트는 쿠키때와 같으므로, 구현을 완료하였다.

서버 쪽은 아직 구현을 하지 않았으므로 로그인 버튼 눌러도
반응이 없으며, 터미널창에서 실시간 메세지 확인 가능하다.

⚙️ /userinfo

---

• 우리가 sessionId로 저장해 놓은 값을 이용해서 클라이언트로 보내줄 유저 정보를 찾은 다음 응답으로 보내줍시다.
• 로직은 똑같으니 재활용하고, cookieId를 sessionId로 바꿔주겠습니다.
• 패스워드는 중요한 정보이므로 응답을 보내기 전에 지우는 것을 잊지 마세요

• const sessionId = req.session.sessionId
  const userInfo = {
    ...USER_DATA.filter((user) => user.id === sessionId)[0],
  };
  if (!sessionId || !userInfo.id){
    res.status(401).send('Not Authorized');
  } else {
    delete userInfo.password
    res.send(userInfo)
  }

구현 코드 & 결과 화면

userinfo 로직을 구현했으므로, 로그인 버튼 누르면 로그인 가능하다.

⚙️ /logout

---

• 이제 남은 건 로그아웃뿐입니다.
• 로그아웃 요청이 들어오면, 세션을 없애주면 됩니다. 세션 없애주는 메서드로 req.session.destroy가 있습니다. 이 메서드를 사용해 주면 됩니다.
  • 상태코드로 205를 보내주는 것 잊지 마세요.

  • req.session.destroy();
    res.status(205).send('Logged Out Successfully');

  • 이제 새로고침해도 세션이 남아있게 되고, 테스트 케이스도 모두 통과하게 됩니다.

구현 코드 & 결과 화면

🪪 Token

---

토큰인증 방식으로 구현하기

• 토큰의 일종인 JSON Web Token을 이용하여 토큰방식 인증을 구현한다.

• 클라이언트 코드는 쿠키 및 세션 인증방식과 동일합니다.
  기존 쿠키, 세션 과제에서 풀었던 클라이언트 코드를 가져와도 됩니다.

• 이번 과제에서는 JWT 생성 및 검증을 도와주는 헬퍼 펑션이 있습니다.
  helper/tokenFunctions.js에서 각각의 메서드들의 역할을 먼저 파악하세요.
  
  

• 다음 순서로 코드를 구현합니다. 각 파일에는 적절한 위치에 TODO:가 존재합니다.

1. 로그인 기능 구현
   • server의 login controller 구현
2. 마이페이지 구현
   • server의 userinfo controller 구현
3. 로그아웃 기능 구현
   • server의 logout controller 구현

• 새로고침을 하더라도 유저의 로그인 상태가 유지되어야 합니다.

1. controllers/login.js (POST /users/login)

1. request로 받은 userId, password와 일치하는 유저가 DB에 존재하는지 확인합니다.
2. 일치하는 유저가 없을 경우:
   • 로그인 요청을 거절합니다.
3. 일치하는 유저가 있을 경우:
   • 필요한 데이터를 담은 두 종류의 JWT(access, refresh)를 생성합니다.
4. request로 받은 checkedKeepLogin을 통해 로그인 상태 유지 여부를 확인합니다.
   • Access Token은 세션 쿠키, Refresh Token은 영속성 쿠키로 보내야 합니다.
   • 클라이언트가 로그인 상태 유지를 원한다면 Access Token와 Refresh Token 모두 쿠키로 설정합니다.
   • 클라이언트가 로그인 상태 유지를 원하지 않는다면 Access Token만 쿠키로 설정합니다.
5. 클라이언트에 바로 응답을 보내지 않고 서버의 /userinfo로 리다이렉트합니다.

구현 코드 & 결과 화면

const { USER_DATA } = require("../../db/data");
const { generateToken } = require("../helper/tokenFunctions");

module.exports = async (req, res) => {
  const { userId, password } = req.body.loginInfo;
  const { checkedKeepLogin } = req.body;

  const userInfo = USER_DATA.filter(
    (user) => user.userId === userId && user.password === password
  );

  if (userInfo.length === 0) {
    res.status(401).send("Not Authorized");
  } else {
    const user = userInfo[0]; // 첫 번째 일치하는 사용자 정보를 가져옵니다.
    const accessToken = generateToken(user, "access");
    const refreshToken = generateToken(user, "refresh");

    if (checkedKeepLogin) {
      res.cookie("access_jwt", accessToken, { httpOnly: true });
      res.cookie("refresh_jwt", refreshToken, { httpOnly: true });
    } else {
      res.cookie("access_jwt", accessToken, { httpOnly: true });
    }

    res.redirect("/userinfo");
  }
};

2. controllers/userInfo.js (GET /users/userinfo)

1. 쿠키에 Access Token이 있다면 verifyToken 메서드를 이용해 이를 검증합니다.
   • 검증되었다면 토큰에 담긴 정보를 이용해 유저 정보를 db에서 조회한 후 응답으로 전달합니다.
2. Access Token이 검증되지 않았다면 verifyToken 메서드를 이용해 Refresh Token을 검증합니다.
   • 검증되었다면 토큰에 담긴 정보를 이용해 사용자 정보를 db에서 조회합니다.
     • Access Token을 다시 발급해 쿠키에 담고 유저 정보와 함께 응답으로 전달합니다.
   • 검증되지 않았다면 요청을 거절합니다.
3. Access Token, Refresh Token 모두 없다면 요청을 거절합니다.

구현 코드 & 결과 화면

const { USER_DATA } = require("../../db/data");
const { verifyToken, generateToken } = require("../helper/tokenFunctions");

module.exports = async (req, res) => {
  const accessToken = req.cookies.access_jwt;
  const refreshToken = req.cookies.refresh_jwt;

  if (!accessToken && refreshToken) {
    try {
      // Refresh Token 검증
      const decodedRefreshToken = verifyToken("refresh", refreshToken);
      const { id } = decodedRefreshToken;

      // Access Token 재발급
      const newAccessToken = generateToken({ id }, "access");

      res.cookie("access_jwt", newAccessToken, { httpOnly: true });

      // 유저 정보 조회
      const userInfo = USER_DATA.find((user) => user.id === id);

      if (userInfo) {
        res.status(200).json(userInfo);
      } else {
        res.status(401).send("Not Authorized");
      }
    } catch (refreshTokenError) {
      res.status(401).send("Not Authorized");
    }
  } else if (accessToken) {
    try {
      // Access Token 검증
      const decodedAccessToken = verifyToken("access", accessToken);
      const { id } = decodedAccessToken;

      // 유저 정보 조회
      const userInfo = USER_DATA.find((user) => user.id === id);

      if (userInfo) {
        res.status(200).json(userInfo);
      } else {
        res.status(401).send("Not Authorized");
      }
    } catch (accessTokenError) {
      if (accessTokenError.name === "TokenExpiredError") {
        res.status(401).send("Not Authorized");
      } else {
        res.status(500).send("Internal Server Error");
      }
    }
  } else {
    res.status(401).send("Not Authorized");
  }
};

3. controllers/logout.js (POST /users/logout)

1. 클라이언트에 저장된 쿠키의 값(토큰)을 초기화합니다.
   • cookie-parser의 clearCookie 메서드를 사용하거나 직접 쿠키의 값을 빈 값으로 초기화할 수도 있습니다.

구현 코드 & 결과 화면

module.exports = (req, res) => {
  res.clearCookie("access_jwt");
  res.clearCookie("refresh_jwt");

  res.status(205).send();
}

💼 OAuth

---

Oauth를 이용한 소셜 로그인 구현하기

• 이번 과제에서는 서버가 아닌 클라이언트를 구현해야 합니다. 먼저 서버에서 각 컨트롤러의 역할을 파악하세요.

• Login with Github 버튼을 클릭했을 때, Github에서 인증이 성공하면 Mypage에서 나의 유저 정보를 확인할 수 있어야 합니다.

1. GitHub에 내 앱 등록

링크 를 참고하여, OAuth 앱을 등록합니다.

Homepage URL 및 Authorization callback URL은
해당 과제의클라이언트 주소(http://localhost:3000)로 리디렉션 합니다.

• 질문: Authorization callback URL은 무엇인가요?
  • OAuth 메커니즘이 인증 과정이 끝난 후 리디렉션을 통해 다시 내 앱으로 이동하는 원리이므로, 내 앱으로 돌아가기 위한 Authorization callback URL이 필요합니다.

2. 환경 설정

GitHub App에서 제공하는 Client ID 및 Client Secret의 정보를 채워 넣어야 합니다.

• 주의: Client Secret은 항상 비밀로 지켜져야 합니다.
• 서버에 .env.example 파일이 있습니다. 파일명을 .env로 수정하시고,
  파일 안에 CLIENT_ID와 CLIENT_SECRET 정보를 담아주세요.

소셜 로그인 로직 플로우

---

해당 과제에서 OAuth App을 통해 Access token을 받아오는 과정은 다음과 같습니다.

3. 환경 설정

• 제공되는 서버를 살펴봅시다. express를 이용해 만든 간단한 웹 서버입니다.
• Access token을 발급받는 과정은 서버에서 이루어지는 것이 더욱 안전합니다.
• 그래서 클라이언트에서 받아온 Authorization code를 서버의 /callback 엔드포인트로 전달해 서버에서 Github Authorization 서버에게 Access token 발급을 요청합니다.
  
  

4. Authorization code 받아오기 (Login Component)

• 클라이언트 페이지는 React로 구성되어 있습니다. 클라이언트 폴더에서 npm start 명령어로 클라이언트를 실행시켜 보세요!
• 직접 브라우저 창이 어떻게 변화하는지 보고 콘솔창에 뜨는 에러 메시지들을 확인하며 소셜 로그인 기능을 구현하는 경험이 중요합니다.
• 클라이언트 페이지는 App.js를 시작으로 주석에 적혀 있는 가이드라인을 참고해 작성을 시작하세요.
• 가장 먼저 해야 할 일은 Github App에 요청을 보내 Authorization code를 받아오는 일입니다.
  
  

5. Access token 받아 오기 (App Component)

• Authorization code를 받아왔다면 App.js의 getAccessToken 함수가 실행됩니다.
• 해당 함수를 통해 서버에 /callback 엔드포인트로 요청을 보내고 응답으로 받아온 Access token은 App 컴포넌트의 state에 저장한 후, Mypage 컴포넌트에서 props로 내려받아 활용하세요.
  
  

6. 로컬 서버를 통해 Github 리소스 서버에 유저 정보 요청 (Mypage Component)

• 받아온 Access Token으로 Mypage 컴포넌트에서 리소스에 대한 API 요청을 할 수 있습니다. 액세스 토큰을 이용해 /userinfo로 요청하면 로컬 서버의 리소스인 serverResource와 Github Resource 서버에 요청한 리소스인 githubUserData가 응답으로 전달됩니다.

• 완성된 마이페이지 화면에는 내 Github 유저 정보와 로컬 서버에 있는 정보가 담겨야 합니다.
  
  

7. 로그아웃 구현하기 (Mypage Component)

• 로컬 서버의 /logout에 액세스 토큰을 이용한 요청을 보내 유저의 토큰을 지워야 합니다. 요청이 성공하면 그에 따른 상태 또한 업데이트해야 합니다.

구현 코드 & 결과 화면

• OAuth 앱을 등록 과정
  
  

// Client - Userinfo.js

import React from 'react';

export default function User({ githubUser, serverResource, logoutHandler }) {
  return (
    <>
      <img src={githubUser.avatar_url} alt='github_avatar' />
      <h3>내 정보</h3>
      <div className='userinfo-field'>
        <div>
          {`📖 Studying at `} <b>{serverResource.bootcamp}</b>
        </div>
        <div>{`📍 Living in ${githubUser.location}`}</div>
        <div>{`📬 Contact: ${githubUser.email}`}</div>
        <div>{`👩🏻‍💻 ${serverResource.position}`}</div>
        <article>
          <h3>Bio</h3>
          <span>{githubUser.bio ? githubUser.bio : serverResource.bio}</span>
        </article>
      </div>
      <button id='logout-btn' onClick={logoutHandler}>
        LOGOUT
      </button>
    </>
  );
}

정말 신기하게 클라이언트 Userinfo 코드에서 설정한 값
그대로 프로필 사진이나 내부 정보를 가져온다..

매일 이용만 하던 OAuth를 직접 구현하니까 정말 신기했다.. 신세계..

다음은 5, 6 ,7번을 구현한 코드를 첨부하겠다.

// Client - App.js

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./pages/Login";
import Mypage from "./pages/Mypage";
import { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [isLogin, setIsLogin] = useState(false);
  const [accessToken, setAccessToken] = useState("");

  const getAccessToken = async (authorizationCode) => {
    // 받아온 Authorization Code로 다시 OAuth App에 요청해서 Access Token을 받을 수 있습니다.
    // Access Token은 보안 유지가 필요하기 때문에 클라이언트에서 직접 OAuth App에 요청을 하는 방법은 보안에 취약할 수 있습니다.
    // Authorization Code를 서버로 보내주고 서버에서 Access Token 요청을 하는 것이 적절합니다.
    // TODO: 서버의 /callback 엔드포인트로 Authorization Code를 보내주고 Access Token을 받아옵니다.
    // Access Token을 받아온 후 state에 Access Token을 저장하세요
    axios
      .post("http://localhost:4000/callback", { authorizationCode })
      .then((res) => {
        setIsLogin(true);
        setAccessToken(res.data.accessToken);
        console.log(res.data);
      });
  };
  useEffect(() => {
    // Authorization Server로부터 클라이언트로 리디렉션된 경우, Authorization Code가 함께 전달됩니다.
    // ex) http://localhost:3000/mypage?code=5e52fb85d6a1ed46a51f
    const url = new URL(window.location.href);
    const authorizationCode = url.searchParams.get("code");
    if (authorizationCode) {
      getAccessToken(authorizationCode);
    }
  }, []);
  return (
    <BrowserRouter>
      <div className="main">
        <div className="container">
          <Routes>
            <Route
              path="/"
              element={
                isLogin ? (
                  <Mypage
                    /*TODO: 컴포넌트에 필요한 props를 전달하세요. */
                    accessToken={accessToken}
                    setIsLogin={setIsLogin}
                  />
                ) : (
                  <Login />
                )
              }
            />
          </Routes>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

// Client - Login.js

import React from "react";
import githubLogo from "./../images/github.png";

export default function Login() {
  const CLIENT_ID = process.env.REACT_APP_CLIENT_ID;

  const loginRequestHandler = () => {
    // TODO: GitHub로부터 사용자 인증을 위해 GitHub로 이동해야 합니다. 적절한 URL을 입력하세요.
    // OAuth 인증이 완료되면 authorization code와 함께 callback url로 리디렉션 합니다.
    // 참고: https://docs.github.com/en/free-pro-team@latest/developers/apps/identifying-and-authorizing-users-for-github-apps
    return window.location.assign(
      `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}`
    );
  };

  return (
    <>
      <div className="left-box">
        <span>
          Education
          <p>for the</p>
          Real World
        </span>
      </div>
      <div className="right-box">
        <div className="right-box">
          <h1>AUTH STATES</h1>
          <h3>OAuth 2.0 소셜 로그인</h3>
          <form onSubmit={(e) => e.preventDefault()}>
            <div className="input-field">
              <button type="submit" onClick={loginRequestHandler}>
                <img id="logo" alt="logo" src={githubLogo} />
                <span> LOGIN WITH GITHUB</span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </>
  );
}

// Client - Mypage.js

import axios from "axios";
import React, { useEffect, useState } from "react";
import Loading from "./components/Loading";
import User from "./components/UserInfo";

export default function Mypage({ accessToken, setIsLogin }) {
  const [githubUser, setGithubUser] = useState(null);
  const [serverResource, setServerResource] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  const logoutHandler = () => {
    // TODO: /logout을 통해 사용자가 로그아웃되도록 구현하세요.
    // prop으로 받은 Access Token을 이용해 /logout 엔드포인트로 요청을 보내야합니다.
    // 요청이 성공했다면 isLogin 상태를 false로 업데이트해야 합니다.
    axios
      .delete("http://localhost:4000/logout", {
        data: {
          accessToken,
        },
      })
      .then(() => setIsLogin(false))
      .catch((err) => console.log("다시 시도하십시오."));
  };

  useEffect(() => {
    // TODO: /userinfo를 통해 사용자 정보를 받아오세요.
    // prop으로 받은 Access Token을 이용해 /userinfo 엔드포인트로 요청을 보내야합니다.
    // 응답으로 받은 데이터를 githubUser, serverResource의 상태로 업데이트해야합니다.
    // isLoading 상태를 false로 업데이트해야 합니다.

    if (!accessToken) {
      return; // accessToken이 없으면 요청을 보내지 않음
    }

    axios
      .post("http://localhost:4000/userinfo", { accessToken })
      .then((res) => {
        setGithubUser(res.data.githubUserData);
        setServerResource(res.data.serverResource);
        setIsLoading(false);
      })
      .catch((err) => console.log("다시 시도하십시오."));
  }, [accessToken]);

  return (
    <>
      <div className="left-box">
        {!isLoading && (
          <span>
            {`${githubUser.login}`}님,
            <p>반갑습니다!</p>
          </span>
        )}
      </div>
      <div className="right-box">
        <div className="input-field">
          {isLoading ? (
            <Loading />
          ) : (
            <User
              githubUser={githubUser}
              serverResource={serverResource}
              logoutHandler={logoutHandler}
            />
          )}
        </div>
      </div>
    </>
  );
}

💡 Error Note.

---

💡 Delete, Payload, body ?

• Client 폴더에서 Mypage.js 파일을 구현할 때, 'delete 요청에서 accessToken 값을 왜 .then으로 처리하지 않고 페이로드로 처리할까' 와 'accessToken 값을 왜 data 안에 담아서 전달할까'하는 의문에서 시작되었다.

• 페이로드(Payload)와 .then() 메서드는 HTTP 요청을 다른 측면에서 다루는 개념이다.

• 각각의 역할과 차이점, 사용법을 살펴보겠다.

1. 페이로드(Payload):
   • 페이로드는 HTTP 요청의 본문(body)에 포함된 데이터를 의미한다.
   • POST, PUT, PATCH와 같은 메서드에서 주로 사용된다.
   • 요청을 수행하는 동안 서버로 전달하고자 하는 데이터를 포함한다.
   • 주로 JSON, XML, 폼 데이터와 같은 형식으로 표현된다.
   • axios에서는 페이로드를 설정하기 위해 요청의 옵션 객체의 data 속성을 사용한다.
   • 예시: axios.post(url, data)
     
     
2. .then() 메서드:
   • .then() 메서드는 Promise 객체의 메서드 중 하나이다.
   • 비동기 요청(예: HTTP 요청)이 성공적으로 완료된 후에 실행되는 콜백 함수를 정의한다.
   • 즉, 응답이 도착하고 성공 상태 코드가 반환된 경우에 실행된다.
   • .then() 메서드를 사용하여 응답 데이터를 처리하거나 특정 작업을 수행할 수 있다.
   • axios에서는 .then() 메서드를 사용하여 비동기 요청의 성공 콜백을 정의한다.
   • 예시: axios.get(url).then(response => { // 성공 처리 })

요약하면 페이로드는 요청 본문의 데이터를 전송하기 위해 사용되고,
.then() 메서드는 비동기 요청이 성공적으로 완료된 후에 실행되는 콜백 함수를 정의한다.

따라서 accessToken은 처음부터 넘겨줘야 하기 때문에 payload(위치)에 있는 것이 맞다.

---

그리고 이 링크에 따르면 HTTP DELETE 메서드에는 요청 본문이 없어야 한다.

HTTP 프로토콜은 기본적으로 DELETE 요청에서 본문(payload)을 전송하기 위한 명시적인 규약을 제공하지 않는다.

HTTP 표준에 따르면 DELETE 요청은 주로 리소스 삭제를 위해 사용되는 메서드이다.
따라서 DELETE 요청에서 본문을 사용하는 것은 일반적으로 예외적인 상황에서 사용된다.

data 속성을 사용하는 이유는 다음과 같다:

• Axios가 DELETE 요청을 보낼 때, 기본적으로 본문이 비어있다고 가정한다. 그러나 몇몇 API 서버는 DELETE 요청의 본문을 사용하기를 원할 수 있다. data 속성을 사용하면 Axios가 DELETE 요청에 본문을 포함시킬 수 있게 된다.

• ✨ DELETE 요청의 본문은 서버에서 특정 데이터를 기대하거나 처리할 때 유용할 수 있다. 예를 들어, 액세스 토큰을 DELETE 요청의 본문에 포함하여 로그아웃 요청을 처리하는 경우, 서버는 액세스 토큰을 확인하고 해당 사용자를 로그아웃할 수 있다.

• 일부 서버 구현은 DELETE 요청의 본문을 사용하여 데이터를 보다 편리하게 처리할 수 있도록 설계되어 있을 수 있다. 이러한 경우, data 속성을 사용하여 DELETE 요청의 본문에 데이터를 전달하는 것이 바람직한 방법이다.
  
  

그러나 DELETE 요청에서 데이터를 본문에 포함하는 것은
일반적인 패턴은 아니며, 모든 서버가 이를 지원하는 것은 아니다.

API 문서를 확인하거나 서버 개발자와 협의하여 올바른 요청 방식을 결정하는 것이 좋다.

axios
      .post("http://localhost:4000/userinfo", { accessToken })
      .then((res) => {
        setGithubUser(res.data.githubUserData);
        setServerResource(res.data.serverResource);
        setIsLoading(false);
      })
      .catch((err) => console.log("다시 시도하십시오."));
  }, [accessToken]);

axios
      .delete("http://localhost:4000/logout", {
        data: {
          accessToken,
        },
      })
      .then(() => setIsLogin(false))
      .catch((err) => console.log("다시 시도하십시오."));

오늘 구현한 예시 코드를 봐도 post는 그냥 전달하나, delete는 data에 담아서 전달한다.

따라서 delete 메서드는 payload body 가 필요가 없기 때문에,
Delete 메서드로 payload body를 실어 요청을 하면 요청이 거절될 수 있다.

전달이 필요한 상황이라면, data 속성에 담아서 요청해야 한다.