CORS 다시 정리하기(Next.js App Router에서 발생한 'CORS 캐시' 트러블슈팅)
정리하게 된 이유: 아래 포스팅을 읽고 새로운 점을 알게 되어서.https://tech.kakaopay.com/post/nextjs-troubleshooting-cors-version-skew/Next.js App Router로 구현 중인 프로젝트이며, 배포 시 정적 파일이 CDN에 업로드 되는 상황.최초 렌더링(SSR) 때는 혹은 태그를 읽어서 리소스를 다운로드 받고, 이는 CORS 요청이 아니기 때문에 요청에 Origin 헤더를 포함하지 않음. 서버에서도 Access-Control-Allow-Origin(이하 ACAO) 헤더를 응답에 포함하지 않음.이후 client-side navigation으로 페이지 이동이 발생할 경우, Next.js는 페이지 전환에 필요한 리소스를 미리 가져오거나(prefe..
2026. 1. 23. 01:14[Next.js ESLint] TypeError: Converting circular structure to JSON --> starting at object with constructor 'Object' | property 'configs' -> object with constructor 'Object' | property 'flat' -> object with constructor 'Object'... 에러
새로운 Next.js 프로젝트를 설치하고 린트 적용 중에 발생한 에러:Oops! Something went wrong! :(ESLint: 9.39.1TypeError: Converting circular structure to JSON --> starting at object with constructor 'Object' | property 'configs' -> object with constructor 'Object' | property 'flat' -> object with constructor 'Object' | ... | property 'plugins' -> object with constructor 'Object' --- prope..
2025. 12. 14. 21:19웹뷰를 이용해 웹 서비스를 앱으로 빠르게 구현하기 | 인프콘2023
2년 전 컨퍼런스에 발표된 내용이지만, 웹 개발만 하다가 앱까지 확장해 나갈 때 보면 적절할 것 같아서 영상 시청 후 기록한 내용 이 발표는 "이미 구현되어 있는 웹"을 앱으로 빠르게 빌딩하는 가이드를 소개합니다.https://youtu.be/hsh8BS7gyrY?si=-a74p2mcDUrexfgs 첫 번째: 앱을 고려하기모바일 장치 인터넷 사용량 통계웹 사이트 트래픽의 55%는 모바일 장치에서 발생해요.인터넷에 접속하는 92.3%가 모바일 장치를 사용해요.약 43억 2천만 명의 활성 모바일 인터넷 사용자가 있어요.2025년까지 전 세계적으로 10억 개 이상의 5G 연결이 발생할 거에요.웹 앱과 모바일 앱웹 앱HTML, CSS, JavaScript로 개발합니다.모바일 기기에 웹 브라우저로 앱처럼 사용합니..
2025. 12. 8. 23:02Mac 시스템 데이터 정리하기
RN 공부를 하면서 맥북 용량 부족에 시달리게 되었다.그런데 설정에서 저장 공간을 찾아보니까 시스템 데이터가 너무 많은 용량을 차지하고 있었다.시스템 데이터 용량을 줄이기 위해 방법을 찾고 적용한 기록. 1. 일반 맥북 사용자의 입장에서sudo du -s -h *Library를 살펴보며 이전에 삭제했던 프로그램이 남아있다면 정리하기그밖에도 Cache 내용 보고 삭제 2. 개발자의 입장에서https://0-to-infinite.tistory.com/14 Mac os - Mac OS 시스템 데이터 없애기[개발자 시선]아.. 정말 나는 일단 너무 너무 바보였고 개발자 조차 아니였으며 멍청했습니다..빌드할 때마다 Xcode의 시스템 OS와 매번 캐시 폴더를 지우면서, 너무 비효율적인 방법을 반복했던 것이 지금 ..
2025. 12. 5. 02:39AI의 버그 찾기(서버 로그 vs 브라우저 로그)
VSCode의 Copilot(Claude Haiku 4.5)을 사용하여 프로젝트 내 오류를 해결한 적이 있는데 그 과정에서 알게 된 내용들을 정리 Claude Haiku는 다음과 같은 순서로 에러 로그를 확인했다.# 서버 시작 & 로그를 파일에 저장하면서 백그라운드에서 실행pnpm start:mock > /tmp/my-project.log 2>&1 &# 컴파일 완료까지 대기sleep 8# 서버 준비됐는지 확인grep "ready" /tmp/my-project.log | tail -1# 에러가 있는지 확인tail -30 /tmp/ciet.log | grep -E "error|Error"# 실행 중인 서버 종료(실행 중이지 않을 경우에도 계속 진행하기 위해 || true를 붙임)pkill -f "pnpm s..
2025. 12. 3. 20:49TypeScript Discriminated Union(구별된 유니온) 패턴 적용하기
토스트 모달을 띄우는 zustand 스토어에서 다음과 같이 타입 안전성을 보장할 수 있음을 알게 되었다.type OpenState = { isOpen: true; // 리터럴 타입 title: string; description: string;};type CloseState = { isOpen: false; // 리터럴 타입};type State = CloseState | OpenState; // 유니온 타입 사용// ex: isOpen이 true이면 자동으로 OpenState로 좁혀짐if (state.isOpen) { state.title; // TypeScript가 자동으로 OpenState로 좁혀서 title이 존재함을 보장 state.description; // 마찬가지로 안전하게 ..
2025. 11. 19. 18:13Vite를 사용하는 이유, Vite Public 디렉토리 선택 기준
1. Vite로 개발하는 이유기존 번들러(Webpack 등)는 프로젝트 코드 전체를 미리 번들링하고(JS 하나로), 개발서버가 이 결과물을 서빙하기 때문에 서버 시작이 느렸음."webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 입니다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다."출처: https://webpack.kr Vite를 사용해야 하는 이유Vite는 자체적으로 개발서버와 빌드시스템을 제공하는 빌드 도구1.1. 개발 환경에서는 Native ESM과 esbuild를 사용함vite는 애플리케이션의 모듈을 디펜던시와 소스 코드 두 가지 카테고리로 나누어 개발 서버의 시..
2025. 11. 17. 21:55VSCode, Cursor - TypeScript 경로 별칭(@) 자동 import가 안 될 때
VS Code/Cursor에서 @/components 같은 경로 별칭을 설정한 상황에서cmd + . 단축키로 import를 추가할 때 ./components처럼 상대 경로로 가져와지는 문제를 겪었다.문제 상황리액트 프로젝트에서 TypeScript 경로 별칭(path alias)을 설정한 상황:{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }}export default defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, },});위와 같이 설정하였고, 코드에서도 @/components/ui/..
2025. 10. 30. 02:33form submit 동작 방식 정리(HTML, React18, React19)
React 19부터는 태그의 action 속성에 함수를 직접 전달할 수 있게 되면서, 폼 제출 방식이 변경됐다.HTML, React 18, React 19 세 가지 방식의 동작 차이를 비교 정리한 내용이다.1. 기본 HTML form 태그 action의 동작 방식:표준 HTML에서 action 속성은 URL 문자열을 받음. 따라서 submit 시 브라우저가 그 URL로 요청을 보냄1) 전통적 방식 (서버로 바로 제출) 전송브라우저가 /submit로 네비게이션(페이지 이동)하며 데이터를 제출2) 자바스크립트로 가로채서 함수에 넘기기 (AJAX) 전송+)만약 버튼별 목적지를 바꾸고 싶다면, 처럼 버튼의 formAction을 사용할 수 있음(표준 HTML).페이지 이동 없이 제출하고 싶다면 반드시..
2025. 10. 28. 17:45브라우저 엔진, 자바스크립트 엔진
개념 정리하기브라우저 엔진 (렌더링 엔진)웹페이지의 HTML과 CSS를 파싱하고 해석하여 화면에 실제로 배치하고 그려주는(렌더링) 역할을 함.종류:Blink (Chrome, Edge 등)WebKit (Safari)Gecko (Firefox)자바스크립트 엔진자바스크립트 코드를 해석하고 실행 가능한 기계어 코드로 변환하여 실행하는 엔진. 브라우저나 Node.js 같은 런타임 환경 내에서 동작하며, 각각의 환경이 제공하는 API를 통해 웹페이지나 서버 프로그램의 JavaScript를 실행함.종류:V8 (Chrome, Edge, Node.js 등)JavaScriptCore (Safari)SpiderMonkey (Firefox)두 엔진의 관계브라우저 엔진이 HTML과 CSS를 처리하여 페이지의 구조(DOM)를 만..
2025. 10. 22. 01:43