프론트엔드(React)와 백엔드(Spring)를하나의 도메인으로 자연스럽게 묶는 실무 구성 정리왜 이 구조를 쓰는가?실무에서 가장 많이 쓰는 구조는 아래와 같다.화면: React (정적 파일)API: Spring Boot (WAS)앞단: Apache (웹서버)이렇게 나누는 이유는 명확하다.화면은 빠르게 정적 서빙API는 WAS에 위임외부 노출은 Apache 한 곳에서만 관리전체 아키텍처 한 눈에 보기[ Browser ] ↓ https://www.example.com[ Apache : 443 ] ├─ / → React build (DocumentRoot) └─ /api/** → Spring Boot (Reverse Proxy)중요브라우저는 Apache만 바..

Apache 설정에서 가장 많이 헷갈리는 세 가지 개념을URL 기준 / 서버 경로 기준으로 명확하게 정리한다.왜 이 세 가지가 항상 헷갈릴까?Apache 설정을 보다 보면 아래 설정들이 한 파일 안에 섞여 있다.DocumentRoot /var/www/html Require all granted ProxyPass http://localhost:8080/api이걸 처음 보면 자연스럽게 이런 생각이 든다.“이게 다 경로 같은데… 뭐가 다른 거지?”결론부터 말하면 기준 자체가 완전히 다르다.1️⃣ DocumentRoot란 무엇인가DocumentRoot /var/www/html핵심 정의DocumentRoot는 웹서버가 정적 파일을 찾는 기준 디렉터리다.서버(OS) 내부의 실제 폴더 경로URL이 아님Re..

Apache 설정을 처음 접하면 가장 먼저 마주치는 구문이 있다.이 설정을 보는 순간 많은 사람이 이렇게 생각한다.“이거 그냥 포트 분기 아닌가?”결론부터 말하면 절반만 맞다.Apache의 VirtualHost는 단순한 포트 분기가 아니라, 포트와 도메인을 함께 기준으로 삼는 요청 진입점 설정이다.이 글에서는 VirtualHost를 처음 접하는 사람도 헷갈리지 않도록,왜 포트 분기로 보이는지, 실제로는 무엇을 기준으로 동작하는지를 실무 기준으로 정리한다.VirtualHost는 무엇을 결정하는가VirtualHost는 Apache에게 다음 질문에 대한 답을 알려준다.이 요청은 어떤 도메인(ServerName) 으로 들어왔는가?어떤 포트(80, 443) 로 들어왔는가?그 요청을 어떤 설정 묶음으로 처리할 것인..

– Clean Tomcat work directory로 해결한 실제 사례 –Spring 프로젝트를 개발하다 보면“이전엔 잘 되던 코드가 갑자기 에러를 내며 실행이 안 된다”는 상황이 종종 발생합니다.최근 나도 로컬 환경에서 Inner Class 관련 Bean 생성 에러를 겪었는데,결론적으로 Tomcat work 디렉터리에 남은 과거 클래스 파일이 원인이었습니다.🧩 문제 상황로컬 Tomcat 서버에서 Spring 프로젝트를 실행 중이었는데,이전에 ServiceImpl 내부에 Inner Class를 만들어서 사용했었습니다.이후 해당 구조를 수정하고 Inner Class를 제거한 뒤 배포도 완료했지만,며칠 뒤 로컬에서 서버를 다시 실행하니 아래와 같은 오류가 발생했습니다. Error creating bean..

API 요청을 보내다 보면,정상적으로 동작하던 요청이 갑자기 웹방화벽(WAF) 에 의해 차단되면서다음과 같은 메시지를 본 적이 있을 겁니다.🚫 “Payload exceeds limit”🚫 “Too many parameters in request”🚫 “Request blocked by Web Application Firewall”이 글에서는 웹방화벽에서 페이로드 개수 초과가 발생하는 원인과,API 요청 크기와의 관계, 그리고 해결 방법까지 정리해보겠습니다.🧩 1. 페이로드(Payload)란 무엇인가?HTTP 요청(Request)에는 헤더와 바디(body)가 있습니다.이 중 body에 담긴 실제 데이터 부분을 바로 페이로드(Payload) 라고 부릅니다.예를 들어 이런 JSON 요청을 보낸다면,{ ..

🧩 React Ref 단계별 제어 완벽 이해 — useImperativeHandle로 중간 컴포넌트까지 제어하기“ref는 상위 → 하위 컴포넌트 한 단계만 접근할 수 있다고?”하지만 useImperativeHandle을 잘 쓰면, 손자 컴포넌트까지도 깔끔하게 제어할 수 있습니다.이번 글에서는 실제로 발생했던 ref 충돌 문제를 예시로 들어,ref 체인을 단계별로 제어하는 방법을 정리해봅니다.📍 1. 상황 정리: ref 체인이 너무 깊다!React에서 ref는 일반적으로 상위 컴포넌트가 하위 컴포넌트의 DOM이나 메서드에 접근할 때 사용합니다.그런데 이런 구조가 한두 단계만 지나면 제어가 너무 깊어지고 복잡해지는 경우가 많습니다.예를 들어 아래처럼 구조가 3단계일 때:Parent └─ Child ..