uni's code uni's code

vue를 사용할 때는 vue-router에서 제공하는 navigation guard 기능이 있었기 때문에, 각 페이지에 접근을 할 때 guard 처리해주기가 수월했다. 하지만, next.js에서는 그러한 기능이 따로 없기 때문에 직접 만들어야 했다. 그래서, hoc를 통해 next.js router guard(navigation guard)를 만들어보고자 한다. 1) 목적 각 페이지에 접근을 할 때, 각 페이지별 접근을 할 수 있는 유저가 있고, 접근이 불가능한 유저가 있을 것이다. 예를 들어, 로그인 페이지 같은 경우 로그인을 안한 유저는 접근이 가능하지만, 이미 로그인 한 유저라면 접근이 불가능하게 만들어야 한다. 이러한 접근에 대한 검사를 매 페이지마다 이루어져야 하는데, 각 페이지 컴포넌트에 이 ..

오늘은 react의 hoc 패턴에 대해 알아보겠습니다. 1) hoc란? hoc는 high order component의 약자로써, 고차컴포넌트라고 합니다. 쉽게 말하면, 다른 컴포넌트(=자식)를 감싸는 wrapper 컴포넌트(=부모)라는 뜻입니다. 리액트 공식 문서에 따르면 hoc를 사용하는 이유는 횡단관심사의 분리 입니다. 횡단관심사는 Cross-Cutting concern이라고 합니다. 하나의 컴포넌트만 가지고 있는 관심사를 넘어서 여러 컴포넌트에서 가지고 있는 공통의 관심사라는 의미입니다. 예를 들어, 각 페이지 별 유저에 대한 권한을 검사해 검증을 하는 기능이 공통적으로 가지고 있다고 합시다. 이러한 권한 검사가 공통의 관심사가 됩니다. 이러한 페이지 컴포넌트를 자식 컴포넌트로, 검증하는 컴포넌트..