next.js (3) 썸네일형 리스트형 [Next.js] middleware를 사용하여 라우팅 제어하기 Next.js는 아주 강력하고 편리한 'app routing' 기능을 제공하고 있다.단순히 app 디렉토리 아래에 폴더만 만들어주면 되기에, 웬만한 유저들은 하나의 엔드포인트에서 여러 컴포넌트를 사용하기 보다는앱 라우팅을 활용하여 유동적인 페이지간 이동을 구현하고 있을 것이다. 그런데, 가끔씩 원치 않는 이동이 이루어지는 경우가 있다. 예를들어, 로그인을 하지 않은 유저가 회원 전용 페이지에 들어갈 수 있게 된다던가주소는 존재하지만 접근 방법이 없는 페이지(종료된 이벤트 페이지 등)에 접근한다던가위처럼 일반 유저가 멋대로 관리자 페이지에 들어가는 경우도 있을 것이다. 웹은 url을 기반으로 라우팅된다.그 말인 즉슨, url을 직접 조작하면 이론상 어떤 경로든 맘대로 접근 할수 있다는 것이다.그렇게 되면 .. [Next] API Routes를 이용해 사이드 서버 구축 해보기 with Typescript 최근 이곳저곳 면접을 다니면서 포트폴리오를 조금 손봐야겠다는 생각이 문득 들었다.가장 큰 이유는 역시 종료된 프로젝트 관리 미흡. 나는 프론트엔드 개발자이기 때문에 프론트엔드 쪽에서 문제가 발생하면 바로 고칠 수 있지만,백엔드 쪽에서 발생한 문제는 거의 손대기가 불가능 했기에 백엔드 API가 사라졌다거나, 서버가 닫혀버리는 경우에는 꼼짝없이 프로젝트 하나를 버리게 되는 것이었다.하지만 공들여 진행한 프로젝트를 '없던 일'로 쳐버리는건 너무 아쉽기 때문에, 스스로 백엔드 서버를 만들어 프로젝트를 살려보기로 했다.1. Next.js API Routes와 서버 생성Next.js 설치 및 적용은 나보다 더 상세하게 작성 해 주신 분들이 많기에 생략한다.Next.js를 설치 후 프로젝트를 만들면 src 폴더 내의.. [Next] Next.js의 layout 적극 활용해 보기 next.js를 사용하다 보면, 가끔씩 모든 페이지에서 보이는 컴포넌트가 필요할 때가 있다.예를들면 헤더라던가...내비게이션바라던가...또는 앱 라우팅을 사용할 때, 특정 라우터를 가지는 모든 컴포넌트들이 공통된 스타일을 가진다던가...보통 React였다면 전체적인 틀을 가지는 공용 컴포넌트를 설정해 놓고, 라우팅 경로에 따라 각각 다른 데이터를 넣어주는 방식을 사용할테지만, Next.js에는 'Layout'이라는 아주 좋은 기능을 제공하고 있다.그런 의미에서, layout을 어떻게 사용하고 또 적용하는지에 대해 실제 페이지 제작을 통해 알아보도록 하자.1. layout의 적용 범위 우선 레이아웃은 'Root layout'과 'Local layout'으로 나뉜다.루트 레이아웃은 말 그대로 '앱 내 모든 .. 이전 1 다음
