본문 바로가기

개발(Development)/JS(자바스크립트)80

[JS]requestAnimationFrame/cancelAnimationFrame원리와 사용 방법(Feat. 브라우저 작동 방식) requestAnimationFrame을 3줄로 요약하면 아래와 같다. 1. requestAnimationFrame은 브라우저가 화면을 그리기(Paint) 직전에 실행할 코드를 등록한다. 2. requestAnimationFrame을 재귀적으로 반복호출하면, 60FPS 목표로 애니메이션을 최적화한다. 3. cancelAnimationFrame은 requestAnimationFrame으로 등록해둔 코드를 취소한다. 이게 도대체 무슨말인가?!! requestAnimationFrame을 제대로 이해하기 위해선 일단 브라우저가 화면을 그리는 원리부터 알아두면 좋다. 차근차근 정리해 보려 한다. 생각보다 쉽다. # 브라우저 작동 방식 - 브라우저가 화면을 그리는 원리는 대략 아래와 같다. 1. 서버에 요청하여 H.. 2023. 1. 21.
[Puppeteer] M1 맥북 Chromium Error: Failed to launch the browser process 해결 방법 # M1 맥북 puppeter 실행 불가 문제 현상(feat. Chromium) 애플 실리콘 칩이 탑재된 M1 맥북에서 Puppeteer 를 사용하려 하면 아래와 같은 에러가 발생할 수 있다. Error: Failed to launch the browser process Chromium.app/Contents/MacOS/Chromium: No such file or directory: Chromium.app/Contents/MacOS/Chromium cannot execute: No such file or directory The chromium binary is not available for arm64 혹은 아래와 같은 팝업이 발생할 수 도 있다. ‘Chromium’은(는) 손상되었기 때문에 열 수 .. 2022. 8. 25.
[TypeScript] enum 기초 사용법 (+ enum이 필요한 이유) # TypeScript 의 enum 이란? Typescript 는 JS의 기본 타입 외에도 몇 개의 타입을 더 제공하는데, 그 중 하나가 열거형이라고 불리는 enum 이다. enum은 말 그대로, 여러 값들에 미리 이름을 정의하여 열거해 두고 사용하는 타입이다. 예를 들어, 사용자를 권한별로 관리해야할 때 enum으로 정의해두고 사용한다. enum Auth { admin = 0, // 관리자를 0으로 표현 user = 1, // 회원은 1로 표현 guest = 2 // 게스트는 2로 표현 } 근데 도대체 왜 enum을 사용하는걸까? 그리고 언제! 어떻게! enum을 사용하는게 좋을까? enum의 기초 문법은 글 하단에서 살펴보기로 하고, 먼저 enum이 필요한 이유부터 정리해본다. # enum 의 필요성.. 2022. 8. 18.
[JS] 텍스트 복사(Copy) 완전 쉬운 방법: Clipboard API 기존에 텍스트 복사를 구현하려면 document.execCommand("copy") 을 이용했다. 아래 글 참고 [자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법 그러나 execCommand 메서드는 Deprecated 되었으며, 대안으로 훨씬 쉽고 강력한 Clipboard API 가 나왔다. window.navigator.clipboard.writeText() 메서드를 사용하면, 아주 쉽게 텍스트를 클립보드에 복사해둘 수 있다. 너무나 쉽고 좋아서 정리해두지 않을 수 없다. 1. 텍스트 복사 - navigator.clipboard.writeText("복사할 텍스트") 호출하면 끝! - 비동기로 복사를 수행하고 Promise 를 반환하므로, 복사가 완료되었을 때 수행할 작업을 th.. 2022. 6. 23.
[Node.js] Multer - fetch 파일 전송 에러: Error: Multipart: Boundary not found # Multipart: Boundary not found 에러 해결 방법 - 클라이언트: fetch 를 통해 multipart/form-data 로 파일 전송 - 서버: Node.js에서 Multer를 통해 파일 업로드 처리 이 때, 아래의 에러가 발생할 수 있다. [에러 코드] Error: Multipart: Boundary not found [문제 원인] 태그의 기본 submit 이벤트를 통해 multipart/form-data로 파일을 전송하면, 이미지 업로드 내부적으로 Content-Type에 boundary 값을 설정하여 보낸다. (network탭의 Request Header 항목을 통해 확인 가능) 그러나 아래와 같이, - event.preventDefault()로 기본 submit이벤트를 막.. 2022. 5. 14.
[Node.js] Multer 파일 업로드 관련 에러: MulterError: Unexpected field # Node.js - MulterError: Unexpected field 해결 방법 Node.js 에서 Multer 를 통해서 파일을 업로드 받을 때, 아래와 같은 에러가 발생할 수 있다. [에러 코드] MulterError: Unexpected field code: 'LIMIT_UNEXPECTED_FILE', storageErrors: [] [문제 원인] multer는 input 태그의 name이나, FormData 객체의 key값을 통해 업로드된 파일을 식별한다. 이 값을 multer의 single() 이나 fields() 의 인자로 넣어주지 않았기 때문에 발생하는 문제다. (다른 문제일 수도 있으나, 내 경우엔 그랬다. 즉, 단순 실수다) [해결 방법] Multer 미들웨어를 라우터에 설정 할 때.. 2022. 5. 14.
자바스크립트 File API 파헤치기: Blob, File, FileReader, FileList, BlobURL 자바스크립트는 바이너리 데이터를 다루기 위한 방법으로 Buffer와 FileAPI를 제공한다. 1. Buffer: 개발자가 메모리 관점에서 바이너리 데이터를 다룰 수 있다. 2. File API: 파일(png, mp3등)이나 입출력장치(마이크, 카메라, 화면 등)의 바이너리 데이터를 다룰 수 있다. ▼이 중 Buffer(ArrayBuffer, TypedArray 등)에 대해서는 아래 글에서 아주 상세하게 정리해 두었다.▼ 자바스크립트 버퍼(Buffer): ArrayBuffer, TypedArray 파헤치기! 이번 글에서는 File API를 정리한다. # FILE API 란? FILE API란 단순 텍스트 데이터 뿐만 아니라 이미지, 오디오, 비디오 등의 대용량 바이너리 데이터를 다루기 위한 API이다. .. 2021. 12. 1.
자바스크립트 버퍼(Buffer): ArrayBuffer, TypedArray 파헤치기! 자바스크립트는 바이너리 데이터를 다루기 위한 방법으로 버퍼(Buffer)를 구현한 ArrayBuffer, ArrayBufferView를 제공한다. 이번 글에서 다룰 내용을 요약하면 아래와 같다. 1. 버퍼(Buffer)란? - 임시로 바이너리 데이터를 저장하기 위한 메모리 공간 혹은 바이너리 데이터 자체 2. ArrayBuffer란? - 자바스크립트에서 구현된 버퍼이다. - 고정된 크기의 메모리 공간에 바이너리 데이터를 저장하는 객체다. 3. ArrayBufferView란? - ArrayBuffer에 저장된 바이너리 데이터에 접근하는 객체다. - TypedArray, DataView 2개가 제공된다. 4. TypedArray란? - ArrayBufferView의 한 종류이다. - 배열 요소의 타입/크기를.. 2021. 11. 30.
[자바스크립트] HTML에서 특정 텍스트가 포함된 요소(태그)를 클릭하는 방법 어떤 분께서 질문을 해주셔서 올리는 글 (댓글로는 코드를 설명하기 힘들어서...블로그 글로 작성한다.) # 질문 내용 - Javascript를 이용해 HTML에서 "특정 텍스트"를 찾아서, 해당 요소를 클릭할 수 있는 방법이 있나요? # 해결 방법 1) HTML의 모든 요소를 취득한다. 2) 해당요소의 TextNode 값이 "특정 텍스트"를 포함하는지 체크 3) "특정 텍스트"를 포함하는 요소에 클릭을 발생시킨다. 단, 주의할 점! 엘리먼트.textContent만 체크하면, 엘리먼트의 자식에 자식이 보유한 textContent까지 체크하여 body, html 등 상위 태그도 선택된다. 따라서, 엘리먼트 본인 소유의 textContent인지 확인하기 위해 아래의 코드로 체크해줘야 한다. 엘리먼트.child.. 2021. 10. 18.

티스토리툴바