본문 바로가기

프론트엔드111

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.
Fetch API Fetch APIFetch API는 JavaScript에서 네트워크 요청을 보내고 데이터를 가져오기 위해 사용하는 표준화된 인터페이스입니다. 주로 HTTP 요청을 보내 서버와 통신하거나 데이터를 가져오는 작업에 사용됩니다. 이전에 사용되던 XMLHttpRequest에 비해 더 직관적이고 간결한 문법을 제공합니다.특징Promise 기반:fetch는 Promise를 반환하므로, 비동기 작업을 간편하게 처리할 수 있습니다.async/await 문법과 함께 사용하기에 적합합니다.모듈화된 설계:요청과 응답을 Request와 Response 객체로 캡슐화하여 작업을 명확히 분리합니다.확장 가능성:다양한 옵션을 통해 HTTP 메서드, 헤더, 본문 등을 설정할 수 있습니다.기본 JSON 처리:응답 데이터를 JSON으로.. 2025. 1. 4.
초간단 서버 클라이언트 예시 초간단 서버 클라이언트 예시 서버와 클라이언트 이해를 위해 초 간단 예시를 만들어본다.Step 1. node 설치node를 설치하지 않았다면 설치한다.설치유무는 터미널에서 node -v 를 입력하면 알 수 있다.node -vStep 2. 파일 구조'my-server', 'my-client' 라는 폴더를 만들고 각각 index.js를 생성한다.Step 3. 서버 제작my-server/index.js 에서는node의 http모듈을 가져와 server 인스턴스를 만들고, server가 3000번 포트를 열어 요청을 기다리는 기능을 만든다.const http = require("http"); // node의 http 모듈 가져오기const content = `HTTP Lecture`;const handler =.. 2025. 1. 3.

티스토리툴바