본문 바로가기

프론트엔드/javascript26

getter setter getter settergetter와 setter는 클래스에서 객체의 속성 값을 안전하게 가져오거나 설정할 수 있도록 도와주는 메서드입니다. 이를 통해 데이터의 무결성을 유지하고, 속성에 대한 추가적인 로직(예: 검증, 변환 등)을 적용할 수 있습니다.getter와 setter의 기본 개념getter: 클래스 속성 값을 가져올 때 사용하는 메서드입니다.setter: 클래스 속성 값을 설정할 때 사용하는 메서드입니다.JavaScript에서 get과 set 키워드를 사용하여 정의합니다.기본 예제class Person { constructor(name, age) { this._name = name; // 언더스코어(_)를 붙여 직접 접근을 방지 this._age = age; .. 2025. 2. 2.
try catch try catchtry...catch 문은 예외 처리(Exception Handling)를 위해 사용됩니다. 코드 실행 중 오류가 발생하면 try 블록에서 예외가 감지되고, catch 블록에서 해당 예외를 처리할 수 있습니다. 이를 통해 프로그램이 예상치 못한 오류로 인해 중단되는 것을 방지할 수 있습니다.try...catch 문 기본 구조try { // 오류가 발생할 가능성이 있는 코드} catch (error) { // 오류가 발생했을 때 실행되는 코드} finally { // 선택적으로 사용 가능하며, 오류 발생 여부와 관계없이 실행됨}finally 블록은 예외 발생 여부와 상관없이 실행되는 부분으로, 주로 리소스 정리 등에 사용됩니다.fetch와 async/await을 활용한 예제.. 2025. 2. 2.
requestpointerlock API requestpointerlock APIrequestPointerLock는 웹 브라우저에서 마우스 포인터를 특정 요소에 고정하고, 마우스 이동을 JavaScript에서 직접 제어할 수 있도록 하는 메서드입니다. 주로 3D 게임, 360도 뷰어, 마우스 드래그 기반 애플리케이션에서 사용됩니다.사용법element.requestPointerLock();여기서 element는 마우스 포인터를 고정할 HTML 요소입니다.Pointer Lock 동작 방식element.requestPointerLock()을 호출하면 브라우저가 마우스 포인터를 숨기고, 특정 요소에 포커스를 맞춥니다.이후 mousemove 이벤트에서 마우스의 상대적 이동 값을 감지할 수 있습니다.사용자가 Esc 키를 누르거나 document.exitP.. 2025. 1. 31.
Web Crypto API Web Crypto APIWeb Crypto API는 브라우저에서 암호화 작업을 수행하기 위한 JavaScript API입니다. 데이터를 암호화하거나 복호화하고, 해시를 생성하며, 디지털 서명이나 인증을 처리할 수 있는 기능을 제공합니다. 이 API는 보안적으로 안전한 방식으로 설계되었으며, 민감한 데이터를 처리하는 웹 애플리케이션에 적합합니다.특징브라우저 내장: 별도의 라이브러리를 설치하지 않아도 사용 가능.보안성: 암호학적으로 강력한 난수 생성 및 암호화 알고리즘 사용.Promise 기반: 비동기로 동작하여 메인 스레드의 차단을 방지.주요 작업:데이터 암호화/복호화해시 생성키 생성 및 관리디지털 서명 및 검증사용되는 사례데이터 암호화:사용자의 민감한 데이터를 클라이언트에서 암호화한 후 서버로 전송.사.. 2025. 1. 19.
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.