jee's coding story

포스팅하게 된 계기 노마드 코더에서 진행하는 멜론 클론코딩 컨테스트에 참여하여 바닐라 JS로 코딩을 하던 중, 버튼을 클릭했을 때 원하는 정보를 가져오는 코드를 작성하던 중에 문제가 발생했다. 이벤트 버블링을 활용한 개념인 이벤트 위임을 이용하여 문제를 해결했고, 내용을 기억하기 위해 정리를 하기로 했다. 문제 음악 차트의 재생 버튼 부분을 구현하던 중이었고 button안에 svg 파일을 추가해 놓았다. 음악의 재생 버튼을 클릭했을 때 노래 제목을 가져와 서버에 보내면 해당 노래의 Youtube 영상을 반환하는 코드를 작성하고 있었다. 노래를 구성하고 있는 li태그의 id에 노래 제목을 적어두었다. ... ... 내가 원하는 동작은 button을 클릭하면 클릭된 노래의 제목 또는 정보를 가져오는 것이었다..

🔍 글을 시작하기 전에 해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다. 수정해야 할 부분이 있다면 언제든지 알려주세요! 함수의 타입 정의하기 함수의 타입을 정의할 때 Function을 사용하지 않는다. 왜냐하면 Object에 모든 객체가 담기는 것 처럼 모든 함수의 타입을 뜻하며 특정 함수와 타입에 대해서는 알려주지 않기 때문이다. 만약 다음과 같은 함수를 정의하기 위해선 어떻게 해야할까? function sum (a: number, b: number): number { return a+b; } 매개변수의 타입과 반환 타입을 사용하여 표현할 수 있다 (a: number, b: number) => number 책에서는 이를 (단축형) 호출 시그니처 또는 타입 시..

🔍 글을 시작하기 전에 해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다. 수정해야 할 부분이 있다면 언제든지 알려주세요! 함수의 파라미터 타입 정의 (파라미터 = 매개변수) 함수를 타입스크립트에서 정의할 때 함수의 파라미터는 명시적으로 타입을 정의하며 반환 타입은 추론하도록 둔다. 타입스크립트는 몇가지 특수한 상황을 제외하고는 매개변수 타입은 추론하지 않고, 명시적으로 정의한 매개변수를 통해 반환 타입은 자동으로 추론하기 때문이다. 매개변수를 선언할 때 선택적으로 선언할 수도 있다. 선택적 매개변수를 작성하기 위해서는 가장 마지막에 물음표 표시와 함께 작성하면 된다. function log(message:string, userId?: string) { let t..

🔍 글을 시작하기 전에 해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다. 수정해야 할 부분이 있다면 언제든지 알려주세요! 터미널에서 typescript로 컴파일 하는 방법 [TS CLI 옵션 문서] 타입스크립트 파일을 작성하고 컴파일하면 자바스크립트 파일이 생성된다. 먼저 터미널에서 타입스크립트를 설치해줘야 컴파일이 가능하기 때문에 설치를 해준다. $ npm install -g typescript or $ yarn global add typescript index.ts 파일을 생성하고 코드를 작성한 다음, 터미널에서 tsc index.ts를 실행하면 컴파일 된 자바스크립트 파일을 확인할 수 있다. 하지만 이 실행 방법의 단점은 ts파일을 수정할 때마다 저장하고 ..

🔍 글을 시작하기 전에 해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다. 수정해야 할 부분이 있다면 언제든지 알려주세요! 타입 리터럴이란? 책에서는 오직 하나의 값을 나타내는 타입이라고 소개하고 있다. 모든 곳에서 일어날 수 있는 실수를 방지해 안전성을 확보해 주는 강력한 언어 기능이라고 부연 설명을 해주고 있다. 나는 말 그대로 값을 타입으로 사용하는 것이라고 이해했고 큰 어려움이 없는 개념이었다. let answer: true = true; answer = false; // Type 'false' is not assignable to type 'true'. 위 코드처럼 answer의 타입을 true로 지정하면 이후 값을 변경하지 못한다. const와 같은 역..