본문 바로가기

전체 글149

Vite 프로젝트 설정 파일 vite.config.js Vite 프로젝트 설정 파일 vite.config.js vite.config.js는 Vite 프로젝트의 설정 파일로, Vite의 동작을 커스터마이징할 수 있도록 다양한 옵션과 플러그인을 정의합니다.이 설정 파일은 JavaScript 또는 TypeScript로 작성할 수 있으며, 프로젝트의 루트 디렉토리에 위치합니다.1. 기본 구조vite.config.js는 Vite에서 제공하는 defineConfig 함수를 사용해 설정을 정의합니다.이 함수는 타입 지원과 자동 완성을 제공하여 사용 편의성을 높입니다. 예제 1export default { root: './src/', publicDir: '../public/', base: './', build: { outDir: '... 2025. 1. 17.
Vite 사용법 Vite 사용법 Vite는 현대 웹 개발을 위한 빌드 도구로, 빠른 개발 환경을 제공하는 것이 특징입니다. Vite는 ES 모듈을 기반으로 하여, 개발 중에는 즉시 모듈을 로드하고, 프로덕션 빌드 시에는 최적화된 번들을 생성합니다. 이로 인해 개발자는 빠른 피드백을 받을 수 있으며, 효율적인 작업이 가능합니다.Vite의 주요 특징빠른 시작: Vite는 개발 서버를 즉시 시작할 수 있어, 빠른 개발 사이클을 지원합니다 ES 모듈 지원: Vite는 ES 모듈을 기본으로 하여, 최신 자바스크립트 기능을 활용할 수 있습니다 핫 모듈 교체(HMR): 코드 변경 시 페이지를 새로 고치지 않고도 변경 사항을 즉시 반영할 수 있습니다 최적화된 빌드: 프로덕션 환경에서는 코드 스플리팅과 트리 쉐이킹을 통해 최적화된 번들.. 2025. 1. 17.
requestAnimationFrame vs setInterval requestAnimationFrame vs setInterval 이 두 가지는 JavaScript에서 반복적인 작업을 실행할 때 사용되지만, 주로 사용하는 목적과 작동 방식에 차이가 있습니다. 아래에서 자세히 비교해 보겠습니다.1. requestAnimationFrame목적:requestAnimationFrame은 브라우저에서 최적화된 방식으로 애니메이션을 실행하기 위해 사용됩니다.특징:**화면의 새로고침 빈도(FPS)**에 맞춰 콜백을 실행합니다.대부분의 모니터는 60Hz(초당 60프레임)로 작동하므로 약 16.67ms마다 콜백이 호출됩니다.브라우저가 현재 탭이 활성화된 경우에만 실행됩니다.탭이 비활성화되면 자동으로 중지되어 성능을 최적화합니다.타이밍은 브라우저가 조정하므로 정확한 프레임 동기화가 가.. 2025. 1. 12.
Node.js vs Express.js Node.js vs Express.js1. Node.jsNode.js는 JavaScript를 사용하여 서버 측 애플리케이션을 개발할 수 있게 해주는 런타임 환경입니다.주요 특징:Chrome V8 엔진 기반: Node.js는 빠른 JavaScript 실행 속도를 제공하는 Google Chrome의 V8 엔진 위에서 동작합니다.비동기 I/O: 이벤트 루프와 비동기 I/O를 사용해 높은 처리량을 지원하며, 파일 읽기, 네트워크 요청 등을 효율적으로 처리합니다.단일 스레드: 단일 스레드 기반으로 동작하면서도 비동기 방식으로 많은 요청을 처리할 수 있어, 경량 서버 개발에 적합합니다.npm (Node Package Manager): 방대한 오픈소스 라이브러리와 패키지를 제공하는 npm을 통해 애플리케이션 개발 속.. 2025. 1. 5.
Three.js vs Unity Three.js vs UnityThree.js와 Unity는 모두 3D 콘텐츠를 제작할 때 널리 사용되는 도구이지만, 그 사용 목적과 방식, 기술적인 특성에서 큰 차이점이 있습니다. 아래에 두 기술의 주요 특징을 비교하여 설명하겠습니다.1. 정의 및 사용 목적Three.js정의: JavaScript 기반의 3D 그래픽 라이브러리로, 웹 브라우저에서 3D 콘텐츠를 구현하기 위해 사용됩니다.사용 목적: 가볍고 커스터마이즈가 쉬운 웹 기반의 3D 애플리케이션, 데이터 시각화, 3D 웹사이트 제작 등에 적합합니다.예시 사용처: 제품 시각화, 인터랙티브 웹 경험, 3D 애니메이션.Unity정의: 강력한 게임 엔진으로, 2D/3D 게임 개발뿐만 아니라 VR/AR 콘텐츠, 시뮬레이션, 영화 등 다양한 응용 프로그램을.. 2025. 1. 5.
History API History APIHistory API는 JavaScript에서 브라우저의 세션 기록을 조작하거나 탐색할 수 있는 기능을 제공합니다. 이 API는 브라우저의 주소(URL)와 기록을 변경하거나 관리하는 데 사용되며, 웹 애플리케이션의 페이지 전환을 더 부드럽고 자연스럽게 만들어 줍니다. 이를 통해 새로고침 없이 URL을 업데이트하거나 브라우저의 뒤로 가기/앞으로 가기 버튼을 제어할 수 있습니다.History API 주요 메서드와 속성history.pushState(state, title, url)새 기록 항목을 추가합니다.브라우저 주소(URL)를 변경하지만 페이지를 다시 로드하지 않습니다.예:history.pushState({ id: 1 }, 'Title', '/new-page');history.repl.. 2025. 1. 4.

티스토리툴바