1. NaverMaps Provider 에러 네이버 지도 API 마커 클러스터 튜토리얼을 따라 해 보고자 했고, 시작부터 에러를 만났다. 2. NaverMapsProvider가 아닌 NavermapsProvider Attempted import error: 'NaverMapsProvider' is not exported from 'react-naver-maps' (imported as 'NaverMapsProvider'). ERROR in ./src/App.js 9:30-47 [그림 1]과 같이 QuickStart를 따라 NaverMapsProvider를 import 했는데 위와 같은 에러가 발생했다. 😉 공식 문서 Quickstart : https://zeakd.github.io/react-naver-..

1. 두 배열에서 일치하지 않는 객체 요소 구하기 const arr1 = [{ id: 1, name: "a" }, { id: 2, name: "b" }]; const arr2 = [{ id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "c" }]; 위와 같이 객체를 요소로 가진 두 개의 배열이 있다. 이 두 배열을 비교해 일치하지 않는 객체 요소인 { id: 3, name: "c" }를 구하고자 한다. 2. filter(), some() 배열 요소 활용한 문제 해결 filter() 배열 메서드는 매개 변수로 true/false를 반환하는 콜백 함수를 가진다. some() 배열 메서드는 ||연산자와 비슷해서 요소 중 하나라도 true이면 true를 반환한..

1. 커스텀-오버레이-마커의 앵커와 위경도 좌표 불일치 서버로부터 오는 데이터에 따라 컬러, 애니메이션 등 스타일이 변경 적용되는 마커를 만들어야 하는 상황이었다. 카카오 지도 API에서는 HTML, CSS, JavaScript를 이용해 커스텀하게 마커를 만들 수 있는데 이것을 커스텀 오버레이라고 부르고 있다. 이 글에서는 커스텀한 마커를 만들고 마커 아래에 있는 뾰족한 부분, 즉 앵커에 위경도 좌표가 정확하게 위치하도록 하는 방법에 대해 다룬다. 2. 커스텀-오버레이-마커 만들기 1) 카카오 지도 마커와 div 요소 지도에 찍기 [그림 1]과 같이 카카오 지도의 특정 위경도에 카카오 지도 마커와 커스텀-오버레이-마커로 만들 div 요소를 찍었다. 카카오 지도 마커의 경우 앵커 부분이 지정한 위경도에 위..

1. NextAuth 설치 npm install next-auth 😉 공식 문서 : https://next-auth.js.org/getting-started/example 2. OAuth 구글 계정 로그인 구현 😉 공식 문서 : https://next-auth.js.org/providers/google 📌 구글 클라우드 설정 구글 클라우드 설정 URL로 이동(https://console.cloud.google.com/apis/credentials) OAuth consent screen : 구글 설정(프로젝트 생성 등) Credentials > CREATE CREDENTIALS > OAuth client ID : OAuth 클라이언트 아이디 생성 Authorized redirect URIs에-공식 문서 C..

1. 문제 numbers 배열의 요소는 0~1000의 숫자이다. 이 숫자를 이어 붙여 가장 큰 숫자를 만들어야 한다. 😉 문제 링크 : https://school.programmers.co.kr/learn/courses/30/lessons/42746?language=python3 2. 풀이 처음에는 for문과 순열을 이용해 풀이했는데 "시간 초과" 되었다. 고민도 하고 힌트도 찾다가 어썸 한 풀이법을 발견했다. # 파이썬 풀이 def solution(numbers): # 1. 모든 수를 문자열로 변환 numbers = list(map(str, numbers)) # 2. x+y와 y+x를 비교하여 정렬 numbers.sort(key=lambda x: (x * 4)[:4], reverse=True) ''' ..

Prisma ORM 적용 1. VSCode에서 Prisma Extension 설치 더보기 Name: Prisma Id: Prisma.prisma Description: Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files. Version: 5.9.1 Publisher: Prisma VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Prisma.prisma 2. prisma 설치 npm i prisma 😉 공식 문서 : https://www.prisma.io/ 3. prisma 명령어 명령어 목록..

1. Zod 설치 Zod는 유효성 검사 라이브러리이다. npm i zod 😉 공식 문서 : https://zod.dev/ 2. 적용 방법 📌 스키마 작성 // src/app/api/users/schema.ts import { z } from "zod"; const schema = z.object({ name: z.string().min(3), email: z.string().email(), age: z.number(), }); export default schema; 📌 Zod 적용 // src/app/api/users/[id]/route.tsx import { NextRequest, NextResponse } from "next/server"; import schema from "../schema"; ..

📌 API Endpoints Next.js 앱 내부에서 HTTP 요청, 응답 처리 가능 API Folder Convention은 API 엔드포인트의 그룹화와 체계적 관리에 유용 api폴더 원하는 API 경로에 해당하는 폴더(여기에서는 users)를 생성하고 그 폴더 안에 route.tsx 파일 생성(page.tsx와 함께 있을 수 없음) // src/app/api/users/route.tsx import { NextRequest, NextResponse } from "next/server"; // GET 핸들러에 인자값이 없는 경우 응답 결과를 캐싱함 // export function GET() { // 캐싱을 원하지 않는 경우 request 속성을 매개 변수로 추가 export function GET(..