[Pre-Project] Day 10 - 로그인 토큰, 로그인/로그아웃 조건부 렌더링, next.config.js

📍 Pre-Project, Day 10

→ 팀원들 모두 각자 맡은 페이지 기능 구현 마무리에 들어갔고, 본인도 맡은 로그인 부분에 있어서 API가 완성되어 로그인 토큰이 있을 경우와 없을 경우 각각 헤더를 다르게 보여주는 조건부 렌더링 구현을 하였다. 이외에도 아래와 같은 내용들을 진행하였다.

• 댓글 부분 fetch, get, post 수정
• 로그인/로그아웃에 따라 Header component 다르게 보여주기
• 로그인/로그아웃에 따라 Sidebar, Footer component 다르게 보여주기
• 로그인 전 화면 구성(팀원 소개 모달창 및 사이드 숨기기)
• 사이드바 수정(백엔드 분들께서 tags 구현 어렵다고 하셔서 제외)
• next.config.js 수정 시
• css 수정

✍🏻 로그인 토큰 확인하기

→ 스택오버플로우에 로그인을 하면 위의 그림과 같이 애플리케이션 - 로컬 스토리지에 토큰이 있는 것을 확인 할 수 있다. (우리의 경우 백엔드 측에서 어렵다고 하셔셔, 로그인 정보를 로컬 스토리지에 저장하는 방법으로 한 것이다)

→ 위와 같이 accessToken에 따라 로그인, 로그아웃을 구현하였다.

export default function Header(){
  const [login, setLogin] = useState(false);
  useEffect(() => {
    if (localStorage.getItem("accessToken") !== null) {
      setLogin(true);
    } else {
      setLogin(false);
    }
  });
  const onClickLogOut = () => {
    localStorage.removeItem("accessToken");
    localStorage.removeItem("user");
  };
  return();
};

✍🏻 로그인/로그아웃 조건부 렌더링 - Header

로그인 전 화면

→ 우리의 경우,
로그인을 하지 않았을 때, 시작창(팀원 정보 및 사용한 기술 스택이 보이는 창)이 보이고 Header만 보이게 작업하였다. 이 때 Header는 logo, input 창, login button, sign up button으로 구성된다.

로그인 후 화면

→ 로그인 후에는 위와 같이 스택오버플로우와 같은 화면이 보이고, Header는 logo, input 창, user image,log out button으로 구성된다.

→ 코드는 위에서 이야기한 것처럼 로그인을 하지 않았을 때는, login button과 signup button을 보여주고 로그인 했을 때는 user image와 logout button이 보여지도록 삼항연산자를 사용하였다.

return (
...
 <div className="center">
          {  !login 
          ? 
          <>
          <a href="/users/login">
              <button className="login">Log in</button>
          </a>
          <a href="/users/signup">
              <button className="signup">Sign up</button>
          </a>
          </>
          : 
          <>
          <div className="person">
              <img
                src={`https://picsum.photos/seed/picsum/200/200`}
                alt="image"
                className="people"
              />
            </div>
          <a href="/">
            <button onClick={onClickLogOut} className="logout">
              Log out
            </button>
          </a>
          </>
            }
          </div>
...
)

✍🏻 로그인/로그아웃 조건부 렌더링 - Sidebar, Footer

→ 로그인 여부에 따라 layout에서 Sidebar와 Footer도 다르게 보이도록 설정하였다.

→ 개인적으로, 이 부분을 작성하는데 어려움을 겪어 이렇게 블로깅을 하며 다시 학습해보고 있다.
router, pathname 이렇게 사용하면서 배웠다!

import Header from "../components/Header";
import Footer from "../components/Footer";
import Seo from "./TopQuestion/Seo";
import SideBar from "./SideBar";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
export default function Layout({ children }) {
  const router = useRouter();
  console.log(router.pathname);
  const [login, setLogin] = useState(false);
  useEffect(() => {
    console.log("a");
    if (localStorage.getItem("accessToken") !== null) {
      setLogin(true);
    } else {
      setLogin(false);
    }
  });
  return (
    <div className="layout-container">
      <Seo />
      <Header />
      <div className="content">
        <div className="sideBarBox">
          {router.pathname === "/users/login" ? <SideBar /> : null}
        </div>
        {router.pathname === "/users/login" ? null : router.pathname ===
          "/users/signup" ? null : login ? (
          <SideBar />
        ) : null}
        <div className="children">{children}</div>
      </div>
      {router.pathname === "/users/login" ? null : router.pathname ===
        "/users/signup" ? null : (
        <Footer />
      )}
<style jsx>{`
`}</style>
);
}

✍🏻 next.config.js 수정 후에는 서버 다시 실행하기

→ 이 부분은 별 것 아닌데, 팀원 모두가 모르고 있어 시간을 잡아 먹었던 부분이다.

next.config.js를 수정하고 나서 그대로 local에서 확인하니 오류가 뜨고, 되지 않는 것을 확인할 수 있었다. 무엇이 문제였나 했는데 next.config.js를 수정하고 나서는 서버를 다시 실행해야한다는 것을 알게 되었다! 이렇게 또 하나 배웠다!

✍🏻 회고

→ 사실 백엔드 측에서 cors 에러를 잡지 못해 위와 같이 에러 메세지 뒤에 보이는 창으로 우리가 작성한 코드가 작동하는지 확인하며 하느라 어려움이 있었고, 프론트엔드 팀원들이 불안해하고 초조해하였는데

이 때 팀원들에게 프리 프로젝트는 메인 프로젝트 전 충분히 연습해보는 시간이라는 프로젝트의 목적을 상기시켜드리고, 프로젝트 결과와 상관없이 이 과정에서 우리가 배우고 알게 되고 성장한 것에 집중해보자 이야기를 하며 마음을 잡았다.