NextJS

이 글에서는 Next.js에서 중요한 개념인 Pre-Rendering에 대해서 알아보고자 합니다. Rendering 과정 먼저, 사전 렌더링(pre-rendering)을 하지 않았을 때, 브라우저가 어떻게 화면을 렌더링 하는지에 대해 대략적으로 설명을 하고 사전 렌더링과의 차이점에 대해 정리해보고자 합니다. 만약, CSR방식에 대해 이미 익숙하다면 아래 CSR파트는 생략하셔도 무관합니다. [ CSR ] [[ 1 - React의 기본 동작 방식 ]] 일반적인 react Application은 CSR(Client Side Rendering) 방식으로 화면을 렌더링 합니다. CSR 방식에 대해 간단히 설명하자면, 아래 그림과 같습니다. 쉽게 말해서, 1. 가장 먼저 뼈대만 있는 HTML 파일을 서버로 부터 다..

이 글에서는 많은 사람들이 Next.js를 사용하는 이유, 즉 Next.js가 가지고 있는 강점에 대해서 정리해보고자 합니다. What is Next.js? 가장 먼저, Next.js는 무엇일까요? Next.js 공식 홈페이지에서도 언급하듯이, Next.js는 React의 Framework입니다. React를 이용하다보면, Routing과 같이 개발자들이 직접 개발해야 하는 필수적인 기능들이 있습니다. 이렇게 React를 이용할 때 필수적으로 개발해야 하는 기능들을 기본적으로 제공해주는 것이 바로 Next.js가 하고 있는 역할입니다. What kind of features Next.js can give you? 그렇다면, 정확하게 어떠한 기능들을 Next.js는 제공해주고 있을까요? 1. File-ba..

React나 NextJS를 사용하시는 분들이라면, useEffect를 사용할 때 dependency를 [] 빈배열로 넣어주게 되면, 해당 useEffect는 처음 렌더될 때 한번만 실행 되게 된다는 것을 알 것입니다. 근데, 이상하게 useEffect안의 함수가 2번 실행되는 것을 보고 해결해보고자 합니다. 사실, 이 문제는 React를 사용할 때 이미 겪어본 문제였습니다. React에서는 App 컴포넌트를 감싸고 있는 React.StrictMode 태그를 제거 해주면 됐지만, NextJS의 app.tsx의 경우에는 strictMode 태그가 안보였습니다. 하지만 결국 strictMode를 풀면 해결되는 문제였기에, next.config.js 파일에서 strict 모드를 false로 주고 재 실행 하니 ..

React / Nextjs 에서 Typescript를 사용할 때, Input의 타입을 어떻게 지정해야 할지 알아보자. 위 에러는 제대로 타입을 지정하지 않아서 생기는 문제이다. 특히나, 여기에서는 as HTMLElement로 타입을 캐스팅 하지 않고, 제대로 타입을 지정해 해결하는 방법을 정리하고자 한다. [ Cause ] 원인은 에러 메시지 그대로이다. 내가 작성한 방식대로라면, 매개변수 event(e)는 EventTarget 타입을 가지게 되는데, 이때 EventTarget이라는 타입에 value라는 속성이 없기 때문이다. [ Solution ] 해결책은 간단하고, 크게 2가지가 있다. 1. as HTMLInputElement 구글링을 해보니, 가장 많은 답변은 as 를 이용하여 Type을 강제로 H..

카카오 지도를 띄우려고 하다보면, 위와 같은 에러메시지를 만날 수 있다. 어떻게 해결 할 수 있는지 알아보자. 이전에, 내가 어떻게 지도를 띄우는지 정리한 글을 포스팅 한적이 있다. 그 방식대로 완전히 따라 했다면, 위와 같은 에러가 생기지 않았겠지만, 여기서는 어떻게 해결하는지 알아보자. 원인 원인은 script가 완전히 로드 되기 전에 map 관련 메소드를 실행 시키려고 하기 때문에 생기는 에러이다. kakao에서 제공하는 api script는 sdk.js가 모두 로드 된 이후, kakao.js라는 파일을 로드하게 되는데, kakao.js가 완전히 로드 되기 전에 kakao.js 안에 있는 함수를 호출하려고 하여 생기는 문제이다. 해결책 방법은 매우 간단하다. kakao에서 제공하는 load라는 메소..

Next.js 기반 프로젝트에서 카카오 맵 api를 사용하여 지도를 화면에 띄우는 방법에 대해 순서대로 정리해보자. [ 목차 ] 카카오 맵 Api key 받기 지도 화면 출력 지도 출력 영역 설정 script를 이용하여 Api 불러오기 지도 띄우는 코드 작성 전체코드 참고로 이 글은, NextJS 프로젝트를 만들 줄은 알고, Next.js 혹은 React에 대한 최소한의 지식은 가지고 있다는 가정하에 작성하였다. (Next.js 프로젝트를 처음 만드는 방법은 공식문서를 참고하자.) 또한 Openlayers라는 라이브러리를 통해서 지도를 그리는 방법도 있는데, 이 부분은 Openlayers 지도 포스팅을 참고하자. 1. 카카오 맵 Api key 받기 우리가 kakaoMap Api를 이용하기 위해서는 kak..