본문 바로가기

언어/JS & TS7

[TypeScript] 클래스와 인터페이스 JS, TS와 OOP JS의 변수와 함수는 모두 객체다. 이는 JS의 모든 객체가 프로토타입(prototype)이기 때문이다. 프로토타입 언어란 모든 객체가 최소한 하나 이상의 다른 객체(그들의 프로토타입으로부터) 상속을 받는 언어이다. 이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다. 따라서, JS로 객체지향 코드를 구성하려면 애로 사항이 많았다. 이 문제를 해결하기 위해 ES6(ECMAScript 2015)부터는 클래스 문법을 추가하였고, 보다 자바스럽게 클래스를 구성할 수 있게되었다. 클래스 TS의 클래스 문법은 JS와 크게 다르지 않다. 다만, JAVA의 객체 지향 문법을 끌어와서 쓰다보니 JS에는 없는 것까지 사용하면서 몇몇 제약이 생긴다. JS의 클래스 선언 방식 class Stud.. 2023. 12. 10.
[TypeScript] 함수 표현식 & Call∙Constructor Signature 개요 JS와 비교하여 TS에서 함수 타입을 정의하는 방법, 이와 관련한 호출 시그니처와 생성자 시그니처에 대해 정리한다. 함수 타입 정의 가장 기본적으로 함수를 정의하는 방법은 다음 내용과 같다. 1. 함수의 반환값 타입은 추론되기 때문에 생략 가능하다. function add(a: number, b: number): number { return a+b; } 2. 화살표 함수도 반환값 타입은 생략 가능하다. const add = (a: number, b:number) => a+b; 3. type 별칭을 통해서 함수 타입을 정의할 수 있다. type GreetFunction = (a: string) => void; function greeter(fn: GreetFunction) { // .... } 이와 .. 2023. 11. 29.
[JavaScript] JS의 논리연산자, OR과 AND 개요 JS의 논리연산자는 다른 언어에 비해 두드러지는 특성이 있다. 이러한 논리 연산자를 잘 다뤄야 명확하게 코드를 구현할 수 있다. JS의 OR Operator 전통적인 프로그래밍에서 OR 연산자는 불린값을 조작하는 데에 쓰인다. 우리가 일반적으로 생각하는 하나라도 참이면 true, 하나라도 거짓이면 false인 것이다. JS의 논리연산자가 불린값을 다루는 방법은 다음과 같다. alert(true || true ); // true alert(false || true ); // true alert(true || false ); // true alert(false || false ); // false 가장 아래 false || false인 경우를 제외하고 모두 true를 반환한다. 조금 더 구체적으로 알아.. 2023. 11. 28.
[JavaScript] JS의 this 개요 JS의 this 는 전통적인 프로그래밍 언어의 this와 다른 양상을 띈다. 이러한 this 의 역할을 잘 이해하고 사용하는 것이 중요하다. JS 강의 영상에 설명이 잘 되어 있어, 이번 포스팅을 통해 정리해본다. this this 는 호출한 객체를 가리키는 키워드이다. 즉, 호출하는 방법에 의해 결정된다. let person = { name: 'sebin', age: 20, printThis: function () { console.log(this); // person 객체 출력 console.log('this === person: ', this === person); console.log('this === window: ', this === window); }, }; // 그냥 함수 호출하면 t.. 2023. 11. 27.
[TypeScript] Narrowing | Type Assertions & Type Guards Narrowing TS에서 타입 검사를 통해 조건을 좁혀서 특정 행동을 하는 것을 통칭하여 Narrowing이라고 한다. Type Assertions 타입 단언은 말 그대로 타입을 단언적으로 명시해주는 것이다. 타입 스크립트가 타입 추론을 통해 판단할 수 있는 타입의 범주를 넘어서는 경우, 더이상 추론하지 않도록 직접 지시한다. 💡타입 단언은 C나 JAVA의 타입 형변환과는 다른 개념이다. 형변환은 실제로 데이터 자료를 변환시키지만, 타입 단언은 실제 데이터를 바꾸는 것이 아니라 타입 정보를 명확히 남기는 것이므로 오직 컴파일 과정의 타입체킹에만 사용된다. (코드 자체에 에러는 발생하지 않지만 실행하다보면 오류를 일으키기도 한다.) 타입 단언 선언 방법 document.getElementById를 id가.. 2023. 11. 26.
[TypeScript] TS 기본 지식 | 정적타입언어, tsc, 타입 개요 TypeScript 언어를 공부하는 과정을 정리한다. microsoft에서 제공하는 자료를 토대로 진행한다. TypeScript Basics Each and every value in JavaScript has a set of behaviors you can observe from running different operations. That sounds abstract, but as a quick example, consider some operations we might run on a variable named foo. If we break this down, the first runna microsoft.github.io 정적 타입이란? 동적 타입 언어와 정적 타입 언어 (정적 타입 검사(S.. 2023. 11. 21.
[넘블챌린지] week 1-1. 주요 기능 파악과 구현 목록, 목표 세우기 2023-02-24 ~ 2023-03-16 총 3주간 타임딜 서버를 구축하고, 성능 테스트를 하는 챌린지에 참여하였다. 첫번째 주의 목표는 팀빌딩과 구현 목록 파악 후, To Do List를 작성하는 것! [주요 기능] 구매 가능한 시간에만 구매 가능 & Sold out [구현 목록] 데이터베이스 모델링 상품 정보, 판매 가능 시간, 판매 가능 수량을 저장할 테이블(product) 사용자 정보도 저장해야함 상품별 구매한 유저 리스트 & 유저의 구매한 상품 리스트 Service 클래스 상품 정보 조회하고 판매 가능한 상태인지 확인 현재 시간, 판매 가능 시간을 비교해서 판매 가능한 상태인지 확인 판매 가능한 상태인 경우, 수량을 비교하여 판매 가능. Controller 클래스 REST API로 상품/구매 .. 2023. 2. 26.