멋쟁이사자처럼 10기 - 중앙해커톤

지하철에서 내 앞에 앉은 사람의 내리는 역이 알고 싶었던 적 없으신가요..
지하철에서 서로 내리는 역을 공유 할 수 있는 서비스, '너낼역' 프로젝트에 참여했습니다.

너낼역 : 너의 내리는 역이 알고싶다

멋쟁이사자처럼 10기 중앙 해커톤 출전

• 이번 해커톤 목표는 타 동아리에서 새롭게 배운 기술들을 이해하면서 다시 적용해보는 것이었다. (ex. redux-toolkit, redux-persist, jwt 토큰 기반 인증)

---

1. 리덕스 : 로그인 유지 구현하기

Redux-persist와 Redux-toolkit을 이용해 여러번의 프로필 조회 없이도 유저 정보를 저장 할 수 있도록 구현했다.

• 내용이 길어서 별개의 포스트로 작성했다.
  -> 리덕스를 사용한 로그인 유지!

---

2. API 관리 : 폴더 정리

api 폴더와 service 폴더 관리

• api 함수들을 모두 한 파일에 작성하고 export하여 사용하는 방식
  이렇게 구현하면 중복되어 사용되는 api 코드를 여러번 쓰지 않아도 된다.

---

3. 모달 : 스크롤 방지 코드

position을 fixed로 설정해 스크롤을 방지했다.
이때 top: -${window.scrollY}px; 를 사용해 현재 스크롤 위치로 이동시켜주지 않으면 모달이 최상위로 이동해버린다.
그리고 모달이 사라지면 window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);를 사용해 원래 위치로 이동시켜준다.

  useEffect(() => {
    document.body.style.cssText = `
          position: fixed;
          top: -${window.scrollY}px;
          overflow-y: scroll;
          width: 100%;`;
    return () => {
      const scrollY = document.body.style.top;
      document.body.style.cssText = "";
      window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
    };
  }, []);

좀 더 깔끔하게 정리한다면 다음처럼 작성할 수 있겠다.

function Modal(props) {
  useEffect(() => {
    // modal이 떠 있을 땐 스크롤 막음
    disableScroll();
    // modal 닫히면 다시 스크롤 가능하도록 함
    return () => enableScroll();
  }, []);
 
  // 생략
}
export default Modal;

---

4. Bearer 타입 JWT 토큰 인증

처음엔 쿠키 기반의 로그인을 구현하려했으나, 어떤 이유에선지 브라우저 쿠키에 토큰이 저장되지 않는 문제가 발생했다. 거의 일주일 넘게 삽질을 했으나 해결하지 못했고, 결국 로컬 스토리지를 사용하기로 했다.

(+ 이후에 알아보니, 프론트엔드와 백엔드의 도메인이 동일하지 않아서 발생한 이슈였던 것 같다.
쿠키를 사용하기 위해 프론트와 백에서 해야하는 여러 설정이 있다고 한다.)

Bearer란?
토큰 기반 인증을 하면서 Bearer 타입을 처음 알게 됐다.
일반적으로 토큰은 요청 헤더의 Authorization
필드에 담아져 보내진다.

Authorization: <type> <credentials>

bearer는 위 형식에서 type에 해당하는 것이다. 토큰에는 많은 종류가 있고 서버는 다양한 종류의 토큰을 처리하기 위해 전송받은 type에 따라 토큰을 다르게 처리하게 된다.

http 컴포넌트 코드

토큰이 존재하는 경우 (로그인 된 경우)에만 http의 헤더에 토큰을 추가했다.

import axios from "axios";

const http = axios.create({
  baseURL: "https://cha2y0ung.pythonanywhere.com",
});

http.defaults.withCredentials = true;

const token = JSON.parse(localStorage.getItem("token"));
console.log("토큰 :", token);

http.defaults.headers.common["Authorization"] = token
  ? `Bearer ${token}`
  : null;

export default http;