전체 글30 [React] React에서 카카오맵 API 사용하기 1. kakao developers에서 API KEY 발급받기 앱을 하나 만들고 앱 > 앱 설정 > 앱 > 일반에서 JavaScript 키를 사용하면 된다. 2. 카카오맵 사용 여부 선택 앱 > 제품 설정 > 카카오맵에서 사용 설정의 상태를 ON으로 해줘야 지도가 출력된다. 3. index.html에 인증 키 삽입 프로젝트의 index.html에 위의 코드를 작성한다. %VITE_KAKAOMAP_API_KEY%는 원래 인증 키를 넣는 자리이다. 난 .env 파일을 만들어 그 안에 인증키를 넣었기 때문에 코드를 위와 같이 작성했다. .env에 작성한 코드다. VITE로 시작해야하며 따옴표('') 안에 쓰지 않는다. 3. 카카오맵 API 불러오기 import React, { useEffect, us.. 2025. 7. 16. [React] React + Vite + TypeScript 에서 Path Alias 설정하기 import를 할 때 상대 경로로 되는데 폴더 구조가 깊으면 어쩔 수 없이 길어진다. 이때 별칭(Alias)를 사용하면 간단하게 줄일 수 있다. import Header from '../../../components/header/Header 이런 식의 경로를 간단하게 줄여줄 수 있다. 1. Vite.config.ts 파일 설정vite.config.ts 파일에서 설정을 간단하게 추가할 수 있다.import * as path from 'path';import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'// https://vite.dev/config/export default defineConfig({ plugins: [reac.. 2025. 7. 15. (명쾌한 설명과 풍부한 그림으로 배우는)TCP/IP 쉽게, 더 쉽게 (리브로웍스, 제이펍) 네트워크에 대해 알 수 있는 책을 읽고 싶었는데 처음부터 줄만 적힌 책만 읽으면 안 읽을 것 같아서 그림이 많고 얇은 책 위주로 찾다가 이 책을 읽었다. HTTP, 쿠키, 헤더 등 개발할 때 정확한 개념을 모른 채 쓰던 기술에 대해 알 수 있었고 데이터가 전달되고 네트워크 동작 원리를 미약하게나마 감을 잡았다. 흥미만 있다면 하루만으로도 완독 가능❗❗ 2025. 7. 2. [백준 12933] 오리 : 왜 모든 문자열을 확인해야하는가 완전 많이 틀림⳻_⳺⳻_⳺ 1. 잘못 입력 받음입력이 한 줄로 된 문자열이니까 입력 받는 기본 코드만 작성했었는데 여기에서 문제가 있었다.const input = fs.readFileSync(process.platform === 'linux' ? '/dev/stdin' : path.join(__dirname, 'input.txt')).toString();여기까지만 작성했었는데 문자열 양 끝의 공백을 제거해주는 .trim()을 작성했었어야 했다.테스트는 다 통과돼서 안 적어도 될 줄 알았는데...수정한 코드 ↓const input = fs.readFileSync(process.platform === 'linux' ? '/dev/stdin' : path.join(__dirname, 'input.t.. 2025. 6. 19. node.js 바로 종료하기 백준 12933 - 오리 문제를 풀던 중 입력값의 길이가 5로 나누어 떨어지지 않으면 -1을 출력하고 즉시 종료해야 하는 코드를 작성해야 했다.process.exit() 이 코드를 수행하면 아래 코드가 실행되지 않고 즉시 종료된다. 2025. 6. 18. [css] 미디어 쿼리 반응형 분기점(PC, 태블릿PC 가로 및 세로, 스마트폰 가로 및 세로) 4개의 반응형 분기점모바일 세로 ( ~470px)모바일 가로 & 태블릿PC 세로 (480px ~ 767px)태블릿PC 가로 (768px ~ 1023px)노트북 (1024px ~ 1279px) 2025. 5. 27. 이전 1 2 3 4 5 다음
