📚 Set `Set`는 중복을 허용하지 않는 값들의 집합을 다루는 자료구조. 주로 중복을 제거하고 고유한 값의 컬렉션을 관리하기 위해 사용된다. 얼핏 보면 배열과 세트가 유사하다고 느낄 수 있지만, Set는 배열과 엄연히 다르다. 배열(Array) vs 세트(Set) 차이 구분 Array Set 동일한 값 중복 포함 가능 ⃝ X 순서 유의미 ⃝ X 인덱스로 요소에 접근 가능 ⃝ X Set의 주요 특징 Set 생성 Set는 `new` 키워드를 통해 생성할 수 있다. (클래스는 아니고 객체 생성자함수인 듯) const set = new Set(); console.log(set); // Set(0) () 아무 값도 전달하지 않으면 빈 세트를 생성하며, 보통 다음과 같이 `iterable`한 객체를 인수를 전달..
📚 타입스크립트 컴파일 옵션: tsconfig.json { // 컴파일러 옵션 지정 "compilerOptions": { // 컴파일될 ES(JS) 버전 명시 - "ES2015" 권장 "target": "esnext", // 모듈 시스템 지정 - "CommonJS", "AMD", "ESNext" "module": "ESNext", // 모듈 해석 방식 지정 - "Node", "Classic" "moduleResolution": "Node", // ESM 모듈 방식 호환성 활성화 여부 "esModuleInterop": false, // 모든 파일을 모듈로 컴파일, import 혹은 export 키워드 "isolatedModules": false, // 모듈 해석에 사용할 기준 경로 지정 "baseUrl":..
📚 함수의 오버로딩(Function Overloading) 함수의 이름이 같지만 매개변수의 개수나 타입이 다른 여러 버전의 함수를 정의하는 것을 함수 오버로딩이라고 한다. function 키워드로만 함수 오버로딩을 할 수 있으며 arrow function으로는 오버로딩을 할 수 없다 사용예제 💩 타입만 다른 함수를 여러번 사용한 경우 function add1(a: string, b: string) { return a + b; } function add2(a: number, b: number) { return a + b; } add1('Hello', 'World'); // Hello World add2(1, 2); // 3 add1('Hello', 2); add2('Hello', 2); ✨ 함수의 오버로딩..
📚 Parameter properties 타입스크립트에선 클래스의 constructor에서 속성을 선언할 때 매개변수에서 선언하고 초기화하는 것을 허용한다. 클래스 접근 제어자의 사용도 허용한다. 예제 class Octopus { readonly name: string; readonly numberOfLegs: number = 8; constructor(theName: string) { this.name = theName; } } 기존의 작성 예시 class Octopus { readonly numberOfLegs: number = 8; constructor(readonly name: string) {} } constructor 매개변수에 속성을 선언하고 초기화했기 때문에 body 생략가능함 JS 컴파일..
⛑️ 프로젝트 매니지먼트 서비스 리팩토링 https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/tree/KDT0_ParkNaYoung GitHub - KDT1-FE/Y_FE_JAVASCRIPT_PICTURE Contribute to KDT1-FE/Y_FE_JAVASCRIPT_PICTURE development by creating an account on GitHub. github.com 후기는 각설하고 내가 놓친 부분들을 멘토님과 팀원분들이 잘 찝어주셨다 🥹 안그래도 분량이 많은데 시간써주셔서 감사하다 이 분들과 같이 끝까지 갈 수 있어서 다행이다 🥹✨ 1. 프로젝트 구조 재정의 // 수정전 리액트와 프로젝트 구조에 대해 잘 몰랐던 시절...🤔 // 수정후 리액트에..
문서가 로딩되는 시점 제어하는 DOMcontentLoaded, load 이벤트 📌 Event DOMContentLoaded, load 는 브라우저가 HTML을 전부 읽고 DOM 트리를 완성할 때 발생되는 이벤트다. DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않습니다. load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다. 📌 사용상황 DOMContentLoaded – DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때 load – 이미지 사이..
📂 LG U+ 홈페이지 클론코딩 패스트캠퍼스X야놀자 첫 번째 프로젝트 2023-07-24~2023-07-28 레퍼런스 사이트 & 데모 사이트 레퍼런스 : https://www.lguplus.com/ 데모 : https://glowing-chebakia-807feb.netlify.app/ 프로젝트 설명 및 선정 이유 첫 클론코딩 프로젝트인 만큼 내가 배웠던 걸 써먹어 보고 싶었다 그래서 내 수준(?)에서 구조적으로나 기능적으로 구현할 수 있는 웹 사이트를 선정했다 구현 내용 1. fixed된 헤더메뉴 position: fixed; 속성을 이용해 스크롤 시에도 헤더 유지 2. 슬라이더와 애니메이션 전환효과 swiper 라이브러리와 scrollMagic 라이브러리를 통해 슬라이더와 애니메이션 기능 추가 3. ..
