능히 해낼 수 있다

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 더하기 함수를 만들어보자 // 더하기 함수 만들기: return하는 경우 //매개변수 타입선언//반환 타입선언 function add (num1: number, num2: number): number { return num1 + num2 } 더하기 기능을 만들 함수의 매개변수에 number라는 타입을 선언해주고, 반환할 타입도 number라고 선언해 준다. 그러면 의도한 대로 더하는 기능을 하는 함수가 만들어졌다. return하는 경우가 아니라면, void를 선언해 주면 된다. // 더하기 함수 만들기: return하지 "않는" 경우 //매개변수 타입선언//반환 타입선언 function add (num1:..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). user라는 객체를 만들어보자 let user:object; user = { name: 'mimi', age: 28 } 여기서 console.log를 찍으면 아래 이미지처럼 에러가 난다. object에는 특정속성 값에 대한 정보가 없기 때문이다. 이를 위해 interface를 사용한다. 인터페이스(interface) 객체의 구조를 정의하고, 해당 객체가 가져야 하는 속성과 메서드를 명시적으로 선언하는 방법 중 하나이다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있다. 1.interface 추가 user라는 변수의 타입을 User로 선언하자 name과 age프로퍼티가 없다는 에러가 발생한다. user..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). JavaScript에서 클래스는 ES6 (ECMAScript 2015)부터 도입되었다. 클래스는 객체 지향 프로그래밍의 기본 개념을 구현하는 방법 중 하나로, 관련된 데이터와 함수를 하나의 구조로 묶는 역할을 한다. 생성자 함수는 클래스를 사용하지 않을 때, 객체를 초기화하고 생성하는 역할을 한다. 1. 생성자 함수와 class함수의 차이점 생성자 함수는 예전부터 사용되던 구문이고, 프로토타입을 직접 다루는 구조이기 때문에 .prototype메서드를 사용해서 작성하지만, 클래스는 프로토타입 기반 상속으로 네트워크 콘솔에서 보면 prototype안에 메서드가 들어가 있다. function Animal(nam..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. Next.js의 기능 제공 Next.js에선 애플리케이션 개발 및 프로덕션 단계에서 여러기능을 제공하는데, 개발단계에서 TypeScript 및 ESLint통합, 빠른 새로 고침 등을 통해 개발자와 애플리케이션 빌드경험을 최적화한 다. 프로덕션단계에서는 성능과 접근성을 높이기 위해 코드를 변환하는 것을 목표로 해 클라이언트(유저)와 애플리케이션 사용경험을 최적화 한다. 프로젝트를 진행함에 있어 환경 및 사용 목적 등 고려하는 상황이 다르기 때문에 애플리케이션을 개발에서 프로덕션 단의 단계로 넘어가려면 코드 컴파일, 번들링, 경량화 그리고 코드 분할등의 작업이 필요한데, 이 내용은 찬찬히 나온다. 1. ..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. 타입추론 아래 코드처럼 변수를 선언했다고 해보자 초기 변수값은 'rose'인 문자열로 할당이 되어있는데, 그 변수에 숫자 4를 재할당 함으로서 타입에러를 발생하고 있는 모습이다. 하지만 TypeScript는 flower에 타입을 선언하지 않았어도 에러를 밷고 있는데, 이는 TypeScript가 변수 타입을 추측하기 때문이다. 원래는 이런식으로 let flower: string = 'rose' 작성을 해야하지만 이렇게 하지 않아도, TypeScript는 아래 이미지 처럼 변수에 마우스 호버링을 해보면 flower의 타입을 이미 알고있다. 이를 '타입추론'이라고한다. 1. 기본 타입 종류 살펴보기 //숫..