NextJS (4) 썸네일형 리스트형 [NextJS] Pretendard 폰트 적용하기 (LocalFont) NextJS에서 제공하는 'next/font/local' 을 통해 Pretendard Font를 LocalFont로 설정하여 사용해 보자. 1. next/font NextJS에서 기본적으로 제공하는 next/font는 NextJS 환경에서의 폰트 최적화를 지원해 주며, 이는 폰트에 대한 브라우저 캐싱과 프리 로딩을 지원하기에 페이지 로딩 속도를 높여주는 역할을 해준다. 맨 처음에 NextJS를 설치하면 layout.tsx 파일에 기본적으로 'next/font/google' 이 설정되어 있는 걸 본 적 있을 것이다. 이는 구글 폰트의 CDN 서비스를 통하여 웹 폰트를 불러오는 것이며, 별도의 설정 없이 바로 google 웹 폰트를 사용할 수 있다. 웹 폰트가 아닌 로컬에 폰트를 별도로 지정하여 사용하고 .. [NextJS] Console.log 2번 출력 해결 NextJS 개발을 하던 중 값 확인을 위해 console.log를 사용했더니 똑같은 값이 2번 출력되는 현상이 눈에 띄었다.아래와 같이 같은 라인의 명령어가 2번 동작되는 걸 확인할 수 있다. 1. 발생 원인해당 이슈는 React 18에 생겨난 strict mode로 인해 발생이 되는 현상이다.strict mode란 개발 환경에서 어플리케이션을 더 엄격하게 검사하여 예상치 못한 버그를 사전에 찾아내는 데에 도움을 주는 기능이다. strict mode를 활성화가 되어 있다면 컴포넌트 재렌더링, useEffect 재실행, 미사용 API 검사 등의 기능들이 동작을 한다.앞서 말했듯 strict mode는 개발 환경에서만 true 상태이며, 배포 환경에서는 strict mode가 자동으로 false가 .. [NextJS] 카카오맵 API로 지도 구현하기 (2) 관련 포스팅 2024.07.06 - [NextJS] - [NextJS] 카카오맵 API로 지도 구현하기 (1) [NextJS] 카카오맵 API로 지도 구현하기 (1)혼자 프로젝트를 진행하면서 지도 API를 사용해하는 상황이 생겼다. 전부터 지도 API를 사용해보고 싶었기에 이번 기회에 카카오맵을 사용하여 지도 기능을 구현해보고자 한다. 우선 카카오맵 APrlawo32.tistory.com 이전 포스팅에 이어서 이번엔 카카오맵 API에서 여러 지도 기능들을 추가하여 구현해 보겠다. 1. 마커 구현하기우선 SDK 설치를 했을 때 구현 방법을 보겠다.MapMarker를 아래와 같이 추가해 주고 동일한 좌표를 넣어주면 된다.// nextJsKakaoMap.tsx'use client';import { u.. [NextJS] 카카오맵 API로 지도 구현하기 (1) 혼자 프로젝트를 진행하면서 지도 API를 사용해하는 상황이 생겼다. 전부터 지도 API를 사용해보고 싶었기에 이번 기회에 카카오맵을 사용하여 지도 기능을 구현해보고자 한다. 우선 카카오맵 API 등록 방법과 2가지 방법으로 카카오맵 API를 구현하는 법에 대해 알아보자 1. 카카오맵 API 등록우선 카카오 개발자 사이트로 가서 등록을 해주자 https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 내 애플리케이션 => 애플리케이션 추가하기 => web 플랫폼을 등록해 준다. 사이트 도메인을 .. 이전 1 다음
