본문 바로가기

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

Development61

[Next.js] tailwind CSS 로컬 폰트 적용 (feat. Type '{ children: Element[]; className: string; }' is not assignable to type) next.js + tailwind CSS프로젝트에서 글씨체를 적용 하는 방법해당 게시글은 다음 기술 스택을 기반으로 합니다.- next.js v15 pages-router- react v19- typescript- tailwindCSS- shadcnUI프로젝트에서 사용하는 pretendard를 예시로 작성합니다. Optimizing: Fonts | Next.jsOptimize your application's web fonts with the built-in `next/font` loaders.nextjs.org Pretendard 파일을 다운로드 합니다.https://cactus.tistory.com/306해당 프로젝트에서는 폰트 경량화를 위해 .woff2 확장자 파일을 다운로드 했습니다.다음 경로에.. 2025. 3. 14.

[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.

[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.

[Electron] SyntaxError: Cannot use import statement outside a module 오류 다음과 같은 오류들이 뜨면서(경고창) electron 앱이 실행되지 않음. (node:29788) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use `electron --trace-warnings ...` to show where the warning was created) App threw an error during load D:\\2023\\march\\realPractice\\login\\public\\electron.js:1 import * as operator from './script/operator.js' ^^^^^^ SyntaxError: Canno.. 2023. 6. 17.

[Redux] Redux 기초 - 생활코딩 action을 통해 action을 dispatch에 전달하고 reducer가 state값을 갱신하고 dispatch가 subscribe하고있는 함수들을 호출해 state값을 참조하여 UI를 바꿔줌 state type State = any 저장소(store)에 의해 관리됨 getState()에 의해 반환되는 하나의 상태값 action type Action = Object 어떤 작업을 할지 설명해주는 자바스크립트 순수 객체 store에 데이터를 넣는 유일한 방법 UI 이벤트에서 왔든, 네트워크 콜백에서 왔든, 웹소켓과 같은 다른 소스에서 왔든 모든 데이터는 액션으로써 보내짐 reducer type Reducer = (state: S, action: A) => S 누적값과 값을 받아 새로운 누적값을 반환하는 .. 2023. 6. 16.

[Node.js] Node.js Modules | childProcess, spawn, stdout, stderr, fs, path, yargs, properties-reader, Buffer Node.js modules 🗨️ ChildProcess ✅ ChildProcess 개념 Node.js 프로세스 내에서 다른 프로세스를 실행하고 그와 상호 작용하는 기능을 제공하는 모듈 Node.js에서 표준 라이브러리로 제공 exec(), spawn(),fork() 등의 함수를 제공 exec() 함수는 셸 명령어를 실행하고 해당 결과를 버퍼링 spawn() 새로운 프로세스를 만들고 그 프로세스와의 표준 입출력 스트림을 제공 fork() spawn() 함수와 유사하지만, 부모 프로세스와 자식 프로세스 간에 통신할 수 있는 IPC 채널을 자동으로 설정 ChildProcess 모듈을 사용하면 Node.js 프로세스 내에서 다른 프로그램을 실행하고 그 결과를 받아올 수 있음 Node.js 어플리케이션에서 외부.. 2023. 6. 16.

[Electron] ipcRenderer.invoke & ipcMin.handle IpcRenderer.invoke 💡 Electron에서 주로 사용되는 메서드 중 하나. ipcRenderer 객체는 렌더러 프로세스에서 사용되며, 주로 메인 프로세스와의 비동기적인 통신을 위해 사용. ipcRenderer.invoke는 메인 프로세스에 비동기적인 요청을 보내고 결과를 받기 위해 사용. 이 메서드는 Promise를 반환하며, 메인 프로세스에서 처리되고 완료된 후에 Promise 결과가 렌더러 프로세스에 전달. ipcRenderer.invoke 를 사용할 때는 메인 프로세스에서 해당 요청을 처리할 때 ipcMain.handle을 사용하여 요청을 처리하고 결과를 반환 예제 // 렌더러 프로세스에서의 예제 코드 const { ipcRenderer } = require('electron'); a.. 2023. 6. 15.

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

티스토리툴바