기록장

📌 개요제너레이터는 함수이자 문법이다. function* 키워드로 정의되며 이 문법을 사용해 생성된 함수는 제너레이터 함수가 되고, 그 함수는 이터러블이자 이터레이터인 제너레이터 객체를 반환한다. 📘 주요 개념🔍 이터러블 (Iterable)for ... of 문 등에서 반복 가능한 객체 (예: Array, Set, Map, 문자열 등) 로 Symbol.iterator() 메서드를 가진 객체Symbol.iterator()를 호출하면 이터레이터를 반환함const iterable = { [Symbol.iterator]() { return { next() { ... } }; // 이터레이터 반환 }}; 🔍 이터러블 프로토콜 (Iterable Protocol)JavaScript에서 반복 가능한 객..

📌 개요반복자 패턴(Iterator Pattern)은 컬렉션(리스트, 배열 등)의 내부 구조를 노출하지 않으면서도 그 요소들에 순차적으로 접근할 수 있도록 해주는 디자인 패턴이다. 이 패턴은 **GoF(Gang of Four)**가 정의한 23가지 디자인 패턴 중 하나이며, 객체지향 설계에서 매우 자주 사용되는 구조적인 패턴 중 하나이다.🎯 목적컬렉션 객체의 구현을 변경할 필요 없이, 데이터를 순차적으로 접근할 수 있는 방법을 제공한다.🧱 구조반복자 패턴은 일반적으로 다음과 같은 구성 요소로 이루어진다:Iterator: 컬렉션을 순회하는 인터페이스를 정의Concrete Iterator: 실제 순회 로직을 구현한 구체적인 반복자.Aggregate: 순회할 수 있는 컬렉션 객체를 정의하는 인터페이스Co..

문제기존 업로드 되어있던 svg 파일은 NextJS Image 에 cdn url로 미리보기가 가능했지만 새로 업로드 한 svg 는 이미지가 보이지 않음 ( 같은 방식으로 업로드 한 png 는 잘 보임 ) 해결과정첫번째, 기존에 업로드 되어 있던 svg 는 미리보기가 가능했으므로 기존파일과 api를 통해 새로 넣은 svg 파일을 비교했다.=> 두 파일의 다른점은 type 이었다. 기존 파일은 image, 새로 업로드 한 파일은 binary두번째, 업로드 되는 파일의 정보는 백엔드에서 전달받은 그대로 보냈는데 확인해보니 파일의 Content-Type이 지정되어 있지 않았던걸 확인했다.세번째, svg 파일일 경우 "Content-Type": "image/svg+xml" 로 보냈더니 미리보기가 정상 작동 되는걸..

Number 객체 내장함수 toString() 함수와 전역함수인 parseInt 함수를 사용해 진수변환을 할 수 있다. - numObj.toString([radix])radix Optional수의 값을 나타내기 위해 사용되기 위한 기준을 정하는 2와 36사이의 정수. (진수를 나타내는 기수의 값.)=> toString()은 10진수를 특정 진수로 변환하고 싶을 때 사용할 수 있다.let decimalNum = 22;let binaryNum = decimalNum.toString(2);console.log('binaryNum', binaryNum); //binaryNum 10110- parseInt() parseInt() 함수는 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수..

1. hasOwnProperty Methodconst user = { name: "John Doe", email: "john@example.com",};// Check if 'user' object has 'email' propertyif (user.hasOwnProperty("email")) { console.log("User has an email property.");} else { console.log("User does not have an email property.");} 2. typeof Operatorconst product = { name: "Widget", price: 19.99,};// Check the data type of the 'price' propertyif (t..

☞ Medium 으로 발행된 글을 번역한 글입니다.TypeScript에서 Object나 {} 타입을 사용하는 것은 마치 안에 무엇이 들어있는지 모르는 미스터리 상자를 받는 것과 비슷합니다. 존재는 알지만, 내부 내용은 정확히 모르는 상태죠. 처음에는 이러한 방식이 편리하게 느껴질 수 있지만, 이런 모호한 타입에 의존하다 보면 예상치 못한 문제가 발생할 수 있습니다. 따라서 이러한 일반적인 객체 타입의 사용을 피하고 더 명확한 타입 정의를 사용하는 것이 좋습니다.Object나 {} 사용의 문제 이해하기TypeScript에서 객체의 구조를 확실히 알지 못하는 변수를 다룰 때, 종종 Object나 {} 타입을 사용합니다. 예시는 다음과 같습니다.type Param = Object;ORtype Param = {..

1. Flatmap : filter + mapconst numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];// using filterAndMapconst squaredOddNumbers = numbers .filter(num => num % 2 !== 0) .map(num => num * num)console.log(squaredOddNumbers); // [1, 9, 25, 49, 81]// using flatMapconst squaredOddNumbers = numbers.flatMap(num => num % 2 !== 0 ? [num * num] : []);console.log(squaredOddNumbers); // [1, 9, 25, 49, 81] 2...

HTTP (Hypertext Transfer Protocol) - Hypertext는 링크들만이 아니라 문서나 이미지파일등 리소스를 말한다 AJAX (Asynchronous javaScript And XML) - 대표적으로 XMLHttpRequest라는 object, 최근에 많이 사용하는 fetch() API JSON (JavaScript Object Notation) - simplest data interchange FormData - lightweight text-based structure - easy to read - key-value pairs - used for serialization and transmission of data between the network the network con..

Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(); console.log(result); //apple,banana,orange const result2 = fruits.join(' and '); console.log(result2); //apple and banana and orange } * join() : array -> string Q2. make an array out of a string { const fruits = '🍎, 🥝, 🍌, 🍒'; const result = fruits.split(','); console.log(result); //🍎,..

Array array의 point는 index! 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; //이 방법이 더 흔하게 쓰인다. 2. Index position const fruits = ['🍎', '🍌']; console.log(fruits); console.log(fruits.length); console.log(fruits[0]); console.log(fruits[1]); console.log(fruits[2]); //undefined console.log(fruits[fruits.length - 1]); //arr[arr.length-1] : array의 마지막 item을 찾을 때 사용 3. Looping over an array ..