얼마전에 Next JS로 진행하고 있는 프로젝트에 채널톡을 추가하게 되었는데 스크립트 추가하는 방법에 대한 글이 없어서 필자가 채널톡을 추가할때 사용한 방법을 해당 포스트에서 공유해드리고자 합니다. 채널톡 스크립트 추가하기채널톡은 플러그인 스크립트를 통해 추가 해줄 수가 있는데 현재 개발자 문서에서 안내하는 두가지 방법으로는 정적페이지일 경우 index.html에 script를 즉시실행함수 형식으로 추가해주는 방식과 SPA(Single Page Application)일 경우 클래스로 관리를 해서 DOM이 생성된 경우 스크립트를 추가하는 방법이 있습니다. Next JS는 정확하게 구분하면 정적 페이지도 아니고 SPA도 아니지만 조금 변형해서 두가지 방법 모두 사용 가능합니다. dangerouslySetIn..

Next JS는 SSR 프레임워크이긴 하지만 Link 컴포넌트나 Router를 통한 Client Side Navigation (페이지 전환이 JS를 통해 이루어짐)이 가능하기 때문에 페이지 이동시 CSR 앱만큼이나 좋은 UX경험을 전달할 수 있습니다. 이번 포스트에서는 Next JS에서 라우터를 통한 페이지 이동을 할 때 좋은 사용자 경험을 위해 적용할 수 있는 로딩 처리 방법에 대해 알아보겠습니다. Router 이벤트 위에서 보이는바와 같이 로딩 처리를 하고 안하고의 차이는 웹앱을 사용하는 사용자 입장에선 매우 큽니다. 가벼운 페이지나 SSG를 방식을 통해 생성된 페이지는 괜찮을 수도 있지만 서버사이드 랜더링을 해야 하는 페이지에서 좀 무거운 작업을 하게 된다면 로딩 상태를 알릴 수 있는 Spinner..

이번 포스트에서는 Next JS(서버사이드 랜더링)의 최대 장점 중 하나인 SEO를 처리하는 방법에 대해 알아보도록 하겠습니다. SEO란? 이미 Next JS를 사용하고 있거나 사용하기로 마음 먹으셨다면 SEO에 대해 알고 있을 것이라고 생각되지만, 간단하게 설명드리자면 Search Engine Optimization의 약자로 웹에 올리는 컨텐츠가 구글, 네이버, 다음 같은 검색 엔진으로부터 제대로 인식이 될 수 있도록 최적화를 하는 작업입니다. 최적화 방법에는 양질의 콘텐츠를 제공하거나, 접근성이나 성능적으로 뛰어난 웹을 개발하는 방법 등이 있지만 가장 기본적인 방법으로는 해당 페이지에 적합한 메타태그를 삽입해서 크롤러가 웹을 잘 분석해서 인덱싱 하는데 도움을 주는 방법입니다. 구글에서는 최대한 많은 ..

이번 포스트에서는 Promise 객체의 정적 메소드인 all 과 race에 대해서 알아보도록 하겠습니다. 두 메소드 모두 프로미스 배열을 인자로 받지만 동작하는 방법에는 큰 차이가 있기때문에 두 메소드의 차이점과 각각 어떤 상황에 유용하게 사용할수 있는지 예시와 함께 살펴보도록 하겠습니다. 프로미스(Promise)란? 자바스크립트에서 프로미스는 비동기 처리를 위한 패턴(객체 형식)중 하나로 기존 콜백 패턴의 단점을 보완해서 ES6에 도입되었습니다. 현재는 비동기 처리를 동기방식의 코드를 작성하듯이 사용가능한 async await 문법이 추가가 되었지만 이는 프로미스를 대체하는 패턴은 아니며 결국에 async 함수가 반환하는 값은 프로미스입니다. 프로미스는 pending(대기), reject(실패), fu..

오늘은 Image 컴포넌트를 이용해 배경 처리를 하는 방법을 알아보겠습니다. Next의 Image 컴포넌트를 사용하지 않고 css의 background-image 속성을 사용해 배경 처리를 해줄 수도 있지만 이럴 경우 resizing을 별도로 처리해줘야 하기 때문에 이미지 최적화를 자체적으로 지원하는 Image 컴포넌트를 사용해서 배경 처리를 해주도록 하겠습니다. Image 컴포넌트에 관한 포스트를 아직 읽지 않았다면 아래 링크를 참고해주세요. [NEXT.js] 넥스트 JS를 배워보자 3편 - 최적화된 이미지 컴포넌트 개인적으로 Next JS를 처음 접했을 때 가장 흥미로웠던 건 이미지 최적화 (Image Optimization) 관련 부분이었다. 그냥 React로 이미지 처리를 해야할 경우 뷰포트에 따..

이번 포스트는 NEXT JS를 배워보자 시리즈의 마지막 편인 배포로 마무리를 해보겠습니다. . Next JS 앱을 배포하는 방법은 여러 가지가 있지만 현재 프로젝트의 규모가 작기 때문에 NEXT팀이 만든 빌드, 배포, 호스팅 서비스인 Varcel을 사용해서 간단하게 배포해보도록 하겠습니다. 1. 깃헙 계정 등록 및 레포 불러오기 New Project – Vercel Let's build something new. To deploy a new Project, import an existing Git Repository or get started with one of our Templates. vercel.com 아직 Varcel에 가입이 되어있지 않다면 가입 후 프로젝트가 등록되어있는 깃 헙 계정을 연동시..