본문 바로가기

FRONTEND/Javascript29

231001 src 내부 image 파일 import 후 다운로드 하는 방법 src 내부 image 파일 import 후 다운로드 하는 방법 지난 포스팅에 이어서 이미지를 다루는 방법을 또 마주치게 되었다. 프레임워크의 src 디렉터리 내부에서 이미지 파일을 import 로 호출한 후, 다운로드 받을 수 있지 않을까 하는 생각이었는데, 이것저것 문서를 찾아보니 되었습니다! import * as imageURL from '~/assets/image/sample/sample.png' function downloadFile () { const img = document.createElement('img') img.style = { height: '25%', width: '25' } img.src = imageURL.default console.log('imported', imageUR.. 2023. 10. 1.
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.
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.
220801 Typescript Destructuring Typescript Destructuring Typescript Destructuring Array Destructing Tuple Destructing Object destructing Property Renaming 기본 값 함수 선언 (Function declarations) 함수 타입 선언 Spread 연산자 Array Destructing const input = [1, 2] const [first, second] = input console.log(first) // 1 console.log(second) // 2 function f ([first, second]: [number, number]) { console.log(first) // 1 console.log(second) // 2 } f(.. 2022. 8. 1.
220801 Typescript Handbook Typescript 핸드북 Typescript 핸드북 원시타입 (Primitives) : string, number, boolean Array any 변수의 Type 정의(Annotation) 함수 (Function) Parameter Type 정의 Return 타입 정의 익명 함수 (Anonymous Function) 오브젝트 타입 (Object) Parameter Type 정의 Optional Properties Union Types Union Type 정의 Union Types 사용하기 Type Aliases Interfaces Type Aliases 와 Interface 의 차이? 타입 단언 (Type Assertion) Literal Types null 과 undefined Non-null 단언.. 2022. 8. 1.
220627 월 TDD 정의 및 효과 TDD란? (Test Driven Development) TDD의 효과 TDD에 관한 편견과 실상 TDD는 무조건 해야 한다? TDD는 버그를 박멸한다? TDD는 항상 느리다? 테스트 기법의 종류와 장단점 테스트 주도 개발 프로세스 TDD 메인 프로세스 단위테스트시 참고사항 TDD란? (Test Driven Development) 테스트 주도 개발(TDD) 은 소프트웨어를 개발하는 여러 방법론 중 하나이다. 제품이 오류 없이 정상 작동하는지 확인하기 위해 모든 코드는 프로그래머가 작성하고 나서 테스트를 거치게 되는데, TDD에서는 제품의 기능 구현을 위한 코드와 별개로, 해당 기능이 정상적으로 움직이는지 검증하기 위한 테스트 코드를 작성한다. 이를 통해 테스트가 실패할 경우, 테스트를 통과하기 위한 최소.. 2022. 6. 27.
211105 Javascript - Array 에서 최소, 최대 값(Min/Max) 구하기 Math.max(1, 2, 3) // 3 Math.min(1, 2, 3) // 1 const nums = [1, 2, 3] Math.min(nums) // NaN Math.max(nums) // Nan var nums = [1, 2, 3] Math.min.apply(Math, nums) // 1 Math.max.apply(Math, nums) // 3 Math.min.apply(null, nums) // 1 Math.max.apply(null, nums) // 3 const nums = [1, 2, 3] Math.min(...nums) // 1 Math.max(...nums) // 3 Math.min(1, 2, 3) Math.max(1, 2, 3) 2022. 1. 13.
211201 Javascript Module Export & Import Module Export & Import Export Import Export 사용 예시 Module Export & Import MDN export, import 모듈 설명이 너무 성의없이 되어있어 사용 방법이랑 정리를 해봤다. Export /* MDN 공식문서 export */ // Exporting individual features export let name1, name2, …, nameN; // also var, const export let name1 = …, name2 = …, …, nameN; // also var, const export function functionName(){...} export class ClassName {...} // Export list export { na.. 2021. 12. 2.
210708_Virtual DOM 이 빠른 이유 VirtualDOM 이 빠른 이유 브라우저 렌더링 에 대한 이해 VirtualDOM 이 빠른 이유 프론트앤드를 공부하다보면, "Virtual DOM" 이라는 단어를 한번씩 마주치게 됩니다. 많이 사용되는 프레임워크들은, 주로 Virtual DOM 을 사용해서 속도를 올립니다. 어떻게 이렇게 빠른걸까요? 그리고 왜 실제 DOM 은 느리고 비효율적일까요? 브라우저 렌더링 에 대한 이해 사실 프론트앤드 개발자들은 복잡하더라도 DOM 을 기본적으로 이해할 필요가 있습니다. HTML/CSS 페이지만 서버에서 요청해온다고 가정해보겠습니다. JS 는 여기서 필요하지 않습니다. HTML/CSS 형식의 파일을 응답으로 받은 후에는, 아래와 같은 일들이 일어납니다. 1. HTML 파싱 브라우저는 HTML 파일들을 파싱하고.. 2021. 7. 8.
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.
210425_Jest 사용법 Jest 기본 사용법 Test 파일 구성 Test File 이름 짓기 Jest 코드 작성 Jest 로 스냅샷 테스트하기 비동기 테스트 패턴 테스트 더블 (Test double) 모의 함수 만들기 (Mocking) SpyOn 사용하기 (Spying) Jest 기본 사용법 Spharos CMP 프로젝트의 Jest 는 package.json dependencies 내부에 @vue-plugin-e2e-cypress 로 정의되어있으며, 하단 스크립트로 실행 할 수 있습니다. --mode 는, 개발기 dev, 배포용 prod 으로 변경할 수 있습니다. "scripts": { "test:unit": "vue-cli-service test:unit --mode prod" }, "devDependencies": { "@.. 2021. 5. 28.

티스토리툴바