외부라이브러리 모듈의 타입을 정의해보자. 외부라이브러리 모듈과 타입 기본적으로 자바스크립트로 만들어진 라이브러리이기 때문에 타입스크립트로 인식할 수 있는 형태로 타입을 정의해주어야 한다. axios같은 와부 라이브러리의 경우에는 이미 관리가 잘 되어 있기 때문에 따로

형제 컴포넌트 간의 상태 전달을 Context API를 통해 실현해보자.내가 원하는 작업은 형제 컴포넌트(quiz, result) 간의 데이터 전송이고, 검색해 본 결과 전역상태관리를 할 수 있게 해주는 context api를 사용해야 한다는 것을 알게 되었다.전역상태

데이터로 받아온 문자열에 줄바꿈을 적용해 원하는 형태로 만들어보자.API를 통해 받아오는 데이터를 수정하는 상황.원하는 구조실제 렌더링된 구조정규식을 활용한 replace 메소드백엔드에게 띄어쓰기 할 부분마다 < br >를 넣어달라고 부탁하고, repalce메소드

비교하기 서버와 통신하여 받아온 데이터를 콘솔에 보여주기 문제점: 빈배열이 나온다. 아마도 비동기방식때문에 서버를 기다리지 않고, 콘솔을 먼저 찍어 보여주는 듯하다. 원래코드 useEffect(() => { axios.get(${QUESTIONAPI}) .t

useState 함수형 컴포넌트는 타입스크립트없이 컴포넌트를 작성하는 것과 별 차이가 없다. hooks는 class 컴포넌트와 달리, useState를 사용할 때 Generics를 사용하지 않아도 타입스크립트가 타입을 유추하기 때문에 생략해도 상관없다. useStat

event의 객체 target과 currentTarget을 비교해보자.둘의 차이를 알기 위해서는 이벤트 버블링이라는 개념에 대해 알아야 한다.이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.

함수형 프로그래밍 언어에 등장하는 보편적인 특성인 클로저에 대해 알아보자. closure란? MDN의 정의에 따르면, 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 흔히 함수 내에서 함수를 정의하고 사용하면

리액트 + 타입스크립트 기본세팅방법에 대해 정리해보자.react + ts + prttier에 eslint 설정, airbnb 규칙 적용(tslint대신 eslint설치)npm i -D eslint eslint-config-airbnb eslint-config-prett

고급 타입인 'utility type' 몇가지를 살펴보자. 유틸리티 타입 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 문법이다. 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 사용하면 훨씬 간결한 문법을 타입을 정

타입스크립트가 타입을 추론을 해나가는 과정 및 단언과정 등에 대해 알아보자.타입 추론이란 타입스크립트에서 타입이 지정되어 있지 않은 경우, 코드를 해석하여 타입을 유추해나가는 동작을 말한다.일일이 변수를 선언할 때마다 타입을 선언해야하고 필요한 타입을 정의해야하는 번거

C타입스크립트에서 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다.제네릭을 사용하면 클래스나 함수의 목적 중 하나인 재사용성이 증가한다. 한가지 타입보다 여러가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다.기존 타입 정의방식의 문제점이 무엇인지 파악하고,

리액트 훅스 두번째 시간, useReducer, useMemo, useCallback, useRef에 대해 알아보자.useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 hook이다. 리듀서

특정 인자나 변수에 한가지 이상의 타입을 사용하고 싶을 때 사용한다. 자바스크립트의 OR연산자(||)와 같이 a이거나 b이다 라는 의미이다.'MONG'이란 변수에는 string, number, boolean 타입을 모두 사용할 수 있다.여러 타입을 모두 만족하는 하나의

함수형 컴포넌트에서 react hooks를 사용하여 상태 관리를 해보자. React Hooks란? react Hook를 한마디로 요약하면, 클래스형 컴포넌트를 사용하지않고도 함수형 컴포넌트에서도 state 를 운용할 수 있는 기능을 말한다. 기존의 함수형 컴포넌트는

'인터페이스'의 사용법에 대해 알아보자. Interface란? 인터페이스란 간단하게 어떠한 두개의 시스템 사이에 상호작용할 수 있게 해주는 조건, 규약을 말한다. interface + 원하는 이름, 객체 안에 항목들을 넣어주고, 타입을 지정해준다. Interface

프로토타입 2번째, '프로토타입 체인'에 대해서 알아보자."오버라이드 = 덮어쓰기"생성자 함수를 이용하여 상속을 하다보면 물려받은 부모의 기능을 그대로 사용하지 않고 재정의해야 할 경우가 생긴다. 이때 자식클래스에서 부모클래스의 기능을 재정의할 때 사용하는 것이 '오버

'프로토 타입'의 개념에 대해 알아보자.

TypeScript의 목적, 사용법에 대해서 알아보자.자바스크립트에 타입을 부여한 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 변환해주어야한다.//ts코드function sum(a: number, b: number) { return a

'코어 자바스크립트' 책을 통해 콜백함수에 대해 깊게 알아보자.(챕터4) 콜백 함수 콜백 함수는 다른 코드(함수,메소드)에 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수를 말한다. 무언가 일을 다른 객체에게 시키고, 그 일이 끝나는 것을 기다리는 것이 아니라 그

웹사이트에서 많이 사용되고 있는 'tabs menu'를 리액트와 뷰를 이용하여 만들어보자.