제네릭이란 ? 타입스크립트의 제네릭은 코드의 재사용성, 타입 안전성, 유연성을 향상시키는 기능입니다. 제네릭을 사용하면 다양한 타입을 처리할 수 있는 유연한 함수, 클래스, 인터페이스를 작성할 수 있습니다. 제네릭의 장점 타입 안전성 : 제네릭을 사용하면 컴파일 시점

Next.js 란? Next.js 공식 홈페이지 ( https://nextjs.org/ ) 에서 말하는 Next.js 입니다. 약 몇년간 React.js, Vue.js 등의 라이브러리를 사용하여 SPA ( Single Page Application ) 를 구축하는게

자바스크립트 ES6 의 클래스 문법을 살펴보겠습니다위 문법으로 클래스를 작성하면 타입스크립트는 에러를 표시합니다.위와 같이 작성해야 에러를 표시하지 않습니다.또 다른 방법으로는 접근제한자, 읽기전용 속성으로 만드는것입니다.ES6 클래스 문법에서는 접근제한자를 지원하지

const 키워드로 선언된 상수 name1은 이후에 값 변경이 불가능하기 때문에 타입이 '김태형' 이라는 리터럴 값 그 자체가 됐습니다. 반면,let 키워드로 선언된 변수 name2는 추후에 언제든 값이 변경될 수 있기 때문에 string 타입으로 추론되었습니다.str

이번 포스팅에서는 타입스크립트 함수 타입정의에 대해 알아보게겠습니다.함수 정의하기옵셔널 매개변수매개변수에 디폴트 값 지정여러타입을 가지는 매개변수매개변수를 동적으로 받기this의 타입 정의하기함수 오버로드함수 오버로는 같은 함수명을 가진 함수를 매개변수의 타입이나 갯수

타입스크립트 코드 작성시 인터페이스를 사용하는 이유는 아래와 같습니다.타입 체킹(Type Checking)인터페이스를 사용하면 객체의 구조를 정의할 수 있습니다. 이를 통해 타입스크립트는 해당 객체가 인터페이스에 정의된 구조와 일치하는지 확인할 수 있어, 타입 관련 오

이번 포스팅에서는 타입스크립트에서 사용하는 기본 타입을 짚고 넘어가려 합니다. 붉은색 사각형 표시가 된 타입들만 우선 짚고 넘어가겠습니다. call signature 미리 지정해놓은 타입을 사용할 수 있습니다. Any 어떠한 값도 가리지 않고 할당 가능 원시 타

이 시리즈에서는 타입스크립트에대해 이야기해보려고 합니다. 개인적으로 공부하는 내용으로 유튜브에 코딩앙마 님의 강의를 토대로 글을 작성해보려고합니다. 포스팅에 앞서 타입스크립트 셋팅을 알아보겠습니다. 브라우저는 타입스크립트를 이해하지 못한다 타입스크립트 -> 자바스

Flex란? css의 레이아웃 전용 기능을 하는 속성입니다. 초창기의 테이블 레이아웃을 벗어나 최근 들어서까지 float 과 display 속성을 사용한 레이아웃 사용했었습니다. 이런 방법들은 css를 이용해 단순히 레이아웃을 아름답게 만들기위한 편법 같은것에 불과했

Redux 저장소는 비동기 논리에 대해 아무것도 모릅니다. 동기적으로 작업을 전달하는 방법, 루트 리듀서 함수를 호출하여 상태를 업데이트하는 방법, 변경된 내용을 UI에 알리는 방법만 알고 있습니다. 모든 비동기성은 저장소 외부에서 발생해야 합니다. 앞서 우리는 Re

redux-action 라이브러리액션 생성함수를 가독성 좋게 작성할 수 있다.리듀서 작성시 swicth/case 문 대신 handleActions 함수를 사용하여 가독성 좋게 작성할 수 있다.라이브러리 설치필요한 함수 임포트액션 생성함수리듀서 함수객체의 key를 \[]

State상태는 애플리케이션의 데이터를 나타내며, 스토어에 저장됩니다. 리덕스의 핵심 목적은 이 상태를 중앙에서 관리하고 예측 가능하게 만드는 것입니다.Action상태 변경의 종류를 나타내는 객체, 일반적으로 type 속성을 포함하고 추가 데이터를 담을 수 있다. ty

리액트 프로젝트에서 전역적으로 관리할 상태가 있다면 최상위 컴포넌트에 상태를 선언하고 그 상태를 변경할 함수를 Props로 전달하곤 했습니다.프로젝트 크기에따라 컴포넌트 갯수는 비약적으로 늘어날 수 있는데, 그렇다면 최상위 컴포넌트에서 계속해서 Props를 이용하여 하

이번 포스팅은 간단한 뉴스뷰어 앱을 만들어보려 합니다. 리액트를 다루는기술에 나오는 방식대로 진행합니다. 웹앱을 만들다보면 처리하는데 시간이 걸리는 작업이 있는데, 서버측에 데이터를 요청하는 작업이 대표적입니다. 동기방식으로 처리해버리면 서버측에서 응답이 오기전에 우

라우팅이란?웹애플리케이션에서 라우팅이란 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미합니다.소규모 프로젝트는 하나의 페이지로도 충분하지만, 프로젝트의 사이즈가 커질수록 페이지를 분리해야합니다.게시판을 예를들어볼까요?Write : 게시글 작성 페이지L

이번 포스팅에서는 리액트 불변성을 유지해주는 라이브러리인 immer에대해 적어보려 합니다.객체나 배열의 구조가 복잡해진다면, 관리하는 상태를 업데이트하는 방법또한 복잡해지게 되는데. 이 때 immer 를 사용하면 불변성을 유지시켜줍니다.예시위 코드의 불변성을 지켜내려면

화면에서 사용하는 컴포넌트의 갯수가 많아지고, 한 번의 이벤트에 리렌더링되는 컴포넌트가 많아질수록 성능은 안좋아지게 됩니다. 체크를 할때마다 모든 리스트 아이템이 리렌더링 된다고 생각하면 어떤가요 즉각적인 반응이 오지않고 지연이 발생하게 됩니다. 할 일 버튼 클릭

styled-component 를 배우기전에 ES6의 템플릿 리터럴 문법을 알고넘어가려 합니다. 템플릿 리터럴 위와같이 사용이 가능한데, 객체나 함수를 출력하면 어떻게될까요? 위 문법을 이해하셨다면 이제 리액트 스타일링의 꽃인 Css-in-Js에 관해 포스팅하려고

CSS 파일을 불러와서 사용할 때, 클래스 이름을 고유한 값의 형태로 자동으로 만들어서 클래스명의 중복을 방지해주는 기술입니다.파일명\_클래스명\_해시값 의 형태로 만들어줍니다.파일명.module.css 확장자로 저장하기만하면 적용됩니다.모듈화 된 CSS 파일은 파일을

컴포넌트 스타일링에는 3가지 종류가 있습니다. 일반 CSS CSS Module Styled-Component 일반 CSS Css 파일을 만들어서 일반적으로 알고있는 Css스타일링을 합니다. 사용하고 싶은 Css 파일을 import 합니다. JSX 네이밍 컴포넌트