1. 타입 단언person 변수에 빈 객체 할당하기type Person = { name: string; age: number;};let person: Person = {};​let person = {} as Person; 2. 타입 단언을 이용한 함수 호출에서의 오류 해결함수 giveMe10 호출에서의 오류 해결하기let value = 10;giveMe10(value);function giveMe10(value: 10){ return value;}​let value = 10 as const;giveMe10(value); 3. 조건을 만족하는 타입 정의- CompanyMember 타입을 Boss와 Employee의 서로소 유니온 타입으로 정의할 것type Boss = { car: string; };t..

서로소 유니온타입은 교집합이 없는 타입들 즉, 서로소 관계에 있는 타입들을 모아 만든 유니온 타입을 말한다.사례 1: 회원 역할 분류type Admin = { name: string; kickCount: number;};type Member = { name: string; point: number;};type Guest = { name: string; visitCount: number;};type User = Admin | Member | Guest;function login(user: User) { if ("kickCount" in user) { // Admin console.log(`${user.name}님 현재까지 ${user.kickCount}명 추방했습니다`); } el..

타입 좁히기 (Type Narrowing)조건문 등을 이용해 넓은 타입에서 좁은 타입으로 타입을 상황에 따라 좁히는 방법을 말한다.function func(value: number | string){ value.Fixed(); // ❌ value.toUpperCase(); // ❌}위 코드에서 value는 number 또는 string 타입일 수 있기 때문에, toFixed()(number 메서드)와 toUpperCase()(string 메서드)를 바로 사용할 수 없다. 따라서 다음과 같이 조건문을 이용해 value의 타입을 보장해줘야 한다.function func(value: number | string){ if (typeof value === "number"){ console.log(v..

타입 단언이란값 as 타입을 이용하면 특정 값을 원하는 타입으로 단언할 수 있다.type Person = { name: string; age: number;};let person: Person = {};person.name = "woodstock";person.age = 345;위와 같이 변수 person은 Person 타입으로 정의되었지만 초기화 할 때에는 빈 객체를 넣어두고 싶다고 가정할 경우, 타입스크립트는 이를 허용하지 않는다.Person 타입은 name과 age 프로퍼티를 필수로 요구하지만, 빈 객체 {}에는 이 속성들이 없기 때문에 타입 오류가 발생하는 것이다. 이럴 땐 다음과 같이 빈 객체를 Person 타입이라고 단언해주면 된다.이제 타입스크립트는 빈 객체를 Person 타입으로 인식하..

웹이란웹이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다.웹에서 HTML로 작성된 페이지를 웹 페이지라고 하며, 이 웹 페이지들이 여러개 모여있는 집합을 웹 사이트라고 부르는데 웹 사이트는 보통 HTML, CSS, Javascript로 이루어져 있다.웹 사이트의 구성HTML (Hyper Text Markup Language)브라우저에게 웹 페이지의 요소들이 어떻게 구성되어있는지를 알려주는 역할을 한다. CSS (Cascading Style Sheet)웹 페이지의 요소들을 꾸며주는 역할을 한다. JavaSCript웹 페이지의 요소들을 생성, 삭제, 변형하는 역할을 한다. 그렇다면, 자바스크립트는 어떻게 HTML로 작성된 웹 요소에 접근해 웹 페이지를 동적으로 만들고 변형시킬 수..

클라이언트와 서버의 통신웹 애플리케이션은 클라이언트(웹 브라우저)와 서버가 통신하며 데이터를 주고 받는다. 통신 과정웹브라우저에서 서버에게 원하는 데이터를 요청한다.서버는 데이터베이스에서 요청받은 데이터를 찾는다.서버가 데이터베이스에서 찾은 데이터를 꺼내온다.꺼내온 데이터를 서버가 웹브라우저에게 전달한다.클라이언트와 서버의 통신은 클라이언트가 서버에 데이터를 요청하면, 서버는 데이터베이스에서 요청받은 데이터를 찾아서 꺼내온 뒤 다시 클라이언트에게 전달하는 과정이라고 할 수 있다. API란?API(Application Programming Interface) 란 컴퓨터나 컴퓨터 프로그램 사이의 연결을 말한다.좀 더 풀어서 얘기하자면 웹 브라우저와 같은 클라이언트와 서버 사이의 연결, 즉 서버에 원하는 데이..

async와 await은 Promise 객체를 더욱 쉽게 작성할 수 있고, 직관적으로 코드를 해석할 수 있는 문법이다. Promise 객체Promise 객체의 필요성자바스크립트에서 비동기 작업을 처리하는 가장 기본적인 방법은 콜백함수를 사용하는 것이다. 자바스크립트 비동기 처리자바스크립트에서 비동기 처리는 여러 작업을 효devmark.tistory.com 먼저, 프로미스 객체를 사용해 간단한 비동기 처리 함수를 작성해보자.const delay = (ms) => { return new Promise((resolve) => { setTimeout(() => { resolve(); }, ms); });};const start = () => { delay(2000).then(() => ..

Promise 객체의 필요성자바스크립트에서 비동기 작업을 처리하는 가장 기본적인 방법은 콜백함수를 사용하는 것이다. 자바스크립트 비동기 처리자바스크립트에서 비동기 처리는 여러 작업을 효율적으로 처리하기 위한 핵심 개념이다.동기와 비동기의 차이를 이해하고, 자바스크립트가 싱글 스레드 환경에서 어떻게 비동기 작업을 처리하devmark.tistory.com setTimeout를 이용하면 작업을 비동기적으로 처리할 수 있다. setTimeout은 콜백함수와 ms 단위의 지연 시간을 매개변수로 받는다. 아래는 workA, workB, workC 함수를 비동기 함수로 작성하고, workD는 동기적으로 작성한 예시이다.const workA = (value, callback) => { setTimeout(() => ..

자바스크립트에서 비동기 처리는 여러 작업을 효율적으로 처리하기 위한 핵심 개념이다.동기와 비동기의 차이를 이해하고, 자바스크립트가 싱글 스레드 환경에서 어떻게 비동기 작업을 처리하는지 알아보자.동기와 비동기동기란?동기(Synchronous) 처리는 작업을 순차적으로 하나씩 처리하는 방식이다. 이전 작업이 완료되어야만 다음 작업을 시작할 수 있다. 스레드와 멀티 스레드작업 처리 방식을 이해하기 위해 먼저 스레드 개념을 알아보자.아래와 같이 workA, workB, workC 3가지 함수가 실행 후 종료되기까지 걸리는 시간이 각각 5초, 3초, 10초라고 가정해보자.const workA = ()=>{ //5초 console.log("workA");}const workB = ()=>{ //3초 co..

... 문법은 사용 위치에 따라 spread 또는 rest로 동작한다. spreadspread 연산자는 배열이나 객체를 펼쳐서 개별 요소로 분리한다.사용 시점객체나 배열을 복사하거나 합칠 때함수 호출 시 배열의 요소를 개별 인수로 전달할 때 객체 복사 및 확장const toy = { type: "bear", price: 15000,};const blueToy = { ...toy, color: "blue",};const yellowToy = { ...toy, color: "yellow",};console.log(blueToy); // { type: 'bear', price: 15000, color: 'blue' }console.log(yellowToy); // { type: 'bear', pri..