코드 땜장이

localStorage와 sessionStorage 차이: 저장 기간, 탭 범위, 보안 기준으로 고르기 빠른 답 localStorage 는 브라우저를 닫아도 값이 남고, 같은 origin 의 여러 탭에서 공유됩니다. sessionStorage 는 탭 또는 창 단위 세션에 묶이며, 해당 탭을 닫으면 값이 사라집니다. 둘 다 JavaScript로 읽고 쓸 수 있으므로 인증 토큰, 비밀번호, 개인정보 저장소로 보기에는 위험합니다. 테마·언어 설정처럼 오래 유지할 값은 localStorage , 현재 탭 안에서만 필요한 임시 상태는 sessionStorage 가 어울립니다. 목차 한눈에 비교 시간 흐름으로 이해하기 origin과 탭 범위 이해하기 저장소 선택 규칙 만들기 실제 사용 예시 언제 무엇을 저장할까 보안 주의점 저장 실패와 예외 처리 흔한 오해 정리 선택 기준 정리 한눈에 비교 저장 기간 localStorage 는 코드로 삭제하거나 사용자가 브라우저 데이터를 지우기 전까지 유지되고, sessionStorage 는 탭 또는 창 세션이 끝나면 삭제됩니다. 공유 범위 localStorage 는 같은 origin 의 문서들이 공유하고, sessionStorage 는 탭 또는 창마다 별도 공간을 가집니다. 새로고침 두 저장소 모두 같은 탭에서 새로고침만으로는 삭제되지 않습니다. 새 탭 열기 localStorage 값은 같은 origin 의 새 탭에서도 읽을 수 있지만, sessionStorage 는 새 탭 기준의 별도 저장 공간을 사용합니다. 사용 예시 localStorage 는 테마, 언어, 목록 정렬 방식에 잘 맞고, sessionStorage 는 결제 단계 상태, 임시 폼 입력, 현재 탭의 검색 필터에 잘 맞습니다. 보안 기준 두 저장소 모두 JavaScript 접근이 가능하므로 민감 정보 저장에는 신중해야 합니다. localStorage 와 sessionStorage 는 모두 Web Storage API에 속합니다. 사용법은 거의 같습니다. ...

리액트 폼 입력은 누가 관리해야 할까: Controlled와 Uncontrolled 선택 기준 빠른 답 입력값이 화면 상태와 함께 즉시 바뀌어야 하면 Controlled가 기본 선택입니다. 제출할 때만 값을 읽으면 되는 단순 폼은 Uncontrolled가 더 간단합니다. 핵심 기준은 성능보다 데이터 흐름과 상태 소유권을 어디에 둘지입니다. value와 defaultValue를 섞거나 ref와 state를 함께 밀어붙이면 버그가 나기 쉽습니다. 목차 왜 두 방식이 자주 헷갈릴까 한눈에 비교 먼저 결정할 질문: 이 값은 화면 상태인가, 제출 데이터인가 Controlled Component가 맞는 상황 Uncontrolled Component가 맞는 상황 예외 케이스와 하이브리드 구성 흔한 안티패턴과 디버깅 포인트 실무 선택 기준 정리 왜 두 방식이 자주 헷갈릴까 겉으로 보면 둘 다 똑같이 입력창이 동작합니다. 사용자는 타이핑하고, 화면에는 글자가 보입니다. 그래서 처음에는 " useState 로 관리하든 ref 로 읽든 결과가 같은 것 아닌가?"라고 느끼기 쉽습니다. 하지만 실무에서 중요한 것은 누가 현재 값을 소유하느냐 입니다. Controlled Component 는 입력값의 원본이 리액트 state 입니다. 반대로 Uncontrolled Component 는 브라우저 DOM이 값을 들고 있고, 리액트는 제출 시점이나 특정 이벤트에서만 그 값을 읽습니다. 즉 차이는 문법이 아니라 데이터 흐름입니다. 입력값이 다른 UI를 바꾸는지, 부모 컴포넌트가 현재 값을 알아야 하는지, 입력 중간에 검증이나 자동 저장이 필요한지에 따라 선택이 갈립니다. 한눈에 비교 값의 출처: Controlled 는 state , Uncontrolled 는 DOM의 현재 값입니다. 데이터 흐름: Controlled 는 onChange -> setState -> render -> value 순서로 흐르고, Uncontrolled ...