본문 바로가기

javascript26

210610 Javascript - File / Blob / 업로드 / 다운로드 / Encoding / Decoding Blob 이란? FileList 와 File 의 생김새 차이 FileReader 사용하기 Image 를 Base64 코드로 변환하기 Base64 코드를 Image 로 변환하기 파일 내부 데이터를 텍스트로 변환하기 파일 업로드 파일 다운로드 부록 - 파일 용량 체크 Blob 이란? Blob Object 는 file 같은 나열할 수 있는(Enumerable) 오브젝트이며, raw data 입니다 Text 나 binary data 처럼 읽힐 수 있고, ReadableStream 으로 변환될 수 있습니다. FileList 와 File 의 생김새 차이 console 로 확인해보면, FileList 와 File 의 생김새의 차이는 아래와 같습니다. - FileList : { 0: File, length: 1 } -.. 2021. 11. 25.
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.
210603_Short Polling vs Long Polling Short Polling vs Long Polling 챗봇같은 real-time application 은 기본 request-response 구조를 사용할 수 없습니다. 이를 구현하기 위해서는 polling 메커니즘을 구현해야합니다. polling 메커니즘에는 real-time 을 구현하기위한 Websoket 과 SSE(server-side event) 도 존재합니다. 그래서, polling 은 무엇일까요? Polling Polling 은 client 가 일정시간 내에 데이터를 얻기 위해 request 를 server 에 보내는 기술을 말합니다. Short Polling Short Polling 은 client 가 데이터를 얻기위해 request를 서버에 보낸 후, 정해진 지연(정해진 시간) 후에 res.. 2021. 6. 3.
210512 css @property 속성 사용하기 (예시) See the Pen 210512_css property1 by Jaeeun Jung (@dmsdl950823) on CodePen. ** 지원하지 않는 브라우저가 있을 수 있으니 주의하기! 2021. 5. 12.
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.
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.
2) Typescript - interface Typescript Interface Interface Typescript의 핵심 원리는 그 값이 가지고있는 형태를 중심으로 타입 체크를 한다는 것입니다. 이것은 "duck typing" 이나 "structural subtyping" 이라고 불리웁니다. interface는 이 타입들의 역할을 채우며, 여러분의 코드를 정의하는 강력한 방법입니다. function printing (obj: { label: string }) { console.log(obj.label) } let myObj1 = { size: 10, label: "Size 10 Object" } let myObj2 = { size: 10 } printing(myObj1) printing(myObj2) // Property 'label&.. 2021. 1. 25.
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.

티스토리툴바