발표만 하면 말이 막히는 이유: 연차가 쌓일수록 커진 "증명해야 한다"는 압박
발표 두려움의 원인은 말솜씨가 아니라 모든 걸 중요하게 만든 압박이었다. 실패한 장면을 미리 느껴 두면 중요성이 빠지고 말이 나온다는 걸 알게 된 개발자의 고찰과 앞으로의 방향.
Changsun Oh
AI와 함께 일하며 문제를 끝까지 풀어내는 7년 차 개발자입니다.
제가 겪고 풀어낸 문제들이 누군가에게 지름길이 되길 바라며 기록합니다.
전체 글
Claude Code 토큰 줄이려고 ponytail·graphify를 써봤다: 코드는 좋아졌는데 토큰은 체감이 없는 이유
Claude Code 토큰을 아끼려고 ponytail과 graphify를 설치했지만 세션 로그로 집계해 보니 토큰은 거의 줄지 않았다. 사용량의 97%가 다시 읽는 맥락이었고, ponytail은 코드를 덜 쓰게 하는 도구, graphify는 구조를 보여 주는 도구라 그 부분을 건드리지 않았다.
개발자 업무 자동화 대시보드: 남는 오후마다 불편로그 하나씩 자동화해 한곳에 모은 기록
개발자 업무 자동화 대시보드는 반복 머지, 호스트 확인, 탭 정리처럼 매일 겪는 불편을 하나씩 자동화해 한 화면에 모은 것이다. 다중 레포 머지 시간을 크게 줄인 과정과, GitLab Pages에서 로컬 서버를 부를 때 크롬 차단을 확장 프로그램으로 우회한 방법을 정리했다.
AI와 코딩 대결에서 20줄짜리 내 코드가 진 이유: 음소거 자동재생과 localStorage 부작용
광고로 들어온 사용자에게 음소거 자동재생을 거는 기능을 나는 20줄, Claude Code는 50줄로 짰다. 내 코드는 기존 음소거 함수를 재사용하다 localStorage에 음소거 값을 남겨 새로고침 후에도 소리를 못 켜는 문제가 생겼고, AI는 저장하지 않는 별도 상태로 부작용을 피했다.
AI가 짠 Playwright 검수 자동화, 첫 FAIL 11건은 테스트가 틀린 거였다: 6시간 검수를 30분으로
손으로 6시간 걸리던 채팅 세레모니 검수를 AI에게 Playwright 자동화로 짜게 해 30분으로 줄였다. 첫 실행의 FAIL 11건은 번역 누락이 아니라 모바일 DOM을 PC와 같다고 가정한 판정 오류였고, AI가 만든 테스트를 사람이 다시 검증해야 하는 이유를 정리했다.
AI로 일하니 모든 일이 딥워크가 됐다 - 시작이 느린 개발자의 블럭 일정 실험기
시작이 느린 성향을 고치려고 캘린더 블럭과 블럭별 할 일 목록을 만들었다. 한 달 동안 '딥워크/자잘한 일' 구분, 코드 읽기 블럭, 전날 정해 두는 내일 할 일을 차례로 버렸고, 그 이유와 지금 남은 구조를 정리했다.
웹 캠페인 토큰 재사용(Replay Attack) 및 클라이언트 변조 취약점 개선
캠페인 인가 토큰 내 대상 식별자 누락으로 인한 리플레이 공격과 프론트엔드 평문 변조 취약점을 해결하기 위해 토큰 페이로드 바인딩 및 백엔드 종단 간 재검증 구조로 개선한 기술 사례 정리
도서 '먼저 온 미래' 회고 - AI 시대의 생존법과 지식 구조화 전략
바둑계 선례를 통해 본 AI 시대 인간의 3가지 계층과, GEM을 활용해 지식을 구조화하고 암기하는 실천 전략
CEF 창을 닫으면 API 요청이 사라지는 이유: 모달 종료 Race Condition 트러블슈팅
CEF(Chromium Embedded Framework) 창을 닫으면 JS 컨텍스트와 함께 아직 전송되지 않은 fetch·API 요청도 사라진다. 모달을 먼저 닫았다가 배포 당일 요청이 간헐적으로 누락된 원인, QA에서 재현되지 않은 이유, 버린 대안과 최종 해결(응답을 받은 뒤 창 닫기)을 정리했다.
기술 부채(Technical Debt)의 개념과 메커니즘
빠른 개발을 위해 품질을 희생하며 발생하는 기술 부채의 금융적 메커니즘과 주요 원인, 지속 가능한 상환 및 관리 전략 요약
pnpm 스토어(CAS)는 파일을 어떻게 저장하고 복원하나: 해시 저장과 하드 링크
pnpm 글로벌 스토어는 파일을 내용 해시로 한 번만 저장하는 CAS(Content-Addressable Storage)다. 해시 파일명으로 저장된 원본이 설치 때 node_modules/.pnpm에 하드 링크로 복원되는 과정, 하드 링크 파일이 일반 파일처럼 보이는 이유, inode로 직접 확인하는 방법을 정리했다.
pnpm node_modules 구조: 글로벌 스토어·가상 스토어·심볼릭 링크 3계층과 유령 의존성 차단
pnpm은 글로벌 스토어(원본 1벌), 가상 스토어(node_modules/.pnpm, 하드 링크), 앱 node_modules(심볼릭 링크) 3계층으로 디스크 중복을 없애고, package.json에 적은 의존성만 보이게 해 유령 의존성을 막는다. 각 계층이 하는 일과 확인 방법을 정리했다.
Git 브랜치 네이밍 컨벤션과 `feature/` 접두사의 역할
Git 브랜치 이름의 feature/는 새 기능 개발 브랜치임을 나타내는 관례적 접두사다. fix/·hotfix/·refactor/·chore/ 같은 접두사의 의미, 슬래시로 나누면 좋은 이유(GUI 폴더 묶음, CI 조건 분기), 작업자·티켓 번호를 붙인 네이밍 예시를 정리했다.
Chrome 확장 프로그램: VOD 데이터 패킷 대량 주입 파이프라인 분석
VOD 플레이어 내부 큐에 가상 데이터 패킷 10,000개를 한 번에 주입하는 Chrome 확장 프로그램을 만들며 정리한 5단계 격리 컨텍스트 통신 구조와 Web Worker·타임 오프셋 치환 방식
[Refactoring] 1일차
마틴 파울러의 '리팩터링' 책 스터디 1일차 요약 내용과 배운 점.
[초보를 위한 React] 3일차
리액트(React) 기초 입문 3일차: create-react-app으로 프로젝트를 만들고 react-router-dom으로 페이지 이동을 구성합니다.
[초보를 위한 React] 2일차
리액트(React) 기초 입문 2일차: state와 props의 개념과 활용.
[초보를 위한 React] 1일차
리액트(React) 기초 입문 1일차: 컴포넌트와 JSX 문법의 이해.
[알고리즘/프로그래머스/JS] 가장 큰수
프로그래머스 '가장 큰 수' 정렬 알고리즘 문제에 대한 해결 과정과 로직입니다.
[알고리즘/프로그래머스/JS] K번째수
프로그래머스 'K번째수' 배열 정렬 알고리즘 문제 풀이 방법입니다.
[알고리즘/프로그래머스/JS] 기능개발
프로그래머스 '기능개발' 스택/큐 알고리즘 문제 풀이 과정입니다.
[알고리즘/프로그래머스/JS] 베스트 엘범
프로그래머스 '베스트앨범' 문제 풀이: 장르별 재생 횟수 정렬과 해시 활용.
[js] js-datepicker 사용하기
자바스크립트 Datepicker 라이브러리 활용법과 날짜 선택 컴포넌트 구현 방법을 다룹니다.
[Electron] import, export 모듈 사용하기
일렉트론(Electron) 환경에서 IPC와 주요 모듈들을 사용하는 방법을 정리합니다.
[gitlab] Create MR Template
GitLab에서 Merge Request 기본 템플릿을 만들고 적용하는 방법을 정리합니다.
[JS] 코딩 기술 맵(map)편
ES6에서 추가된 Map 객체의 특징과 일반 Object와의 차이점을 분석합니다.
[JS] 코딩 기술 객체(object)편
자바스크립트 객체(Object)의 생성, 속성 접근, 순회 방법 등 객체 다루기의 기본을 익힙니다.
[JS] 코딩 기술 배열(Array)편
자바스크립트 배열(Array)의 기초적인 다루는 방법과 유용한 내장 메서드들을 살펴봅니다.
[JS] 코딩 기술 변수 선언편
자바스크립트 변수 선언 방식(var, let, const)의 차이점과 호이스팅 현상을 정리합니다.
[Programmers] 위장
프로그래머스 '위장' 알고리즘 문제의 경우의 수와 해시를 이용한 해결 과정을 다룹니다.
[Programmers] 완주하지 못한 선수
프로그래머스 '완주하지 못한 선수' 알고리즘 문제의 해시를 활용한 풀이 방법입니다.
[Development Tip #7] 조건문을 깔끔하게 작성하기
거짓 값의 종류를 정리하고, 삼항 연산자와 단락 평가로 조건문을 간결하게 작성하는 방법을 다룹니다.
[Development Tip #6] 나머지 매개변수로 여러개 인수를 전달
나머지 매개변수(...rest)로 개수가 정해지지 않은 인수를 받아 확장성 있게 처리하는 방법을 다룹니다.
[Development Tip #5] 구조 분해 할당
구조 분해 할당의 개념과 필요성, 그리고 구조 분해 할당으로 코드를 리팩터링한 사례를 정리합니다.
[Development Tip #4] 매개변수의 기본값을 생성하라
매개변수 기본값이 필요한 이유와, 기본값으로 기존 코드에 영향 없이 요구사항 변경에 대응하는 방법을 다룹니다.
[Development Tip #3] 적절한 메서드를 발견하라
hasOwnProperty로 객체 속성을 확인하는 방법과, 값의 유효성을 검사할 때 배열로 변환해 비교하는 방법을 정리합니다.
[Development Tip #2] 기획의 의도를 파악하라
신입과 경력의 가장 큰 차이인 커뮤니케이션, 그중 기획 의도를 먼저 파악하고 개발해야 하는 이유를 실무 경험으로 정리합니다.
[Development Tip #1] 개발자로서의 목표를 가져라
입사 반년 차에 초심을 잃어가던 스스로를 돌아보며, 개발자로서의 목표를 다시 세운 회고입니다.
[Core JS] 클래스란?
ES6에 도입된 클래스(Class) 문법과 기존 프로토타입 기반 상속과의 차이를 알아봅니다.
[Core JS] 프로토타입이란?
자바스크립트 프로토타입(Prototype) 체인과 객체 지향 상속 모델의 핵심을 이해합니다.
[Core JS] 렉시컬 환경이란?
렉시컬 환경(Lexical Environment)과 스코프 체인의 동작 원리를 상세히 분석합니다.
[Core JS] 클로저란?
자바스크립트의 핵심 개념인 클로저(Closure)의 원리와 실용적인 활용 방법을 다룹니다.
[Core JS] 콜백지옥?
콜백 지옥(Callback Hell)의 문제점과 이를 해결하기 위한 Promise, async/await 패턴을 알아봅니다.
[Core JS] 콜백함수?
콜백 함수(Callback Function)의 개념과 제어권 위임에 대해 이해합니다.
[Core JS] 실행컨텍스트란?
자바스크립트 코드가 실행되는 환경인 실행 컨텍스트(Execution Context)의 개념을 파헤쳐 봅니다.
[Core JS] this 우회방법
this 바인딩의 예외적인 상황들과 화살표 함수 등 우회하는 방법에 대해 알아봅니다.
[Core JS] this란?
자바스크립트에서 this가 실행 컨텍스트에 따라 어떻게 바인딩되는지 동작 원리를 알아봅니다.
[Core JS] 데이터 타입이란?
자바스크립트 데이터 타입(기본형/참조형)의 종류와 메모리 할당 방식의 차이를 알아봅니다.