{"componentChunkName":"component---src-templates-tags-js","path":"/tags/java-script/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog"}},"allMarkdownRemark":{"totalCount":32,"nodes":[{"excerpt":"레거시 코드 마이그레이션 6개월 10만 줄의 JavaScript 코드를 TypeScript로 옮기는 작업을 시작했을 때, 나는 이게 이렇게 어려울 줄 몰랐다. “타입만 추가하면 되지 않을까?”라는 순진한 생각으로 시작했지만, 현실은 달랐다.…","fields":{"slug":"/javascript/레거시-코드-마이그레이션-6개월-JavaScript에서-TypeScript로-옮기며-배운-것들/"},"frontmatter":{"date":"2026년 1월 5일","title":"레거시 코드 마이그레이션 6개월 - JavaScript에서 TypeScript로 옮기며 배운 것들","description":"10만 줄의 JavaScript 코드베이스를 TypeScript로 마이그레이션한 6개월의 여정을 기록한다. 팀 내부 반대, 점진적 마이그레이션 전략, 예상치 못한 문제들, 그리고 결국 성공한 과정을 솔직하게 공유한다."}},{"excerpt":"Deno 완전정복 Deno는 Node.js의 창시자인 Ryan Dahl이 만든 차세대 JavaScript/TypeScript 런타임이다. Node.js의 문제점을 해결하고, 현대적인 개발 경험을 제공하기 위해 설계되었다. 이 글은 Deno…","fields":{"slug":"/javascript/Deno-완전정복-Node.js를-넘어서는-차세대-런타임/"},"frontmatter":{"date":"2025년 12월 29일","title":"Deno 완전정복 - Node.js를 넘어서는 차세대 런타임","description":"Deno의 모든 것을 다룬다. Node.js와의 차이점, 내장 기능, 보안 모델, TypeScript 지원, 실전 프로젝트 구축까지 Deno를 완벽하게 마스터하는 가이드를 제공한다."}},{"excerpt":"…","fields":{"slug":"/javascript/프론트엔드-프레임워크-선택-가이드/"},"frontmatter":{"date":"2025년 12월 23일","title":"프론트엔드 프레임워크 선택 가이드 - React vs Vue vs Svelte 실전 비교","description":"React, Vue, Svelte를 포함한 주요 프론트엔드 프레임워크를 상세히 비교 분석한다. 프로젝트 특성, 팀 규모, 학습 곡선 등을 고려한 실무 선택 가이드를 제공한다."}},{"excerpt":"JavaScript 성능 측정 도구와 최적화 체크리스트 JavaScript 애플리케이션의 성능은 사용자 경험과 비즈니스 성과에 직접적인 영향을 미친다. 느린 로딩 시간은 이탈률을 높이고, 전환율을 낮춘다. 이 글은 JavaScript…","fields":{"slug":"/javascript/JavaScript-성능-측정-도구와-최적화-체크리스트/"},"frontmatter":{"date":"2025년 12월 23일","title":"JavaScript 성능 측정 도구와 최적화 체크리스트 - 실무에서 바로 쓰는 성능 개선 가이드","description":"JavaScript 애플리케이션의 성능을 측정하고 최적화하는 완전한 가이드다. Lighthouse, WebPageTest, Chrome DevTools 등 주요 도구 사용법과 실무 체크리스트를 제공한다."}},{"excerpt":"GraphQL 완전정복 - REST API를 넘어서는 쿼리 언어 GraphQL은 Facebook에서 2012년에 개발하고 2015년에 오픈소스로 공개한 쿼리 언어이자 런타임 시스템이다. Facebook…","fields":{"slug":"/javascript/GraphQL-완전정복-REST-API를-넘어서는-쿼리-언어/"},"frontmatter":{"date":"2025년 12월 17일","title":"GraphQL 완전정복 - REST API를 넘어서는 쿼리 언어","description":"GraphQL의 핵심 개념부터 실전 활용까지. REST API의 한계를 해결하는 GraphQL의 강력한 기능, 스키마 설계 원칙, N+1 문제 해결, 실시간 구독, 인증과 보안까지 현대 웹 개발에서 GraphQL을 효과적으로 활용하는 모든 것을 다룹니다."}},{"excerpt":"WebAssembly (WASM) - 브라우저와 서버를 넘나드는 범용 런타임 WebAssembly(WASM)는 웹에서 네이티브에 가까운 성능으로 코드를 실행할 수 있게 해주는 바이너리 명령어 형식이다. JavaScript와 함께 작동하며, C/C…","fields":{"slug":"/javascript/WebAssembly-WASM-브라우저와-서버를-넘나드는-범용-런타임/"},"frontmatter":{"date":"2025년 12월 7일","title":"WebAssembly (WASM) - 브라우저와 서버를 넘나드는 범용 런타임","description":"WebAssembly 기초부터 고급 활용까지. WASM 모듈 작성, JavaScript와의 상호작용, 성능 최적화, Rust/Go로 WASM 빌드, Node.js 서버 사이드 활용, 실전 프로젝트 예제까지 완벽하게 다룹니다."}},{"excerpt":"웹 게임 개발 기술 스택 완전정복 - 실전 가이드 웹 게임 개발은 HTML5, Canvas API, WebGL…","fields":{"slug":"/javascript/웹-게임-개발-기술-스택-완전정복-실전-가이드/"},"frontmatter":{"date":"2025년 12월 7일","title":"웹 게임 개발 기술 스택 완전정복 - 실전 가이드","description":"웹 게임 개발의 모든 것을 다룹니다. Phaser, Three.js, Babylon.js, Unity WebGL 등 주요 게임 엔진부터 그래픽스, 오디오, 네트워킹, 성능 최적화, 배포 전략까지 실무에서 바로 사용할 수 있는 완벽한 가이드를 제공합니다."}},{"excerpt":"TypeScript 완전정복 - 타입 시스템부터 고급 패턴까지 TypeScript는 JavaScript에 정적 타입을 추가한 언어로, 대규모 애플리케이션 개발에서 필수적인 도구가 되었다. 이 글은 TypeScript…","fields":{"slug":"/javascript/TypeScript-완전정복-타입-시스템부터-고급-패턴까지/"},"frontmatter":{"date":"2025년 11월 28일","title":"TypeScript 완전정복 - 타입 시스템부터 고급 패턴까지","description":"TypeScript의 타입 시스템부터 고급 패턴까지 실전 예제와 함께 완벽하게 정리합니다. 제네릭, 유틸리티 타입, 조건부 타입, 타입 가드, 모듈 시스템 등 TypeScript의 모든 것을 다룹니다."}},{"excerpt":"최신 JavaScript - ES2020부터 ES2024까지, 모던 개발자를 위한 완벽 가이드 ES6(ES2015) 이후 JavaScript는 매년 새로운 기능을 추가하며 빠르게 발전하고 있다. ES2020부터 ES2024까지…","fields":{"slug":"/javascript/최신-JavaScript-ES2020부터-ES2024까지-모던-개발자를-위한-완벽-가이드/"},"frontmatter":{"date":"2025년 11월 24일","title":"최신 JavaScript - ES2020부터 ES2024까지, 모던 개발자를 위한 완벽 가이드","description":"ES2020부터 ES2024까지 추가된 최신 JavaScript 기능을 실전 예제와 함께 설명합니다. Optional Chaining, Nullish Coalescing, Top-level await, Private fields, Pattern Matching, Records & Tuples 등 모던 JavaScript의 모든 것을 다룹니다."}},{"excerpt":"…","fields":{"slug":"/algorithm/고급-알고리즘-완전정복-세그먼트-트리부터-위상정렬까지/"},"frontmatter":{"date":"2025년 11월 15일","title":"고급 알고리즘 완전정복 - 세그먼트 트리부터 위상정렬까지","description":"코딩 테스트와 실무에서 자주 사용되는 고급 알고리즘을 완벽 정리. 세그먼트 트리, 펜윅 트리, 유니온 파인드, 최소 공통 조상(LCA), 강한 연결 요소(SCC), 위상 정렬, 최소 신장 트리(MST), 최대 유량 등 실전 문제 해결에 필요한 모든 알고리즘을 JavaScript로 구현합니다."}},{"excerpt":"React와 Next.js 완전정복 - 현대적 프론트엔드 개발 실전 가이드 React는 현재 가장 인기 있는 프론트엔드 라이브러리이며, Next.js는 React 기반의 풀스택 프레임워크로 빠르게 성장하고 있다. 2024년 기준 React…","fields":{"slug":"/javascript/React-Next.js-완전정복-현대적-프론트엔드-개발-가이드/"},"frontmatter":{"date":"2025년 11월 15일","title":"React와 Next.js 완전정복 - 현대적 프론트엔드 개발 실전 가이드","description":"React Hooks 심화, Server Components, Next.js 14 App Router, React Query, 상태 관리 라이브러리 비교, 성능 최적화까지 현대적 React/Next.js 개발의 모든 것을 실전 예제와 함께 정리합니다."}},{"excerpt":"퀵 정렬 (Quick Sort) 퀵 정렬은 분할 정복 방식으로 평균적으로 O(n log n…","fields":{"slug":"/algorithm/퀵-정렬-quick-sort/"},"frontmatter":{"date":"2025년 11월 6일","title":"퀵 정렬 (Quick Sort)","description":"퀵 정렬은 분할 정복 알고리즘으로 평균적으로 매우 빠른 정렬 알고리즘이다. 피벗을 선택해 기준으로 삼고, 작은 값과 큰 값을 분할해 재귀적으로 정렬한다."}},{"excerpt":"KMP 알고리즘 (Knuth-Morris-Pratt) KMP…","fields":{"slug":"/algorithm/kmp-알고리즘-kmp-algorithm/"},"frontmatter":{"date":"2025년 11월 1일","title":"KMP 알고리즘 (Knuth-Morris-Pratt)","description":"문자열 검색을 효율적으로 수행하는 알고리즘. 실패 함수(Failure Function)를 이용해 불필요한 비교를 건너뛰며, 시간복잡도는 O(N+M)이다."}},{"excerpt":"벨만-포드 알고리즘 (Bellman-Ford…","fields":{"slug":"/algorithm/벨만-포드-bellman-ford/"},"frontmatter":{"date":"2025년 11월 1일","title":"벨만-포드 알고리즘 (Bellman-Ford)","description":"음수 가중치가 있는 그래프에서 최단 경로를 구할 수 있는 알고리즘. 음수 사이클 감지도 가능하며, 시간복잡도는 O(VE)이다."}},{"excerpt":"병합 정렬 (Merge Sort) 병합 정렬은 배열을 반으로 나누고 재귀적으로 정렬한 뒤 합치는 분할 정복 방식의 정렬 알고리즘이다. 정의 배열을 크기가…","fields":{"slug":"/algorithm/병합-정렬-merge-sort/"},"frontmatter":{"date":"2025년 11월 1일","title":"병합 정렬 (Merge Sort)","description":"분할 정복(Divide and Conquer) 기법을 사용하는 안정 정렬 알고리즘. 시간복잡도는 O(N log N)이며, 추가 공간이 필요하다."}},{"excerpt":"최장 공통 부분수열 (LCS) LCS는 두 문자열에서 공통으로 나타나는 부분수열 중 가장 긴 것을 찾는 동적 계획법 문제다. 정의 부분수열은 원래 문자열에서 일부 문자를 순서대로 선택한 것이다. 예를 들어 “ABCD”의 부분수열에는 “A”, “AC…","fields":{"slug":"/algorithm/최장-공통-부분수열-lcs/"},"frontmatter":{"date":"2025년 11월 1일","title":"최장 공통 부분수열 (LCS)","description":"두 문자열의 공통 부분수열 중 가장 긴 것을 찾는 동적 계획법 문제. 문자열 유사도 측정과 차이점 분석에 활용된다."}},{"excerpt":"트리 순회 (Tree Traversal…","fields":{"slug":"/algorithm/트리-순회-tree-traversal/"},"frontmatter":{"date":"2025년 11월 1일","title":"트리 순회 (Tree Traversal)","description":"이진 트리에서 노드를 방문하는 순서를 다르게 하는 세 가지 순회 방법. 전위, 중위, 후위 순회로 나뉘며 재귀 또는 스택으로 구현 가능하다."}},{"excerpt":"깊이 우선 탐색 (DFS) DFS…","fields":{"slug":"/algorithm/깊이우선탐색-depth-first-search/"},"frontmatter":{"date":"2025년 10월 30일","title":"깊이 우선 탐색 (Depth-First Search, DFS)","description":"그래프에서 한 경로를 가능한 깊게 따라간 뒤, 더 갈 곳이 없으면 되돌아오는 탐색 방법. 재귀 또는 스택을 사용하며, 연결 요소 탐색과 위상 정렬 등에 활용된다."}},{"excerpt":"너비 우선 탐색 (BFS) BFS…","fields":{"slug":"/algorithm/너비우선탐색-breadth-first-search/"},"frontmatter":{"date":"2025년 10월 30일","title":"너비 우선 탐색 (Breadth-First Search, BFS)","description":"그래프에서 시작 정점으로부터 가까운 정점부터 차례대로 탐색하는 알고리즘. 최단 간선 수 경로 탐색에 유용하며 큐(Queue)를 사용한다."}},{"excerpt":"다익스트라 (Dijkstra) 다익스트라는 비음수 가중치 그래프에서 시작 정점으로부터 각 정점까지의 최단 거리를 구한다. 정의 가중치가 모두…","fields":{"slug":"/algorithm/다익스트라-dijkstra/"},"frontmatter":{"date":"2025년 10월 30일","title":"다익스트라 알고리즘 (Dijkstra)","description":"가중치가 모두 비음수인 그래프에서 한 시작 정점으로부터의 최단 경로를 구하는 알고리즘. 우선순위 큐(최소 힙)를 사용하면 효율적이다."}},{"excerpt":"이진 탐색 (Binary Search…","fields":{"slug":"/algorithm/이진-탐색-binary-search/"},"frontmatter":{"date":"2025년 10월 30일","title":"이진 탐색 (Binary Search)","description":"정렬된 배열에서 중간값을 기준으로 탐색 범위를 절반으로 줄여가며 값을 찾는 알고리즘. 시간복잡도는 O(log N)이다."}},{"excerpt":"최소 동전 수 (Coin Change, DP) 그리디로는 항상 최적을 보장하지 못하는 거스름돈 문제를, 동적 계획법으로 최적해로 해결한다. 정의 여러 종류의 동전으로 딱 맞게 금액 N…","fields":{"slug":"/algorithm/최소-동전수-dp-coin-change/"},"frontmatter":{"date":"2025년 10월 30일","title":"최소 동전 수 (Coin Change, DP)","description":"동적 계획법(DP)을 사용하여 특정 금액을 만들기 위한 최소 동전 개수를 구한다. 그리디가 항상 최적을 보장하지 않는 경우에도 최적해를 보장하는 방법이다."}},{"excerpt":"그리디 알고리즘 (Greedy Algorithm…","fields":{"slug":"/algorithm/그리디-알고리즘-greedy-algorithm/"},"frontmatter":{"date":"2021년 4월 4일","title":"그리디 알고리즘 (Greedy Algorithm)","description":"그리디 알고리즘, 탐욕 알고리즘 이라고도 부른다. 그리드 알고리즘은 최적해를 구하는 데에 사용되는 근사적인 방법으로, 여러 경우 중 하나를 결정해야 할 때마다 그 순간에 최적이라고 생각 되는것을 선택해 나가는 방식이다."}},{"excerpt":"목표 Vue 와 ECMAScript 6 을 활용하여 단일 페이지 프론트엔드 개발을 할 수 있다. Router 를 활용 하여 다수의 화면 컨트롤 할 수 있다. Vuex 를 활용하여 클라이언트 상태 관리를 할 수 있다. MVC, MVVM…","fields":{"slug":"/study/Vue-JS를-활용한-프론트엔드-개발/"},"frontmatter":{"date":"2021년 3월 17일","title":"Vue JS를 활용한 프론트엔드 개발","description":"Vue 와 ECMAScript6 을 활용하여 웹페이지 개발 방법에 대해 학습하고, JamStack 기반 블로그를 개발 합니다."}},{"excerpt":"ES6 Map & Set Map과 Set은 Java와 같은 다른 프로그래밍 언어에서도 자주 사용하는 데이터 구조이다. Map은 키와 값으로 이루어진 데이터 구조이고, Set…","fields":{"slug":"/javascript/es6-map-set/"},"frontmatter":{"date":"2020년 12월 13일","title":"ES6 Map & Set","description":"Map과 Set은 Java와 같은 다른 프로그래밍 언어에서도 자주 사용하는 데이터 구조이다. Map은 키와 값으로 이루어진 데이터 구조이고, Set은 중복 없는 키-값으로 이루어진다. 기존 자바스크립트에서는 배열과 객체로 해당 기능을 구현할 수 있었지만, 입력값의 목록이나 특정값 찾기를 수행하기 위해서는 별도의 과정이 필요하다."}},{"excerpt":"ES6 객체 표현식 ES6에서는 더욱 동적이고 간단하게 객체를 생성하고 할당하는 표현식을 제공한다. 만약, 객체의 속성을 변수명과 같은 속성명으로 설정하려면 이를 간단하게 표현할 수 있다. 예를 들어, 아래 코드1과 같은 객체가 있다면, 코드…","fields":{"slug":"/javascript/es6-객체-표현식/"},"frontmatter":{"date":"2020년 12월 13일","title":"ES6 객체 표현식","description":"ES6에서는 더욱 동적이고 간단하게 객체를 생성하고 할당하는 표현식을 제공한다. 만약, 객체의 속성을 변수명과 같은 속성명으로 설정하려면 이를 간단하게 표현할 수 있다."}},{"excerpt":"ES6 임포트(import)와 익스포트(export) 모듈 모듈 프로그래밍은 각 프로그램 파일을 모듈 단위로 분리하여, 이를 구조화할 수 있는 장점이 있다. ES…","fields":{"slug":"/javascript/es6-임포트-import-와-익스포트-export-모듈/"},"frontmatter":{"date":"2020년 12월 10일","title":"ES6 임포트(import)와 익스포트(export) 모듈","description":"모듈 프로그래밍은 각 프로그램 파일을 모듈 단위로 분리하여, 이를 구조화할 수 있는 장점이 있다. ES5 이전의 자바스크립트는 모듈을 지원하지 않았기에 다양한 방식을 사용해 이를 구현해왔다. ES6부터 import, export 구문을 활용하면, 한 모듈이 특정 변수를 익스포트(export)하고 다른 모듈이 이를 임포트(import)하여 계층 관계를 만들 수 있다."}},{"excerpt":"ES6 Spread & Rest 연산자 ES6부터 가변 인자를 표현할  키워드가 추가 되었다. 기존에는 배열 값을 함수 임자로 넘기려면  내장 메서드나  를 통해 변수를 받아서, 이를 Array.prorotype.slice…","fields":{"slug":"/javascript/es6-spread-rest-연산자/"},"frontmatter":{"date":"2020년 11월 19일","title":"ES6 Spread & Rest 연산자","description":"ES6부터 가변 인자를 표현할 '...' 키워드가 추가 되었다. 기존에는 배열 값을 함수 임자로 넘기려면 apply() 내장 메서드나 argments 를 통해 변수를 받아서, 이를 Array.prorotype.slice() 함수로 잘라내야 했지만 '...' 키워드를 이용하면 여러 개의 인자를 넘길 수 있다. 이는 Spread 연산자라고 한다."}},{"excerpt":"ES6 디스트럭처링(Destructuring) 디스트럭처링(Destructuring)은 Object 객체를 개별 변수에 할당하는 것을 말한다. 이를 이용하면, JSON…","fields":{"slug":"/javascript/es6-디스트럭처링-destructuring/"},"frontmatter":{"date":"2020년 11월 18일","title":"ES6 디스트럭처링(Destructuring)","description":"디스트럭처링(Destructuring)은 Object 객체를 개별 변수에 할당하는 것을 말한다. 이를 이용하면, JSON 형태의 객체를 쉽게 매핑하여 변수에 할당할 수 있고, 반환값도 여러 개를 설정할 수 있다."}},{"excerpt":"ES6 템플릿 문자열 (template string) 템플릿 문자열(Template String…","fields":{"slug":"/javascript/es6-템플릿-문자열-template-string/"},"frontmatter":{"date":"2020년 11월 17일","title":"ES6 템플릿 문자열 (template string)","description":"템플릿 문자열(Template String)은 문자열을 생성하는 새롭게 도입된 리터럴이다. 문자열을 설정하기 위해 따옴표(`)를 이용한다. 기존에는 변수를 문자열 안에 삽입하기 위해 따옴표 사이에 그 변수를 넣어 합치는 작업이 필요했는데, 템플릿문자열을 이용하면 이를 간단하게 만들 수 있다."}},{"excerpt":"ES6 클래스 (Class) 기존에는 객체지향을 구현하려고 할 때 function을 사용하여 구현 했다. ES6에서는 class 키워드를 사용하여 객체지향을 구현 할수 있다. 기존에는 아래와 같이 객체지향을 구현 했다. new…","fields":{"slug":"/javascript/es6-클래스-class/"},"frontmatter":{"date":"2020년 11월 5일","title":"ES6 클래스 (Class)","description":"기존에는 객체지향을 구현하려고 할 때 function을 사용하여 구현 했다. ES6에서는 class 키워드를 사용하여 객체지향을 구현 할수 있다. ES6 클래스는 생성자와 상속을 더욱 간단하고 명확한 구문으로 다룰 수 있게 한다. 클래스 자신도 함수이며, 생성자를 가지고 함수를 생성하는 새로운 구문이다."}},{"excerpt":"ES6 let & cont 기존에는 var 키워드로 변수와 상수를 모두 정의 하였지만 ES6에서는 변수와 상수를 구분할수 있는 let 과 const 가 추가 되었다. let let…","fields":{"slug":"/javascript/es6-let-cont/"},"frontmatter":{"date":"2020년 10월 11일","title":"ES6 let & cont","description":"let, const 는 ES6 에 추가 되었다. let,const는 변수(let)와 상수(const)를 구분 하여 정의할때 사용 된다."}}]}},"pageContext":{"tag":"JavaScript"}},"staticQueryHashes":["213619243","3262363727"]}