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

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

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

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

2차 프로젝트 후기를 작성해보자. .gif) 2차 프로젝트를 마치며 우선 조 분위기가 너무 좋아서 항상 웃으면서 코딩을 했던게 기억에 많이 남는다. ㅎㅎ 코딩을 잘하는 사람이 많다면 당연히 좋겠지만 개인적으로는 분위기가 편하고, 서로 격려해주는 팀과 함께 프로젝트를

리액트 훅스 두번째 시간, 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'를 리액트와 뷰를 이용하여 만들어보자.

지금까지 배운 내용을 토대로 간단한 'todo-list'를 만들어보자.

컴포넌트 재사용성을 높여주는 'slot'에 대해 알아보자. Slot 슬롯은 컴포넌트의 재사용성을 높여주는 기능을 함으로써, 특정 컴포넌트에 등록된 하위 컴포넌트의 마크업을 확정하거나 재정의할 수 있다. 엄격한 부모-자식 관계가 아닌

Vue에서 자식에게 부모에게 데이터를 보내는 경우에 대해 알아보자.부모에서 자식으로 데이터를 전달하기 위해서 props를 사용한다. 데이터를 받을 자식 컴포넌트에 props를 선언해준다.props에 받은 값을 data, methods 다른 곳에서 직접적으로 바꿔주어 사

뷰 라우터를 사용하려면 이 속성으로 뷰 라우터 객체를 넘겨줘야 한다.이제는 라우터를 이용해 출력될 부분을 입력해야하는데, 루트 컴포넌트인 App.vue에 라우터 뷰를 추가하면 된다. router-view태그를 사용하면 경로에 따라서 그에 맞는 컴포넌트를 렌더링해준다.

Vue에서 성능 최적화를 하기위해서는 computed와 watch에 대해서 잘 알아야 한다.data를 가공해서 보여줘야하는 경우 사용된다. 아래와 같은 템플릿을 사용하면 간단명료하지않기 때문에 computed를 사용하면 좋다. 계산된 값을 여러번 참조해야할 때 성능향