jee's coding story

🔍 글을 시작하기 전에 해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다. 수정해야 할 부분이 있다면 언제든지 알려주세요! 제네릭(Generic) 지금까지 boolean, string, number 등에 대해 알아보았었는데, 이러한 타입을 구체 타입이라고 한다. 구체 타입은 변수에 전달 될 타입을 정확하게 알고 있으며 실제로 이 타입이 전달되었는지 확인할 때 사용된다. 그러면 이와 반대로 어떤 타입이 사용될지 미리 알 수 없을 때 는 어떻게 해야 할까? 바로 제네릭(Generic)을 이용해서 해결할 수 있다. 함수를 정의하기 위해 타입을 정의해야 한다고 하자. 매개변수의 타입을 정의할 때 지금은 어떤 타입이 올지 알 수 없고, 누군가 함수를 호출 또는 정의할 때 ..

🔍 글을 시작하기 전에 해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다. 수정해야 할 부분이 있다면 언제든지 알려주세요! Class(클래스) 클래스는 같은 구조로 이루어진 객체를 쉽게 생성할 수 있도록 해준다. 즉, 클래스를 사용하면 동일한 구조, 동일한 클래스를 기반으로 하는 동일한 메서드로 여러 객체를 빠르게 복제할 수 있는 것이 장점이다. 객체는 클래스의 인스턴스이며 클래스는 객체의 형태, 포함해야 할 속성과 메소드를 정의하는 데 도움을 준다. 따라서 클래스는 객체의 생성 속도를 높여주는, 객체 리터럴 표기법을 사용하는 것에 대한 대안 이다. 타입스크립트에서 클래스를 정의하는 방법은 다음과 같다. 클래스 내에서 사용할 변수(클래스의 속성)를 상단에 타입과 ..

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

나는 웹 개발을 공부하며 취업 준비를 하고 있다. 프로젝트를 진행하면서 공통적으로 중요하게 생각했던 것 중 하나가 모바일 사용성이 좋아야 한다는 점이다. '모바일 퍼스트'라는 개발 방식이 있을 정도로 모바일 사용자를 고려한 개발이 중요하다고 생각한다. 프론트 엔드 개발공부를 하면서 JavaScript(TypeScript) - React - Next.js 순서대로 개발을 해봤었고, 모바일 친화적으로 개발하는 것은 해봤지만 모바일 앱 개발은 한번도 안 해봤다는 생각이 스쳐 지나갔다. 휴대폰 사용량이 늘어나면서 사용자들은 웹 페이지보다는 휴대폰 앱을 더 많이 보고 사용하겠다는 생각까지 하고 나니 앱 개발을 해보지 않을 이유가 없다는 결론에 도달했다. React 개발 경험이 있다 보니 React-Native로 ..

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