NextJS 8

Next JS URL 직접 접근 막기

#1 들어가기 오늘 포스트는 Next JS에서 URL 직접 접근 막기와 관련하여 글을 써보도록 하겠습니다. 항상 기능을 고도화 하는 과정에서 빠질 수 없는 부분인 것 같습니다. 서비스를 출시할 때 내가 아닌 타 사용자들이 쓸 때 어떠한 환경이 좋은 환경인지 어떤 사용자 경험이 좋은 경험인지에 대해 지속적으로 고민을 해야 할 것 같습니다. 그런 부분에 있어 로그인을 해야만 접근할 수 있는 페이지에 URL을 직접 치고 들어갔을 때 접근이 된다면 보안에 큰 타격이 되겠죠? 그 전에 Next Docs를 한번 살펴봅시다 ! #2 NextJS DOCS Next의 구동순서는 _app.js와 _document.js가 제일 처음 실행되며, 두 파일 모두 pages 폴더 안에 있어야 한다. 1. _app.js 최초로 실행..

NextJS 2022.09.08

Next js에 채널톡 (ChannelTalk) 달기 (Custom Hook)

오늘은 Next.js에 채널톡 달기에 대해서 포스트 해보도록 하겠습니다. 채널톡 설치는 생각보다 간단합니다. https://developers.channel.io/docs/web-installation Installation General case To use Channel Plugin SDK in javascript, insert below script into tag in your html. It will first load up Channel Plugin SDK, then process all necessary steps in order to get Channel ready to use. The only required field to use our SDK developers.channel.io 여..

NextJS 2022.06.21

Next.js에서 Container-Presenter? 디자인패턴의 대한 고민

저는 가장 관심있어 하는 부분 중 하나가 프로젝트를 밑바닥부터 쌓아 올릴 때, 이 프로젝트를 어떻게 빌드업 해나갈 것인가? 즉, 설계에 대한 부분에 큰 관심이 있습니다. 클라이언트단에 어떠한 요구사항이 들어와도 처리할 수 있는 능력과 프로젝트 설계 능력을 가장 중점적으로 생각하고 있습니다. 제가 처음 입사해서, 프로젝트를 맞이했을 때와 현재 시점에서 프로젝트를 볼 때 관점의 차이가 생기는 것 같습니다. 다들 프로젝트의 디자인패턴은 어떤 걸 사용하시나요? 처음 프로젝트를 맞이했을 때, 저희 프로젝트는 가장 기본적인 디자인 패턴 Container, Presenter패턴을 사용하고 있었습니다. Container에서는 비즈니스 로직과 관련된 코드, Api를 수행하고 state를 조작해서 props로 Presen..

NextJS 2022.03.13

Next.js Optional catch all routes (옵셔널 라우트)

https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes Routing: Dynamic Routes | Next.js Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here. nextjs.org Next Docs Dynamic Routes 섹션에서 어렴풋이 보고 넘겼던 적이 있는데, 이번에 인앱 브라우저 환경 관련 SNS 작업을 하면서 적용하게 된 내용을 정리해보려고 합니다. 처음엔 SNS 로그인 라우터 설정을 메인페이지로 넘어가서 체크를 했습니다. 이렇게 되면 회원..

NextJS 2022.02.03

SSR(ServerSideRendering) 환경에서 쿠키값 처리 이후에..

#1 들어가기 저번 포스트에서 https://kjhg478.tistory.com/34 SSR 환경에서 쿠키값을 넣는 포스트를 작성했었습니다. 쿠키값과 관련한 모든 문제를 해결했다고 생각하고 다시 테스트 및 추가 작업을 하고 있었습니다. 그러나 Next.js의 SSR(getServerSideProps) 및 SSG(getStaticProps)로 Date Fetching을 하는 페이지에 세션이 만료된 상태로 접근하게 되면 에러가 나는 것입니다. https://nextjs.org/docs/basic-features/data-fetching 제가 또 어떤 부분을 놓쳤는지 포스트를 해보도록 하겠습니다. #2 이슈 총, 두 가지 상황에서 에러가 났습니다. 세션이 만료되었을 때, SSR 환경인 투자하기 페이지 접근 및..

NextJS 2022.01.27

SSR(ServerSideRendering) 환경에서 쿠키 넣어주기

#1 들어가기 안녕하세요. 오늘은 SSR 환경에서 쿠키를 넣는 것에 대해서 포스트를 써보려고 합니다. Next.js를 쓰면서 SSR 환경에서는 정말 많은 것들을 더 고려해줘야 하는구나를 많이 느끼는 것 같습니다. #2 이슈 및 해결 저희는 프로젝트 접근권한과 관련하여 사모 기능을 추가하였습니다. 사모 기능으로서 클라이언트에 프로젝트 접근권한 처리를 서버에서 해주었지만, 서버 환경이기 때문에 쿠키를 알 수가 없습니다. 즉, SSR 환경에서는 쿠키값을 모르기 때문에 따로 설정을 해주어야 합니다. let sessionId; if (isServer(ctx)) { // 서버 환경일 때 쿠키를 심어줌 const cookie = getCookie(ctx); // defaults : 모든 axios 요청 시에 쿠키 데..

NextJS 2022.01.25

NextJS

#1 NextJS Next.js는 따로 설정을 해주지 않고 SSR, SEO부터 Javascript, Typescript까지 생산에 필요한 많은 기능들을 제공합니다 #2 Pre-Rendering 기본적으로 Next.js는 모든 페이지를 미리 렌더링 합니다. 클라이언트 측 Javascript에서 모든 작업을 수행하는 대신 각 페이지에 미리 HTML을 생성합니다. 사전 렌더링은 더 나은 성능과 SEO의 이점을 가져올 수 있습니다. 이렇게 만들어진 HTML은 해당 페이지에 적은 자바스크립트 코드와 연관되는데, 페이지가 브라우저에 로드될 때, 해당 자바스크립트 코드가 작동하고 완전한 인터렉티브 페이지가 되도록 만듭니다. 이를 Hydration이라고 합니다. #3 두 가지 형태의 Pre-Rendering 1. St..

NextJS 2021.07.10