[Next.js/TypeScript] NAVER Maps Geocoding API로 좌표 검색하기

구현 목표 입력 창에 주소를 입력하여 검색하면 해당 주소의 좌표로 이동하고, 지도를 클릭하면 해당 지점의 좌표로 주소를 검색하는 기능을 만들었다.기능 구현을 위해 Naver Maps API의 Dynamic Map, Geocoding, Reverse Geocoding 기능을 사용했다. 네이버 클라우드 플랫폼 Application 등록사용할 API를 선택해서 Application을 등록한다. 생성된 Application에서 [인증 정보] 버튼을 클릭한다. NEXT_PUBLIC_NAVER_CLIENT_ID=발급받은_ID인증 정보에 있는 클라이언트 ID를 `.env`에 다음과 같이 저장했다. 구현 코드타입스크립트 사용 준비npm i -D @types/navermapsNAVER Maps API 타입 정의 파일을 ..

• format_list_bulleted JavaScript
• · 2025. 7. 4.
• textsms

[Next.js] Google Analytics Data API (GA4) 연동해서 방문자 데이터 가져오기

구현 목표Google Analytics(GA4)의 Data API를 이용해서 Next.js에서 “일자별 방문자 수”, “운영체제별 방문자 수”, “조회수 상위 페이지” 데이터를 가져오는 API를 구현해 보자. Google Analytics Data APIGA4에서 수집한 통계 데이터를 외부 앱에서 사용할 수 있도록 제공하는 API이다. 이 API를 사용하기 위해서는 서비스 계정을 생성하고, JSON 형태의 키 파일을 발급받아야 한다. 서비스 계정 생성구글 클라우드 콘솔에서 `IAM 및 관리자 > 서비스 계정` 탭에 들어가서 [서비스 계정 만들기] 버튼을 클릭한다. `서비스 계정 ID` 항목만 입력하고 [완료] 버튼을 누르면 간단하게 서비스 계정이 생성된다. JSON 키 파일 발급새로 생성한 서비스 계정의..

• format_list_bulleted JavaScript
• · 2025. 6. 27.
• textsms

[TIL] 2023.05.20 Typescript

기본 타입 지정 let project: { member: string[]; days: number; started: boolean } = { member: ['kim', 'park'], days: 30, started: true, }; Union type let age: string | number = 'kim'; let name: (string | number) = 100;. let array: (number | string)[] = [1,'2',3] let object: {data : (number | string) } = { data : '123' } let 학교: { score: (number | boolean)[]; teacher: string; friend: string | string[]; ..

• format_list_bulleted JavaScript
• · 2023. 5. 20.
• textsms

[TIL] 내일배움캠프 React 과정 2023.03.11

setState를 props로 넘길 때 type 지정하기 해당 setState에 마우스를 올리면 타입이 뜬다. 이걸 복사해서 type 값으로 넣어주면 된다. interface를 하나 만들어서 setState에 복사한 내용을 넣는다. 그리고 Dispatch와 SetStateAction은 따로 import를 해주어야 한다. 그리고 props에 이 interface를 이용해서 타입 지정을 한다. 회고 typescript any 제거 프로젝트🫠 102개에서 겨우 88개로 줄였다..... 오전에 분양모음집 확인하는데 갑자기 아파트 매매 실거래가 불러오는 API가 404가 떠서 심장이 철렁했다. 나 분명히 아무것도 안 건드렸는데 뭐지...? 하다가 다행히 국토교통부에서 점검(?)으로 인해 API 제공이 중단될 수 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 3. 11.
• textsms

[TIL] 내일배움캠프 React 과정 2023.02.20

Today I Learned 오후 3시에 원장님께 기본 기능 시연하고 피드백받기 로그인 모달, 회원가입 페이지 UI 구현 typescript에서 styled-components에 여러 개의 props를 넘길 경우 처음에는 props의 타입을 이렇게 지정해 줬었는데 CategoryBtn 하단으로 새로운 스타일 컴포넌트를 작성해도 폰트 색상이 원래대로 적용이 안 돼서 뭔가 이상한가 하는 생각에 문제를 찾다가 타입 지정을 뭔가 잘못해 준 거 같다는 것을 발견했다. interface CategoryBtnStyledProps { bg: string; text: string; border: string; } export const CategoryBtn = styled.button` padding: 0 17px; h..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 2. 21.
• textsms

[WIL] 내일배움캠프 열두 번째 주_Typescript

드디어 이번 주에 타입스크립트를 배웠다. 스파르타에서 제공되는 강의는 너무 개념적인 내용들이라 처음에는 이해하는 데 어려움이 있었지만 예전에 redux로 만들었던 투두리스트를 타입스크립트를 이용해서 리팩토링하는 과정을 거치면서 타입스크립트를 좀 더 이해하게 된 거 같다. 근데 사실 아직 타입스크립트의 큰 장점은 느끼지 못했고 가끔 발생하는 타입 에러 때문에 번거롭기만 한 기분이다. 아직 규모가 작은 프로젝트만 경험해봐서 그런 걸까? 무튼 컴파일 타임에 에러를 잡아준다는 건 확실히 좋은 거 같다. 앞으로 계속 프로젝트를 경험하다 보면 타입스크립트를 유용하게 쓰게 될 날이 오겠지! Typescript로 리팩토링한 github 링크 https://github.com/heereal/TO-DO-LIST-Types..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 24.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.22

Today I Learned GOLLA 팀 프로젝트 회의 카카오 API로 마커 클릭 이벤트 구현하기 Typescript 에러 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. 처음부터 타입스크립트로 프로젝트를 생성한 게 아니라 CRA로 프로젝트를 생성한 다음에 typescript를 따로 설치했더니 다음과 같은 에러가 떴다. 이때 해결 방법은 에러가 발생하는 컴포넌트에 import React from 'react' 해주기! typescript .d.ts 파일이란? .d.ts 파일 (선언 코드만 담긴 파일) 구현부가 아닌 선언부만을 작성하는 용도의 파일을 의미한다. JS 코드로 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 22.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.18

Today I Learned Typescript로 React TO-DO-LIST 리팩토링하기 Recoil 공부 공식 문서 https://recoiljs.org/ko/docs/introduction/getting-started/ 참고 영상 https://www.youtube.com/watch?v=t934FOlOMoM typescript로 react project 만들기 index.tsx 에러 const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); as HTMLElement라고 타입을 지정해줘야 한다. typescript에서 styled-components 사용하기 npm i --save-dev @types/sty..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 18.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.17_Typescript

Today I Learnend Typescript 기초 강의 수강 Type Alias (사용자 정의 타입) // type.ts type Hero = { name: string; power: number; height: number; }; import type { Hero } from './type'; const hero1: Hero = { name: '슈퍼맨', power: 1000, height: 190, }; // 동일함 const printHero = (hero: { name: string; power: number; height: number }) => { const printHero = (hero: Hero) => { console.log(hero.name, hero.power); }; cons..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 17.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.16_Typescript

Today I Leraned TypeScript 공부하기 Typescript vs Javascript Type Typescript는 정적 타입 Javascript는 동적 타입 let num = 3; num = '삼'; Javascript는 어떤 변수에 숫자, 문자, 배열, 객체 등 아무거나 할당 가능하다. Typescript는 처음에 숫자 (number)를 할당했으니 number에 string를 할당할 수 없다고 에러가 난다. Time (변수의 type 결정 시점) Typescript는 컴파일 타임 (compile time): 작성한 소스 코드가 어떠한 것(js, binary 등)으로 변환되는 과정 -> IDE(VS Code)에서 에러가 날 상황을 빨간 줄로 미리 알려준다. Javascript는 런타임 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 16.
• textsms