[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:13CJS(CommonJS) vs ESM(ECMAScript Modules) 정리
CJS, ESM은 자바스크립트에서 모듈을 관리하고 불러오는 방식이다.구분CommonJS (CJS)ECMAScript Modules (ESM)도입 배경Node.js 환경을 위해 설계된 비표준 모듈 시스템JavaScript 공식 표준(ES6)에서 도입된 모듈 시스템문법require(), module.exportsimport, export, import() (동적 로딩 가능)로딩 방식동기적 로딩- require() 호출 시 즉시 평가비동기적 해석 기반 로딩- 정적 import: 모듈 그래프를 비동기적으로 해석 후, 모든 의존성 로드가 끝나면 의존성 순서대로 평가됨 (로드는 비동기, 실행은 동기적)- 동적 import(): 런타임에 Promise 기반으로 비동기 로드 및 평가모듈 해석 시점런타임 해석(동적)→ ..
2025. 11. 18. 20:57Vite를 사용하는 이유, Vite Public 디렉토리 선택 기준
1. Vite로 개발하는 이유기존 번들러(Webpack 등)는 프로젝트 코드 전체를 미리 번들링하고(JS 하나로), 개발서버가 이 결과물을 서빙하기 때문에 서버 시작이 느렸음."webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 입니다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다."출처: https://webpack.kr Vite를 사용해야 하는 이유Vite는 자체적으로 개발서버와 빌드시스템을 제공하는 빌드 도구1.1. 개발 환경에서는 Native ESM과 esbuild를 사용함vite는 애플리케이션의 모듈을 디펜던시와 소스 코드 두 가지 카테고리로 나누어 개발 서버의 시..
2025. 11. 17. 21:55헷갈리는 CSS Flex 속성 정리(grow, shrink, basis, margin auto 등)
1. 상위 요소(Flex Container)에 적용하는 속성display: flex vs display: inline-flexdisplay: flex는 block 요소처럼 자리를 차지함. 따라서 부모 너비 전체를 차지한다:display: inline-flex는 이름 그대로 inline 요소처럼 자리를 차지함. 따라서 컨텐츠 너비만큼만 차지한다:거의 대부분의 상황에서 flex를 사용하지만, 버튼 그룹, 태그 그룹, 배지 등에서는 inline-flex를 사용하는 것이 더 적절할 수 있다.정리하자면 독립적인 블록이 필요할 땐 flex, 다른 요소와 같은 줄에 있어야 하면 inline-flex를 사용하는 것이 좋다. 2. 하위 요소(Flex Item)에 적용하는 속성flex(grow, shrink, basis)..
2025. 11. 4. 19:01VSCode, 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