👋 Welcome to HJS Blog
안녕하세요! 프론트엔드 개발자 한재석입니다.
이 블로그는 개발 과정에서의 배움과 경험을 기록하고 공유하는 공간입니다.
작은 성장이라도 꾸준히, 그리고 진심을 담아 나아가겠습니다.
방문해 주셔서 감사합니다 🙏
TDD
테스트 주도 개발(TEST-DRIVEN DEVELOPMENT, TDD)은 기능을 구현하기 전에 테스트를 먼저 작성하고, 그 테스트를 통과시키는 방식으로 개발을 진행하는 방법론입니다. 단순히 테스트를 작성하는 것이 아니라, 개발과 테스트를 반복적 사이클로 수행하여 코드 품질을 높이는 것이 핵심입니다.
📅 20250924
한글 입력 시 Enter 중복 검색 문제 해결
검색 input에서 한글 입력 후 ENTER를 누르면 검색 함수가 두 번 실행되는 문제가 발생합니다. 영문 입력 + Enter → 1번 실행 ✅ 한글 입력 + Enter → 2번 실행 ❌ 한글은 조합형 입력이라 키 하나가 곧바로 글자가 아닙니다.→ 조합 과정에서 브라우저가 compositionend(조합 끝) + Enter 이벤트를 연속으로 발생시켜요. 그...
📅 20250909React Testing Library 완전 정리
REACT TESTING LIBRARY(RTL)는 React 컴포넌트를 사용자 관점에서 테스트하기 위해 만들어진 라이브러리입니다. DOM Testing Library를 기반으로 만들어짐 구현 세부사항이 아닌 동작(BEHAVIOR) 검증에 초점 "사용자가 보는 것과 같은 방식"으로 요소를 찾고 상호작용 npm install --save-de...
📅 20250905Jest 완전 정리
JEST는 FACEBOOK에서 만든 JAVASCRIPT 테스트 프레임워크로, 주로 REACT 환경에서 많이 사용되지만 Node.js, TypeScript 등 다양한 프로젝트에서도 활용 가능합니다. ZERO CONFIGURATION: 설치만 하면 바로 사용 가능 빠른 속도: 멀티 프로세스로 테스트 병렬 실행 MOCKING 지원: 함수, 모듈, 타이머 등을 손...
📅 20250904가장 비싼 과일 세트 찾기
한 상점에는 여러 종류의 과일이 있습니다.각 과일에는 가격이 적혀 있으며, 같은 종류의 과일이 여러 개 있을 수 있습니다. 상점 주인은 3개의 과일을 골라 합산 가격을 기록하려고 합니다.기록된 모든 합 중에서 K번째로 높은 가격을 구하세요.만약 K번째 가격이 존재하지 않으면 -1을 출력합니다. let n = 7, k = 4; let prices = [120...
📅 20250903모든 경기에서 더 빠른 선수 찾기
N명의 선수가 M번의 달리기 경기에 참가했습니다.(선수 A, 선수 B) 쌍을 만들 때, A가 모든 경기에서 B보다 항상 빠른 기록(작은 순위) 을 가질 경우 A는 B보다 우수하다고 정의합니다. 이때 가능한 (A, B) 쌍의 개수를 출력하세요. let records = [ [2, 3, 1, 4], [3, 4, 1, 2], [2, 1, 3, 4] ]; 2 가능...
📅 20250901스코프
스코프(SCOPE)는 변수에 접근 할 수 있는 유효 범위를 의미합니다.자바스크립트에서 스코프는 변수가 "어디서 선언되가, 어디까지 접근 가능한지"를 결정합니다. 스코프는 자바스크립트 엔진이 변수를 찾는 규칙입니다. 변수 참조 시 엔진은 현재 스코프 → 상위 스코프 → ... → 전역 스코프 순으로 탐색합니다. (스코프 체인) 프로그램 전체...
📅 20250820가장 큰 자릿수 합 찾기
숫자판에 N개의 양의 정수가 주어집니다. 각 숫자의 자릿수의 합을 구하고, 그 합이 가장 큰 숫자를 출력하십시오. 만약 자릿수의 합이 같다면 숫자 자체가 더 큰 수를 출력합니다. let numbers = [305, 989, 743, 88, 998, 277, 91]; 998 각 숫자의 자릿수 합을 구함 최대 자릿수 합을 가진 숫자를 찾음 합이 같은 경우 숫자...
📅 20250813가장 가까운 주유소 거리 문제
고속도로를 나타내는 문자열 road 가 주어집니다. 문자열에는 빈 도로(.)와 주요소(G)가 표시되어 있습니다. 각 도로 위치에서 가장 가까운 주유소(G)까지의 최소 거리를 계산하십시오. let road = "..G....G..G."; [2, 1, 0, 1, 2, 3, 0, 1, 0, 1, 2, 3] 각 인덱스의 문자에서 G 까지 떨어진 ...
📅 20250812저수지 찾기 문제
N×N 격자판에 각 지역의 물 깊이가 주어집니다. 자신의 상, 하, 좌, 우의 깊이보다 더 깊은 지역은 저수지로 분류합니다. 격자의 가장자리는 깊이가 0이라고 가정합니다. let depthMap = [ [4, 2, 5, 1, 3], [3, 6, 2, 7, 2], [5, 3, 8, 4, 6], [4, 5, 7, 3, 2], [6, 4, 2, 5, 1] ]; ...
📅 20250811마라톤 선수 순위 매기기 문제
마라톤 선수 N명의 완주 시간이 주어집니다. 완주 시간이 짧을수록 높은 순위(1등)이며, 동일한 시간이 있으면 동점 처리하여 같은 순위를 가집니다. 예를 들어, 2명이 1등이면 다음 순위는 3등입니다. 📥 입력 예시 let timelamps = [125, 130, 125, 140, 135, 130]; 완주 시간 (초 단위, 양의 정수) 입력된 순서대로 각...
📅 20250811
렉시컬 스코프
렉시컬 스코프는 "코드가 작성된 위치"를 기준으로 변수의 유효 범위를 결정하는 스코프 규칙입니다. 자바스크립트는 렉시컬 스코프를 따르는 정적 스코프 언어입니다.즉, 변수 참조는 함수가 어디서 호출되었는지가 아니라, 어디에서 정의되었는지로 결정됩니다. let message = "global"; function outer()...
📅 20250807