#build

Frontend › CSS

대규모 CSS의 일곱 가지 문제(전역 이름 공간, 의존성, 죽은 코드, 압축, 상수 공유, 비결정적 우선순위, 격리 깨짐)와 이를 빌드 도구로 푼 CSS Modules, JS로 푼 CSS-in-JS를 비교한다. 런타임 방식에서 빌드 타임(zero-runtime) 방식으로 옮겨 간 이유와 서버 컴포넌트 시대의 선택지까지 정리한다.

• #css
• #react
• #architecture
• #frontend

Frontend › CSS

CSS를 AST로 파싱해 플러그인으로 변환하는 도구 PostCSS. 기능을 한 덩어리로 묶은 Sass와 달리 필요한 기능만 플러그인으로 고르는 구조, Autoprefixer·postcss-preset-env·browserslist로 브라우저 대상에 맞춰 변환하는 흐름, 미래 문법을 미리 쓸 때의 위험, 그리고 Lightning CSS·Vite·Tailwind v4가 맡은 지금의 역할 분담을 정리한다.

• #css
• #tools
• #frontend

Frontend › JavaScript

Babel은 JavaScript를 파싱(parse)해 AST로 바꾸고, 플러그인이 AST를 고친 뒤(transform), 다시 코드로 찍어 내는(generate) 소스 대 소스 컴파일러다. 설정의 플러그인·프리셋 순서, preset-env와 browserslist·core-js 폴리필, 방문자(visitor) 패턴으로 플러그인 쓰는 법, 같은 AST 원리로 대규모 코드를 고치는 codemod(jscodeshift)까지, Babel 8 기준으로 정리한다.

• #javascript
• #babel
• #compiler
• #tooling

Frontend › JavaScript

package.json의 scripts는 node_modules/.bin이 PATH에 들어간 셸에서 명령을 실행하는 가장 얇은 작업 실행기(task runner)다. pre/post 훅, -- 뒤 인자 전달, npm_ 환경 변수, 수명 주기 스크립트, 직렬·병렬 조합과 크로스 플랫폼 처리, 매니저별 차이(node --run 포함), 그리고 Grunt·Gulp 같은 태스크 러너가 밀려난 이유를 정리한다.

• #javascript
• #npm
• #automation
• #tooling

Frontend › JavaScript

webpack은 진입점에서 import를 정적으로 따라가 의존성 그래프를 만들고, 로더로 파일을 모듈로 바꾸고, 플러그인으로 빌드에 개입해 번들을 만든다. 로더 적용 순서, 빌드 시 코드 주입 플러그인(Define·Environment·Provide·Ignore), 모듈이 아닌 옛 코드를 다루는 shimming, 스코프 호이스팅, HMR의 동작, Rollup과의 차이를 정리한다.

• #javascript
• #webpack
• #bundler
• #frontend

Frontend › Web

JPEG는 밝기보다 색을 더 버리고(크로마 서브샘플링) 고주파 디테일을 양자화해 줄인다. WebP는 블록 예측과 영역별 양자화로 같은 품질에서 더 작다. 품질 값은 0~100 하나로 조절하되 도구마다 뜻이 달라 눈으로 확인한다. 실제 서비스에서는 사람이 아니라 빌드 도구·정적 사이트 생성기·CMS가 원본에서 여러 형식과 크기를 만든다.

• #frontend
• #performance
• #web
• #media

Frontend › Web

시작할 때 받는 JS가 크면 파싱·컴파일·실행 동안 메인 스레드가 막혀 TBT와 INP가 나빠진다. 커버리지로 시작 때 안 쓰는 코드를 찾고, 동적 import()로 나중에 필요한 코드를 별도 청크로 떼어 상호작용할 때 불러온다. 청크 크기는 캐시·압축·평가 시간의 균형으로 정한다. 로딩 전략 전체는 PRPL(Preload·Render·Pre-cache·Lazy load)로 묶는다.

• #performance
• #javascript
• #frontend
• #web

Computer Science

C 언어의 컴파일 과정과 자료형·연산자·문자열, 포인터와 메모리, 구조체·공용체와 함수 포인터, 스코프와 링키지, 입출력, 빌드 도구(gcc·make)와 디버깅 도구, 호출 규약과 저수준 최적화, 역사와 표준.

• #c
• #memory
• #pointer
• #cs50
• #data-structure

Computer Science › C Programming

gcc/clang으로 단계별 결과물(.i .s .o)을 뽑는 옵션, 경고·디버깅·최적화 플래그, 정적 라이브러리(.a)와 공유 라이브러리(.so/.dylib)를 만들고 링크하는 법, 링크 순서와 런타임 라이브러리 탐색, 헤더 중복 포함 방지를 정리한다.

• #c
• #compile
• #tools
• #linux

Computer Science › C Programming

make는 타깃과 의존 파일의 수정 시각을 비교해 바뀐 부분만 다시 빌드하는 도구다. 규칙·변수·자동 변수·패턴 규칙·내장 규칙, -MMD -MP로 헤더 의존성 자동화, .PHONY, 리링크 방지, 하위 디렉터리 빌드와 병렬 빌드에서 생기는 함정을 정리한다.

• #c
• #compile
• #tools
• #makefile

Tools › Dev Environment

빌드와 빌드 도구(Ant·Maven·Gradle)의 의미, JDK 설치 뒤 챙길 것, 그리고 IntelliJ가 힙 메모리 설정(-Xms > -Xmx) 때문에 조용히 죽을 때 원인을 찾고 고치는 법.

• #tools
• #java
• #ide