컴퓨터과학·2025년 6월 21일
SSR vs CSR: 화면을 어디서 그릴 것인가
서버에서 완성된 요리를 주기(SSR) vs 재료만 주고 브라우저가 요리하기(CSR). SEO와 초기 로딩 속도의 트레이드오프. Next.js가 둘을 합친 이유.
#CS#Web#Rendering#SSR
개발과 기술에 대한 이야기를 기록합니다.
서버에서 완성된 요리를 주기(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). 싱글톤, 팩토리, 옵저버 패턴의 핵심.
대통령은 나라에 한 명뿐입니다. DB 커넥션 풀도 하나뿐. 전역 관리자를 만들 때 쓰는 가장 유명하면서도 논쟁적인 패턴. 편리하지만 테스트 지옥의 지름길.
새 영상이 올라왔는지 매초 확인하는 게 아니라, 구독 버튼 하나로 자동 알림을 받습니다. 1:N 의존 관계를 우아하게 해결하는 디자인 패턴의 핵심.
기존 클래스를 수정하지 않고 새 기능을 추가합니다. 커피에 휘핑크림, 시럽, 샷 추가처럼 기능을 동적으로 조합. Python @decorator의 원리.
서로 다른 인터페이스를 연결해주는 변환기. 레거시 시스템과 신규 시스템을 이어주는 가장 강력한 디자인 패턴.
손님이 주방에 들어가서 직접 피자 도우를 반죽하지 않습니다. '페퍼로니 하나요'라고 주문하면 공장(Factory)이 알아서 만들어줍니다.
객체지향의 거장 로버트 마틴(Uncle Bob)이 정립한 5가지 설계 원칙. SRP, OCP, LSP, ISP, DIP가 무엇인지, 왜 지켜야 하는지, 실제 타입스크립트 예제로 정리해본다.
빠르게 개발하기 위해 저지른 더러운 코드는 '빚'입니다. 나중에 이자(수정 비용)까지 쳐서 갚아야 합니다. 파산하지 않으려면 관리하세요.
MVC에서 Controller가 너무 뚱뚱해졌습니다. Presenter/ViewModel로 분리하고, Data Binding으로 자동 업데이트하는 현대 프론트엔드의 핵심 패턴.
소스 코드를 기계어로 바꾸는 두 가지 전략. C와 Python의 실행 방식 차이와 Java/JavaScript가 사용하는 하이브리드 방식(JIT).
코드를 먼저 짜고 테스트하는 게 아닙니다. 테스트를 먼저 짜고, 그걸 통과하기 위해 코딩하는 것. 순서를 뒤집으면 버그가 사라집니다.
