(Front) SPA 설정 - useLocation

기본적으로 우리팀이 개발하는 웹사이트는 spa로 돌아가기에
나는 react-router-dom을 이용해 spa 환경을 구축해보았다.

우선은 react-router-dom을 설치한뒤,
BrowserRouter, Route, Switch를 import해왔고, 각 컴포넌트에는 Link를 import 했다.

여기서 각 기능을 짚고 넘어가자면,

• BrowserRouter: 웹 애플리케이션에서 HTML5의 History API를 이용해 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해준다.

• Switch: 여러 Route를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만을 렌더링 시켜주는 역할

• Route: path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정한다.

• Link: 경로를 연결해주는 역할, 페이지의 주소만 변경한다. 렌더시키면 a태그로 변경된다.

Navigation bar는 항상 렌더 되어있어야 하기에 Switch 바깥에 위치시켰다.
여기서 하나 어려운점이 있었는데, 특정 페이지(로그인, 회원가입)페이지에서는
Navigation bar가 렌더되지 않았어야 했다.

이를 어떻게 구현하는지에 대해서 찾는데 수많은 시간이 들었다.
나는 삼항연산자를 이용해서 특정 path라면 Navigation bar가
출력 되지 않도록 하였다.

특정 path값을 얻을 수 있는 useLocation을 사용했다.

useLocation hooks는 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks 입니다.
이 hooks는 defaultProps 하나인 location 객체를 대체 하는 react-router-dom hooks 입니다.

import React from 'react';
import { useLocation } from 'react-router-dom';

const Home = (): JSX.Element => {
  const location = useLocation();
  console.log(location);
  
  return (
    <></>
  );
}

export default Home;

사용 방법은 다음과 같으며 import해온 useLocation 실행한 결과를
변수에 저장하면 그 변수에는 현재 페이지에 관한 값이 객체형태로 조회된다.

이중에서 pathname라는 키에 현재 페이지의 path값이 나왔고
이는 Route에서 설정한 path값이다.
이를 이용해 조건 설정하였다.

여기서 삽질하게 된게 두가지 있다.
하나는 내가 BrowserRouter를 index.js가 아닌 APP.js에서 사용했다.
이 때문에 useLocation이 작동 되질 않았다.
또 하나는 location이라는 변수를 사용하게되면,
defaultProps의 location과 충돌하여 지정되지 않았다는 에러가 발생했다. 나는 그래서 줄여서 loca라고 변수를 지정했다.

{loca.pathname === "/login" || loca.pathname === "/signup"? (<></>) : (<Nav/>)}

여기까지 오는데 수많은 시간이 걸렸다...
역시 나는 삽질왕

(Back) API 재설정 & 스키마 재설정

SR때 어영부영 진행했던 API를 팀장님과 함께 본격적으로 명확하게 수정했다.
우선 기능적으로 핸들링 될 API를 추가로 설정하였고, 이를 프론트엔드에 전달하였다.
이후 스키마에서 관계 설정에 에러가 있어 이를 수정하였다.
여기까지 작업은 어렵지 않았다.

(Back) 시퀄라이즈 관계형 설정

스키마 변경이 이뤄졌으니 DB에도 적용시켜야했다.
이때 문제점이 발견되었다.
우리팀의 DB에는 좋아요와 싫어요 테이블이 있다.
sequelize에서는 우선 model을 정의하고 migration을 해야 DB에 적용이 된다.
좋아요와 싫어요는 N:M 조인 테이블이라서 왜래키는 모델 생성뒤 적용시키는것으로 알고있다.
두 테이블은 본인의 순수한 값은 없고 오직 Foreign Key만이 존재했다.(userId, postId)
여기서 문제가 생겼다.
순수한 Column값이 없다보니 model 정의를 할 수 가 없었다.
npx sequelize model:generate --name Task --attributes
이 명령어에서 attributes값을 입력하지 않으면
Attribute '' cannot be parsed: Cannot read property 'dataType' of undefined
다음과 같이 attribute의 값을 읽어올 수 없다는 에러가 발생하였다.

또 하나의 난관에 봉착했고 이는 오늘 해결하지 못했다...

참고사이트

https://velog.io/@yiyb0603/React-Router-dom%EC%9D%98-%EC%9C%A0%EC%9A%A9%ED%95%9C-hooks%EB%93%A4