본문 바로가기

전체 글207

[IT공부] Web(크롬) & Kakao Map API 연결(5분 완성) 마침 진행중인 프로젝트가 있어서 카카오 지도 API가 필요했습니다. 이는 기록용 아카이브로 카카오톡의 맵 API 연동 방법입니다.(중간에 본인_Javascript_키 부분만 실제 키로 바꿔주세요!)준비물 (1분)카카오 개발자 센터(Kakao Developers)에 접속해서 다음 2가지만 챙기면 됩니다.내 애플리케이션 추가 : 아무 이름이나 넣고 만듭니다.JavaScript 키 복사 : '요약 정보' 탭에 있는 키를 복사해 둡니다.(REST, 네이티브, 자바스크립트 API 여러 개)플랫폼 등록(중요) : [내 애플리케이션] > [앱 설정] > [플랫폼] > [Web 플랫폼 등록]1. 카카오 개발자 콘솔에서 앱 등록이 완료하기https://developers.kakao.com/ Kakao Developer.. 2025. 11. 22.
[IT공부] Netlify에 올린 Google AI Studio 웹 앱, GTM/GA4로 트래킹 붙이기(테트리스 게임) "Google AI Studio"로 금방 만든 웹 앱을 "Netlify"에 올려두고, 방문자 행동은 Google Tag Manager(GTM)를 통해 Google Analytics 4(GA4)로 수집하고 있다. 처음엔 “정적 사이트인데 굳이 GTM까지?” 싶었지만, 한 번 세팅해두면 코드 수정 없이 태그를 바꾸고 실험(이벤트 정의, 광고 픽셀 추가 등)까지 할 수 있어서 운영 효율이 압도적으로 좋아졌다. 그리고 빠른 개발을 통한 경험을 쌓을 수 있다?https://aistudio.google.com 로그인 - Google 계정이메일 또는 휴대전화accounts.google.com 왜 굳이 GTM을 쓰나?GA4 스니펫만 직접 넣어도 기본 페이지뷰는 잡힌다. 하지만 운영이 시작되면 상황이 달라진다. 마케터가.. 2025. 11. 22.
[IT공부]나만 알고 싶은 컴퓨터 이론 운영체제(Operating System, OS)와 시스템 작동 원리OS는 "HW"와 "SW"를 연결하는 핵심 매개체입니다.1.1. 프로세스와 스레드(Process & Thread)구분프로세스(Process)스레드(Thread)정의실행 중인 프로그램(OS로부터 자원 할당받음)프로세스 내에서 실행되는 작업의 흐름(실행 단위)자원 공유별도의 메모리 공간(Heap, Stack, Code, Data)같은 프로세스 내의 Code, Data, Heap 영역 공유병렬성프로세스 간 병렬 처리스레드 간 동시성/병렬 처리 1.2. 메모리 관리 기법가상 메모리(Virtual Memory) : 실제 물리 메모리(RAM)보다 더 큰 메모리 공간을 사용할 수 있게 해주는 기법. 프로세스마다 독자적인 가상 주소 공간을 제공합니다.페.. 2025. 11. 11.
[Android(Flutter)] Github Copilot & Android Studio 연동 ■ Copilot 플러그인 설치1. Android Studio 상단 메뉴에서 File → Settings → Plugins → Marketplace 2. 검색창에 GitHub Copilot 입력 3. Install 클릭 → 설치 후 IDE 재시작 4. 재시작하면 로그인 안내가 뜸 → Sign in to GitHub 클릭 5. 브라우저에서 깃허브 로그인 → “Authorize GitHub Copilot” 승인 후 휴대폰 인증GitHub Free 계정도 60일 체험 제공됩니다. 이후엔 월 $10 (학생/교사는 무료)■ Copilot Chat 같은 방법으로 GitHub Copilot Chat 플러그인도 설치 IDE 재시작 후 오른쪽에 Copilot Chat 아이콘 클릭 휴 탭이 생깁니다.(모델 선택, 폴더.. 2025. 10. 30.
[Java] 기본 디자인 패턴 전략 패턴 알고리즘(전략)을 캡슐화하여 상황에 따라 언제든지 교체 가능하게 하는 패턴.1. 유연하게 언제든지 교체 가능2. 결합도 감소(사용하는 코드와 실제 코드가 분리) 옵저버 패턴 한 객체의 상태가 변화가 되면 이를 의존하는 다른객체들에게 통보하는 전략 패턴.(1:N 의존관계)1. 느슨한 결합(주제와 관찰자는 서로 잘 몰라도 됨)2. 이벤트 기반(상태 변경에 따른 자동 업데이트 편함) 데코레이터 패턴 기존의 객체의 코드를 수정하지 않고도 기능의 추가를 덮어씌우듯이 추가하는 전략 패턴(상속대신에 객체를 감싸서 기능을 확장)1. 유연한 기능 추가(필요한 기능만 골라 동적으로 조합가능)2. 기존 코드 보호(원래 코드를 건드리지 않고 기능 확장 가능) 팩토리 패턴 모든 객체 생성 로직을 별도의 공장 클래스로.. 2025. 10. 26.
[트러블 슈팅]Vite + React 프로젝트를 GitHub Pages에 배포했는데 흰 화면만 나오는 문제 [문제사항]Vite + React로 만든 프로젝트를 GitHub Pages에 올렸는데, 로컬에서는 npm run dev로 잘 실행되는데 정작 깃 페이지 주소 URL에 들어가면 배경이 흰 화면만 나오는 문제가 발생했다.빌드도 에러 없이 끝났고, GitHub Pages 설정도 main 브랜치로 되어 있었는데 페이지에 들어가면 제목만 나오고 아무 내용도 안 보였다. 원인 분석 처음엔 “빌드가 잘못된 건가?” 하고 생각했지만,Vite 프로젝트는 로컬(localhost:3000)에서는 기본 경로(/) 기준으로 파일을 불러온다.하지만 GitHub Pages는 리포지터리 이름이 포함된 하위 경로(/@@@_Dev/) 에서 페이지를 호스팅한다. 즉,로컬 실행 시 http://localhost:3000/ GitHub P.. 2025. 10. 18.
[자료구조 & 알고리즘] 스택, 큐, 덱(JAVA) 스택(Stack), 큐(Queue), 덱(Deque): 기본 자료구조의 완벽 이해가장 기본이 되는 "선형자료구조"인 스택(Stack), 큐(Queue), 덱(Deque)은 데이터의 접근 순서를 규정함으로써 프로그램의 효율적인 작동을 가능하게 합니다. 또한 알고리즘 문제(코딩테스트) 해결은 물론, 운영체제나 네트워크 통신 등 컴퓨터 시스템 전반에 걸쳐 핵심적인 역할을 수행합니다.스택(Stack) : LIFO 구조의 메모리스택은 마지막에 들어온 데이터가 가장 먼저 나가는(LIFO:Last-In, First-Out) 구조를 가진 자료구조입니다. 데이터 삽입과 삭제는 항상 한쪽 끝에서만 이루어집니다.삽입 / 삭제321(제일 먼저 들어와 먼저 나감)특징 및 주요 연산연산설명시간 복잡도Push스택의 맨 위에 데이터.. 2025. 9. 25.
[자료구조&알고리즘] 배열과 리스트(JAVA) 자바(Java) 배열(Array)과 리스트(List) 단순히 문법을 아는 것을 넘어, 두 자료구조의 내부 동작 원리와 성능 차이를 이해하는 것이 중요합니다. 해당 내용은 자바(Java)를 기준으로 배열과 리스트를 완벽하게 파헤치고, 성능, 동작, 메서드, 캐시 원리까지 알아보겠습니다. 배열(Array) : 고정된 연속 공간자바에서 배열은 같은 타입의 연속된 메모리 공간에 저장되는 자료구조입니다. 한 번 생성되면 크기를 변경할 수 없으며, 인덱스(Index)를 사용하여 요소에 접근합니다.특징 및 원리크기 고정(Static) : 배열은 생성 시점에 메모리 크기가 고정됩니다. 한 번 선언된 배열은 크기를 늘리거나 줄일 수 없습니다.캐시 힛 레이트(Chash hit rate) : cpu가 데이터를 가져올시 배열.. 2025. 9. 25.
[Coding Test] 아이템 줍기(JAVA, LV.3, BFS, 2배 스케일링) 문제 설명다음과 같은 다각형 모양 지형에서 캐릭터가 아이템을 줍기 위해 이동하려 합니다. 지형은 각 변이 x축, y축과 평행한 직사각형이 겹쳐진 형태로 표현하며, 캐릭터는 이 다각형의 둘레(굵은 선)를 따라서 이동합니다.만약 직사각형을 겹친 후 다음과 같이 중앙에 빈 공간이 생기는 경우, 다각형의 가장 바깥쪽 테두리가 캐릭터의 이동 경로가 됩니다. 단, 서로 다른 두 직사각형의 x축 좌표 또는 y축 좌표가 같은 경우는 없습니다. 즉, 위 그림처럼 서로 다른 두 직사각형이 꼭짓점에서 만나거나, 변이 겹치는 경우 등은 없습니다.다음 그림과 같이 지형이 2개 이상으로 분리된 경우도 없습니다.한 직사각형이 다른 직사각형 안에 완전히 포함되는 경우 또한 없습니다. 지형을 나타내는 직사각형이 담긴 2차원 배열 re.. 2025. 9. 20.
[Coding Test] BFS 최단 거리 구하기(JAVA, LV.2) 상황 A에서 시작해서 B로 가는 최단 거리를 구하시오.조건 '1'로만 연속된 가로, 세로를 이동이 가능하고 '0'은 장애물로 지나갈 수 없는 곳. 도달 못할 시 -1 반환A(1)01111010110111111010000B(1) 입출력 [[1,0,1,1,1], [1,0,1,0,1], [1,0,1,1,1], [1,1,1,0,1], [0,0,0,0,1]]11[[1,0,1,1,1], [1,0,2,0,1], [1,0,1,1,1], [1,1,1,0,0], [0,0,0,0,1]]-1 package studyTestProject;import java.util.*;class CodingTest3 { int[] dx = {-1, 1, 0, 0}; int[] dy = {0, 0, -1, 1}; public.. 2025. 9. 19.
[IT공부] 나만 알고 싶은 웹 개발 빌드 툴 'Vite(비트)' Vite(프랑스어로 '빠르다'는 뜻의 '빛'을 뜻하는 '비트'로 발음)는 현대적인 웹 개발 환경을 위한 차세대 빌드 툴입니다. 등장배경기존의 "웹팩(Webpack, "번들링"(하나의 큰 파일로 합치는 의미)에 최적화된 빌드 툴)"과 같은 빌드 툴이 가지고 있던 "느린 개발 서버 시작" 및 "핫 리로드(Hot Reload) 속도" 문제를 해결하고자 등장했습니다. 핵심은 네이티브 ES 모듈(ESM)을 활용기존 방식(Webpack 등) : 개발 서버를 실행하기 전에 모든 소스 코드를 번들링(하나의 파일로 묶는 작업)합니다. 프로젝트가 커질수록 이 과정이 느려지고, 파일 하나만 수정해도 전체를 다시 번들링해야 해서 핫 리로드 속도가 느려지는 단점이 있었습니다.Vite 방식 : 소스 코드를 미리 "번들링"하지 .. 2025. 9. 10.
[TypeScript] 나만 알고 싶은 웹 프레임워크 'Svelte(스벨트)' 스벨트(Svelte), 프레임워크의 새로운 패러다임 보통 "React", "Vue" 같은 프레임워크가 "가상돔(Virtual DOM)"을 사용해 웹페이지를 업데이트한다고 알고 있습니다. 하지만 Svelte는 완전히 다른 방식으로 접근합니다. Svelte는 프레임워크가 아니라 '컴파일러' Svelte는 우리가 작성한 코드를 브라우저에서 실행하기 전에, '빌드(build) 단계'에서 미리 최적화된 순수 자바스크립트(Vanilla JS) 코드로 변환해버립니다.기존 프레임워크 : 실시간으로 통역해주는 '동시통역사'와 함께 일하는 방식입니다. 계속해서 통역사의 도움이 필요하죠.Svelte : 책을 출간하기 전에 '전문 번역가'가 완벽하게 번역을 끝내놓는 방식입니다. 독자(브라우저)는 그냥 잘 번역된 책(순수 .. 2025. 9. 10.

티스토리툴바