📚 타입 별칭(Type alias) 특정 타입이나 인터페이스 등을 참조할 수 있는 타입 변수를 의미한다. type 키워드를 사용하여 타입을 부를 이름을 설정하는 것. 타입 별칭의 장점 타입이 어떤 역할을 하는지 의미있는 이름을 부여할 수 있음 반복되는 타입을 변수화해서 코드의 반복을 줄 일 수 있음 type MyMessage = string | number function logText(text: MyMessage) {} var message: MyMessage = '안녕하세요' logText(message) message의 타입 string | number 를 MyMessage 라는 타입이름으로 정의해서 사용할 수 있다. 📌 타입 별칭과 인터페이스의 차이점 타입 별칭과 인터페이스 둘다 객체 타입을 정의..
Mac OS command not found: tsc 에러 해결 법 npm i -g typescript 타입스크립트를 vscode에서 설치할 땐 주로 글로벌 키워드를 붙여 설치한다. 하지만 맥북에선 npm 을 global 키워드로 바로 설치할 수 없어서 sudo권한을 통해 설치해줘야 한다. 윈도우으로 치면 관리자 권한으로 실행 이런 개념이란다... sudo npm install -g typescript sudo 권한으로 설치하려고 하면 password 입력하라는데 맥북 잠금 비밀번호도 애플ID 비밀번호 입력해도 안됐다 😫 맥북은 왜 이런거야~~!!!! 아악~~!! 왕 짜증 왜냐면 root 계정에 비밀번호를 설정안했기 때문에 root 계정에 초기 비밀번호를 세팅해줘야 사용할 수 있다. 해결방법: root ..
📚 인터페이스(Interface) 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 그냥 객체 타입을 정의할 때 사용하는 문법이라고 이해하면 쉽다. 인터페이스 정의가 가능한 범주 객체의 속성과 속성 타입 함수의 파라미터와 반환 타입 함수의 스펙(파라미터 개수와 반환값 여부) 배열과 객체를 접근하는 방식 클래스 인터페이스 정의 예제 let person = { name: 'Park', age: 99 } function logAge(obj: { age: number }) { console.log(obj.age) // 99 } logAge(person) // 99 함수에서 객체 속성의 타입을 지정해주고 있다. 인터페이스로 정의하면, interface personAge { age: number; } fu..
📚 변수와 함수 타입 정의 var name: string = 'captin' 변수: 타입 = 값 형식 세미콜론(:)을 타입 표기라고 한다. 함수에서도 사용한다. 📌 배열 타입: Array Array 배열의 데이터 타입[] // 문자열 배열 var compaines: Array = ['네이버', '삼성', '인프런'] var compaines: string[] = ['네이버', '삼성', '인프런'] // 숫자 배열 var cards: Array = [1, 2, 3, 4] var cards: number[] = [1, 2, 3, 4] 📌 튜플 타입: tuple var items: [string, number] = ['hi', 11] 정해진 순서와 타입이 일치해야한다 any 아무 데이터나 취급하겠다는 의미...
1. 타입스크립트 소개 타입스크립트란 타입스크립트는 자바스크립트의 확장 언어. 타입스크립트의 본질은 코드를 더 읽기 쉽게 만들어 준다. 왜 타입스크립트를 배워야 할까 에러 사전 방지 코드를 실제 실행 전에 미리 에러를 검출 할수 있다. 코드 가이드 및 자동 완성 코드 가이드와 자동완성을 지원해서 코드를 더욱 빠르고 정확하게 작성할 수 있도록 도와준다. 2. 타입스크립트 시작하기 타입스크립트를 브라우저에서도 사용하려면 자바스크립트 파일로 컴파일 해줘야 한다. NPM 패키지 설치하기 npm i typescript -D 타입스크립트 컴파일 명령어 node ./node_modules/typescript/bin/tsc index.ts
문서가 로딩되는 시점 제어하는 DOMcontentLoaded, load 이벤트 📌 Event DOMContentLoaded, load 는 브라우저가 HTML을 전부 읽고 DOM 트리를 완성할 때 발생되는 이벤트다. DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않습니다. load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다. 📌 사용상황 DOMContentLoaded – DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때 load – 이미지 사이..
Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop') 에러 bootstrap v5.2.3. 발생 상황 부트스트랩 모달 사용 중에 Cannot read properties of undefined (reading 'backdrop') 에러가 발생했다. 나의 경우는 모달창을 별도의 페이지로 나눠서 사용 중이였기 때문에 target을 인식하지 못해서 발생하는 것 같다. 문제 해결 https://github.com/twbs/bootstrap/issues/37305#issuecomment-1457088096 TypeError Cannot read properties of undefined (reading 'backdrop') - b..
📂 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. ..
