본문 바로가기

자바스크립트13

230930 Promise 객체로 image file 목록 모두 Base64 로 변환하기 사진 파일을 올린 후, 화면 미리보기 (Preview) 기능을 구현할 때 사용해야했는데, 개별적인 image 파일을 FileReader() 객체를 통해 base64로 변환하는 것은 이미 기존에 정리해둔바 있습니다. (링크) 한번 정리해둔적이 있어서 참고하면 편하더라구요. 그런데 개별적인 파일이 아닌, Array 형식의 image 파일인 경우는 onload 이벤트를 통해 비동기 형식으로 데이터를 반환하기 때문에, Promise 객체를 사용하지 않으면 안됐습니다 ...! async preview (files) { const promises = [] for (const file of files) { const promise = new Promise((resolve, reject) => { const reade.. 2023. 9. 30.
221128 Node.js 업데이트 방법 안녕하세요 또야입니다. 오늘은 오랜만에 포스팅으로 Node.js 업데이트를 하는 명령어를 가져왔습니다. 엄청 간단하긴 하지만 매번 잊어버려서 검색을 자주 하게되는 명령어라 정리했습니다. node -v # 현재 버전 확인 npm cache clean -f # npm 캐시 삭제 npm install -g n # node.js 버전을 관리할 수 있는 n 모듈 설치 # n 모듈을 사용해 node.js 설치 (n + 설치를 원하는 버전) n stable # 안정 버전 n latest # 최신 버전 n lts # lts 버전 n 14.15.4 # x.x.x 버전 2022. 11. 28.
220801 Promise 를 이용한 값 대기 Promise 를 이용한 값 대기 /** * 파라미터로 받은 token에서 정보를 확인 하여 저장 * 데이터를 가져오는동안 token === null 이기 때문에, * 해당 구문이 동작하지 않기때문에 20ms 마다 가져오는 것으로 설정하였습니다. */ function promiseTimeout (token) { if (!token) return // promiseTimeout(token) return new Promise((resolve, reject) => { // token 이 들어올때까지 20ms 마다 체크하기 const interval = 20 // 임의로 20ms 로 설정 (20ms 마다 확인하기) let timeout = 1000 // 임의로 1s 로 설정 const intervalId = (.. 2022. 8. 1.
210628 Javascript Optional Chanining 활용 Javascript Optional Chaining 활용 Optional Chaining 을 이용하여 내부 프로퍼티 및 메서드에 접근 가능합니다 const adventurer = { name: 'Alice', cat: { name: 'Dinah' }, methods () { return 'This is methods!' } } const dogName = adventurer.dog?.name console.log(docName) // undefined console.log(adventurer.someMethods?.()) // 'This is methods!' // optional chaining 사용방법 const greeting = object?.deepProp?.deeperProp?.greet //.. 2021. 6. 28.
ES2021 새로운 문법 ES2021 Features ES2021 Features 논리 할당 연산자 - Logical Assignment Operators 숫자 분리 - Numeric Seperators Promise.any 와 AggregateError String.prototype.replaceAll WeakRefs 와 FinializationRegistry Objects 논리 할당 연산자 - Logical Assignment Operators // Or Or Equal x ||= y x || (x = y) // And And Equals x &&= y x && (x = y) // QQ Eqauls x ??= y x ?? (x = y) // 사용 예제 - 모두 동일한 구문입니다 if (!user.id) user.id = 1 .. 2021. 6. 28.
XSS 공격 및 CORS - 해결방법 XSS 공격 및 CORS - 해결방법 XSS 공격 및 CORS - 해결방법 Cross Site scripting (XSS) XSS 의 위험성 XSS 동작 방식 XSS 공격을 막는 방법 1. HTTPS 연결 사용 2. Content Security Policy (CSP) 실행 3. innerHTML 대신 textContent 사용 4. modern framework 사용 Cross Origin Resource Sharing (CORS) CORS 를 사용하는 경우 CORS 해결하기 (회피하기) 1. 서버, 클라이언트가 같은 도메인과 포트를 사용 2. cross-origin HTTP 요청 허가 3. Jason with Padding (JSONP) 4. 기타 결론 참고자료 : dev.to, velog.io@wl.. 2021. 5. 10.
Map, WeakMap, Set, WeakSet Map, WeakMap, Set, WeakSet Map, WeakMap, Set, WeakSet Map set() 과 get() 으로 값 할당하기 Map 내부 순회 Array 와의 관계 WeakMap 사용 방법 Set add() 와 delete() 로 Set 객체 사용 Set 내부 순회 Array 와의 관계 String 과의 관계 WeakSet 사용 방법 Map Map 객체는 Object 와 동일하게 키-값 쌍을 저장하며 삽입 순서도 기억하는 콜렉션 입니다. 어떤 값이라도 key, value 로 설정할 수 있습니다. Map 이 Object 와 구별되는 중요한 특징이 있는데, 주요한 특징들은, Map 의 key 는 함수, 객체 등을 포함한 모든 값이 가능합니다. Map 은 명시적으로 제공한 키 외에는 어떤.. 2021. 5. 9.
5) Typescript - Classes 전통 JS는 재사용 가능한 컴포넌트를 만들기 위한 function과 prototype 기반 상속을 사용하였지만, class가 함수를 상속받고 classe로부터 object가 만들어지는 object-oriented에 익숙한 프로그래머들에게는 약간 어색합니다. ECMAScript 2015(ES6)를 시작으로, JS 프로그래머들은 그들의 앱을 이 객체지향(object-oriented) 접근을 사용하여 그들의 앱을 만들 수 있게 되었습니다. TS에서는, JS로 컴파일해서 모든 주요 브라우저와 플랫폼에서 사용할 수 있는 개발자들에게 이 기술을 사용하도록해주었고, JS의 다음버전을 기다릴 필요가 없도록 해주었습니다. Classes class Greeter { greeting: string; constructor (.. 2021. 2. 8.
4) Typescript - LiteralTypes 리터럴은 집합적인 타입의 구체적인 서브 타입입니다. 이는 타입 시스템 내부에서 "Hello World"는 string이지만, string은 "Hello World"가 아닌것을 의미합니다. TS에는 strings, numbers, booleans 세 가지의 리터럴 타입이 있습니다. 리터럴 타입을 이용하여 여러분은 정확한 string, number, boolean 값을 가지도록 정확한 값을 할당 할 수 있습니다. String Literal Types string 리터럴 타입은 type, type guard, type alias와 잘 조합됩니다. 여러분은 이 특징을 enum 같은 방식으로 string과 함께 사용할 수 있습니다. type Easing = 'ease-in' | 'ease-out' | 'ease-.. 2021. 2. 8.
1) Typescript 기본 타입 사용법 및 정리 Typescript 기본 타입 사용법 및 정리 Boolean let boolType: boolean = false Number let decimal: number = 6 let hex: number = 0xf00d let binary: number = 0b1010 let octal: number = 0o744 let big: bigint = 100n String let color: string = 'blue' color = 'red' Array let list_1: number[] = [1, 2, 3] let list_2: Array = [1, 2, 3] Tuple let x: [string, number] // declare tubple type x = ['hello', 10] // Ok x = [10.. 2021. 1. 22.
ECMAScript 2020 - ES11 목차 ECMAScript는 무엇인가요? BigInt import() Promise.allSettled() globalThis Nullish 통합 연산자 ?? 선택적 체이닝 연산자 ?. 1. ECMAScript는 무엇인가요? - What is ECMAScript 자바스크립트는 ECMAScript 사양에 기반한 프로그래밍 언어입니다. ActionScript나 Javascript, JSccript, TypeScript는 모두 ECMAScript를 핵심으로 사용합니다. 비교하자면, AS/JS/JScript/TS는 4개의 다른 자동차지만 각각의 외형도 다르고 특징을 가지기 위해 수정되더라도, 같은 엔진을 사용하는 것입니다. ECMAScript 의 역사 - History of ECMAScript Brendan Ei.. 2021. 1. 8.
P_브라우저 객체 모델 BOM 브라우저 객체모델(BOM)은 웹에서 사용하는 자바스크립트의 핵심입니다. BOM은 웹 페이지 콘텐츠와 무관하게 브라우저 기능을 노출하는 객체 입니다. 제대로된 명세가 없는 기간이 길었기 때문에 브라우저 제조사들은 각 회사가 원하는 대로 BOM을 확장했고, 이는 문제를 많이 발생시켰습니다. 브라우저 사이의 공통점이 사실상의 표준이 되었고, 브라우저 개발 목적은 거의 상호작용성에 집중 되었습니다. Window 객체 BOM의 핵심에는 브라우저의 인스턴스인 window 객체가 있습니다. window 객체는 브라우저 창의 자바스크립트 인터페이스 구실을 하고 다른 한편으로는 ECMAScript global 객체로 기능합니다. 따라서 웹 페이지에서 정의한 모든 객체, 변수, 함수에서 window 가 global.. 2020. 10. 6.

티스토리툴바