민코딩 연구소 사이트 제작기(3) - 프론트엔드

https://mincodinglab.com/

민코딩연구소 [기업 대상 알고리즘 강의]

해당 글은 위 사이트에 대한 제작기를 바탕으로 작성된 글입니다. 

 

https://loy124.tistory.com/389

민코딩 연구소 사이트 제작기(1) - 스택및 설계

 

 

https://loy124.tistory.com/390

민코딩 연구소 사이트 제작기(2) - 백엔드

 

스택을 정하고 백엔드까지 만들었으니 이제 프론트엔드를 만들 차례였다. 

 

프론트엔드에서 고려한 요소는 다음과 같다. 

 

1. 받은 디자인 react 방식에 맞게 변환하기
2. SWR 도입
3. SEO 고려하기

 

react 방식에 맞게 변환하기

외주로 받은 html + css + jquery형태의 사이트를 이제 컴포넌트방식으로 분리하는 부분이 은근 문제였다.

 

기본적으로 class -> className으로 일괄 변경하는것부터 

제이쿼리로 되어있는 부분들을 순수 자바스크립트로 변경 & 비슷한 라이브러리 찾기 등으로 대체했다.

 

외주로 디자인을 받아서 옮기는 작업이 가장 쉬울것이라 생각했는데 해당 부분도 비슷한 라이브러리 찾는등의 방식을 취하느라 생각보다 애를 먹었던 작업이다.

 

 

SWR 도입하기 

next.js에서 만든 SWR 라이브러리를 도입했다.

 

swr은 데이터를 가져오기 위한 react hook 라이브러이다. 

캐싱되어있는 데이터가 있으면 먼저 가져오며 데이터를 호출한후 마지막으로 데이터를 업데이트 하는 방식이다. 

 

https://www.npmjs.com/package/swr

swr

 

SWR을 두가지 용도로 사용했는데 

1. Data Fetching

  SWR은 기본적으로 지속적이고 자동적인 데이터를 받아오는 것이 가능하다.

swr + axios를 활용하게 되면 내부 검증을 통해 자동적으로 데이터를 받아오는게 가능하다(웹사이트 포커싱, 특정 시간이 지난 후 자동으로 데이터 가져오기 등)

데이터가 업데이트 됐을 경우 웹사이트를 포커싱하게 되면 데이터를 가져오게 된다. 

 

 

2. 전역 상태 관리

SWR은 react redux 처럼 전역적인 상태 관리가 가능하게 된다

 

import useSWR from "swr";

let prevState = "";
export function useRouteStateSWR() {
    const {data, mutate} = useSWR<string>("prevState", () => {
        return prevState;
    })

    return {
        data, mutate: (value: string) => {
          prevState = value
            return mutate()
        }
    }
}

 

 

 

 

 

기존의 원격상태관리와 더불어

위와 같이 로컬 상태를 관리하는 함수를 만들어서 로컬 상태로 관리할때도 사용하였다. 

 

 

SWR을 도입해서 원격 + 로컬 상태관리로 사용하니 굉장히 편하게 상태관리하는것이 가능했다 :)

 

 

https://loy124.tistory.com/392?category=904041