React 상태가 변경되어도 리렌더링되지 않는 이유와 해결법

React에서 상태를 바꿨는데 화면이 바뀌지 않는 이유 – 자료형과 불변성의 이해1. 상태를 바꿔도 리렌더링되지 않는 상황React에서 가장 기본적인 원칙 중 하나는 상태를 변경하면 컴포넌트가 다시 렌더링된다는 것이다. 그러나 상태를 분명히 바꿔서 setState를 호출했는데도 화면이 전혀 변하지 않는 경우가 있다.const [user, setUser] = useState({ name: '길동' });// 잘못된 방법user.name = '지민';setUser(user); // 리렌더링되지 않음!사용자의 이름을 바꿔서 setUser를 호출했지만, 화면에는 기존 값이 그대로 남아 있다. 디버그를 해보면 상태는 분명 변경되었는데, React는 아무런 반응도 하지 않는다. 어떤 오류도, 로그도 없다. 하지만 ..

• format_list_bulleted React
• · 2025. 5. 27.
• textsms

Next.js Docker 최적화 전략 : 멀티스테이지 빌드와 standalone 모드

Next.js 프로젝트는 로컬에서는 잘 작동하지만, Docker로 운영 환경에 배포하는 순간 전혀 다른 문제가 발생한다.- 빌드 결과물과 전체 소스를 모두 포함해 이미지 용량이 1GB를 넘고 - 의존성은 바뀌지 않았는데도 매번 설치부터 다시 하게 되고 - 빌드 시간과 배포 속도는 점점 길어지며 - 실행 구조가 복잡해져 운영 환경에서 디버깅이나 관리가 번거로워진다단순히 “실행되는 Docker 이미지”를 만드는 것과 운영 환경에서 최적화된 구조로 빠르고 안정적으로 배포하는 것은 다르다. 이 글에서는 위 문제들을 해결하기 위해내가 직접 사용하고 있는 두 가지 최적화 전략을 공유한다.멀티스테이지 빌드 (Multi-stage Build)Next.js standalone 모드이 두 가지를 함께 적용하면Do..

• format_list_bulleted React
• · 2025. 5. 15.
• textsms

Next.js standalone 배포 "sharp missing in production" 에러 해결하기

Next.js의 next/image 컴포넌트는 이미지 최적화를 위해 서버 측에서 sharp 모듈을 사용합니다. 하지만 Docker 기반의 production 환경에서는 종종 아래와 같은 오류가 발생합니다.Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly. 개발 환경에서는 멀쩡히 동작하던 기능이 운영 환경에서 갑자기 실패하는 이유는 무엇일까요? 이 글에서는 해당 오류의 원인과 해결 방법을 명확히 정리해 봅니다.1. 개발 환경에서는 왜 문제가 없을까?개발 중에는 sharp와 관련된 문제가 드러나지 않는 경우가 대부분입니다. 그 이유는 아래와 같습니다.1) 개발 ..

• format_list_bulleted React
• · 2025. 5. 7.
• textsms

HTTPS는 되는데 HTTP는 왜 안 될까?

NCP 리스너 설정으로 해결한 사례도메인 연결과 SSL 인증서 적용까지 모두 마쳤다.브라우저에서 https://example.com으로 접속했을 때도 문제없이 작동했다.그런데 http://example.com으로 접속해보니 아무 반응이 없었다.서버 로그에도 기록이 없고, 요청이 들어온 흔적조차 없었다.결국 원인은 로드밸런서의 리스너 설정 부족이었다.HTTP와 HTTPS, 뭐가 다를까?웹사이트 주소는 http:// 또는 https://로 시작한다.단순히 알파벳 하나의 차이처럼 보이지만, 실제로는 보안 수준이 크게 다르다.HTTP: 데이터를 암호화하지 않고 전송한다.요청이 중간에 가로채이면, 내용이 그대로 노출될 수 있다.HTTPS: SSL 인증서를 통해 데이터를 암호화해서 전송한다.비밀번호, 쿠키, 개인정..

• format_list_bulleted Web
• · 2025. 5. 2.
• textsms

async/await은 왜 쓰는가? : JS 비동기 처리하기

들어가는 말예전에 async/await에 대해 간단히 정리한 적이 있다. 하지만 그때는 문법 위주로만 설명하다 보니,비동기 흐름이 왜 그렇게 발전했는지, 무엇이 개선되고 어떤 점을 주의해야 하는지는 충분히 다루지 못했다.이번 글은 그 아쉬움을 채우기 위해 준비했다. 동기와 비동기의 개념부터 시작해,콜백 → Promise → async/await으로 이어지는 흐름을 차근차근 짚어보며비동기를 올바르게 다루는 사고 방식을 정리해보려 한다.이 글을 통해 배우는 것동기(Sync) vs 비동기(Async)의 차이자바스크립트에서의 비동기 처리 흐름: 콜백 → Promise → async/await각각의 방식이 해결한 문제와 한계병렬 처리 시 성능 차이와 실제 사용 전략동기란?기본적인 코드 흐름은 대부분 동기적이다. ..

• format_list_bulleted JavaScript
• · 2025. 5. 2.
• textsms

Portal과 Compound 패턴으로 Modal 만들기

지난 글에서는 Select 컴포넌트를 Compound Component 패턴으로 관리하는 방법을 소개했다. 이번에는 이 패턴을 Modal 컴포넌트에도 적용해보려고 한다.Modal은 프로젝트 어디에서나 자주 사용된다. 그래서 더더욱 잘 구조화해서 만들어두는 게 중요하다. 이번 글에서는 Portal을 이용하고, Compound Component 패턴을 적용해 Modal을 공통 컴포넌트로 깔끔하게 만드는 방법을 정리해본다.Modal을 만들 때 고려한 기본 원칙은 세 가지였다:Portal을 이용해 Modal을 body 바깥에 띄운다.useModalStore 같은 전역 상태 훅을 사용해 열고 닫을 수 있게 한다.Compound Component 패턴으로 구조를 나눠 자유롭게 조합할 수 있게 한다.왜 Portal을..

• format_list_bulleted React
• · 2025. 4. 29.
• textsms