본문 바로가기

프론트앤드6

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.
210625 Javascript Textarea Input 이벤트에 맞춰 길이 늘리기 Javascript Textarea Input 이벤트에 맞춰 길이 늘리기 Vanilla Javascript const textarea = document.querySelector('textarea') textarea.addEventListener('input', e => { textarea.style.height = textarea.scrollHeight + 'px' }) Vue.js const textareaWrap = this.$refs.textarea.$el const textarea = textareaWrap.querySelector('textarea') textarea.style.height = 'auto' textarea.style.height = textarea.scrollHeight + '.. 2021. 11. 25.
210708_Virtual DOM 이 빠른 이유 VirtualDOM 이 빠른 이유 브라우저 렌더링 에 대한 이해 VirtualDOM 이 빠른 이유 프론트앤드를 공부하다보면, "Virtual DOM" 이라는 단어를 한번씩 마주치게 됩니다. 많이 사용되는 프레임워크들은, 주로 Virtual DOM 을 사용해서 속도를 올립니다. 어떻게 이렇게 빠른걸까요? 그리고 왜 실제 DOM 은 느리고 비효율적일까요? 브라우저 렌더링 에 대한 이해 사실 프론트앤드 개발자들은 복잡하더라도 DOM 을 기본적으로 이해할 필요가 있습니다. HTML/CSS 페이지만 서버에서 요청해온다고 가정해보겠습니다. JS 는 여기서 필요하지 않습니다. HTML/CSS 형식의 파일을 응답으로 받은 후에는, 아래와 같은 일들이 일어납니다. 1. HTML 파싱 브라우저는 HTML 파일들을 파싱하고.. 2021. 7. 8.
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.
Vue3 에 Tailwind CSS 설치하기 How to setup Tailwind CSS in Vue 3 How to Setup Tailwind CSS in Vue 3 A streamlined walkthrough if you hate docs so much. devjavu.space tailwind - vue3 vite Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS Setting up Tailwind CSS in a Vue 3 and Vite project. tailwindcss.com 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.

티스토리툴바