📚 함수의 오버로딩(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 컴파일..
💡 JS Promise와 Callback 차이를 설명해주세요 동기식 코드와 비동기식 코드를 같이 사용하면 실행 순서를 보장할 수 없게 되고, 결국 원했던 결과와 다른 동작을 하게 됩니다. 이럴 때 콜백과 프로미스를 사용하면 비동기 처리의 실행 순서를 보장해줄 수 있습니다. 콜백 함수는 다른 함수의 인자로 사용되는 함수로, 비동기 처리가 끝난 후 데이터가 넘어오면 callback 함수에게 데이터를 넘겨 이전 작업이 완료됐음을 알리고, 그때 작업을 시작하는 방식으로 순서를 보장합니다. 하지만 순서대로 처리해야 할 작업이 많아질수록 콜백지옥으로 불리는 상황이 일어나게 됩니다. 이러한 콜백지옥은 가독성을 떨어뜨리고 유지보수를 어렵게 만듭니다. 또한 비동기 로직의 결과값을 처리하기 위해선 callback 안에서만..
📚 타입 단언 타입 단언은 개발자가 직접 타입을 명시해 해당 타입으로 강제하는 방식. 타입스크립트를 컴파일 할 때 타입 검사를 하지 않고, 데이터의 구조도 신경쓰지 않는다. 컴파일러가 가진 정보를 무시하고 개발자가 원하는 임의의 타입을 값에 할당하고 싶을 때 사용한다. 📌 타입 단언은 왜 사용할까? 일례로 변수를 선언할 때 빈 객체에 인터페이스를 정의하면 다음과 같이 에러가 난다. 해당 객체가 Person 인터페이스와 맞게 초기화되지 않았기 때문이다. 타입 에러를 해결하는 방법으론 객체 선언 시점에 속성을 정의하면 된다. 하지만 이미 운영 중인 서비스의 코드나 누군가 만들어 놓은 코드라면 건드리기 까다로울 것이다. 이럴 때 타입 단언을 이용해서 기존 코드를 변경하지 않고도 타입 에러를 해결 할 수 있다...
⛑️ 프로젝트 매니지먼트 서비스 리팩토링 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. 프로젝트 구조 재정의 // 수정전 리액트와 프로젝트 구조에 대해 잘 몰랐던 시절...🤔 // 수정후 리액트에..
[이넘] 1. 이넘을 선언할 때 const를 붙인 것과 붙이지 않은 것은 어떤 차이가 있는지 JS 변환 코드와 관련지어 설명해주세요. 이넘 코드가 자바스크립트 코드로 컴파일될 때 이넘의 속성 키와 값을 연결해 주는 즉시실행함수를 생성합니다. 반면 const 이넘은 이 함수 없이, 이넘이 사용되는 곳에서 속성 값을 바로 연결해 줍니다 따라서 const 이넘을 사용하면 컴파일 시 코드양을 줄일 수 있습니다. 2. TypeScript의 이넘은 어떤 상황에서 사용되나요? 그리고 어떤 장점과 단점을 가지고 있나요? 이넘의 장점 1. 생산성과 가독성의 증대 이넘은 열거형 코드로 의미있는 이름으로 부여할 수 있어 코드에 대한 이해와 가독성이 증대됩니다. 2. 타입 안정성 증대 이넘은 key-value 양방형 관계이기..
📚 타입추론(Type Inference) 타입추론(Type Inference) 이란 타입스크립트가 코드를 해석하여 적절한 타입을 정의하는 동작을 의미한다. 쉽게 말하면 타입을 지정하지 않더라도 자동으로 타입을 결정해준다. 타입추론의 장점은 코드 수동으로 명시해야 하는 구문의 수를 줄여주기 때문에, 코드의 전체적인 안정성이 향상된다. 타입추론이 어떤 과정을 거치는지, 언제 타입선언을 해야할 지를 알면 불필요한 타입선언을 줄일 수 있기 때문에 잘 알아두자! 😉 📌 변수의 타입 추론 let x = 10; // x는 number 타입으로 추론됩니다. 변수는 선언될 때 초기값에 따라서 타입이 추론된다. a라는 변수가 선언될 시점에 값이 할당되지 않아 어떤 값이 들어올지 모르기 때문에, any라고 추론하고 있다. ..
📚 제네릭(Generic) 제네릭(Generic)은 데이터 타입을 일반화(generalize)한다는 것을 뜻한다. 제네릭은 타입을 미리 정하지않고 사용하는 시점에서 타입을 정의할 수 있다. 즉, 선언 시점이 아니라 생성시점에 타입을 명시하기 때문에 하나의 타입만이 아닌 여러 타입을 사용할 수 있는 것이다. 📌 왜 제네릭을 사용할까? 선언시점이 아닌 생성 시점에 타입을 명시하기 때문에, 한번의 선언으로 다양한 타입에 '재사용'이 가능하다는 장점이 있다. 제네릭을 사용하지 않는다면? 선언 시점에 타입을 미리 정하거나, any를 사용해야할 것이다. 1) 타입을 미리 정하면, 하나의 타입만 사용하기 때문에 코드의 범용성이 떨어진다. 2) any를 사용하면, 데이터 타입을 제한할 수 없으며 어떤 데이터가 리턴될 ..
