본문 바로가기

What would life be If we had no courage to attemp anything?

전체 글270

[Next.js] node.js 메모리 사용량 확인과 heap 메모리 제한 적용하기 node.js 메모리 사용량 확인과 heap 메모리 제한 적용하기현재 메모리 사용량을 확인하기 위해서는 next.js에서 server를 커스텀 하여 로그를 통해 확인할 수 있다.메모리 사용량을 알아내는 방법은 GPT의 도움을 받아 process.memoryUsage()를 통해 알 수 있다는 것을 확인했다. 1. process.memoryUsage의 중요 요소Node.js(Next.js) 애플리케이션 모니터링을 위한 메모리 인사이트 / if(kakaoAI)2024해당 컨퍼런스 내용이 내가 고민하고 있는 개념적인 부분을 다뤄주고 있었다. 1-1. 코드 적용// server.jsconst { createServer } = require('http');const { parse } = require('url');.. 2024. 12. 23.

[Next.js] Next.js의 기본 메모리 관리 구조 - node.js v8 Next.js의 기본 메모리 관리 구조Next.js는 Node.js 기반의 V8 엔진에서 실행된다.JavaScript는 싱글 스레드 언어이다. 따라서 V8 역시 자바스크립트의 Context 당 하나의 프로세스를 사용한다. 단, 서비스 워커를 사용하는 경우는 워커의 개수만큼 프로세스를 증식한다고 한다.실행중인 프로그램은 V8 프로세스에서 할당된 일정량의 메모리로 표현되는데, 이를 Resident set이라고 한다. 내부 구조는 아래 사진과 같다.사진에서 볼 수 있듯이 크게 힙 메모리와 스택 메모리로 관리 되는 것을 확인할 수 있다.1️⃣ 스택 메모리스택은 메모리 영역이고 V8마다 하나의 스택을 가진다. 스택에는 정적데이터(메서드와 함수 프레임, 원시 값, 객체 포인터)가 저장된다.V8의 스택 영역의 관리는.. 2024. 12. 22.

[Next.js] SWC를 활용하여 빌드 시간 단축하기 SWC를 활용하여 빌드 시간 단축하기 사내에서는 CI/CD 도구로 깃헙 액션을 사용하고 있다.백엔드와 다르게 프론트는 액션이 완료되는데 까지 전체적인 시간이 좀 더 소요되는 것을 확인할 수 있다. 현재 내가 개발하고 있는 프론트 환경에서 CI/CD 과정 중 가장 소요 시간이 긴 스탭은 빌드 후 도커 이미지를 만들어 ECR로 옮기는 시점이다. 그 중 CI 과정 중에서 프론트 프로젝트 빌드 시간과 ECR PUSH 타임이 대부분을 차지함을 확인 할 수 있다. ❓그렇다면,프론트 프로젝트 빌드 시간을 어떻게 줄일 수 있을까? Next.js 빌드 시간을 단축 하는 방법SWC 코드 압축 활성화: swcMinify: true를 설정해 빌드 시 SWC를 통해 코드를 압축하여 최적화.Webpack 캐싱 사용: W.. 2024. 11. 1.

[JavaScript] 마우스 및 휠 이벤트 (onMouseEnter, onMouseLeave, onWheel) [JavaScript] 마우스 및 휠 이벤트 (onMouseEnter, onMouseLeave, onWheel)회사 서비스를 구현 하면서 회사 자체 컴포넌트 툴팁 스펙때문에,마우스가 텍스트 위에 존재 하지 않음에도 휠 이벤트 발생시 툴팁이 계속 떠있는 현상이 발생하였다. 그래서 tooltip이 떠야 하는 텍스트에 onMouseEnter, onMouseLeave, onWheel 이벤트 핸들러들을 사용하여 이를 해결할 수 있었다. onMouseEnter 이벤트onMouseEnter 이벤트는 마우스 포인터가 특정 요소에 처음으로 들어갔을 때 발생하는 이벤트.이 이벤트는 사용자가 마우스를 요소 위로 이동시킬 때 트리거 된다.onMouseEnter는 해당 요소의 자식 요소에는 이벤트를 전파하지 않기 때문에 부모 .. 2024. 5. 20.

[JavaScript] 팝업 창 구현 - window.open [JavaScript] 팝업 창 구현 - window.open프로젝트에서 기획 명세를 바탕으로 독립된 팝업 창을 구현해야 했다.JavaScript의 window.open 메서드를 사용하여 팝업창을 구현하였다. window.open 메서드새 브라우저 창이나 탭을 열 때 사용하는 메서드window.open(url, windowName, [windowFeatures]);- url : 팝업 창에 로드할 페이지 URL- windowName : 팝업 창의 이름. 같은 이름을 가진 창이 이미 열려있다면 해당 창을 재사용.- windowFeatures : 팝업 창의 특성을 정의하는 문자열. 코드 예시약관 보기 Reference Window: open() method - Web APIs | MDNThe open() m.. 2024. 5. 20.

SQLD(국가 공인 SQL 개발자) - 비전공자 합격 후기 SQLD(국가 공인 SQL 개발자) - 비전공자 합격 후기 약 한달전인 2023년 6월 10일에 49회 sqld를 치뤘다. 시험은 막상 신청해두었지만 회사일이 갑자기 바빠지면서 잦은 야근으로 공부할 시간이 절대적으로 부족하게 되었다. 퇴근후 공부해보려 했으나 거의 하지 못했고, 시험 전주 토요일에 하루 공부하고 시험 전날 회사 업무를 쉴 수 있게 되어 그 날 밤새서 노란책 2회독하고 가서 시험을 보았다. sqld 시험 정보 SQLD 1과목 - 데이터 모델링의 이해 10문제 2과목 - SQL 기본 및 활용 40문제 문항별 점수 - 2점 과락 기준 - 과목별 40% 미만 합격 기준 - 60점 이상 시험시간 - 90분 기본 베이스 비전공자(의생명과학전공), 작년에 SSAFY교육 받으며 SQL문 기본 쿼리 작성.. 2023. 7. 1.

[Test Code] queryByText, findByText, getByText queryByText, findByText, getByText의 차이점 getByText, findByText, queryByText는 모두 react-testing-library 패키지에서 제공하는 함수로, 특정 텍스트를 가진 요소를 찾는 데 사용됩니다. 그러나 각 함수는 약간 다른 동작과 사용 사례를 가지고 있습니다. getByText: 동기적으로 요소를 찾는 함수입니다. 특정 텍스트를 가진 요소를 찾으면 해당 요소를 반환하고, 요소를 찾을 수 없는 경우에는 오류를 발생시킵니다. 주로 컴포넌트가 렌더링된 후에 특정 요소를 즉시 찾아야 하는 경우에 사용됩니다. 만약 요소가 없을 경우 테스트가 실패합니다. import { render, screen } from '@testing-library/react'.. 2023. 6. 29.

[Test Code] Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package) 원인 Error: Not implemented: HTMLCanvasElement.prototype.getContext 오류는 테스트 환경에서 getContext 메서드가 구현되지 않았을 때 발생합니다. 이 오류는 대개 테스트 환경에서 캔버스와 관련된 기능을 사용할 때 발생하는데, 테스트 코드에서 실제로 캔버스를 사용하려는 것이 아니라면 이 오류를 해결하는 방법이 있습니다. 😒궁금증 context 라는 것이 react의 context를 의미하는 것인가? HTMLCanvasElement.prototype.getContext 메서드의 "context"를 의미 HTMLCanvasElement.prototype.getContext 메서드는 HTML 캔버스 요소의 그리기 컨텍스트를 가져오는 메서드 이 메서드는 캔버.. 2023. 6. 29.

[API] graphql-request | GraphQLClient, request graphql-request GraphQL을 사용하여 서버와 통신하는 데 사용되는 간단한 JavaScript 라이브러리 GraphQL API를 호출하기 위해 사용 ✅ 필요한 것 headers - token, Content-Type query variables endpoint ⇒API URI GraphQLClient GraphQL 서버에 HTTP 요청을 보내고 응답을 받기 위해 사용 . GraphQLClient를 사용하여 GraphQL API 엔드포인트에 HTTP 요청을 보낼수 있음 이 클래스는 여러 가지 메서드를 제공. 가장 일반적인 메서드는 request메서드 request request메서드는 GraphQL 쿼리를 실행하고, 서버로부터 결과를 받는 데 사용 GraphQL API 엔드포인트 URL과 G.. 2023. 6. 29.

[Electron] electron앱 화면이 랜더링이 되지 않는 문제 문제점 2023.06.17 - [Development/Electron] - [Electron] SyntaxError: Cannot use import statement outside a module 위의 오류를 해결 후 electron앱을 실행했을 때, electron 앱은 켜지지만 화면이 랜더링 되지 않는 상태가 발생. 해결과정 Failed to compile. Module not found: Error: Can't resolve './App' in 'D:\\2023\\march\\realPractice\\login\\src' Did you mean 'App.js'? BREAKING CHANGE: The request './App' failed to resolve only because it was r.. 2023. 6. 18.

이전 1 2 3 4 ··· 27 다음

티스토리툴바