코드캠프 부트캠프 23일차

개발일기·2022년 2월 15일
0

Next.js 렌더링

어제 로그인의 역사와 프로세스에 대한 전반적인 이해를 배웠고 로그인을 구현해보는 과정을 거쳤다. 오늘은 로그인을 위한 accessToken을 브라우저가 아닌 브라우저 저장소에 저장하는 법에 대해 알아보자.

대표적인 브라우저 저장소로는 3가지가 있다.
Cookie, localStorage, sessionStorage

Cookie: 영구저장되지만 만료시간을 지정할 수 있으며, 보안을 강화할 수 있는 옵션들이 존재한다.
localStorage: 영구저장되며, 보안이 좋지 않다.
sessionStorage: 브라우저가 종료시에 저장되어있는 정보들이 사라진다.

이번 시간에는 보안상 문제가 좋지 않지만, 원할한 개발을 위해 임시로 localStorage에 저장시키는 법을 알아보자.

vsCode에서 accessToken을 얻게 되면 그 값을 localStorage.setItem("key값", value값)을 사용하게되면 해당 accessToken이 value에 저장이되고, .getItem("key")를 입력하게 되면 value값을 불러올 수 있게된다.
여기서 Next.js의 렌더링과 관련된 이슈가 생긴다.

Next.js의 경우에는 브라우저로부터 요청이 오면 프론트엔드 컴퓨터에서 브라우저에 html, css, js 을 넘겨주는데, 넘겨주기 전에 미리 그려본 후 (Pre-rendering) 브라우저에 그려준 뒤, 비교하고(diffing) 변경사항을 적용(hydration)한다.
프론트엔드 컴퓨터에는 브라우저저장소인 localStorage가 없어서 오류가 뜨게 되는데 3가지 조건을 통해 이 오류를 해결할 수 있다.

process.browser, typeof window !== "undefined", useEffect

HOC / HOF

앞서 배운 내용들을 토대로 권한분기를 분리하는데 우리는 로그인을 한 유저와 로그인을 하지 않은 유저를 구분하는 권한 분기를 사용할 수 있다. 대표적으로는 사용자(User) 프론트앤드 서버, 관리자 프론트앤드 서버로 나뉘며 배달의 민족의 경우에는 배민 라이더용 프론트앤드 서버, 구매자용 프론트앤드 서버, 점주 프론트앤드 서버등 최소 3개 이상의 권한분기를 사용한다.
우리는 useEffect를 사용하여 accessToken이 없으면 login을 하게끔 페이지를 이동시켜줬는데 로그인이 필요한 모든 페이지에 로직을 입력해 주어야 한다는 문제가 생긴다. 이를 위해 HOC(Higher Order Component)를 사용한다.
HOC를 알기 위해선 HOF(Higher Order Function)를 알아야하고 HOF를 알기 위해서는 클로저(closure)의 개념을 알아야 하고 클로저(closure)를 알기 위해서는 스택(stack)구조와 스코프(scope) 개념에 대해 알아야 한다. 스택 구조는 First-In/Last-Out구조로 먼저 실행되는 순서대로 쌓이는 구조이다. 스코프 체인을 통해 Local에서 Closure(가장 가까운 외부함수)에서 Global 순으로 변수의 해당 값을 찾기 위해 올라간다. 즉, 클로저는 외부 함수에 접근할 수 있는 내부함수를 의미한다.

HOC와 HOF의 차이는 Component와 Function의 차이로 JSX를 return하면 Component, 그렇지 않으면 Function 이라 할 수 있다.

HOF를 사용하면, event.target.id를 사용하지 않아도 되므로 코드가 짧아지는 장점이 있으며, id가 남용되면서 대규모 서비스에서 예기치 못한 오류를 방지할 수 있다.

HOC는 특정 컴포넌트를 실행하기 전에 상위 컴포넌트를 먼저 실행시켜 주는 것이다. 이렇게 되면 HOC라는 컴포넌트를 하나 만들어놓고, 로그인이 필요한 컴포넌트 앞에 HOC만 붙여주면 간단하게 권한처리가 끝난다.

profile
개발자가 꿈이에오

0개의 댓글