#tools
노트 47개
Frontend › CSS
PostCSS와 CSS 변환 도구CSS를 AST로 파싱해 플러그인으로 변환하는 도구 PostCSS. 기능을 한 덩어리로 묶은 Sass와 달리 필요한 기능만 플러그인으로 고르는 구조, Autoprefixer·postcss-preset-env·browserslist로 브라우저 대상에 맞춰 변환하는 흐름, 미래 문법을 미리 쓸 때의 위험, 그리고 Lightning CSS·Vite·Tailwind v4가 맡은 지금의 역할 분담을 정리한다.
Frontend › JavaScript
번들러의 역사와 Vite모듈 없이 태어난 JavaScript가 CommonJS·AMD·ES 모듈을 거쳐 번들러를 필요로 하게 된 이유, 번들러의 느린 빌드를 네이티브 언어 도구와 '개발은 쪼개서, 배포는 합쳐서' 방식이 풀고, Vite가 그 개념을 모아 Rust 번들러 Rolldown 기반의 표준 빌드 도구가 되기까지를 정리했다.
Frontend › JavaScript
자바스크립트 패키지 매니저: npm, yarn, pnpm패키지 설치·업데이트·의존성 관리를 맡는 패키지 매니저의 기본(dependencies와 devDependencies, npm 스크립트, 패키지 고르는 법), npm·yarn·pnpm(그리고 Bun)의 차이와 고르는 기준, packageManager 필드와 Corepack, 설치 스크립트 차단 같은 공급망 보안 기본값, npm EINTEGRITY 오류의 원인과 해결.
Frontend › JavaScript
npm install이 하는 일: 내 컴퓨터와 앱에 생기는 변화npm으로 패키지를 설치하면 레지스트리에서 코드를 받아 캐시·node_modules·lock 파일에 쓰고, 설치 스크립트를 내 권한으로 실행하고, 명령을 PATH에 연결한다. 로컬·전역 설치가 컴퓨터의 어디를 바꾸는지, 앱의 코드·번들·배포에 무엇이 들어가는지, 되돌리는 법을 정리한다.
Frontend › JavaScript
TypeScript 컴파일러 내부 구조TypeScript 컴파일러는 스캐너(토큰) → 파서(AST) → 바인더(심볼) → 체커(타입 검사) → 이미터(JS·.d.ts·소스맵) 순으로 일한다. 문법과 의미의 차이, Program·SourceFile·Node·SyntaxKind, 주석을 담는 트리비아, 심볼과 심볼 테이블·컨테이너, 지연 검사와 진단의 종류, 소스맵, Go로 옮긴 TypeScript 7에서 달라진 점을 정리한다.
Frontend › JavaScript
TypeScript 프로젝트 설정: tsconfig·모듈 해석·선언 파일tsconfig.json이 정하는 컴파일 컨텍스트와 TypeScript 6·7의 새 기본값(strict, esnext, types: []), strict 계열 옵션, 파일 모듈과 전역 스크립트, moduleResolution bundler·nodenext, verbatimModuleSyntax와 타입 전용 import, 타입·값 선언 공간, declare·.d.ts·declare global·lib·@types로 바깥 코드를 설명하는 법, JS에서 옮겨 오는 순서를 정리한다.
Frontend › JavaScript
TypeScript: 개념과 문법 한눈에 보기TypeScript는 JavaScript에 타입 검사와 자동완성을 더한 슈퍼셋이다. JavaScript가 정적 타입을 얻기까지의 역사와 흔한 오해, 실행 환경(tsc·Go로 다시 쓴 TypeScript 7·Vite·Node.js 타입 제거), 기본 타입과 any·unknown·never, 추론·단언·가드·satisfies, type과 interface, 제네릭, 함수 오버로드와 클래스 수식어, 모듈과 @types, 구분된 유니언, 표준 데코레이터(예전 방식과의 차이, 적용 순서), 유틸리티 타입을 표 중심으로 정리하고, 추론 → API 스키마 → 좁히기 → strict 순으로 익히는 순서를 덧붙인다.
Frontend › UI Design
디자인 도구와 개발자 핸드오프디자인 핸드오프는 이미지와 문서를 메일로 넘기던 방식에서 브라우저 기반 공유 파일(Figma)로 옮겨 왔다. 개발자는 스타일·변수 확인, 치수 측정, 애셋 추출, 프로토타입 흐름 읽기, 댓글로 협업한다. Inspect 코드는 그대로 쓰지 않고, absolute 좌표는 흐름으로, Auto Layout은 Flexbox로 옮긴다. 디자인은 실제 데이터와 여러 화면 크기로 검증하고, 도구 이전은 비용을 계산해 한 번에 끝낸다.
Computer Science › C Programming
C 디버깅 도구C 프로그램의 버그를 잡는 도구를 쓰임새별로 정리한다. GDB·LLDB로 멈춰서 들여다보기, AddressSanitizer·UBSan으로 메모리 오류와 미정의 동작 잡기, leaks·Valgrind로 누수 찾기, strace로 시스템 콜 추적하기, 그리고 Segmentation fault와 Bus error의 차이.
Computer Science › C Programming
GCC 컴파일과 링크gcc/clang으로 단계별 결과물(.i .s .o)을 뽑는 옵션, 경고·디버깅·최적화 플래그, 정적 라이브러리(.a)와 공유 라이브러리(.so/.dylib)를 만들고 링크하는 법, 링크 순서와 런타임 라이브러리 탐색, 헤더 중복 포함 방지를 정리한다.
Computer Science › C Programming
Makefile과 makemake는 타깃과 의존 파일의 수정 시각을 비교해 바뀐 부분만 다시 빌드하는 도구다. 규칙·변수·자동 변수·패턴 규칙·내장 규칙, -MMD -MP로 헤더 의존성 자동화, .PHONY, 리링크 방지, 하위 디렉터리 빌드와 병렬 빌드에서 생기는 함정을 정리한다.
Computer Science › Programming Languages
C++ 코딩 표준과 clang-formatC++ 프로젝트의 코딩 표준이 무엇을 정하는지(사전·사후 조건, 유지보수, 서식, 이름, 클래스 배치, 문서화, 최적화 힌트)를 한 프로젝트 표준을 예로 정리하고, 서식은 사람이 지키지 말고 clang-format으로 자동화하는 방법을 다룬다.
Computer Science › Programming Languages
Java 코딩 컨벤션: Google 스타일과 캠퍼스 핵데이 규칙Java 코드 스타일의 대표 기준인 Google Java Style Guide와 네이버 캠퍼스 핵데이 Java 컨벤션을 항목별로 비교하고, 이름 규칙·import·중괄호·줄 길이·Javadoc 같은 공통 원칙과 Checkstyle·EditorConfig·포매터로 규칙을 자동 적용하는 방법을 정리한다.
DevOps
스타트업 인프라 선택 원칙작은 팀이 인프라를 고를 때의 판단 기준. 데이터 계층에는 관리형 서비스에 돈을 쓰고, 단순한 도구를 고르고, 관리형 편의 기능은 커스터마이즈 여지를 먼저 보고, 관측 표준(OpenTelemetry)·IdP·의존성 업데이트·비용 추적처럼 늦을수록 비싸지는 것은 처음부터 들인다. 가변 인프라·비대한 이미지·공유 DB 같은 클라우드 네이티브 안티패턴도 함께 정리한다.
AI & Data
웹 크롤링 전략: 정적·동적 판별과 수집 방식 고르기크롤링은 먼저 페이지가 정적인지 동적인지 판별하고, 공식 API → 숨은 데이터 엔드포인트 직접 호출(네트워크 리버싱) → 헤드리스 브라우저 순으로 가벼운 방식을 고른다. 브라우저 자동화는 편하지만 느리고 무거우며, 엔드포인트를 찾으면 훨씬 가볍고 빨라진다. 로그인 페이지의 쿠키·세션·CSRF 토큰, 브라우저 자동화의 암묵적·명시적 대기, 멀티프로세싱·스레드·비동기로 병렬 수집하는 법도 다룬다.
AI & Data
Jupyter Notebook코드·실행 결과·마크다운 문서·시각화를 한 파일에 담는 웹 기반 인터랙티브 개발 환경으로, 데이터 과학의 사실상 표준 도구.
Tools
개발과 협업, 분석, 3D 작업에 쓰는 도구들의 사용법 모음.
Tools
Chrome DevToolsChrome에 내장된 웹 개발자 도구 모음. 여는 법, 할 일별로 어느 패널을 쓰는지, 명령 메뉴·단축키·설정, 검색·문제·변경사항 같은 보조 도구를 한곳에 모은 DevTools 노트 안내.
Tools › Chrome DevTools
DevTools Application 패널: 저장소·서비스 워커Application 패널은 매니페스트·서비스 워커·캐시 저장소(PWA), Local/Session Storage·IndexedDB·쿠키, 저장소 지우기, bfcache 테스트, 추측 규칙(prefetch·prerender) 디버깅, 프레임 보안 정보를 한곳에서 보고 고치는 곳이다. 무엇을 확인하려 할 때 어느 탭을 열고 무엇을 보는지 정리한다.
Tools › Chrome DevTools
DevTools Console 활용Chrome DevTools 콘솔로 메시지를 읽고 걸러 내는 법, console.table·group·time·assert·count·trace 같은 Console API와 %c 서식, 실시간 표현식, $0·$_·$()·$$()·copy()·monitorEvents·getEventListeners·queryObjects 같은 콘솔 전용 유틸리티, 페이지 위에서 JavaScript를 실행하는 법을 정리했다.
Tools › Chrome DevTools
DevTools Network 패널리소스가 실제로 오가는지, 헤더·페이로드·응답·쿠키가 무엇인지, 어느 단계에서 시간이 드는지 확인하는 패널. 기록·필터·검색으로 요청을 좁히고, 캐시 끄기·스로틀링·오프라인·요청 차단으로 조건을 바꾸고, HAR·fetch·cURL로 내보내거나 다시 보낸다. HTTPS·혼합 콘텐츠·서드 파티 쿠키는 개인 정보 보호 및 보안 패널에서 본다.
Tools › Chrome DevTools
DevTools로 기기·환경 에뮬레이션하기기기 모드로 뷰포트·DPR·터치·기기 프리셋을, 네트워크 상태 패널로 사용자 에이전트를, 센서 패널로 위치·방향·유휴 상태를, 렌더링 탭으로 다크 모드·모션 감소·인쇄·색각 이상을 흉내 낸다. 흉내로 부족하면 Android 원격 디버깅·WebView 검사·포트 포워딩으로 실기기에서 확인하고, WebAuthn 패널로 가상 인증기를 만든다.
Tools › Chrome DevTools
DevTools로 성능·메모리 분석하기Performance 패널의 실시간 지표 화면과 트레이스 녹화·읽기(메인 트랙, 플레임 차트, Bottom-up·Call tree, 긴 작업, 인사이트, 주석, 저장·공유, 선택기 통계), 성능 모니터, 렌더링 탭과 레이어 패널, 커버리지, 메모리 패널로 누수·팽창·잦은 GC를 찾는 절차, Lighthouse 실행법을 정리한다.
Tools › Chrome DevTools
DevTools로 DOM과 CSS 다루기Elements 패널에서 DOM을 고르고 고치는 법, 스타일 창의 취소선·흐림·경고 표시로 CSS가 안 먹는 이유를 읽는 법, 상태 강제(:hov)·색상 선택기·Flex/Grid/컨테이너 오버레이·애니메이션 패널로 레이아웃과 움직임을 디버깅하는 법, CSS 개요·자동 완성 패널, 접근성 트리·대비·포커스 검사까지 정리한다.
Tools › Chrome DevTools
DevTools로 JavaScript 디버깅하기Chrome DevTools Sources 패널로 JavaScript를 디버깅하는 법. 상황별 중단점(줄·조건부·로그포인트·DOM·XHR/fetch·이벤트 리스너·예외·debugger 문), 단계 실행과 Scope·Watch·Call Stack, 스니펫, 소스 맵과 무시 목록, 로컬 파일에 저장하는 Workspaces와 응답을 바꿔 끼우는 로컬 재정의, Recorder까지 정리했다.
Tools › Chrome DevTools
DevTools의 AI 지원과 에이전트용 DevTools(MCP)DevTools 안에서 Gemini와 채팅하며 스타일·네트워크·소스·성능을 묻는 AI 지원 패널과 코드 생성, 그때 Google로 가는 데이터와 끄는 정책, 그리고 코딩 에이전트가 MCP로 실제 Chrome을 조작하게 하는 Chrome DevTools MCP 서버(설정 플래그, 자동 연결, 에뮬레이션·Lighthouse·메모리·확장 프로그램·서드파티 도구)와 WebMCP 디버깅을 정리한다.
Tools
개발 환경운영체제별 터미널·Git 설치, 로컬 HTTPS, 빌드 도구와 IDE 오류, Python 버전 관리처럼 코드를 쓰기 전에 갖춰야 하는 개발 환경 설정 모음.
Tools › Dev Environment
Java 빌드 도구와 IntelliJ 실행 오류빌드와 빌드 도구(Ant·Maven·Gradle)의 의미, JDK 설치 뒤 챙길 것, 그리고 IntelliJ가 힙 메모리 설정(-Xms > -Xmx) 때문에 조용히 죽을 때 원인을 찾고 고치는 법.
Tools › Dev Environment
macOS에서 pyenv로 Python 환경 잡기macOS의 시스템 Python을 건드리지 않고 pyenv로 원하는 버전을 설치·지정하는 순서와, VSCode에서 그 인터프리터를 고르고 프로젝트별 venv로 패키지를 분리하는 방법. 버전·가상환경·패키지를 한 번에 다루는 uv도 함께 정리했다.
Tools › Dev Environment
Windows 개발 환경: 터미널, Git 설치, 줄바꿈터미널·셸의 뜻과 CMD·PowerShell·Git Bash의 차이, Windows용 Git 설치 때 고를 옵션, 그리고 Windows에서 자주 만나는 CRLF 줄바꿈 오류(Prettier의 Delete ␍)를 정리한 노트.
Tools › Git
대형 저장소에서 Git 빠르게 쓰기: 얕은 클론, refspec, 부분 클론, 희소 체크아웃커밋 이력과 파일이 많은 모노레포에서 clone·checkout·status가 느려지는 원인과 줄이는 방법을 정리했다. 이력을 자르는 얕은 클론, 받을 브랜치를 좁히는 단일 브랜치·refspec, 파일 내용을 나중에 받는 부분 클론, 작업 트리를 일부만 펼치는 희소 체크아웃, 파일 감시와 백그라운드 유지 보수까지 다루고 CI와 개발자 PC에서 각각 무엇을 쓰는지 정리한다.
Tools › Git
모노레포와 폴리레포여러 서비스의 코드를 저장소 하나에 두는 모노레포와 서비스마다 저장소를 나누는 폴리레포(마이크로레포)를 구조·권한·의존성 버전·코드 품질 기준·도구 면에서 비교하고, 폴리레포에서 의존성 버전을 맞추는 방법으로 버전 세트 기반 빌드 시스템(Amazon Brazil)의 구조를 정리했다.
Tools › Git
자주 쓰는 Git 설정 옵션개발자들이 실제로 켜 두는 git config 옵션을 pull·merge·rebase·diff·전역 설정별로 묶었다. 대부분 기본값의 불편함을 고치는 한 줄 설정이다.
Tools
개발 도구 지형도와 세상을 바꾼 오픈소스개발 도구를 개발 환경·다이어그램·AI·호스팅·코드 품질·보안·노트·디자인 범주로 나눈 지도와, 범주별로 무엇을 갖추면 되는지 정리한다. 웹·데이터·개발 도구·머신러닝·컨테이너 분야의 판도를 바꾼 오픈소스, 큰 기업이 시작한 오픈소스와 기업이 코드를 공개하는 이유, AI 앱의 쓰임새 범주도 함께 다룬다.
Tools
구글 검색 연산자따옴표·OR·제외·와일드카드 같은 기본 연산자와 site:·intitle:·filetype: 같은 고급 연산자로 구글 검색 결과를 좁히는 법. 일부 연산자는 이미 사라졌으니 조합해 쓰기 전에 동작을 확인한다.
Tools
다이어그램 코드: 코드로 그리는 아키텍처 그림다이어그램을 그림 도구 대신 텍스트·코드로 작성해 버전 관리·리뷰·재생성을 가능하게 하는 방식. 클라우드 아키텍처를 파이썬으로 그리는 Diagrams, 문서 안에서 렌더링되는 Mermaid·PlantUML, 마크다운을 마인드맵으로 바꾸는 Markmap, JSON을 그래프로 보여 주는 JSON Crack 등 도구별 쓰임과 고르는 기준을 정리한다.
Tools
워드프레스: 철학, 테마·플러그인 고르기, 속도, 생태계웹의 큰 몫을 차지하는 오픈 소스 CMS 워드프레스. '옵션이 아닌 결정', 80% 규칙 같은 설계 철학, 테마·플러그인을 고르는 기준, 사이트를 빠르게 하는 순서, 실력을 쌓는 길과 GPL 위에서 돌아가는 비즈니스 모델을 정리했다.
Tools
유의적 버전(SemVer)MAJOR.MINOR.PATCH 세 숫자로 변경의 성격(호환 깨짐, 기능 추가, 버그 수정)을 알리는 버전 규칙. 각 자리를 올리는 기준과 예시 흐름, 0.x 단계의 의미, 프리릴리스와 빌드 메타데이터, 버전 비교 순서, npm의 ^·~ 범위가 SemVer에 기대는 방식을 정리했다.
Tools
Compressor로 영상 용량 줄이기Apple 실리콘(M1 이상) Mac에서 Compressor로 MPEG-4 프리셋을 만들어 하드웨어 인코딩하면 빠르다. 비트레이트를 4,500Kbps로 지정해 보관·공유용으로 용량을 줄이는 설정을 정리했다.
Tools
DBeaver에서 SQL로 데이터 다루기여러 DBMS를 한 화면에서 다루는 무료 GUI 클라이언트 DBeaver의 특징, PostgreSQL 연결 방법, SQL 편집기로 데이터를 조회·수정하는 방법과 주의점.
Tools
LaTeX 시작하기내용과 서식을 분리해 논문·문서를 조판하는 LaTeX의 특징, 설치(TeX Live·MacTeX)와 Overleaf, 문서 기본 구조와 한글(kotex) 설정, 입문 자료.
Tools
Retool: 로우 코드로 내부 도구 만들기어드민 페이지·대시보드 같은 내부 도구를 UI 개발 없이 약간의 JS와 SQL로 만드는 로우 코드 플랫폼 Retool의 특징과 어울리는 쓰임.
Tools
The Missing Semester: CS 교육에서 빠진 도구 학기MIT의 무학점 과정 The Missing Semester는 전공 수업이 가르치지 않는 셸, 편집기, Git, 디버깅, 패키징, 코드 품질 도구와 코딩 에이전트 활용을 9강으로 다룬다. 강의별 핵심 개념과 도구, 이 창고의 관련 노트를 지도처럼 묶었다.
Tools
tmux: 터미널 멀티플렉서터미널 하나에서 여러 세션·창·분할 화면을 다루고, SSH 연결이 끊겨도 작업을 서버에 살려 두는 터미널 멀티플렉서 tmux의 개념과 기본 키.
Tools
Vim과 Neovimed에서 vi, Vim, Neovim으로 이어진 모드형 편집기의 계보와 두 편집기의 차이, 설정 파일과 플러그인 관리, 공백 표시·접기·연속 숫자·<expr> 매핑·복사 강조·시스템 클립보드 같은 편집 기술, 편집기 밖에서 Vim 키를 쓰는 방법(man 페이지, Vimium).
Tools
VS Code 설정과 활용settings.json과 설정 동기화, launch.json으로 C 프로그램 디버깅, 브라우저에서 저장소를 여는 github.dev, 생산성을 올리는 확장 프로그램까지 VS Code를 쓰며 알아 두면 좋은 기능 모음.
Career › Work
오픈소스 프로젝트 운영: 도입, 포크, 문서, 확산, 유지오픈소스는 공개만으로 쓰이지 않는다. 쓸 라이브러리는 인기·문서·인터페이스로 고르고, 포크할 때는 당위와 계획으로 신뢰를 얻는다. 문서와 예제가 성패를 가르고, 공개 후에는 이슈 대응·로드맵·메인테이너의 지속 가능성이 프로젝트를 살린다.