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:/..

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

병원카드에 좋아요 기능을 추가했다. 실시간으로 하트를 누르면 업데이트 되도록하고 싶어서 일단 useState의 초기값을 likes 목록에 존재하는지 여부로 정한 후, 클릭하면 반대로 바뀌도록 했다. TanStack Query로 낙관적 업데이트할 수 있기 때문에 적용해보기로 했다. 낙관적 업에이트는 실제 데이터 업데이트가 느릴 수 있기 때문에, 그 간극을 줄이기 위해 성공할 것이라고 가정하고 변화를 주는 것이다. 이를 통해 사용자 경험을 향상시킬 수 있다. 1. `useMutation()``useMutation`는 하나의 parameter에 여러 옵션을 넣을 수 있는데, 이를 활용하면 낙관적 업데이트를 적용할 수 있다. 그 중 오늘 사용할 옵션들은 `mutationFn`, `onMutate`, `onErr..

프로필 정보를 수정하는 부분을 맡았다. 그런데 프로필 정보가 수정되지만 실시간으로 반영되지 않아 새로고침을 해줘야했다. 이를 해결하기 위해 TanStack Query(React Query)를 적용했다. 그런데 수정하려면 여러 변수를 입력받아야 하는데, mutationFn에 그러한 함수를 직접 적용했더니 에러가 발생했다. 그래서 오늘은 `mutationFn`에 여러 parameter를 적용할 수 있는 방법을 정리해보려고 한다. 방법 1 - mutationFn 내부에서 호출하기이 방법을 프로젝트에 적용해 두었다. `queryFn`에서 하는 것처럼 `() => myFunc(p1, p2, ...)`로 작성하는 방법이다. `updateUser`라는 함수에 `user`, `nickname`, `profileImg`..

'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..

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

추석 연휴를 제외하고 약 일주일간 아웃소싱 프로젝트를 진행했다. 우리 팀은 각종 공연 정보를 제공하고, 공연에 대한 간략한 글과 공연에 대한 후기를 작성할 수 있는 사이트를 만들었다. 처음에 공연 정보를 불러오기 위해 공공 api인 KOPIS API를 사용하기 위해 엄청 고군분투했다. CORS 오류가 생겨 데이터가 불러와지지 않았고 우리는 결국 확장 프로그램을 이용해 임시로 해결하여 진행했다. 먼저 우리 조는 인터파크 티켓에서 큰 디자인을 차용해왔다. 1. 메인 페이지메인 페이지에서는 오늘 진행 중인 공연에 대해서 KOPIS에 등록된 순서대로 공연을 나열하면서 캐러셀로 랜덤 선택된 8개 공연을 보여준다. 이를 위해서 먼저 공연 정보를 불러와야 한다. 처음에는 캐러셀을 위한 컴포넌트와 하단 장르별 데이터를..

이번 프로젝트의 css는 모두 Tailwindcss를 사용하기로 했다. 처음이라 모든 속성을 홈페이지에서 검색해서 써야하는 번거로움이 있었지만, 적응되니 생각보다 쓸만했다.! 오늘은 아주 기초적인 사용법을 정리해보려고 한다. 1. Arbitrary value 적용하기먼저 기본적으로 height를 적당히 적용하려면 홈페이지에서 height를 검색해서 주어진대로 사용해도 된다.하지만 주어진 값 외엔 제대로 적용되지 않는 불편함이 있다. 이때 해당 페이지를 맨 아래로 내리면 arbitrary value를 사용할 수 있는 방법을 알려준다. 이렇게 크기를 임의로 입력하는 방법은 대체로 다 적용된다. Padding도 margin도 다 가능하다. 즉 `width: 30px; height; 80px;` 짜리 div를 ..

새로고침 시 유저 정보를 제대로 불러오기 전에 zustand에 저장한 정보를 가져와 사용하는 문제가 있었다. 이전 `MyPage.jsx`를 살펴보면 아래 코드로 시작했다....const MyPage = () => { const { user } = useUserStore(state => state); if (!user) { return } ... 따라서 새로고침하면 `user`의 초기값인 `null`을 사용하게 되므로 메인페이지로 돌아가게 된다. 이 잘못된 로직을 다음과 같이 바꿨다. 먼저 새로고침하면 각 페이지에서 token이 있는지 여부를 확인한다.토큰이 존재하면 일단 해당 페이지에 머무른다.토큰이 만료된 경우 메인페이지로 보낸다.1,2번 과정은 각 페이지의 시작 부분을 아래와 같이 수정..