본문 바로가기
반응형

WEB,WAS67

브라우저 Ajax 요청의 네트워크 흐름: CORS, OPTIONS, DNS까지 정리 웹 서비스를 운영하다 보면 이런 상황을 자주 만난다.“curl로는 되는데 브라우저에서는 안 됩니다”“OPTIONS 요청이 왜 이렇게 많이 오죠?”“배포했는데 데이터가 바뀌지 않습니다”“로그인은 성공했는데 다음 요청에서 세션이 사라집니다”이 문제들의 출발점은 대부분 Ajax 요청의 동작 구조에 있다.이 글에서는 Ajax의 개념이 아니라,서비스 운영과 장애 대응에 필요한 핵심 동작 흐름을 정리한다.1. Ajax 요청은 어디서 시작되는가?Ajax는 단순히 말하면:브라우저 안의 JavaScript가 서버로 HTTP 요청을 보내는 방식예:fetch("/api/order")중요한 점은:요청은 서버가 아니라 브라우저에서 시작된다브라우저는 일반 HTTP 클라이언트와 다르게 강한 보안 정책을 적용한다2. Ajax 요청의.. 2026. 2. 12.
Chrome 디스크 캐시 정리 방법 — 강력 새로고침으로 안 될 때 배포 후 강력 새로고침(Ctrl+Shift+R)을 해도 이전 버전이 보인다면, 디스크 캐시가 원인일 수 있다. 특히 JavaScript의 fetch()로 가져오는 데이터는 강력 새로고침으로 캐시가 우회되지 않는다.왜 강력 새로고침으로 안 되는가강력 새로고침은 브라우저가 직접 로드하는 리소스만 캐시를 우회한다.요청 유형 강력 새로고침 시HTML 문서O — 서버에서 새로 받음, , 등O — 서버에서 새로 받음JavaScript 코드 내 fetch()X — 디스크 캐시 그대로 사용JavaScript 코드 내 dynamic import()X — 디스크 캐시 그대로 사용React, Next.js, Vue 같은 SPA/SSR 프레임워크는 페이지 로드 후 JS에서 fetch()로 데이터를 가져오는 구조가 많다. 이.. 2026. 2. 12.
웹에서 사용하는 캐시 총정리 — 브라우저부터 서버까지 13가지 배포했는데 반영이 안 된다? 강력 새로고침(Ctrl+Shift+R)으로도 안 풀린다? 웹 캐시가 어디서 어떻게 동작하는지 전체 그림을 알면, 원인을 빠르게 찾을 수 있다. 요청이 서버에 도달하기까지 거치는 캐시 계층사용자가 URL을 입력하고 Enter를 누르면, 요청은 여러 캐시 계층을 순서대로 거친다. 어딘가에서 캐시 HIT가 발생하면 그 아래 계층은 실행되지 않는다. [ 클라이언트 영역 ]순서캐시설명1Memory Cache가장 빠름 (RAM)2Disk Cache (HTTP Cache)가장 흔한 캐시3Service Worker Cache개발자가 직접 제어4Back-Forward Cache뒤로가기 전용5Application CacheJS 런타임 (프레임워크, Storage) [ 네트워크 연결/정책 캐시 .. 2026. 2. 11.
서버 실행 모델(spring,nodejs) 멀티스레딩 Node.js · 멀티스레딩 · 멀티프로세싱 · Java SpringNode.js의 이벤트 루프를 이해하고 나면자연스럽게 이런 질문이 이어진다.멀티스레드는 정확히 뭐가 다른가?멀티프로세스는 왜 안전한가?Node.js 워커 스레드는 어디에 속하는가?자바 스프링은 왜 구조가 완전히 다른가?이 글은 **“요청을 어떻게 처리하고, CPU와 메모리를 어떻게 쓰는가”**라는단 하나의 기준으로 이 모든 모델을 정리한다.1. 실행 모델을 나누는 핵심 기준모든 서버 모델은 결국 이 두 질문으로 나뉜다.요청을 처리하는 실행 단위는 무엇인가?스레드?이벤트 루프?메모리는 어떻게 공유하는가?공유?격리?이 두 축으로 보면 구조가 명확해진다.2. 멀티스레딩(Multi-threading)정의하나의 프로세스 안에서 여러 스레드가 메모.. 2026. 2. 2.
Node.js 이벤트 루프 정리(콜 스택 · 백그라운드 · 태스크 큐 · Promise · 엔진과 런타임) Node.js를 공부하다 보면 반드시 헷갈리는 개념이 있다.바로 이벤트 루프(Event Loop), 콜 스택(Call Stack), 태스크 큐(Task Queue), 그리고 백그라운드다.책에서는 종종 “동작”부터 설명하고,독자는 “구조를 모르는데 이게 왜 이렇게 되지?”라는 의문을 갖게 된다.이 글에서는 다음 질문에 답한다.이벤트 루프는 정확히 뭘 하는가?콜 스택과 태스크 큐의 역할은 무엇인가?백그라운드는 어디에 속하는가?setTimeout(fn, 0)은 왜 항상 나중에 실행되는가?Promise / async·await 는 왜 더 먼저 실행되는가?엔진과 런타임은 무엇이 다른가?1. 자바스크립트는 어디에서 실행되는가결론부터 말하면, 자바스크립트 코드는 오직 콜 스택에서만 실행된다.JS 코드 실행 장소 = .. 2026. 2. 2.
Windows 환경에서 PM2를 서비스로 등록해 특정 계정으로 자동 재기동하기 Node.js 애플리케이션을 운영하다 보면, 서버를 재부팅하거나 윈도우 업데이트가 적용될 때마다 앱이 자동으로 다시 켜져야 안정적인 서비스 운영이 가능합니다.리눅스에서는 pm2 startup으로 쉽게 systemd에 붙일 수 있지만, 윈도우는 기본적으로 지원되지 않아서 조금 다른 접근이 필요합니다. 이번 글에서는 윈도우에서 특정 계정(예: 서비스 계정)으로 PM2를 서비스로 등록하고, 리부팅 시 앱을 자동 재기동하는 방법을 정리합니다.🛠️ 준비 사항Windows Server / Windows 10 이상Node.js (운영 시에는 LTS 버전(20.x) 권장)npm 전역(Global) 패키지 설치 권한PM2 (Node 프로세스 매니저)1. Node.js & PM2 설치먼저 Node.js를 설치합니다.운영.. 2025. 8. 19.
업로드 에러 - 413 Payload Too Large 증상 레드마인에 파일을 업로드하는데 413 Payload Too Large라는 에러가 발생하였다. 원인 was 분석 우선 redmine의 용량 설정을 보았으나 이미 설정이 되어 있었다. 그리고 에러로그를 살펴보았는데 아무것도 나오지 않았다. bitnami redmine을 사용했는데 여기에 apache가 있길래 여기도 있어서 살펴보고 여기에 용량 설정하는 설정이 있어서 설정을 다음과 같이 하였다. LimitRequestLine 65536 LimitRequestBody 0 LimitRequestFieldSize 65536 LimitRequestFields 10000 그래도 같은 에러가 발생하였다. 개발자도구에서 413 Payload Too Large라는 에러를 발견하였다. 해당 에러는 서버에서 업로드 제한하.. 2024. 3. 18.
curl은 되는데 브라우저 접속 안되는 경우- ERR_UNSAFE_PORT 톰캣을 다른 포트로 띄웠는데 브라우저에서 접속이 되질않는다. 혹시나 해서 curl로 확인해보니 같은서버에서 접속이 잘되었다. 브라우저문제같아 자세히 보니 ERR_UNSAFE_PORT라는 에러가 눈에 보였다. 브라우저에서는 허가되지 않은 포트는 접근불가하므로 설정을 해줘야 한다. 해결방법 크롬 아이콘 오른쪽 클릭후 속성을 클릭한다. 대상에 다음과 같이 입력한다. --explicitly-allowed-ports=원하는포트 당연한거지만 옵션 줄때 한칸 띄워줘야한다. 접속이 잘되는것을 확인할 수 있다. 2024. 1. 30.
maven 빌드 속도 개선 목차 1. 예시 mvn clean install[정보] 총 시간: 01:05 h mvn clean install -DskipTests[정보] 총 시간: 18:35분 mvn clean install -Dmaven.test.skip -DskipTests 총 시간: 10:58분 mvn -T 1C clean install -Dmaven.test.skip -DskipTests[정보] 총 시간: 04:00분 -Dmaven.javadoc.skip=true를 추가하여 Archmed가 주석 처리한 대로 생성될 javadoc을 건너뛸 수도 있습니다. mvn -T 1C clean install -Dmaven.test.skip -DskipTests -Dmaven.javadoc.skip=true * imports 를 사용하지 .. 2024. 1. 9.
Angular 버전 마이그레이션 https://update.angular.io/ Angular Update Guide update.angular.io 위사이트에서 버전입력후 나오는 방법대로 하면 된단다... 2023. 10. 17.
angular build Nodejs 14 이상 버전 설치 후(LTS 14, 16, 18) npm install --force ng build ng build 하면 다음에러가 발생하면... has no exported member 'SignaturePadModule' 에러 발생시 import { SignaturePadModule } from 'angular2-signaturepad'; to import { SignaturePad } from 'angular2-signaturepad'; 한뒤 Reference https://stackoverflow.com/questions/65836752/angular2-signaturepad-used-with-angular-gives-module-not-found-error Angular2-si.. 2023. 10. 12.
NPM 에러 - Error: The package "@esbuild/linux-x64" could not be found, and is needed by esbuild. 증상 npm run build 하니까 이런 에러가 발생했다. 해결방법 node modules를 삭제하면 된다. rm -rf node_modules/ 그리고 다시 install 후 build하면된다. npm i npm run build Reference https://stackoverflow.com/questions/75014342/any-idea-why-vite-js-is-having-issues-in-react-with-esbuild Any Idea why vite.js is having issues in react with esbuild I tried installing react app with vite and after installation when i tried using npm run dev.. 2023. 9. 15.
반응형

티스토리툴바