joycie416 님의 블로그

병원 상세페이지에 주소를 좌표로 바꾸어 표시하기 위해 카카오맵을 사용하기로 했다.이전 글에 이어서 이번 게시글에서는 카카오맵을 Next.js 14 App Router 환경에서 방법을 정리해보려고 한다. 1. 패키지 설치하기React와 카카오맵을 같이 사용할 때 많이들 카카오가 아닌 개인이 만든 sdk를 추가 설치해 사용한다.npm install react-kakao-maps-sdkyarn add react-kakao-maps-sdk 또한 TS를 같이 사용하는 경우 같은 분이 정리한 'kakao.maps.d.ts'를 추가 설치하면 좋다. 그러면 전역에 `kakao` 객체를 알아서 추가해준다.npm install kakao.maps.d.ts --save-devyarn add kakao.maps.d.ts --..

병원 상세페이지에 주소를 좌표로 바꾸어 표시하기 위해 카카오맵을 사용하기로 했다.글이 길어질 것 같아서 두개로 나누어 작성했고, 이번 게시글에서는 카카오맵 api 키 받고 활성화하는 방법을 정리해보려고 한다.카카오맵 api 시작하기기본적으로 카카오맵 api 가이드에 잘 나와있긴 하다.1. 개발자 등록 및 앱 생성먼저 Kakao Developers에 회원가입해서 개발자 등록을 한다. 그 후 상단에 '내 애플리케이션'에 들어가 '애플리케이션 추가하기'를 클릭한다.클릭 후 적당한 정보를 입력하고 저장한다.등록한 애플리케이션에 들어가면 왼쪽 사이드바에서 '앱 키'를 누르면 발급된 키를 확인할 수 있다.'앱 키' 아래에 '플랫폼'에 들어가면 사이트 도메인을 추가할 수 있다.개발 환경에서 사용할 경우 'http:/..

Zustand 공식 문서를 확인하면 Next.js와 같이 사용하는 방법에 대해 별도로 안내하고 있다. 이를 확인하면 React의 Context API와 함께 사용하라고 하는데, 그 이유가 무엇일까? 이에 대해 정리한 후, 실제 사용방법에 대해 정리하려고 한다. 1. Next.js의 SSR과 zustand storeNext.js는 서버와 클라이언트 측에서 모두 실행되므로, 전역 변수의 동작이 zustand의 가정과 다르다. 즉 zustand는 하나의 store에서 모든 상태를 관리하지만, Next.js는 서버와 클라이언트 상태가 분리될 수 있다는 것이다. 그래서 Next.js 서버의 상태를 클라이언트와 공유하기 위해서 별도의 과정이 필요하다. 이때 아래 상황들을 고려해야 한다. 1. Per-request ..

따꼼 프로젝트를 진행하며 Next.js 14의 App Router를 사용했다. 검색어를 입력하고 검색 버튼을 누르면 쿼리스트링에 검색어를 저장해 검색결과를 보여주는 컴포넌트에서 쿼리스트링을 통해 검색 결과를 보여주도록 했다. 그런데 사용자 테스트를 받아보니 검색결과를 보여주기까지 로딩이 너무 오래 걸린다는 답변을 많이 받았고, 나도 잘 인지하고 있는 부분이었다. Next.js App Router는 `next/navigation`에서 `useRouter`를 통해 검색 버튼을 눌렀을 때 페이지 이동을 하도록 했다. 그런데 `router.push()`는 페이지 전체를 처음부터 렌더링하는 것이므로 속도가 너무 느렸다. (Pages Router는 shallow routing을 지원하지만 App Router는 지원..

쇼핑몰에서 하는 것처럼 검색어나 필터를 입히면 query param이 추가되도록 하고 싶었다. 나중에 query param을 통해 정보를 불러올 것이므로 이 방법을 쓰는 것이 적합할 것 같았다. 그 전에 next의 `usePathname`과 `useSearchParams`에서 필요한 부분만 살펴보고 가려고 한다. `usePathname()`먼저 쿼리 스트링이 입력된 경우 pathname이 어떻게 출력될지 궁금했다.`http://localhost:3000/mypage?myKey=hihi` 이와 같은 경로에서 `usePathname`을 통해서 경로를 가져오면 어떤 값을 줄까? 쿼리 스트링은 모두 제거한 path만 깔끔하게 반환해준다.'use client'import { usePathname } from "n..

'App Router'를 기준으로 supabase의 server side auth를 설정해보려고 한다. 서버와 브라우저에서 작동하는 방식이 달라 server와 client용 supabase client를 분리해야 한다. 1 단계`@supabase/supabase-js`와 `@supabase/ssr `을 먼저 설치하자. 2 단계supabase에 프로젝트를 만들고 Project Url와 Anon Key를 `.env.local`에 저장하자.  3 단계server, client component에서 사용할 supabase client를 생성하는 함수를 export하자. `src/utils/supabase` 폴더를 만들고 다음 두 파일을 저장하자.`client/ts`더보기import { createBrowserC..

`` 내부에 많은 것들을 할 수 있지만 그 안에 버튼을 넣어 클릭 이벤트를 넣었을 때는 어떻게 할까? 페이지 이동을 하지 않고 버튼 클릭 이벤트만 실행하고 싶을 때 나는 먼저 `e.stopPropagation()`을 생각했다. ``에 `onClick`을 넣고 하위 ``에도 클릭 이벤트가 있을 때 `e.stopPropagation()`을 사용했기 때문이다. 그런데 이렇게 했더니 이벤트가 너무 중구 난방으로 발생했다. 카드를 ``로 만들고 내부에 아래와 같이 ``을 넣었다. {todo.id.slice(0,4)} {todo.contents} { e.stopPropagation() updateTodo(todo); }} > {todo.isDone ? "취소" : ..

초기에  페이지를 로딩할 때 성능을 최적화하기 위한 몇 가지 방법을 소개하려고 한다. 1. 함수 내부에서 import하기파일을 실행하면서 import를 하면 당장 쓰이지 않을 모듈도 모두 import된다. 이를 함수 내부에 적어주면 함수가 실행되면서 import되기 때문에 초기 실행 시간을 조금 더 단축할 수 있다.// import { getNewProducts } from "@/services/server-action";import Banner from "@/components/Banner";import NewProductList from "@/components/NewProductList";const HomePage = async () => { const { getNewProducts } = awa..

Next.js와 TypeScript를 활용할 수 있도록 Riot에서 제공하는 API를 활용해서 챔피언, 아이템 정보를 제고하고 로테이션 정보를 제공하는 사이트를 만들었다. 사실 롤을 잘 몰라서 추가 기능을 많이 넣지는 못했지만 챔피언 스킨 이미지는 캐러셀로 모두 제공했다.  이전에 client component와 server component에 대해 이야기하면서 4가지 렌더링 방식에 대해 정리했다. 각 렌더링 방식을 활용하고 type을 다루어보려고 한다. 또한 api를 사용해 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 경험하고 라우트 핸들러를 사용해보았다. 1. 페이지 세팅하기Next.js의 App router를 사용하기로 했으므로 페이지를 폴더구조로 설정해주어야 한다.`/champions`,`/c..

제목에서 알 수 있듯이 이번 포스팅은 post id가 숫자로 이루어져야하는데 숫자 아닌 경우 post 목록으로 redirect하는 것처럼 특정 조건을 만족하는 path에서 redirect하는 방법에 대해 다룰 것이다. 미들웨어의 사용 목적은 쉽게 말하면 요청이 완료되기 전에 한 단계를 거쳐갈 수 있도록 하는 것이다. 요청에 따라 response를 rewrite, redirect, modify할 수 있다. 메들웨어를 사용하는 사용하는 경우공식 홈페이지에서 제시한 미들웨어를 사용하는 경우는 아래와 같다.인증, 인가 : user 정보와 세션 쿠키 등을 확인하고 특정 페이지 접근을 막을 수 있다.Server-Side Redirects : 서버 단계에서 특정 조건에서 redirect할 수 있다.Path rewri..