xu의 개발일지

Next.js에서 네이버맵 검색하고 마커 띄우기

이번에 네이버맵 API를 사용하면서, 위치를 검색해서 등록해야 하는 기능이 있었다.그래서 직접 프론트에서 지도 검색 API를 사용해보기로 했다!지도를 보여주는 API는 NCP에서 키를 발급받아 사용했는데, 검색 API는 네이버 개발자 센터에서 키를 발급받아야 한다. NAVER Developers네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음developers.naver.com 여기서 애플리케이션 등록하면서 사용 API를 '검색'으로 해주면 된다.클라이언트에서 직접 요청하려고 하면 에러가 발생하기도 하고, API 키(X-Naver-Client-Id, ..

interface객체(클래스, 구조체 등) 형태 정의- 주로 객체 구조 정의- extends로 확장- 선언 병합 가능! (같은 이름 interface 여러 번 선언 시 자동 병합)interface Person { name: string;}interface Person { age: number;}// 병합된 최종 Person 타입const p: Person = { name: "Alice", age: 25};type더 넓은 범위의 타입 별칭(Alias) 정의- 객체 구조 + 기본 타입 + 유니온 + 튜플 + 제네릭 등 가능- &(Intersection)으로 확장- 선언 병합 불가능1. 객체 형태 정의interface User { name: string; age: number;}type UserTy..

이번에는 MUI의 Pagination 컴포넌트를 사용해서 페이지네이션을 구현해 보았다.ThemeProvider를 통해 스타일도 커스텀해 보았다.  React Pagination component - Material UIThe Pagination component enables the user to select a specific page from a range of pages.mui.com↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ 참고했던 것  // theme.tsimport { createTheme } from "@mui/material/styles";const theme = createTheme({ breakpoints: { values: { xs: 0, // 모바일 sm: 60..

현재 로그인 시 액세스 토큰과 리프레시 토큰을 받아 쿠키에 저장 중이다.액세스 토큰은 유효기간이 1시간이며, 리프레시 토큰은 7일이다.그래서 자동 로그인 시, 액세스 토큰이 만료됐을 때 리프레시 토큰으로 재발급을 받아서 다시 쿠키에 넣어주어야 한다.우선 로그인 상태를 확인하는 함수를 만들어 주었다.import { destroyCookie, setCookie } from 'nookies';import { clearUser } from '@/store/userSlice';import { useDispatch } from 'react-redux';import { useAccessTokenRefreshMutation } from '@/api/userApi';// 로그인 상태 확인 함수export const us..

카카오 소셜 로그인은1. /social/kakao/login 으로 이동하여 인증 진행2. 받아온 code로 /social/kakao/callback에 GET 요청 보내서 토큰 받기3. 토큰은 쿠키에 저장4. 로그인 성공 후 토큰으로 유저 정보 GET 요청으로 받아옴5. 유저 정보 Redux에 저장이런 흐름으로 진행하였다. // sign-inconst handleLogin = (provider: string) => { switch (provider) { case 'kakao': // 서버의 카카오 로그인 엔드포인트로 이동 window.location.href = 'kakao login endpoint'; // 해당 페이지로 리디렉션 break; case 'google..

RTK Query로 로그인 API 구현하고 RTK로 유저 정보 관리하기RTK (Redux Toolkit)Redux의 공식적인 도구 모음으로, 복잡한 상태 관리 로직을 간단하고 효율적으로 작성하도록 돕는다.RTK 상태 관리 기본 흐름1. createSlice로 상태와 리듀서 정의- 상태의 초기값 (initialxuwon.tistory.com↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑로그인을 성공하면 access token으로 유저 정보를 받아와서 Redux에 저장하는 것까지 구현했다.이걸로 이제 유저 정보를 회원정보 수정 페이지에서 불러오려고 했으나...새로고침 및 페이지 이동이 이루어지자 Redux가 깔끔하게 비워졌다. redux-persist알고보니 원래 그렇다는 것!redux-persist ..

RTK (Redux Toolkit)Redux의 공식적인 도구 모음으로, 복잡한 상태 관리 로직을 간단하고 효율적으로 작성하도록 돕는다.RTK 상태 관리 기본 흐름1. createSlice로 상태와 리듀서 정의- 상태의 초기값 (initialState) 정의- 상태를 변경할 리듀서 함수 작성- createSlice 호출로 액션과 리듀서 생성import { createSlice, PayloadAction } from '@reduxjs/toolkit';type CounterState = { value: number;};const initialState: CounterState = { value: 0 };const counterSlice = createSlice({ name: 'counter', // sli..

RTK QueryRedux Toolkit의 강력한 데이터 패칭 및 캐싱 라이브러리1. 데이터 패칭 및 캐싱2. 자동 상태 관리- API 요청의 상태(isLoading, isSuccess, isError, isFetching 등)를 자동으로 관리- 수동으로 로딩 상태를 설정하거나 에러를 처리할 필요 X3. 데이터 변조 지원- POST, PUT, DELETE 요청과 같은 데이터 변조 작업도 간단히 구현 가능4. React Hooks 자동 생성- API 엔드포인트 정의만 하면 React Hooks가 자동으로 생성됨.- 이를 통해 컴포넌트에서 쉽게 API를 호출할 수 있음. RTK Query의 주요 구성 요소1. createApiAPI 서비스 로직을 정의하는 데 사용import { createApi, fetch..

전에 회원가입, 로그인 페이지를 만들 때는 직접 유효성 검사 코드를 작성했었는데,이번에는 react-hook-form과 zod를 활용해서 진행했다. react-hook-formReact에서 폼을 효율적으로 관리하기 위한 라이브러리. 1. 폼 상태 관리- useState 없이 폼 상태를 관리하여 성능 최적화2. 간편한 유효성 검사- zod, Yup 등의 스키마를 통해 유효성 검사 가능3. 최소한의 리렌더링- 입력 필드마다 독립적으로 상태를 관리하여 불필요한 리렌더링 방지!4. 타입스크립트 지원 react-hook-form 핵심 개념// register// 입력 필드를 react-hook-form에 등록!// handleSubmit// 폼 제출 시 데이터를 검증!// 제출 시 실행할 콜백 함수 호출// fo..

처음에는 select 태그를 활용해서 만들었는데, hover 될 때 파란 배경이 싫어서 바꾸려니까select 태그는 스타일 적용이 제한적이라고 해서...직접 드롭다운 컴포넌트를 만든 후에이걸로 생년월일 드롭다운을 만들었다.// SelectDropdown Props 타입 정의export type SelectDropdownProps = { options: T[]; selectedValue: T | string | null; placeholder: string; onSelect: (value: T) => void;};우선 드롭다운 컴포넌트의 props 타입을 정해주었다.options에는 배열이 들어가고(연, 월, 일),selectedValue는 현재 선택되는 값이 들어간다.placeholder는 말 그..