과제 테스트를 접하며, 2023 데브 매칭 상반기에 참여해 처음으로 과제 테스트를 풀어보았다. 예상치 못한 구조로 나오기도 했지만 자바스크립트에 대한 복습이 필요하다는 생각이 들어 과제 테스트 풀이 방향을 찾아보고 정리하는 시간을 가지게 되었다. 자바스크립트 과제 풀이계에서 정석과 같은 고양이 사진첩을 바탕으로 정리하였는데, 익숙한 내용도 있었지만 캐싱이나 뒤로 가기 등의 선택적으로 구현해야 하는 기능은 새로 배울 수 있어 유용했다. 커넥투 과정에서 페어 프로그래밍을 통해 구현했던 내용들을 복습하고 바닐라 자바스크립트로 구현하는 힘을 길러야겠다는 생각이 들었다. 이때까지는 구현 시에 주로 axios를 사용했는데 fetch도 사용해보면서 차이점을 알고 사용할 수 있게 되었다. 이전에는 리액트와 유사하게 구..
프로그래머스 2023 Dev-Matching을 준비하면서 과제 테스트를 풀어보게 되었다. 풀이를 하는 과정에서 History API나 localStorage사용 등 배웠거나 헷갈렸던 부분을 정리해보았다. todolist를 만들면서 했던 데이터를 추가, 삭제, 수정을 복습하고, 리액트와 자바스크립트의 차이를 생각해볼 수 있는 시간이었다. History API : 페이지 이동 없이 주소 변경하기 history.pushState(state, title[, url]) // url로 주소 변경하는 함수 changeURL(url) { history.pushState("", "", url); } 리액트에서 페이지 전환 시 사용하는 react-router는 history.push 를 통해 브라우저 주소(url)를 변경..
지금까지는 어떤 입력을 받아 이를 처리하고 완료하는 단계를 순서대로 수행하는 동기 프로그래밍을 다뤘다. 하지만 실제로는 네트워크 요청을 보내고, 데이터 베이스 및 파일 시스템과 상호작용하는 동작을 수행해야 하므로 비동기 API(콜백, 프로미스, 스트림)를 사용하게 된다. 자바스크립트는 이러한 비동기 작업을 처리할 때 멀티 스레드를 지원하는 자바나 C++와 다르게 스레드 하나로 비동기 작업을 처리한다. 자바스크립트는 이벤트 루프 기반의 동시성 모델을 이용해 멀티스레드 기반 프로그래밍에서 공통적으로 나타나는 문제점을 해결한다. (동기화된 데이터 타입의 오버헤드 등) 타입스크립트와 비동기 프로그래밍 비동기 프로그래밍은 코드를 한 줄 씩 따라가며 이해할 수 있는 구조가 아니기 때문에 이해가 어렵다. 타입스크립트..
타입스크립트는 런타임에 발생할 수 있는 예외를 컴파일 타임에 잡기 위해 최선을 다한다. 그럼에도 런타임에 발생하는 네트워크 장애, 사용자 입력 파싱 에러, 스택 오버플로, 메모리 부족 에러와 같은 에러를 모두 막을 수는 없다. 타입스크립트는 타입 시스템을 이용해 이러한 런타임 에러를 표현하고 처리하는 패턴을 제공한다. null 반환 예외 던지기 예외 반환 Option 타입 이 중 어떤 에러 처리 기법을 사용할지는 프로그래머의 이도와 응용 프로그램의 종류에 따라 달라진다. 따라서 각각의 장단점을 잘 비교해 선택해야 한다. 1. null 반환 (장점) 에러를 처리하는 가장 간단한 방법이다. 예를 들어, 사용자가 생일을 입력하는 프로그램이 있을 때 유효한 내용을 입력하면 Date가 반환되고, 아니면 null이..
1. 타입 간의 관계 1. 1 서브 타입과 슈퍼 타입 A가 필요한 곳에 B를 사용할 수 있다면 A는 슈퍼 타입, B는 서브 타입이다. 예를 들어, 객체를 사용해야 하는 곳에 배열도 사용할 수 있다. 따라서 이 경우 객체는 슈퍼 타입, 배열은 서브 타입이다. 모든 것은 any의 서브타입이고, never는 모든 것의 서브타입이다. 즉, 모든 타입을 any에 할당할 수 있고, never는 모든 타입에 할당할 수 있다. 1.2 가변성 단순 타입은 이 관계를 파악하기 쉽다. 예) number 는 number | string 유니온의 서브 타입이다. 하지만 객체나 함수와 같은 복합 타입의 경우 이 관계를 파악하기가 복잡할 수 있다. 복합 타입의 서브타입 규칙은 언어마다 다르다. type ExistingUsesr =..
TL;DR 타입스크립트에서 함수를 선언하고 실행하는 방법 함수 선언 시에 보통 매개변수의 타입은 명시적으로 정의하고, 반환 타입은 자동으로 추론하게 한다. 타입스크립트는 함수 생성자(Function)를 제외한 함수 선언문, 함수 표현식, 화살표 함수 문법을 안전하게 지원한다. this, 제네레이터, 이터레이터 타입을 지정할 수 있다. 시그니처 오버로딩 : 호출 시그니처가 여러 개인 경우 함수 선언과 호출 함수 선언 시에 보통 매개변수의 타입은 명시적으로 정의하고, 반환 타입은 자동으로 추론하게 한다. function add(a: number, b: number) { return a + b } 매개변수 타입을 추론하는 경우는 문맥적 타입화를 할 때이다. 여기에서 문맥적 타입화는 함수 타입을 별개로 선언해 ..
1. 클래스와 상속 class 키워드로 클래스를 선언하고 extends 키워드로 다른 클래스를 상속받을 수 있다. 클래스 종류 : 구체 클래스, 추상 클래스 추상 클래스: abstract로 선언하며, 추상 메서드와 추상 프로퍼티를 가질 수 있다. 추상 클래스는 바로 인스턴스화 할 수 없다. 다른 클래스처럼 필요한 메서드는 자유롭게 추가해 사용할 수 있다. 메서드는 private, protected, public 중 하나의 한정자를 가질 수 있고, 기본값은 public이다. 접근 한정자를 통해 내부 구현 정보를 너무 많이 공개하지 않고 특정 API만 노출하도록 클래스를 설계할 수 있다. 메서드는 인스턴스 메서드와 정적 메서드로 구분할 수 있다. private: 해당 클래스의 인스턴스에서만 접근 가능하다. ..
타입(type)이란 어떤 값과 이 값으로 할 수 있는 일의 집합 예를 들어, number 타입은 모든 숫자(값)와 숫자에 적용 가능한 모든 연산(+, -, *, /, %)과 숫자에 호출할 수 있는 모든 메서드(toFixed, toString 등)의 집합이다. 중요한 것은 타입스크립트가 타입 검사기를 이용해 유효하지 않은 동작이 실행되는 일을 예방한다는 것이다. // 매개변수에 타입 지정하기 function sqaureOf(n: number) { return n * n; } sqaureOf(2); // 4 sqaureOf("2"); // Argument of type 'string' is not assignable to parameter of type 'number' 위와 같이 타입을 제한하면 타입스크립트..
