서버 사이드 렌더링이란 무엇인가
서버 사이드 렌더링(SSR)이 무엇인지 개념부터 정리합니다. HTML을 서버에서 생성하는 방식과, 클라이언트 사이드 렌더링(CSR)과의 차이를 설명합니다.
JSX가 무엇인지 정리하기
JSX가 무엇인지 개념부터 정리합니다. HTML처럼 보이지만 JavaScript 문법 확장이라는 점과, 빌드 과정에서 함수 호출로 변환되는 구조를 중심으로 설명합니다.
메모이제이션이란 무엇인가
메모이제이션이 무엇인지 개념부터 정리합니다. 계산 최적화 기법으로서의 메모이제이션이 어떤 전제에서 성립하는지, 그리고 언제 의미를 가지는지를 중심으로 설명합니다
자주 사용하는 리액트 훅 (2)
React에서 구조와 렌더링 타이밍을 다루기 시작하면서 사용하게 된 훅들을 정리합니다. useLayoutEffect, useContext, 커스텀 훅이 어떤 상황에서 유용했는지를 중심으로 기록합니다.
자주 사용하는 리액트 훅 (1)
React에서 가장 자주 사용하는 훅인 useState, useEffect, useRef를 정리합니다. 각 훅이 무엇을 위한 도구인지와 어떤 상황에서 유용한지를 중심으로 설명합니다.
props drilling이 생겼던 구조와 당시 선택
React에서 상태를 상위로 끌어올리면서 발생한 props drilling 구조를 정리합니다. 중간 컴포넌트가 props를 전달만 하게 된 문제와, 그 시점에서 Context API를 선택지로 고려하게 된 이유를 기록합니다.
리액트에서 key를 사용하는 이유
React에서 리스트를 렌더링할 때 key가 왜 필수인지 정리합니다. React의 렌더링 방식과 index를 key로 사용할 때 발생하는 문제를 중심으로, 안정적인 key를 선택하는 기준을 기록합니다.
useState로 상태를 관리하다가 불편해지기 시작한 지점
React에서 useState로 상태를 관리하던 중, 페이지 이동·새로고침·뒤로가기 상황에서 상태가 유지되지 않았던 문제를 정리합니다.
브라우저 확장 프로그램: axe-devtools
웹 페이지를 만들고 나서 놓친 접근성 문제가 있는지 가볍게 확인할 때 사용한 axe DevTools 기록입니다.
브라우저 확장 프로그램: Wappalyzer
사이트가 어떤 기술로 만들어졌는지 궁금할 때, 브라우저 확장 프로그램 Wappalyzer가 무엇인지
확장 프로그램: Error Lens와 Code Spell Checker
코드 에디터 확장 프로그램 추천: 에러랑 오타를 코드 옆에서 바로 보게 해주는 확장 두 가지를 가볍게 정리했습니다.
CSP는 무엇을 막아주고, 무엇을 막아주지 않는가
Content Security Policy(CSP)가 실제로 막아주는 보안 위협과, CSP로는 해결할 수 없는 문제를 구분해 정리합니다. CSP의 역할과 한계를 책임 경계 관점에서 설명합니다.
CSRF와 클릭재킹은 어떻게 사용자를 속이는가
CSRF와 클릭재킹이 시스템을 직접 공격하지 않고, 사용자의 행동과 브라우저 동작을 어떻게 악용하는지 정리합니다. 두 공격이 성립하는 구조와 방어의 책임 경계를 설명합니다.
로컬스토리지, 세션 스토리지, 쿠키를 언제, 왜 사용하는가
브라우저 저장소인 로컬스토리지, 세션 스토리지, 쿠키의 차이를 접근 주체와 제어 모델 관점에서 정리합니다. 각 저장소가 어떤 보안 이슈와 연결되는지 학습 관점에서 설명합니다.
prettier-plugin-tailwindcss는 무엇을 해결하는가
Tailwind CSS를 사용하며 클래스 순서가 제각각이 되는 문제를 정리합니다. prettier-plugin-tailwindcss가 클래스 정렬을 어떻게 자동화하는지, 왜 사람이 관리하지 않아도 되는 문제인지 학습 관점에서 설명합니다.
clsx 다음에 tw-merge가 필요한 이유
Tailwind CSS에서 clsx로 조건부 클래스를 합친 뒤, tw-merge로 클래스 충돌을 정리하는 이유를 정리합니다. clsx와 tw-merge를 함께 사용하는 흐름과 cn 유틸 패턴을 설명합니다.
clsx / classnames를 언제, 왜 사용하는가
Tailwind CSS를 사용하며 조건부 클래스가 늘어날 때, clsx와 classnames를 언제, 왜 사용하게 되는지 정리합니다. 문자열 기반 클래스 처리의 한계와 정리 기준을 학습 관점에서 설명합니다.
Tailwind 기준에서 본 모바일 퍼스트 vs 데스크탑 퍼스트
모바일 퍼스트와 데스크탑 퍼스트의 차이를 Tailwind CSS의 반응형 설계 방식 기준으로 정리합니다. Tailwind에서 기본 스타일과 반응형 클래스가 어떤 의미를 가지는지 학습 관점에서 설명합니다.
test: next
test: next
test: supabase
test: supabase
test-2
test-2
test: 코드잇 회고
test: 코드잇 회고
확장 프로그램: Live Share 간단한 사용법과 느낀 점
VS Code Live Share의 사용 방법과 사용하면서, 같이 코드를 보는 상황에서 어떤 점이 편했는지 가볍게 정리했습니다.
test-1
test-1
test: 개발 과정 기록과 회고
test: 개발 과정 기록과 회고
test: 유용한 글
test: 유용한 글
test: 오픈소스
test: 오픈소스
test: 코드 개선/구조 정리
test: 코드 개선/구조 정리
Tailwind CSS란 무엇이고, 왜 많이 사용되는가
Tailwind CSS의 기본 개념과 Utility-First 방식이 무엇인지 정리합니다. 기존 CSS 작성 방식과의 차이, 클래스 조합 방식이 왜 선택되는지 학습 관점에서 설명합니다.
test: 렌더링 최적화
test: 렌더링 최적화
React 19: Effect 내부에서 setState 호출 시 발생하는 경고(cascading render)와 해결 방법
React 19과 React Compiler 환경에서 프로젝트를 진행하면서 `useEffect` 내부에서 `setState`를 호출할 때 **cascading render 경고**가 발생했다. 이전 버전에서는 문제가 없던 코드이지만, React 19 Compiler는 초기 렌더 흐름을 더 엄격하게 검사한다. 해당 경고가 발생하는 원리와 해결 방법을 정리한다. ## 문제 코드 ```tsx const [isOpen, setIsOpen] = useState(false); useEffect(() => { if (typeof window !== "undefined") { const saved = localStorage.getItem("SidebarOpen"); if (saved !== null) { setIsOpen(saved === "true"); } } }, []); ``` ### 많은 사람들이 오해할 수 있는 부분 1. effect가 반복 실행돼서 발생하는 문제는 아니다 useEffect(() => {}, [])는 기본적으로 한 번만 실행된다. 문제는 effect 실행 횟수가 아니라 렌더 후 상태가 뒤늦게 변경되는 구조다. 2. localStorage 값에 따라 effect가 재실행되는 것은 아니다 localStorage의 내용은 effect 동작과 무관하다. 3. cascading render가 무한 루프를 의미하는 것은 아니다 React 19에서 말하는 “cascading render”는 초기 렌더 후 추가 렌더가 이어지는 비효율적인 초기화 과정을 의미한다. ### 왜 경고가 발생하는가 React Compiler는 초기 렌더 흐름이 다음과 같이 진행되는 경우를 비효율적이라고 판단한다. ```javascript 초기 render (isOpen = false) ↓ commit ↓ useEffect 실행 ↓ setIsOpen(...) ↓ re-render ``` 초기 렌더에서 실제 상태가 확정되지 않은 채 commit이 발생하기 때문에 Compiler는 이를 “초기 상태가 늦게 확정되는 패턴”으로 보고 경고를 띄운다. ### 해결 방법: 초기 상태를 렌더 전에 확정하기 localStorage에서 값을 읽는 로직을 useEffect가 아닌 useState의 lazy initializer로 옮기면 경고가 해결된다. ### 수정된 코드 ```javascript const [isOpen, setIsOpen] = useState(() => { if (typeof window !== "undefined") { const saved = localStorage.getItem("SidebarOpen"); return saved === "true"; } return false; }); ``` ### 정리 | 방식 | 렌더 횟수 | React Compiler 평가 | | ------------------------- | --------- | ------------------------ | | effect 안에서 setState | 최소 2번 | 비효율적, 경고 발생 가능 | | useState lazy initializer | 1번 | 가장 이상적인 패턴 |
test: typescript
test: typescript
test: 성능 개선 사례
test: 성능 개선 사례
Next.js에서 보안 헤더를 설정한다는 것의 의미와 한계
Next.js에서 설정할 수 있는 보안 헤더들의 역할과 한계를 정리합니다. 보안 헤더가 무엇을 막아주지 않는지, 프레임워크와 개발자의 책임 경계를 중심으로 설명합니다.
React는 왜 기본적으로 XSS에 강할까?
React가 XSS에 강해 보이는 이유를 렌더링 방식 관점에서 설명하고, dangerouslySetInnerHTML, 속성 기반 주입, DOM 직접 조작 시 다시 취약해지는 지점을 정리합니다.
NEXT_PUBLIC_ 환경변수는 왜 env인데 클라이언트에 노출될까
NEXT_PUBLIC_ 환경변수가 왜 클라이언트 번들에 포함되는지, env는 언제 비밀이 되고 언제 설정값이 되는지 Next.js 빌드 구조와 보안 기준으로 정리합니다.
innerHTML을 사용할 때 조심해야 하는 이유
innerHTML이 왜 보안상 주의가 필요한 API인지, XSS 취약점과 안전한 대체 방법(textContent, sanitize)을 통해 정리합니다.
env는 보안인가? 많은 개발자들이 착각하는 이유
env는 보안 기능일까? 이 글에서는 env의 역할과 한계, NEXT_PUBLIC_ 환경 변수의 노출 특성, 프론트엔드에서 노출돼도 되는 값의 기준을 정리합니다.
XSS란 무엇인가: 브라우저에서 실행되는 공격
XSS(Cross-Site Scripting)는 서버가 아닌 사용자의 브라우저를 공격하는 웹 보안 취약점입니다. 이 글에서는 XSS의 개념, 발생 원인, 주요 유형과 위험성을 정리합니다.