본문 바로가기

FrontEnd/Javascript

(11)
비슷해서 헷갈리는 Rest 파라미터, spread 연산자 function Input({ label, ...props }: InputProps) { return ;} 예시 코드는 props를 받아서 label 속성을 제외하고, 나머지 속성을 props객체로 받아서 input 태그에 전달해 주는 코드이다 리액트에서 컴포넌트는 하나의 객체 (props)를 매개변수로 받기 때문에 구조분해로 가져올 수 있다 매개변수에 사용된 것은 rest 연산자매개변수를 input 태그에 전달하는 spread 연산자이다 생긴 게 비슷하고, 이름을 원하는대로 지을 수 있어서 헷갈리는 개념인 것 같다 Rest 파라미터 (나머지 매개변수)나머지 매개변수들을 하나(배열)로 모으는 역할주로 함수 매개변수, 배열 구조 분해, 객체 구조 분해에서 사용된다. 1. 함수 매개변수 = 매개변수를 ..
고유 식별자를 생성하는 uuid와 crypto.randomUUID 고유한 id가 필요할 땐 항상 uuid나 Date.now를 사용했었는데 다른 사람의 코드를 보고 crypto.randomUUID라는 것을 알게되었다.둘의 사용법과 특징에 대해 정리해보자 uuiduuid란 범용적으로 사용되는 고유 식별자이다. (UUIDs, Universally Unique Identifier) 우리가 많이 쓰는 uuid라이브러리는 UUID 정의와 같은 이름의 라이브러리이다.uuid는 다양한 버전이 있는데, 보통 무작위로 생성되는 Verson 4를 사용한다.import { v4 as uuidv4 } from 'uuid';console.log(uuidv4()); // '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d' crypto.randomUUIDcrypto.randomU..
JS 클래스를 사용해 고정 배열 만들기 export class FixedArray { #arrayLength; // 배열 초기화 시 길이 #array; #currentLength; // 할당된 요소 개수 // #arrayLength와 #array를 알맞게 초기화 // 생성자 파라미터에는 FixedArray의 고정된 길이를 받아야됨. // #array초기화 시 각요소의 값은 undefined constructor(num) { this.#array = []; this.#arrayLength = num; this.#currentLength = 0; for (let i = 0; i 0) { tmp = this.#array[this.#curre..
자바스크립트에서 모듈 내보내기(export)와 다시 내보내기(re-exporting) 모듈(Module)- 기능 단위로 분리한 코드 조각- 캡슐화- script에서 type=module을 쓴다면, 자동으로 strict mode가 적용된다 (즉 모듈만의 스코프를 만들게 된다)export는 모듈에서 명시적으로 외부에 공개하는 식별자에 사용하는 키워드이다import는 export한 값들을 자신의 모듈 스코프로 가져오는 것을 의미한다 named export (이름이 있는 내보내기)named export는 하나의 모듈에서 여러값을 내보낼 때 사용한다그렇기 때문에 각각의 이름으로 export 하고,import 시 {중괄호}를 사용해서 export한 이름을 그대로 사용해야 가져와야 한다 만약 다른 이름으로 가져오려면 as 를 사용해서 재정의 한다 그러니 익명으로 export가 안된다 export는 2..
자바스크립트 암묵적 / 명시적 형변환 정리 자바스크립트의 7가지 데이터 타입Number, String, Boolean, undefined, null, Object, Symbol변경 불가능한 원시 타입, 변경 가능한 참조 타입이 있다 원시 타입은 한번 생성하면 값을 바꿀 수 없다 흔히 많이 사용하는 String, Number을 +로 연결하는 것은 새로운 메모리 공간에 변경된 값을 저장하는 것이다 암묵적 형변환자바스크립트 엔진은 표현식을 평가할 때, 코드 문맥에 부합하도록 암묵적으로 타입 변환을 실행한다 암묵적 형변환은 형변환 된 변수값을 재할당하는 것이 아니라 변환된 변수를 평가를 위해 한번 사용하고 버린다즉, 기존 원시값을 사용해 새로운 타입의 원시값을 생성하는 것이다! String1. 템플릿 리터럴 (``)문자열 안에 변수, 표현식을 쉽게 포함..
appendChild는 항상 부모 노드의 마지막에 새로 추가되는 것이 아니다 작성한 코드를 팀원이 읽어보는 과정에서 이상한 점이 발견되었다해당 공간에 내용(객체 20개)이 들어있다 그 공간에 appendChild를 했는데 칸을 비우거나, 기존 내용을 삭제하는 코드가 없다하지만 기존 공간에 노드가 존재하면서 새로운 노드가 추가되는 것이 아니라 대체가 된다 그것도 아무런 에러 메시지 없이..! 코드 설명아래 코드는 클릭한 radio 버튼의 id에 따라 정렬된 카드를 화면에 추가하는 역할을 한다 (카드에는 영화 데이터가 들어있다) tempArr1에는 인수로 전달되는 문자열을 기준으로 정렬한 카드(노드) 배열에 들어있다이 배열을 돌면서 $main_cards에 appendChild로 추가한다($main_cards는 정렬된 카드가 들어갈 자리로, 필터링 결과 적용 전 현재 화면에 보이는 ..
[TIL] 자바스크립트로 URL 파라미터 사용과 URLSearchParams window.location웹 브라우저의 현재 URL에 대한 정보를 제공하는 JavaScript의 내장 객체이다해당 객체는 현재 URL을 나타내는 여러 속성과 메소드를 가지고 있다 href현재 url 주소를 가져오기전체 url을 문자열로 반환한다 이때 프로토콜, 호스트 경로, 포트, 쿼리 스트링 등 모든 부분이 포함된다console.log(window.location.href);해당 주소로 이동window.location.href = "http://example.com"; protocol / host / hostname / port아래 코드를 가지고 설명하면http://example.com/page.html?q=123protocol http:, https:host : 호스트(도메인) + 포트 exampl..
[TIL] 24/04/30 Promise와 fetch 개념 공부를 할 때 가장 헷갈리는 비동기여태 눈치껏 사용하다가 제대로 사용해 보고 싶어서 시작한다,, 가보자고,,🔥Promise이해하고 보니 명쾌한 정의!비동기 작업을 처리하는 객체, 비동기 작업을 실행했지만, 결과를 반환하지 않은 객체 ( 왜냐? resolve, reject를 호출하지 않으면 영원히 pending 상태) const promise = new Promise((resolve, reject) => { if (작업이 성공적으로 완료됨) { resolve(결과값); // 성공적으로 완료되었으므로 resolve 호출 } else { reject(에러); // 작업이 실패했으므로 reject 호출 }});//딴짓//딴짓중.. //계속 다른 작업중.. promise .t..