uni's code uni's code

들어가며 지난 번 글([Next.js] Next.js 13에서 유저의 권한에 따른 protected route / protected api Setting (권한에 따른 페이지 접근 제한)에서 권한에 따라 페이지 접근 로직을 다루었다. 이 글에 나온 내용에서 방안4인 middleware를 사용한 방법으로 실제 프로젝트에 도입해보려고 한다. next.js에서 middleware는 페이지를 이동하려고 할 때, 중간에 검증 함수 역할을 한다. 여기서 유저의 권한 인증에 대해 검증 함수를 추가하여, 유저 권한에 따른 페이지 접근 가능 여부를 구현가능하다. 예를 들어, 로그인한 유저가 로그인 페이지에 접근하는 것은 올바르지않다. 반대로, 로그인 하지 않은 유저가 로그인이 필요한 마이페이지에 접근하는 것도 옳지 않다..

들어가며 개인 프로젝트를 저번 달부터 안정화가 된 next.js 13으로 진행하고 있다. 로그인 유무에 따라 페이지 접근 권한을 제한하는 셋팅을 적용하면서, 정리한 내용을 적어본다. 12와 달라진 점에 대해서도 나중에 블로그에 적어야겠다. ✏️ 목적 유저의 상태에 따라 접근 페이지 구분이 필요하다. 예를 들어, 로그인한 유저가 로그인 페이지에 접근하는 것은 올바르지않다. 반대로, 로그인 하지 않은 유저가 로그인이 필요한 마이페이지에 접근하는 것도 옳지 않다. next.js 13은 server rendering을 지원하기 때문에, protected route를 지정할 때 “어디서” 유저의 권한을 확인하는지가 중요하다. 그래서 "어디서"를 초점으로 사용할 수 있는 방법들에 대해 알아보자. 방안 1) clie..

next.js에서 seo를 위해 meta 적용하는 방법은 크게 2가지가 있다. 1) _document.tsx 와 next/head를 이용하여 meta tag를 삽입 2) next-seo 패키지를 통해 더 쉽게 meta tag 설정 여기서는 next-seo 패키지를 통해 meta tag를 설정해보겠다. [Next.js에서 next-seo를 통해 Meta tag 손쉽게 적용하기] 1. next-seo 설치하기 npm install next-seo https://github.com/garmeeh/next-seo GitHub - garmeeh/next-seo: Next SEO is a plug in that makes managing your SEO easier in Next.js projects. Next S..

안녕하세요. 이 글은 이전 글과 이어진 글입니다. https://uni-s-code.tistory.com/43 [Next] i18n 자동화 프로세스 도입 - (1) : i18next-scanner를 통해 코드에서 key 값 추출하기 이 글은 https://meetup.toast.com/posts/295 참고자료를 바탕으로 직접 적용해보면서 작성한 글입니다. 국제화(i18n) 자동화 가이드 : NHN Cloud Meetup 프런트엔드 개발을 하다 보면 국제화와 번역을 수작업과 uni-s-code.tistory.com 이전 글을 읽지 않으신 분들은, 이전 글을 참고해주시길 바랍니다. 이 글은 https://meetup.toast.com/posts/295 참고자료를 바탕으로 직접 적용해보면서 작성한 글입니다...

development 환경에서 console.log는 버그를 잡는데 유용하게 쓰이거나, 중간 중간 상태 값들을 확인하는데 필요합니다. 하지만, production 환경(배포된 라이브서버)에서 console.log를 무자비하게 유저에게 보여진다면, 자칫 중요 정보를 보이게 할 수 있고, 지저분해 보일 수 있습니다. 프로젝트 내 console.log를 다 지우는 방법도 있겠지만, 놓칠 수 도 있으며 귀찮은 일입니다. 또한, dev 환경에서 버그 테스트를 하기 위해 일부러 console.log를 남기는 경우도 있을 것입니다. 그래서 prod환경에서는 console.log를 아예 노출이 되지 않도록 설정을 하고자 합니다. 크게 방법은 2가지 입니다. 1. babel plugin 설치 1) babel-plugin..

1. i18n 자동화 프로세스 도입 배경 서비스에 유저에 해당하는 국가의 언어로 세팅하거나, 그 국가에 맞는 sw를 개발하는 과정을 i18n이라고 칭한다. 서비스에서 I18n을 성공적으로 이끌기 위한 가장 큰 요소는 번역이라고 할 수 있다. 이때, 번역을 서비스에 입히기 위해서는 아래와 같은 불편한 절차가 진행될 것이다. 1) 번역 담당자는 서비스에 번역이 필요한 언어를 선정하고, 서비스에서 번역이 필요한 부분을 정리하여 번역가들에게 번역을 넘겨야 한다. 2) 그 이후, 전달 받은 번역을 개발자에게 전달하여 서비스에 적용하는 작업을 해야 한다. 이 과정에서 아래의 단점이 있다. 첫번째로, 번역가에게 필요한 부분을 넘기는 과정에서 필요한 부분을 정리하고, 메일 등으로 전달해야 하는 번거로운 의사소통 작업이..

1. 설치 yarn add next-i18next npm install next-i18next 2. 사용법 (1) 루트 디렉토리에 next-18next.config.js 생성 module.exports = { i18n: { defaultLocale: "en", locales: ["en", "ko"], // 지원하는 locale 목록 }, }; (2) public 폴더 → locales 폴더 → 각 언어 코드 폴더 (en, ko) → common.json next.js 에서 i18n을 지원하고 있기 때문에, public/locales 라는 지정된 폴더 위치에 생성하면 됨. (3) next.config.js 에 next-18next.config.js 추가 /** @type {import('next').Nex..

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