TechLog: 프론트엔드부터 서버·설계까지
Tech
매일 새롭게 알게 된 지식이나 문제 해결 경험을 기록합니다.
가상화 및 클라우드(2)
AWS Lambda로 매일 아침 노션 페이지 만들기약 8분Notion API를 호출하는 Lambda 함수를 만들고, EventBridge 예약 규칙으로 매일 실행한 과정을 기록합니다. 페이지 템플릿 구성과 Terraform으로 AWS 자원을 배포하는 예제를 다룹니다.
프론트엔드 개발자를 위한 Docker로 React 개발 및 배포하기약 11분Docker로 React 개발 환경을 구성하고 NGINX로 배포하는 과정을 정리한 2022년 튜토리얼입니다. 볼륨, 환경 변수, Docker Compose와 멀티 스테이지 빌드를 다룹니다.
개발 및 실험 샌드박스(2)
Image Zoom on Hover 이미지 뷰어 바닐라 자바스크립트로 구현하기약 8분마우스를 올린 위치의 이미지를 확대해 보여주는 뷰어를 JavaScript와 CSS로 만듭니다. 커서 좌표에 맞춰 확대 영역을 움직이고 이미지 경계를 처리하는 방법을 설명합니다.
썸네일 메이커(Thumbnail Maker) 만들기약 11분블로그 썸네일을 브라우저에서 편집하고 PNG로 저장하는 도구를 만들었습니다. 첫 토이 프로젝트의 기획과 디자인, HTML2Canvas를 이용한 구현 과정을 소개합니다.
데이터 포맷(2)
SVG는 웹에서 어떻게 쓰고 관리할까요?약 8분SVG를 img·CSS 배경·인라인·스프라이트로 사용하는 방식을 비교합니다. SVGO로 최적화하고, SVGR로 React 컴포넌트를 만들며 자산을 관리하는 방법을 정리합니다.
HEIC 이미지를 JPEG로 변환하기약 5분Node.js의 heic-convert로 HEIC 이미지를 JPEG로 변환합니다. Express·Multer로 업로드를 받고, Vue 화면에 변환 결과를 표시하는 예제를 다룹니다.
데이터베이스(4)
무중단 스키마 마이그레이션과 expand-contract약 9분MySQL INSTANT DDL과 데이터 백필의 차이를 살펴봅니다. 기본값이 기존 행에 미치는 영향과 expand-contract 방식으로 무중단 전환을 준비하는 과정을 설명합니다.
데이터베이스 기본 개념과 용어, 한 번에 정리하기약 12분테이블과 키, SQL부터 정규화·트랜잭션·인덱스까지 데이터베이스의 기본 개념을 설명합니다. 간단한 쿼리 예제로 개념을 연결하고, NoSQL과 데이터 분산 방식도 살펴봅니다.
DB 스키마에도 Git이 필요할까요?약 4분Liquibase·Flyway로 스키마 변경 이력을 관리하고 기존 DB에 기준선을 잡는 방법을 설명합니다. 스키마 마이그레이션과 데이터 변경 이력을 남기는 audit 테이블의 역할도 구분합니다.
라이브러리와 프레임워크(9)
스프링(Spring)은 프론트엔드의 무엇과 닮았을까요?약 13분Spring Bean과 의존성 주입을 React·TypeScript의 개념과 비교합니다. 웹 요청 처리와 DB 조회, 트랜잭션이 스프링에서 어떻게 이어지는지 설명합니다.
백엔드 도구들, FE로 치면 무엇일까요?약 6분Gradle·ktlint·detekt를 프론트엔드의 빌드 도구·포매터·린터와 비교합니다. 테스트, DB 마이그레이션, 코드 생성 도구의 역할과 FE 도구에 비유할 때의 차이도 짚습니다.
쿼리 키는 어떻게 캐시 주소가 되나요?약 16분TanStack Query가 쿼리 키로 캐시를 찾는 과정을 소스 코드로 살펴봅니다. 키의 직렬화와 부분 매칭, 데이터 갱신과 하이드레이션에서 주의할 점을 정리합니다.
무엇을 상태로 두지 말아야 할까요?약 7분React에서 별도로 저장할 필요가 없는 상태를 구분합니다. 최신 값 읽기, 파생 값 계산, Effect의 연쇄 실행 예제로 상태를 줄이는 기준을 살펴봅니다.
Tailwind CSS 4.0, 무엇이 달라졌나요?약 11분Tailwind CSS 4.0의 CSS 기반 설정, 자동 콘텐츠 감지, Vite 통합을 살펴봅니다. 테마 변수와 동적 유틸리티, 컨테이너 쿼리 등 새 기능을 코드 예제로 정리합니다.
npm의 --force와 --legacy-peer-deps는 어떻게 다를까요?약 7분npm의 peer dependency 충돌에서 --force와 --legacy-peer-deps가 각각 무엇을 허용하거나 무시하는지 비교합니다. 설치 성공이 실제 호환성을 보장하지 않는 이유도 설명합니다.
shadcn/ui 핵심 개념과 아키텍처 이해하기약 16분shadcn/ui가 컴포넌트 소스 코드를 프로젝트에 복사해 사용하는 방식을 살펴봅니다. 원문 예제를 바탕으로 컴포넌트 구조와 Tailwind CSS 스타일링을 설명합니다.
TypeScript는 JSX를 어떻게 변환할까요?약 5분tsconfig의 다섯 가지 jsx 옵션과 각각의 변환 결과를 비교합니다. React.createElement를 호출하는 방식과 React 17에서 도입된 자동 JSX 런타임의 차이를 설명합니다.
Vuex로 전역 상태와 스토어 모듈 관리하기약 8분Vuex로 전역 상태를 읽고 변경하는 방법을 예제로 설명합니다. 스토어를 모듈과 네임스페이스로 나누며, 기존 Vue 프로젝트의 상태 관리 구조를 살펴봅니다.
문제 해결 사례(2)
뒤로가기 한 번에 두 칸씩 가는 이유는 뭘까요?약 9분웹뷰에서 뒤로가기를 한 번 눌렀는데 두 단계 이동하던 원인을 추적합니다. 웹과 네이티브 중 누가 뒤로가기를 실행할지 정하고 탐색 상태를 복원하는 방법을 설명합니다.
서드파티 스크립트 초기화가 늦어질 때 어떻게 해결할까요?약 13분GA·Meta Pixel의 초기화가 늦어 이벤트가 유실되는 원인을 살펴봅니다. 이벤트 큐와 스크립트 로드 방식, 캐싱 등 해결책을 비교하고 적용 조건을 설명합니다.
배포 및 운영 전략(1)
Next.js 서버 인스턴스 배포할때 나타나는 화이트아웃 현상 트러블 슈팅약 9분Next.js 배포 후 정적 파일을 찾지 못해 화면이 하얗게 나오던 문제를 해결한 기록입니다. assetPrefix와 별도 CDN으로 이전 배포의 파일도 제공하도록 구성했습니다.
서비스 개발 후기(6)
당신이 개인 블로그를 직접 운영해야 하는 이유약 21분개인 블로그를 운영하며 겪은 기술 문제와 해결 경험을 정리합니다. 콘텐츠 관리, 빌드·배포, 보안과 성능 등 열 개 영역을 통해 작은 서비스에서 배울 수 있는 일을 살펴봅니다.
이 블로그를 운영하며 배운 SEO약 11분Docusaurus 블로그의 URL을 통일하고 검색에 노출할 페이지를 고른 경험을 정리합니다. 메타데이터와 구조화 데이터, Search Console에서 확인한 문제도 다룹니다.
웹 퍼포먼스 최적화와 유저 행동 분석으로 전환율을 끌어올린 방법약 7분캐시노트플러스의 페이지 이동과 가입 전환율을 개선한 사례입니다. Next.js 서버에서 이동 경로를 정하고, 클릭·스크롤 데이터를 바탕으로 UI를 바꾼 과정을 설명합니다.
순수한 창작의 즐거움이 조직의 생산성으로 이어질 수 있을까?약 5분사내 도구와 서비스의 링크를 한곳에 모은 KCD Works를 만들었습니다. 아이콘과 분류로 자원을 찾기 쉽게 정리하며, 개인의 창작이 동료의 업무에 도움이 된 경험을 나눕니다.
직접 만든 라이브러리로 Next.js 페이지 메타 정보 관리하기약 14분Next.js 페이지별 이름과 추적 설정을 JSON으로 관리하는 next-pathmap을 소개합니다. 페이지 파일을 읽어 목록을 만들고, 누락된 설정을 점검하는 과정을 설명합니다.
Canvas API를 이용한 노란우산공제 가입서비스 자필 서명 이미지 생성 모듈 구현기약 18분Canvas API와 Broadcast Channel API를 활용하여 자필 서명 모듈을 개발한 경험과 구현 과정을 다룹니다.
소프트웨어 설계 및 이론(9)
테넌트와 테넌시란 무엇일까요?약 13분테넌트와 테넌시의 뜻부터 싱글테넌시·멀티테넌시의 차이까지 설명합니다. 문서 협업 서비스를 예로 자원 공유, 데이터 격리, 권한과 DB 분리 방식을 살펴봅니다.
메시지 큐, 큐와 로그부터 순서 보장까지약 10분메시지를 처리한 뒤 삭제하는 큐와 기록을 보관하는 로그의 차이를 설명합니다. 중복 전달과 멱등성, 순서 보장, 처리 지연을 기준으로 메시지 큐를 비교합니다.
이 응답은 누구 것인가요?약 12분SSE·WebSocket·postMessage에서 요청과 응답을 상관키로 연결하는 방법을 설명합니다. 요청을 하나씩 처리하는 큐의 한계와 타임아웃·지연 응답 문제를 실행 예제로 확인합니다.
그 로직은 어디에 살아야 할까요?약 4분검증과 권한 로직을 모델·서비스·컨트롤러 중 어디에 둘지 살펴봅니다. rich·anemic 도메인 모델을 비교하고, 도메인 서비스와 애플리케이션 서비스의 책임을 구분합니다.
DB 조회는 왜 아웃바운드일까요?약 4분호출 방향을 기준으로 인바운드·아웃바운드 어댑터를 구분합니다. 이벤트 리스너와 fetch, props 콜백을 예로 호출 방향과 코드 의존성의 차이를 설명합니다.
도메인 모델은 왜 DB를 몰라야 할까요?약 7분헥사고날 아키텍처에서 도메인 모델을 DB와 프레임워크로부터 분리하는 이유를 설명합니다. React에 비유해 포트·어댑터를 이해하고, 코드 의존성을 제한하는 방법을 살펴봅니다.
타입스크립트로 잘못된 상태 막기약 14분TypeScript의 태그 유니온과 브랜디드 타입으로 잘못된 상태를 줄이는 방법을 설명합니다. 입력 검증 결과를 타입에 담는 설계와 적용 범위를 예제로 살펴봅니다.
응집도와 결합도로 살펴보는 프론트엔드 코드 설계약 11분응집도와 결합도의 종류를 구분하고, 프론트엔드 컴포넌트와 모듈 설계에 적용해봅니다. 상태 관리·의존성 주입·이벤트 버스가 코드 간 의존 관계에 미치는 영향을 예제로 살펴봅니다.
업계 동향 및 신기술(1)
Ollama과 Self-hosting DeepSeek으로 간단한 VS Code Extension 만들기약 8분Ollama로 로컬에서 실행한 DeepSeek에 연결하는 VS Code 확장 프로그램을 만듭니다. Fireship 영상의 예제를 따라 채팅 화면과 API 요청을 구현한 기록입니다.
컴퓨팅 배경 지식(3)
'한'은 한 글자일까요?약 12분유니코드 정규화로 문자열을 비교하고, 길이를 세는 단위에 따라 결과가 달라지는 이유를 설명합니다. 한글과 이모지 예제, IME 조합 중 입력 처리도 다룹니다.
브라우저는 뒤로가기를 어떻게 기억할까요?약 11분브라우저가 방문 기록을 추가·교체하고 이전 기록으로 이동하는 방식을 설명합니다. SPA 라우터가 그 기록을 화면으로 복원하는 과정도 살펴봅니다.
코딩테스트(2)
행렬의 기본 연산과 곱셈 코딩 테스트약 7분행렬의 종류와 전치, 덧셈·뺄셈·곱셈의 규칙을 정리합니다. 행렬 곱셈이 가능한 조건을 확인하고, JavaScript로 코딩 테스트 문제를 풀어봅니다.
로컬에서 LeetCode 테스트 환경 설정하기약 3분LeetCode의 JavaScript 풀이를 로컬에서 실행할 수 있도록 Node.js와 Jest를 설정합니다. 문제별 테스트 파일을 만들고, 코드가 바뀔 때 테스트를 다시 실행하는 방법을 다룹니다.
통신 및 네트워크 보안(4)
내 도메인에서 보낸 이메일은 어떻게 진짜임을 증명할까약 11분블로그 구독 메일을 붙이며 살펴본 이메일 발신자 인증 구조입니다. SPF·DKIM과 From 주소를 연결하는 DMARC, 정책과 보고서, BIMI의 역할을 정리합니다.
이 토큰은 누구를 위한 것인가요?약 26분세션과 OAuth·OIDC 기반의 웹 인증 구조를 살펴봅니다. 토큰을 누가 사용하고 어디에 보관하는지, PKCE와 BFF가 어떤 역할을 하는지 설명합니다.
웹 보안, 신뢰 경계부터 CSP까지약 21분XSS가 발생하는 원인과 CSP로 스크립트 실행을 제한하는 방법을 설명합니다. nonce·hash와 Report-Only 설정, CORS·CSRF와의 차이를 정리합니다.
왜 Authorization "Bearer"인가요?약 10분Authorization 헤더의 Bearer가 뜻하는 인증 방식과 JWT라는 토큰 형식의 차이를 설명합니다. Basic·Digest와 비교하고, Bearer 토큰 유출 시 생기는 위험을 짚습니다.
프로그래밍 언어(8)
왜 날짜만 넣었는데 하루 전이 나올까요?약 12분JavaScript Date가 문자열을 해석하고 날짜를 출력·계산하는 규칙을 살펴봅니다. 타임존에 따른 차이와 Intl 사용법, SSR 하이드레이션 문제를 정리합니다.
취소는 에러인가요? 비동기 에러의 최후 방어선과 AbortController약 14분브라우저와 Node.js에서 처리되지 않은 예외·Promise 거부가 보고되는 경로를 설명합니다. AbortController의 취소를 정상 흐름과 실제 장애로 구분하는 기준도 정리합니다.
자바스크립트 Map을 Object 대신 사용해야 할 때는 언제일까요?약 15분JavaScript에서 Map과 Object를 비교하고, 어떤 상황에서 Map을 사용하는 것이 더 유리한지 벤치마크 테스트와 함께 알아봅니다.
자바스크립트 정규표현식: 수량자와 탐욕·지연 매칭 | Part 2약 3분정규표현식의 수량자 *, +, ?, {n,m}으로 반복 횟수를 지정하는 방법을 설명합니다. 탐욕적 매칭과 지연 매칭의 차이, 빈 문자열 매칭 시 주의점도 예제로 살펴봅니다.
자바스크립트 정규표현식: 메서드와 문자 집합 | Part 1약 7분JavaScript에서 정규표현식을 만들고 test·exec·match 등으로 사용하는 방법을 설명합니다. 메타 문자, 이스케이프, 문자 집합의 기본 문법을 예제로 익힙니다.
자바스크립트 Promise 체인 이해하기 | 좌표로 국가 정보 가져오기약 9분Promise 체인으로 좌표 조회와 국가 정보 API 요청을 연결합니다. 응답을 화면에 표시하고, 요청 실패를 처리하며, 브라우저 위치 정보를 사용하는 예제를 살펴봅니다.
ES6 Modules: Named Export vs. Default Export약 3분JavaScript 모듈의 named export와 default export를 내보내기·가져오기 예제로 비교합니다. 식별자 이름, 별칭, 한 모듈에서 두 방식을 함께 사용하는 방법을 정리합니다.
자바스크립트 비동기 처리와 AJAX·API의 관계약 5분자바스크립트에서 비동기 처리란 무엇이며, AJAX와 API 요청이 어떻게 동작하는지 설명합니다. 타이머 예제와 HTTP 요청·응답 흐름을 함께 살펴봅니다.
API와 인터페이스(7)
브라우저에서 실시간성을 어떻게 보장하나요?약 31분허용 지연과 통신 방향에 따라 폴링·SSE·WebSocket을 선택하고, 재연결과 상태 복구를 설계하는 방법을 설명합니다. 브라우저 백그라운드 실행의 한계도 다룹니다.
null은 비우기일까요, 건드리지 않기일까요?약 4분부분 수정 API에서 필드 생략과 null을 어떻게 해석할지 정리합니다. JSON Merge Patch와 JSON Patch를 비교하고, 수정할 필드를 지정하는 방식과 검증 예제를 다룹니다.
API 응답은 모델을 닮아야 할까요?약 4분API 응답과 도메인 모델을 분리할 때 얻는 이점과 매핑 비용을 비교합니다. 계층별 DTO 구성, 응답의 중첩 구조, 인터페이스로 필드 누락을 줄이는 방법을 다룹니다.
이 API는 누가 부르나요?약 4분호출자에 따라 API를 퍼블릭·오퍼레이션·인터널로 구분하는 설계 사례를 살펴봅니다. 각 API의 권한 처리와 도메인 간 호출에서 책임을 나누는 기준을 설명합니다.
이 필드는 UTC여야 할까요?약 12분API에서 절대시각, 날짜, 지역 기준의 미래 일정을 어떻게 구분할지 살펴봅니다. 각 값의 의미에 맞는 DB 타입과 Temporal 사용법을 정리합니다.
Web Worker와 Service Worker는 어떻게 다를까요?약 18분Web Worker로 무거운 연산을 옮기고 작업과 취소를 관리하는 방법을 설명합니다. 탭 간 통신, Service Worker의 생명 주기, 캐시와 업데이트 설계도 함께 다룹니다.
DocumentFragment는 언제 쓰면 좋을까요?약 5분DocumentFragment로 여러 DOM 노드를 조립하고 문서에 삽입하는 방법을 설명합니다. 일반 요소를 사용하는 방식과 비교하고, 성능 측정 결과를 해석할 때의 주의점도 짚습니다.
UX/UI(2)
WAI-ARIA란 무엇인가요?약 12분WAI-ARIA의 역할·상태·속성을 폼, 모달, 아코디언, 탭 예제로 설명합니다. 네이티브 HTML을 우선하고, ARIA 속성과 실제 키보드 동작을 함께 구현해야 하는 이유를 다룹니다.
프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소약 12분버튼·체크박스·탭 등 UI 요소 32개의 이름과 용도를 예시로 살펴봅니다. Maria de la Riva의 글을 번역하고, 개발자와 디자이너가 나누는 UI 용어를 정리했습니다.
