컴퓨터과학·2025년 6월 26일
Tailwind CSS: 유틸리티 퍼스트 CSS
클래스 이름 짓기 지치셨나요? HTML 안에 CSS를 직접 쓰는 기괴한 방식이 왜 전 세계 프론트엔드 표준이 되었는지 파헤쳐봤습니다.
#CS#Web#Frontend#CSS
개발과 기술에 대한 이야기를 기록합니다.
클래스 이름 짓기 지치셨나요? HTML 안에 CSS를 직접 쓰는 기괴한 방식이 왜 전 세계 프론트엔드 표준이 되었는지 파헤쳐봤습니다.
최신 문법(ES6+)을 구형 브라우저(IE)가 알아듣게 번역해주는 통역사. 컴파일러와는 묘하게 다른 트랜스파일러의 세계.
요리사 한 명이 멀티태스킹을 하는 것과 요리사 두 명이 일하는 것의 차이. 스레드, 프로세스, 그리고 Python의 GIL 문제까지.
React의 영원한 숙제, 상태 관리. 할아버지 컴포넌트에서 손자 컴포넌트로 데이터를 줄 때 왜 전역 상태(Redux, Zustand)를 써야 할까?
서버 사이드 렌더링(SSR)의 핵심 과정. 메말라 비틀어진 HTML(정적)에 수분(JS)을 공급해서 생동감 넘치는 앱(인터랙션)으로 만드는 마법.
서버에서 완성된 요리를 주기(SSR) vs 재료만 주고 브라우저가 요리하기(CSR). SEO와 초기 로딩 속도의 트레이드오프. Next.js가 둘을 합친 이유.
웹이 앱처럼 부드러워진 비결(SPA)과 옛날 방식(MPA)의 장단점. 그리고 이 둘을 합친 넥스트(Next.js)의 등장.
진짜 집을 부수고 다시 짓는 건 비쌉니다. 설계도(가상돔)에서 미리 그려보고 바뀐 부분만 공사하는 '똑똑한 리모델링'의 기술.
버튼을 눌렀는데 부모 DIV까지 클릭되는 현상. 이벤트는 물방울처럼 위로 올라갑니다(Bubbling). 반대로 내려오는 캡처링(Capturing)도 있죠.
HTML은 그저 글자일 뿐입니다. 브라우저가 이걸 이해하고 조작하려면 '트리 구조의 객체(DOM)'로 바꿔야 합니다.
무료라고 막 갖다 쓰다가 회사가 코드를 강제로 공개해야 할 수도 있습니다. 개발자가 반드시 알아야 할 '법적 지뢰' 피하는 법.
개발자끼리의 무언의 약속. Major, Minor, Patch 숫자에 담긴 의미와 `npm install` 할 때 `^`와 `~`의 차이점 완벽 정리.
백엔드: 'API 다 만들었어요.' 프론트엔드: '어떻게 써요?' 이 지겨운 대화를 끝내주는 Swagger(OpenAPI)의 마법.
나만 알아보는 코드는 쓰레기입니다. 변수명 짓기부터 함수 쪼개기, 그리고 주석을 달지 말아야 하는 이유까지. 6개월 뒤의 나를 살리는 리팩토링의 기술.
개발자들이 맨날 겪는 문제에 대해 선배들이 만들어둔 족보(Cheat Sheet). 싱글톤, 팩토리, 옵저버 패턴의 핵심.
새 영상이 올라왔는지 매초 확인하는 게 아니라, 구독 버튼 하나로 자동 알림을 받습니다. 1:N 의존 관계를 우아하게 해결하는 디자인 패턴의 핵심.
대통령은 나라에 한 명뿐입니다. DB 커넥션 풀도 하나뿐. 전역 관리자를 만들 때 쓰는 가장 유명하면서도 논쟁적인 패턴. 편리하지만 테스트 지옥의 지름길.
기존 클래스를 수정하지 않고 새 기능을 추가합니다. 커피에 휘핑크림, 시럽, 샷 추가처럼 기능을 동적으로 조합. Python @decorator의 원리.
서로 다른 인터페이스를 연결해주는 변환기. 레거시 시스템과 신규 시스템을 이어주는 가장 강력한 디자인 패턴.
손님이 주방에 들어가서 직접 피자 도우를 반죽하지 않습니다. '페퍼로니 하나요'라고 주문하면 공장(Factory)이 알아서 만들어줍니다.
