티스토리

무찌르자 단팥빵

검색하기

블로그 홈

무찌르자 단팥빵

dimorin.tistory.com/m

(먹어서)무찌르자 단팥빵

구독자: 1

방명록 방문하기

주요 글 목록

getter setter getter settergetter와 setter는 클래스에서 객체의 속성 값을 안전하게 가져오거나 설정할 수 있도록 도와주는 메서드입니다. 이를 통해 데이터의 무결성을 유지하고, 속성에 대한 추가적인 로직(예: 검증, 변환 등)을 적용할 수 있습니다.getter와 setter의 기본 개념getter: 클래스 속성 값을 가져올 때 사용하는 메서드입니다.setter: 클래스 속성 값을 설정할 때 사용하는 메서드입니다.JavaScript에서 get과 set 키워드를 사용하여 정의합니다.기본 예제class Person { constructor(name, age) { this._name = name; // 언더스코어(_)를 붙여 직접 접근을 방지 this._age = age; .. 공감수 1 댓글수 1 2025. 2. 2.
try catch try catchtry...catch 문은 예외 처리(Exception Handling)를 위해 사용됩니다. 코드 실행 중 오류가 발생하면 try 블록에서 예외가 감지되고, catch 블록에서 해당 예외를 처리할 수 있습니다. 이를 통해 프로그램이 예상치 못한 오류로 인해 중단되는 것을 방지할 수 있습니다.try...catch 문 기본 구조try { // 오류가 발생할 가능성이 있는 코드} catch (error) { // 오류가 발생했을 때 실행되는 코드} finally { // 선택적으로 사용 가능하며, 오류 발생 여부와 관계없이 실행됨}finally 블록은 예외 발생 여부와 상관없이 실행되는 부분으로, 주로 리소스 정리 등에 사용됩니다.fetch와 async/await을 활용한 예제.. 공감수 1 댓글수 3 2025. 2. 2.
requestpointerlock API requestpointerlock APIrequestPointerLock는 웹 브라우저에서 마우스 포인터를 특정 요소에 고정하고, 마우스 이동을 JavaScript에서 직접 제어할 수 있도록 하는 메서드입니다. 주로 3D 게임, 360도 뷰어, 마우스 드래그 기반 애플리케이션에서 사용됩니다.사용법element.requestPointerLock();여기서 element는 마우스 포인터를 고정할 HTML 요소입니다.Pointer Lock 동작 방식element.requestPointerLock()을 호출하면 브라우저가 마우스 포인터를 숨기고, 특정 요소에 포커스를 맞춥니다.이후 mousemove 이벤트에서 마우스의 상대적 이동 값을 감지할 수 있습니다.사용자가 Esc 키를 누르거나 document.exitP.. 공감수 1 댓글수 1 2025. 1. 31.
Web Crypto API Web Crypto APIWeb Crypto API는 브라우저에서 암호화 작업을 수행하기 위한 JavaScript API입니다. 데이터를 암호화하거나 복호화하고, 해시를 생성하며, 디지털 서명이나 인증을 처리할 수 있는 기능을 제공합니다. 이 API는 보안적으로 안전한 방식으로 설계되었으며, 민감한 데이터를 처리하는 웹 애플리케이션에 적합합니다.특징브라우저 내장: 별도의 라이브러리를 설치하지 않아도 사용 가능.보안성: 암호학적으로 강력한 난수 생성 및 암호화 알고리즘 사용.Promise 기반: 비동기로 동작하여 메인 스레드의 차단을 방지.주요 작업:데이터 암호화/복호화해시 생성키 생성 및 관리디지털 서명 및 검증사용되는 사례데이터 암호화:사용자의 민감한 데이터를 클라이언트에서 암호화한 후 서버로 전송.사.. 공감수 1 댓글수 1 2025. 1. 19.
requestAnimationFrame vs setInterval requestAnimationFrame vs setInterval 이 두 가지는 JavaScript에서 반복적인 작업을 실행할 때 사용되지만, 주로 사용하는 목적과 작동 방식에 차이가 있습니다. 아래에서 자세히 비교해 보겠습니다.1. requestAnimationFrame목적:requestAnimationFrame은 브라우저에서 최적화된 방식으로 애니메이션을 실행하기 위해 사용됩니다.특징:**화면의 새로고침 빈도(FPS)**에 맞춰 콜백을 실행합니다.대부분의 모니터는 60Hz(초당 60프레임)로 작동하므로 약 16.67ms마다 콜백이 호출됩니다.브라우저가 현재 탭이 활성화된 경우에만 실행됩니다.탭이 비활성화되면 자동으로 중지되어 성능을 최적화합니다.타이밍은 브라우저가 조정하므로 정확한 프레임 동기화가 가.. 공감수 0 댓글수 0 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을 통해 애플리케이션 개발 속.. 공감수 0 댓글수 0 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.. 공감수 1 댓글수 0 2025. 1. 4.
Fetch API Fetch APIFetch API는 JavaScript에서 네트워크 요청을 보내고 데이터를 가져오기 위해 사용하는 표준화된 인터페이스입니다. 주로 HTTP 요청을 보내 서버와 통신하거나 데이터를 가져오는 작업에 사용됩니다. 이전에 사용되던 XMLHttpRequest에 비해 더 직관적이고 간결한 문법을 제공합니다.특징Promise 기반:fetch는 Promise를 반환하므로, 비동기 작업을 간편하게 처리할 수 있습니다.async/await 문법과 함께 사용하기에 적합합니다.모듈화된 설계:요청과 응답을 Request와 Response 객체로 캡슐화하여 작업을 명확히 분리합니다.확장 가능성:다양한 옵션을 통해 HTTP 메서드, 헤더, 본문 등을 설정할 수 있습니다.기본 JSON 처리:응답 데이터를 JSON으로.. 공감수 0 댓글수 0 2025. 1. 4.
require requirerequire는 JavaScript에서 모듈을 가져오는 데 사용되는 함수로, 주로 Node.js 환경에서 사용됩니다. 이를 통해 다른 파일에서 정의된 코드나 외부 라이브러리를 현재 파일에 가져와 사용할 수 있습니다.기본 사용법const 모듈이름 = require('모듈경로');// 모듈이름 : 불러온 모듈을 저장할 변수// 모듈경로 : 불러오고자 하는 모듈의 경로. 내장 모듈, 로컬 파일, 또는 npm 패키지를 지정할 수 있음모듈의 종류내장 모듈 : Node.js에 기본적으로 포함된 모듈, fs http, path 등로컬 모듈 : 프로젝트 내에서 작성한 JavaScript 파일로, 상대 경로를 사용하여 불러옴npm 패키지 : npm을 통해 설치한 외부 라이브러리로, 패키지 이름만으로 불러올 .. 공감수 1 댓글수 2 2025. 1. 3.
PerformanceAPI PerformanceAPI Performance API는 웹 브라우저에서 애플리케이션의 성능을 측정하고 분석할 수 있도록 도와주는 API입니다. 이 API를 사용하면 페이지 로드 시간, 자원 로딩 시간, 사용자 인터랙션 지연 시간 등을 측정하여 성능 병목 현상을 파악할 수 있습니다.주요 구성 요소와 사용법Performance 인터페이스performance 객체를 통해 접근할 수 있습니다.performance.now(): 고해상도 타이머로 현재 시간을 밀리초 단위로 반환합니다.예: const start = performance.now();performance.timeOrigin: 페이지 로드가 시작된 기준 시간(Unix epoch)을 반환합니다.타이밍 데이터Navigation Timing:페이지 로드 성능.. 공감수 0 댓글수 0 2024. 12. 31.
Querystring QueryString QueryString(쿼리 문자열) 개념**QueryString(쿼리 문자열)**은 URL에서 데이터를 전달하기 위해 사용되는 문자열입니다. 이는 일반적으로 URL의 끝에 붙으며, ?로 시작하고, 여러 개의 키-값 쌍이 &로 연결되어 있습니다. 웹 애플리케이션은 QueryString을 사용하여 서버와 클라이언트 간 데이터를 주고받거나 특정 페이지를 동적으로 구성합니다.QueryString의 구조URL에서 QueryString은 다음과 같은 구조를 가집니다:https://example.com/page?key1=value1&key2=value2?: QueryString의 시작을 나타냄.key1=value1: 첫 번째 키-값 쌍.&: 여러 키-값 쌍을 구분.key2=value2: 두 번째.. 공감수 0 댓글수 1 2024. 12. 29.
jquery 확장 메서드 jquery 확장 메서드 [셀렉터를 이용한 확장 메소드] 문법 : $.fn.메소드명 사용방법 : $(selector).메소드명()$.fn.HTMLTagRestore = function(){ var value = this.val(); if(this.is("input") || this.is("textarea")){ this.val(value.replaceAll('a', 'A').replaceAll('b', 'B')); } return this; // 함수 체인 }; $("input").on('input',function(){ $(this).HTMLTagRestore(); }); $("input").HT.. 공감수 0 댓글수 1 2024. 7. 6.
한글 입력시 이벤트 중복 호출 해결 방법 한글 입력시 이벤트 중복 호출 해결 방법 cjk(중국어, 일본어, 한국어) 문자는 브라우저에서 처리하는 과정이 한 단계 더 필요하다. 따라서 한국어 입력시 이벤트가 중복 호출되는 현상이 생긴다. 이를 해결하기 위해 isComposing 이라는 이벤트 속성을 사용한다. isComposing 은 글자가 조합 중인지 boolean을 반환한다. 아래는 isComposing 사용 예시다. const inputEl = document.querySelector('input'); inputEl.addEventListener('keydown', event => { if(event.key === 'Enter' && !event.isComposing){ console.log(event.isComposing); console.. 공감수 1 댓글수 0 2024. 3. 9.
부동소수점 오류 현상 부동소수점 오류 현상 const a = 0.1; const b = 0.2; console.log(a+b); // 0.30000000000000004 소수점이 있는 실수를 이진수로 표현할 때 이진수로 표현하지 못하는 소수가 발생하여 컴퓨터는 가장 근사치의 값이 저장된다. 고정 소수점 또는 부동 소수점 을 사용해 이를 해결한다. 부동 소수점을 표현하는 방식으로 일반적으로 IEEE에서 표준으로 제안한 방식을 사용한다.( 부호비트(1bit), 지수비트(8bit), 가수비트(23bit) ) 하지만 부동 소수점 계산에는 정밀도가 손실되고, 반올림으로 오차가 생기는 오류가 발생한다. 부동 소수점 오류를 해결하기 위한 방법으로 - toFixed() 사용 - Math 객체의 메서드 사용 - 기타 라이브러리 사용 (Big.. 공감수 0 댓글수 0 2024. 3. 8.
금액 입력 input 구현 금액 입력 input 구현 기능 리스트 1. 마이너스를 포함한 정수만 입력한다. 2. 입력한 숫자에 천단위 콤마를 찍는다. 3. 숫자들이 입력되면 합계 계산을 한다. 구현 정책 1. input에 포커스 될 때 1.1. input에 0 이 있으면 지운다. 1.2. input에 0 외에 값이 있으면 천단위 마다 있는 콤마를 지운다. 2. input에 포커스가 빠져나올 때 2.1. 마이너스만 있으면 0 으로 세팅 2.2. 천단위 마다 콤마를 넣는다. 3. input이 keyup 될 때 3.1. 마이너스와 숫자를 제외한 문자열이 입력되지 않도록 한다. 3.2. 마이너스가 문자열의 두번째 이후에 있으면 지운다. 3.3. 입력값이 마이너스 부호만 있는 경우를 제외하곤 합계 계산을 한다. See the Pen inp.. 공감수 0 댓글수 0 2023. 12. 29.
엑셀 다운로드 엑셀 다운로드 Blob 이해 https://heropy.blog/2019/02/28/blob/ Blob(블랍) 이해하기 JavaScript에서 Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있습니다. 대개 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터를 송수신 heropy.blog 자바스크립트로 엑셀 다운로드 하는 예제 코드 - JSON 데이터 -> HTML 변환 -> 엑셀 다운로드 - 한글 꺠짐 방지를 위해 utf-8 bom 문자열 "\ufeff"를 Blob 생성시 array 인수에 붙여준다. Download Excel https://codepen.io/dimorin/pen/oNmjNbo Excel Dow.. 공감수 0 댓글수 0 2023. 10. 27.
SVG 애니메이션 만들기 SVG 애니메이션 만들기 1. SVG 제작 1.1. 직접 만들기 (Figma 에서 만드는 것을 추천) 1.2. SVG 자료 가져와서 커스터마이징 하기 https://storyset.com Storyset | Customize, animate and download illustration for free Choose your own style! Tell your story with the help of our 'friends' Editable color: choose the hue that best suits the needs of your project Customize! There are a lot of different backgrounds and layers to pick from Animated .. 공감수 0 댓글수 0 2023. 10. 17.
TOAST UI DateRangePicker 날짜 초기화 TOAST UI DateRangePicker 날짜 초기화 날짜 범위 선택 라이브러리 중 디자인이 이쁘고 사용성이 좋은 TOAST UI DateRangePicker가 있다. 특별히 선택된 날짜를 초기화 하는 기능을 구현할 때, 공식 document 에 나온 예제나 API 설명만으로는 기능 구현에 어려움이 있었는데, 얼마간 삽질 후 얻은 '초기화' 방법을 여기에 소개한다. close ~ close 선택된 날짜 초기화 방법을 간략히 얘기하자면, 1. default 상태에선 초기화 버튼이 보이지 않다가 2. 날짜가 입력되면 초기화 버튼이 보인다. - change:start, change:end 이벤트 일어나면 getStartDate(), getEndDate() 를 통해 날짜가 입력됐는지 파악 3. 초기화 버튼을.. 공감수 1 댓글수 0 2023. 10. 17.
SPA에서 History API 이해 SPA에서 History API 이해 주소 내역은 하나의 목록이다. 뒤로가기, 앞으로가기는 목록 안에서 이동하는 것이다. 따라서, 목록에 새로운 주소를 추가하면 페이지를 이동한 셈이 된다. 목록에 주소를 추가하기 위한 메소드(history.pushState(). history.replaceState())가 HTML5에서 생겼다. 예제를 만들고 테스트하며 목록에 주소를 추가하는 메소드 history.pushState(), historyreplaceState()를 비교하자. 아래 예제를 book 폴더 아래에 만든다. pushState replaceState ①'pushState' 버튼을 클릭하면, 페이지가 새로 갱신되지 않지만 주소만 바뀌고, 뒤로가기 버튼이 활성화된다. 주소 목록에 새로운 주소가 추가된다... 공감수 0 댓글수 1 2023. 10. 16.
Web APIs - window size & browser coordinate & scroll Web APIs - window size & browser coordinate & scroll Web API 중 유용한 기능(사이즈, 좌표, 스크롤) 세 가지를 정리해 본다. 1. window size window.screen.width // 모니터 사이즈 window.outerWidth //브라우저 사이즈(주소창, 탭 포함) window.innerWidth // 페이지 사이즈 document.documentElement.clientWidth // 문서 사이즈(스크롤바 제외한 영역) window가 resize 될 때마다 window.outer, window.inner, documentElement.clientWidth 값이 업데이트 된다. 2. browser coordinate element.getBou.. 공감수 0 댓글수 0 2022. 4. 6.
배열에서 id 로 object를 찾는 방법 배열에서 id 로 object를 찾는 방법 "Find object by id in an array of JavaScript objects stackoverflow에서 id를 매치하여 object를 찾는 방법에 대해 굉장히 좋은 글을 발견해 내용을 이 곳에 옮겨본다. 테스트 방법 id로 특정 object를 찾는 방법에 총 11가지 방법을 사용하여 속도 테스트를 하였다. 총 11가지 방법은 다음과 같다. A : find B : findIndex C : filter D : reduce E : for F : $.each G : $.grep H : $.map I : _.find J : cache K : map L :object {} 테스트 결과 Conclusions for solutions which use pr.. 공감수 0 댓글수 0 2022. 3. 25.
노드 동적 생성과 DocumentFragment 노드 동적 생성과 DocumentFragment DocumentFragment 노드는 문서, 요소, 어트리뷰트, 텍스트 노드와 같은 노드 객체의 일종으로, 부모 노드가 없어서 기존 DOM과는 별도로 존재한다는 특징이 있다. DocumentFragment 노드는 컨테이너 요소와 같이 자식 노드들의 부모 노드로서 별도의 서브 DOM을 구성하여 기존 DOM에 추가하기 위한 용도로 사용한다. DocumentFragment는 활성화된 문서 트리 구조의 일부가 아니기 때문에 fragment를 변경해도 문서에는 영향을 미치지 않으며(reflow 포함) 성능에도 영향이 없다. https://developer.mozilla.org/ko/docs/Web/API/DocumentFragment DocumentFragment .. 공감수 0 댓글수 0 2022. 2. 3.
fetch 함수로 html 문서 로드하기 fetch 함수로 html 문서 로드하기 fetch 함수는 1. XMLHttpRequest 객체와 마찬가지로 HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API 다. 2. XMLHttpRequest 객체보다 사용법이 간단하고 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유롭다. 3. 비교적 최근에 추가된 Web API로서 인터넷 익스플로러를 제외한 대부분의 모던 브라우저에서 제공한다. 4. fetch 함수에는 HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다. Fetch API : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API Fetch API -.. 공감수 0 댓글수 0 2022. 1. 14.
collapse toggle(show&hide) vanilla javascript collapse toggle(show&hide) vanilla javascript '접혔다 펼쳤다' 를 자바스크립트로 구현할 때, 단순히 '있다 없다' 를 구현하기는 쉽지만, 자연스럽게 '접혔다 펼쳤다' 를 구현하기는 생각보다 까다롭다. jquery 로 구현할 때는 자연스럽게 구현하는 것에 대한 고민을 할 필요가 없다. $(document).ready(function(){ $("button").click(function(){ $("p").toggle(1000); }); }); jquery 라이브러리 도움 없이 pure javascript로만 자연스러운 toggle 기능을 구현할 때 어려운 점은, 펼쳐진 영역의 height 값을 알아내기가 까다롭다는 점이다. (height auto 이면 transition.. 공감수 0 댓글수 0 2022. 1. 11.
CustomEvent 사용 예제 CustomEvent 사용 예제 CustomEvent() API를 언제 사용하는지 곰곰이 생각한 것을 여기에 정리해 본다. 뭔가 이벤트가 생겼을 때 해야 할 일을 누가 언제 처리하는 것이 효과적인가에 따라 CustomEvent()를 사용하게 된 거 같다. 사례 1 door의 역할(열고 닫기)을 하는 버튼을 클릭할 때, door 버튼은 문을 열고 닫는 주요 기능뿐만 아니라, 이러저러한 일을 해야 한다. btn_door.addEventListener('click',function(){ doOpenHide(); dosomething1(); dosomething2(); dosomething3(); ... }); door 버튼을 클릭할 때, door 버튼은 주요 역할(열고 닫기)만 수행하고, 'door 가 열거나.. 공감수 0 댓글수 0 2022. 1. 7.
유사배열을 배열로 변환 Array.prototype.slice.call() 유사배열을 배열로 변환 Array.prototype.slice.call() 유사배열객체(Array-like Object)에 Array API를 사용하기 위해 배열로 변환한다. 그 방법은 다음과 같다. ES5 Array.prototype.slice.call(arr,0) ES6 Array.from(arr) slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다. 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice Array.prototype.slice() - JavaScript | MDN sl.. 공감수 0 댓글수 0 2022. 1. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.