프론트엔드

TL;DRCache-Control은 브라우저와 중간 서버(Proxy, CDN 등)가 어떤 방식으로 응답을 캐싱할지 지정하는 헤더로, 캐싱 가능 여부(public, private, no-store), 캐시 유효 기간(max-age), 재검증 방식(no-cache, must-revalidate) 등을 설정할 수 있다. 정적인 리소스잘 변하지 않는 정적인 리소스는 장기간 캐시Cache-Control: public, max-age=31536000, immutable public: 브라우저와 중간 서버(프록시, CDN 등) 모두 응답을 캐싱하고 재사용할 수 있도록 허용max-age=31536000: 캐시 생성 후 1년(31,536,000초) 동안 fresh 상태 유지immutable: 유효 기간 내 리소스가 변..

Next.js에서 제공하는 Learn Next.js App Router 튜토리얼을 부연 설명과 함께 한국어로 정리해 봤다. 공식 가이드는 총 16개 챕터로 구성되어 있지만, 이번 포스팅에선 프로젝트 세팅을 다루는 챕터 1과 CSS 스타일링 방법을 설명하는 챕터 2는 생략했다.  Optimizing Fonts and ImagesCumulative Layout Shift(CLS, 누적 레이아웃 이동)는 구글이 웹사이트의 성능과 사용자 경험을 평가하는 데 사용하는 지표로, 페이지 로드 중 레이아웃 이동으로 인해 발생하는 사용자 경험의 불편함을 측정한다. 예를 들어, 브라우저가 폴백(fallback) 폰트나 시스템 폰트로 텍스트를 먼저 렌더링 한 뒤 사용자 지정 폰트로 교체할 때 텍스트 크기, 간격 또는 레이아..

리액트의 useEffect는 데이터 가져오기, 구독 관리, DOM 업데이트, 사이드 이펙트 처리 등 다양한 작업에 사용된다. 그러나 useEffect를 과도하게 사용하면 성능 저하, 불필요한 렌더링, 디버깅의 복잡성 같은 문제가 발생할 수 있다. "Leave useEffect Alone!" 라는 가이드 글을 참고하여 올바른 useEffect 사용법에 대한 추가 설명을 덧붙여서 정리해 봤다.  경쟁 상태(Race Condition) ⭐경쟁 상태는 여러 비동기 작업이 동시에 실행될 때, 실행 순서나 결과가 예측하지 않은 방식으로 작동하는 현상을 가리킨다. 아래 코드에서 버튼을 여러 번 클릭하면 counter 값이 증가하고, 각 요청은 랜덤한 시간만큼 대기한 후 response 상태를 업데이트한다. 하지만 이..

TLDR이벤트 핸들러에 커링 활용컴포넌트 책임 분리조건문 대신 객체 map 사용React 라이프사이클 외부에 독립적인 변수 배치  4 React Tips1. 커링 활용user 상태는 name, surname, address 3개 속성을 가지며, 이에 대응하는 3개의 input 필드가 필요하다. 아래 코드에선 각 필드를 처리하기 위해 별도의 핸들러를 각각 만들어서 사용하고 있지만, 이 핸들러들은 value가 할달될 속성 이름만 다를 뿐 나머지 로직이 동일하기 때문에 코드 중복이 발생하고 있다.export default function App() { const [user, setUser] = useState({ name: "", surname: "", address: "", }); co..