날씨 api를 호출하던 도중 .env에서 정의한 API Key에서 undefined로 반환되어 401 (unauthorization) 에러가 발생했다.Key값도 올바르고 .env 파일도 최상단에 있었는데 에러가 발생했고 .env 파일에 있는 Key를 가져오려면 dote

항상 자바스크립트로 리액트를 사용해보다 타입스크립트를 공부해보고자 타입스크립트에서 리액트를 한 번 시작해보려고 한다. 프로젝트 생성 > npx create-react-app appName --template=typescript or > yarn create reac

유틸리티 타입은 이미 정의해 놓은 타입을 변환하거나 새로운 타입을 생성하는 타입이다. 유틸리티를 사용하면 반복적인 작업을 줄이고 코드를 간결하게 유지할 수 있다.유틸리티 타입의 종류로는 다음과 같다.Partial< T > : T 타입의 모든 프로퍼티를 선택적(op

타입스크립트에서 제네릭은 클래스나 함수, 인터페이스를 다양한 방식으로 재사용 할 때 사용되어진다.예를 들어, getSize를 재사용하여 배열을 생성한다고 할 경우 생성할 각 배열의 타입이 다르기 때문에 Union type을 사용하여 arr의 타입을 계속해서 생성할 배열

타입스크립트에서 Class는 자바스크립트 ES6에서 도입된 클래스와 유사하게 작동하지만 타입스크립트에서는 타입을 명시적으로 지정해야한다. 만약 자바스크립트의 클래스를 알고싶다면 아래의 링크를 참고하시길 바란다. 선언 방식 아래의 코드와 같이 미리 선언하는 방식도 있

상속은 부모 객체의 특성을 자식 객체가 물려 받아 사용하는 것을 말한다.자바스크립트에서는 객체의 프로토타입을 통해 다른 객체로부터 상속받을 수 있는데 이를 프로토타입 상속이라고 한다.객체를 생성할 때 프로토타입이 자동으로 생성되고 \_ \_ proto \_ \_ 라는

자바스크립트에서 클래스는 ES6에서 새로 나온 문법으로 객체를 생성하기 위한 템플릿이라고 할 수 있다.앞서 우리는 생성자 함수를 사용하여 객체를 만들 수 있다고 공부하였다.여기서 클래스와 생성자 함수는 둘 다 new를 통해 호출하여 정의된 내용으로 객체를 생성한다.그렇

자바스크립트에서 const는 재할당을 할 수 없지만 let은 재할당이 가능하다. 그래서 타입스크립트에서 name1은 'Lee', name2는 string 타입이라고 알려준다.Union 타입은 여러 타입 중 하나가 될 수 있는 타입을 말한다. 즉, 둘 이상의 타입을 '|

함수의 기본적인 타입 선언 아래 코드는 타입스크립트에서 타입을 선언하는 방식이다. 이때 반환하는 값이 있을 경우에 add 함수의 반환 값으로 number 타입을 지정해줄 수 있다. 하지만 아래 코드와 같이 반환하는 값이 없을 경우에는 add 함수에 void 타입을 지

call, apply, bind : 함수 호출 방식과 관계없이 this를 지정할 수 있음 call 메소드 모든 함수에서 사용할 수 있으며 this를 특정값으로 지정할 수 있다. apply 메소드 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같다. ca

타입스크립트에서 Object를 선언하고 접근해야 할 때 사용위 코드에서 user에 있는 name에 접근할 경우 타입스크립트에서는 object에는 특정 속성에 대한 정보가 없기 때문에 name에서 에러가 발생한다.이때 아래와 같이 Interface를 사용할 수 있다.인터

타입스크립트에는 다음과 같이 12가지의 기본타입이 있습니다.StringNumberBlooleanObjectArrayTupleEnumAnyVoidNeverNullUndefined문자열 타입숫자 타입진위 값인 타입배열 타입배열의 길이가 고정되고 각 요소의 타입이 지정되어

타입스크립트는 자바스크립트에 타입을 부여한 언어로 자바스크립트의 확장 언어라고 할 수 있다. 타입스크립트는 브라우저가 타입스크립트의 언어를 인식할 수 없기 때문에 타입스크립트를 자바스크립트로 변환해주어야하며 이를 컴파일(compile)라고 부른다.두 숫자를 더하는 자바

📖 정의 >서로소 집합들의 정보를 관리하면서 두 개의 원소가 같은 집합에 속해있는지 판별할 수 있는 알고리즘으로 노드들이 여러 그룹으로 나누어져 있을 때 같은 그룹의 노드들을 서로 연결하는 작업에 사용된다. 합집합 찾기는 보통 합집합 연산, 찾기 연산 두 가지 연산

📖 정의그래프를 탐색하는 방법 중 하나로 현재 노드와 인접한 노드 중 가장 작은 노드를 선택하여 계속 탐색을 진행하다가 더 이상 진행할 수 없는 상황에 이르면 이전 노드로 돌아가서 다른 인접 노드를 선택하여 탐색을 진행하는 알고리즘보통 DFS는 스택과 재귀함수를 사용

📖 정의탐색할 때 너비를 우선으로 하여 탐색을 수행하는 알고리즘최단 경로를 찾아준다는 점에서 최단 길이를 보장할 때 많이 사용너비 우선 탐색은 큐에서 하나의 노드를 꺼내고 해당 노드에 연결된 노드 중 방문하지 않은 노드를 방문하고 차례대로 큐에 삽입하는 과정을 반복하

📖 정의데이터를 일시적으로 저장하거나 처리하기 위한 자료구조로 선입선출(FIFO - First In, First Out)의 원칙을 따른다.큐는 보통 Enqueue, Dequeue 두 가지 연산을 주로 한다.과정1\. enqueue(7), enqueue(6), enqu

📖 정의데이터를 일시적으로 저장하거나 꺼내올 수 있는 자료구조로 후입선출(LIFO - Last In)의 원칙을 따른다.스택은 주로 push, pop 두 가지 연산을 한다.과정1\. push(7), push(6), push(4), pop(), push(5), pop()

자바스크립트는 비동기 처리를 위해 callback 함수를 사용한다. 하지만 callback 함수를 너무 많이 사용하게 되면 callback 지옥에 빠질 수 있는데 이는 코드 가독성을 떨어뜨리고 에러 처리를 힘들게 한다. callback 예시이러한 callback 지옥을

자바스크립트의 타이머 함수로 많이 사용하는 setTimeout과 setInterval 함수에 대해 알아보고자 한다.setTimeout은 일정 시간이 지난 후 함수를 실행하는 함수로 첫 번째 인자에는 실행시킬 함수, 두 번째 인자에는 시간, 실행시킬 함수에 전달할 인자가