[기록][vscode] The window has crached(reason: 'oom', code: '-536870904')

2024. 5. 20. 09:10ㆍ카테고리 없음

728x90
반응형
SMALL

 

안녕하세요.

최근에 필자는 vue3 + spring boot 프로젝트를 진행하고 있습니다.

해당 포스팅은 궁금증 해소를 위해 기록하려고 합니다.

-------------------------------------

< 글의 순서 >

  1. vue - JavaScript heap out of memory시 에러 해결
  2. GitHub
  3. VSCode 설정
  4. ESLint
  5. Axios
  6. API
  7. 컴퓨터 메모리 부족 가상 메모리 파일 없음 설정 방법
1. vue - JavaScript heap out of memory시 에러 해결
feat.Windows에서 JavaScript 힙 메모리 부족 문제를 해결하는 방법

○ 작업환경 : window(RAM 8GB), vscode(Visual Studio Code), vue3, spring boot

○ 상황

vue 환경에서 Debug 모드에서 소스 수정을 하면 building 되면서

FAILE ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory 발생하면서 서버가 죽음

 

○ 오류 이유 : 메모리 부족으로 서버 다운됨

이 오류는 메모리가 부족한 시스템에서 Node.js 애플리케이션이나 V8 엔진(JavaScript 지원)을 사용하는 스크립트를 실행할 때 흔히 발생합니다.

 

해결방법

1. [Windows 설정] - [시스템] - [정보] - [고급 시스템 설정] - [고급] - [환경변수] - [시스템변수] - [새로 만들기] 눌러서 아래 설정을 등록합니다.

2. vscode > TERMINAL에 아래 명령어를 사용하여 node.js cmd에서 환경 변수를 확인합니다.

> node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))'

3. 1번 방법으로 환경변수가 작동하지 않으면 vscode > TERMINAL에 아래 명령어를 cmd에 입력합니다.

> $env:NODE_OPTIONS="--max-old-space-size=4096"

 

※ heap 할당 오류가 계속 되면 아래의 방법으로 Node가 ESLint 프로세스에 할당하는 기본 메모리를 늘릴 수 있습니다.

$env:NODE_OPTIONS="--max-old-space-size=1024" # 1GB 로 증가

$env:NODE_OPTIONS="--max-old-space-size=2048" # 2GB 로 증가

$env:NODE_OPTIONS="--max-old-space-size=3072" # 3GB 로 증가

$env:NODE_OPTIONS="--max-old-space-size=4096" # 4GB 로 증가

$env:NODE_OPTIONS="--max-old-space-size=5120" # 5GB 로 증가

$env:NODE_OPTIONS="--max-old-space-size=6144" # 6GB 로 증가

$env:NODE_OPTIONS="--max-old-space-size=7168" # 7GB 로 증가

$env:NODE_OPTIONS="--max-old-space-size=8192" # 8GB 로 증가

 

+ 내용 추가

  • eslint-bridge의 nodejs 프로세스는 기본적으로 1.4GB로 설정되어 충분하지 않습니다.
  • 터미널에 $env:NODE_OPTIONS="--max-old-space-size=8192" 로 메모리 설정을 하면 같은 메모리 부족으로 다운됩니다.
  • $env:NODE_OPTIONS="--max-old-space-size=4096"이 제일 최적화 되어 있으니 4GB로 늘리면 됩니다.
  • 많은 파일이나 플러그인과 함께 ESLint를 사용하면 메모리 부족 오류가 발생할 수 있습니다.
  • ESLint 명령을 실행하기 전에 DEBUG 플래그를 활성화하면 프로세스 전체에서 얼마나 많은 메모리가 사용되고 있는지 알 수 있습니다. 이는 와일드카드(DEBUG=*) 또는 좀 더 구체적인 디버그 문(DEBUG=typescript-eslint)일 수 있습니다.

 

힙 메모리란 무엇입니까?

오류 수정을 살펴보기 전에 힙 메모리가 무엇인지, 프로그램이 이를 어떻게 사용하는지 이해하는 것이 유용합니다.

시스템 힙에 할당된 메모리를 동적으로 할당된 메모리라고도 합니다. 사용 가능한 메모리를 적절하다고 생각하는 대로 사용하는 것은 프로그래머의 몫입니다. 더 중요한 것은 프로그램의 힙 크기가 프로그램에 할당된 사용 가능한 가상 메모리에 따라 다르다는 것입니다.

 

상대적으로 큰 프로젝트를 실행하는 경우 기본 할당 청크보다 더 많은 메모리가 필요할 수 있습니다. 이로 인해 프로젝트가 중단되고 "JavaScript 힙이 메모리 부족" 오류가 기록될 수 있습니다. Node.js의 힙 메모리 문제는 잘못된 페이지 테이블 크기 및 함수 호출 스택 문제로 인해 발생할 수도 있습니다.

시도한 방법(실패함)

.npmrc 파일에 아래 명령어 추가

node-options=--max-old-space-size=8192

그외 명령어
명령어
설명
> npm install --force
npm 설치, --force 옵션으로 충돌 우회
> npm run serve
뷰 프로젝트 띄우기
=> 'vue-cli-service'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다.
명령어 실행 시 에러 발생
> npm uninstall vue-cli -g
> npm install -g @vue/cli
Vue CLI 재설치
> npm i
node_module 폴더 삭제 후 재설치
> npm cache clean --force
npm의 cache를 모조리 삭제하는 명령어
> npm cache verify
cache 폴더의 내용을 확인하고, 가비지 데이터들을 수집하여 삭제하고 무결성을 확인한다. 즉 cache에서 꼬인 부분을 체크 및 해결하는 명령어
> node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))'
힙이 초과할 수 없는 절대 제한
> npx browserlist@latest --upgrade-db
browserslist에 관한 경고문, 처음엔 warning으로 시작하지만 나중에는 fail이 되어 동작을 멈출수 있다고 하여 실행함.
> npm install eslint --save-dev
eslint 설치
> npm install axios
axios 설치
> npm install --no-audit
npm audit는 각 패키지들이 가진 취약점을 체크해주는 로직이 들어 왔다는 의미입니다.
해당 audit 옵션을 쓰지 않겠다는 옵션을 실행하면 됩니다.
// npm
> npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic


// yarn
> yarn add @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
CKEditor5 라이브러리 설치
2. GitHub

수정한 소스를 Stage Chagnes 에 올리고 수정한 내용에 대해서 Message를 작성하고 상단의 체크를 선택하여 Commit

하단에 상태 변경된 것을 확인하고 클릭하면 GitHub에 소스가 Push 된다.

에러메시지

Make sure you configure your 'user.name/ and 'useer.email' in git. : GitHub와 git 연동 오류

Terminal에 사용자 정보를 설정하는 명령어를 실행시킨다.

> git config --global user.name "사용자 이름"

> git config --global user.email "사용자메일 주소"

 

Please clean your repository working tree before checkout : 본인이 수정한 코드와 다수가 수정한 코드가 변경되면서 충돌 발생된 경우

Terminal에서 git stash를 작성해서 Pull을 받으면 된다.

 

○ 터미널 클리어 명령어 : F1이나 ctrl + shift + p를 눌러서 명령줄을 띄우고 Terminal: Clear를 클릭하면 된다.

3. VSCode 설정

1. Git Clone 하기

1) VSCode 실행 > Extensions에서 GitHub Repositories install

2) Command Palette 오픈 : Ctrl + Shift + P or 상단바 View > Command Palette

3) Git Clone 입력 후, Git 주소 붙여넣기

4) 프로젝트 Clone Reop URL 입력시 Git 인증 팝업

5) Token Code 입력 > git Access Token 입력(중요)

 

git Token 확인방법

1) github 프로젝트 접속

2) User > Settings > Developer settings > Persnal access tokens 메뉴에서 발급하며, Expiration은 무제한으로, Select scopes는 전체를 선택하여 생성한다.

4. ESLint

ESLint란 ?

ESLint는 원래 Nicholas C. Zakas가 2013년 6월에 만든 오픈 소스 Javascript 린팅 유틸리티입니다. 특정 스타일 지침을 따르지 않는 문제가 있는 패턴이나 코드를 찾는 데 자주 사용됩니다. ESLint는 Node.js를 사용하여 작성되어 npm을 통해 빠른 런타임 환경과 손쉬운 설치를 제공합니다.

 

ESLint를 사용하는 이유

ESLint는 코드 품질과 일관성을 유지하는데 도움을 줍니다.

ESLint는 JavaScript 코드에서 구문 오류, 서식 문제, 코드 스타일 위반 및 잠재적인 버그와 같은 일반적인 문제를 확인하는 정적 코드 분석 도구입니다.

 

ESLint 작동 방식

ESLint는 코드를 구문 분석하고 구성하거나 사용자 정의할 수 있는 일련의 규칙을 적용하여 작동합니다. 이러한 규칙은 모범 사례, 코딩 표준 또는 사용자 고유의 기본 설정을 기반으로 할 수 있습니다. ESLint는 일부 문제를 자동으로 수정하거나 적용할 솔루션을 제안할 수도 있습니다. 명령줄에서 ESLint를 실행하거나 편집기, IDE 또는 빌드 도구와 통합할 수 있습니다. ESLint는 TypeScript, React, Vue, Prettier 등과 같은 다양한 기능과 프레임워크를 지원하기 위해 다양한 플러그인, 파서 및 포맷터와 함께 작동할 수도 있습니다.

 

코드 품질이 중요한 이유

코드 품질은 단지 코드를 보기 좋고 깔끔하게 만드는 것만이 아닙니다. 또한 코드를 더 읽기 쉽고, 유지 관리하기 쉽고, 안정적으로 만드는 것입니다. 코드 품질은 생산성, 성능 및 보안에 영향을 미칠 수 있습니다. ESLint를 사용하면 코드가 일관되고 명확한 규칙을 따르고, 일반적인 오류와 함정을 피하고, 모범 사례와 표준을 준수하는지 확인할 수 있습니다. 이렇게 하면 코드를 더 쉽게 이해하고 디버그하고 리팩터링하고 테스트할 수 있습니다. 또한 기능과 사용자 경험을 손상시킬 수 있는 일부 버그와 취약점을 방지할 수도 있습니다.

 

코드 일관성이 중요한 이유

코드 일관성은 단순히 코드베이스 전체에서 동일한 규칙과 스타일을 따르는 것이 아닙니다. 또한 코드가 다른 코드 및 도구와 호환되고 상호 운용 가능한지 확인하는 것입니다. 코드 일관성은 협업, 통합 및 확장성에 영향을 미칠 수 있습니다. ESLint를 사용하면 코드가 파일, 모듈 및 구성 요소 전체에서 동일한 형식, 구조 및 논리를 따르도록 할 수 있습니다. 이렇게 하면 코드를 더 쉽게 공유하고, 재사용하고, 확장할 수 있습니다. 또한 다양한 코딩 스타일과 접근 방식으로 인해 발생할 수 있는 일부 충돌과 문제를 방지할 수도 있습니다.

 

ESLint를 사용자 정의하는 방법

ESLint의 뛰어난 기능 중 하나는 사용자 정의가 가능하고 유연하다는 것입니다. 구성 파일을 수정하거나 명령줄 옵션을 사용하여 필요와 선호도에 맞게 ESLint를 조정할 수 있습니다. 또한 규칙을 추가 또는 제거하고, 규칙의 심각도나 옵션을 변경하거나, 사용자 정의 규칙을 만들 수도 있습니다. 또한 다양한 플러그인, 파서 및 포맷터를 사용하여 다양한 기능 및 프레임워크에 대한 지원을 활성화하거나 향상시킬 수 있습니다. 코드에 주석이나 지시어를 사용하여 특정 줄이나 블록에 대한 특정 규칙을 비활성화하거나 활성화할 수도 있습니다.

 

언제 사용하나요?

솔직히 프로젝트 규모나 팀에 관계없이 사용하는 것을 선호합니다. 그러나 중대형의 중요하지 않은 Javascript/Typescript 프로젝트 또는/그리고 처리해야 할 개발자 팀이 꽤 있는 경우에는 이를 사용하는 것을 고려해야 합니다. 두 경우 모두 일반적인 표준 코딩 방식/지침을 적용해야 합니다.

ESLint와 같은 린팅 도구를 사용하면 개발자는 JavaScript 코드를 실행하지 않고도 문제를 발견할 수 있습니다. ESLint가 만들어진 주요 이유 중 하나는 개발자가 자신만의 Linting 규칙을 만들 수 있도록 하기 위해서였습니다. Javascript/Typescript에서 실행되는 모든 애플리케이션에서 ESLint를 사용할 수 있습니다.

5. Axios

Axios가 필요한 이유

먼저 Axios와 같은 라이브러리를 사용해야 하는 이유를 이해해 보겠습니다. JavaScript는 이미 API와 상호 작용하기 위한 XMLHttpRequest 및 Fetch API와 같은 내장 개체를 제공합니다.

 

이러한 내장 객체와 달리 Axios는 HTTP를 통해 API 호출을 수행하기 위해 애플리케이션에 포함해야 하는 오픈 소스 라이브러리입니다. 이는 Fetch API와 유사하며 JavaScript Promise 객체를 반환하지만 많은 강력한 기능도 포함합니다.

 

Axios의 중요한 기능 중 하나는 동형 특성입니다. 즉, 동일한 코드베이스를 사용하는 서버 측 Node.js 애플리케이션뿐만 아니라 브라우저에서도 실행할 수 있습니다.

 

Axios는 일반 JavaScript뿐만 아니라 React, Vue.js, Angular와 같은 고급 JavaScript 프레임워크에서도 사용할 수 있는 Promise 기반 HTTP 클라이언트이기도 합니다.

 

IE 8 이상에 대한 지원을 포함하여 모든 최신 브라우저를 지원합니다.

  • Axios는 서버와 웹 브라우저에서 실행되는 JavaScript 프로그램에서 REST API를 호출하기 위한 HTTP 클라이언트입니다.
  • require('axios')를 호출하여 axios의 기본 인스턴스를 생성합니다.
  • axios의 create() 메서드를 사용하여 axios의 기본 인스턴스를 재정의하여 'timeout'과 같은 기본 구성 속성을 재정의할 수 있는 새 인스턴스를 만들 수 있습니다.
  • Axios를 사용하면 여러 API에 공통적인 작업을 수행할 수 있는 axios 인스턴스에 요청 및 응답 인터셉터를 연결할 수 있습니다.
  • 오류 조건은 Promise 응답의 catch() 함수에서 처리됩니다.
  • AbortController 클래스의 abort() 메서드를 호출하여 요청을 취소할 수 있습니다.
6. API

API란 무엇입니까? 왜 필요한가요?

API는 "Application Programing Interface"의 약자로, 두 응용 프로그램이 서로 통신할 수 있도록 하는 소프트웨어 중개자입니다. API는 개발자가 새로운 애플리케이션 구성요소를 기존 아키텍처에 통합하는 방법을 단순화하고 비즈니스 팀과 IT 팀이 협업하는 데 도움을 줍니다. 비즈니스 요구사항은 끊임없이 변화하는 디지털 시장에 대응하여 빠르게 변화하는 경우가 많습니다. 새로운 경쟁자가 새로운 앱으로 전체 산업을 변화시킬 수 있기 때문입니다.

7. 컴퓨터 메모리 부족 가상 메모리 파일 없음 설정 방법

 

참조

이상으로 [기록][vscode] The window has crached(reason: 'oom', code: '-536870904') 포스팅을 마치겠습니다.

감사합니다.

 

반응형
LIST

티스토리툴바