본문 바로가기

전체 글

 (125)
[TypeScript] 타입스크립트의 타입 선언 : Array 와 Tuple 타입스크립트와 배열 타입스크립트에서 배열의 타입 선언은 아래와 같이 선언합니다. // 배열의 타입 선언 let stringArray: string[] = ["hello", "world"]; let numberArray: number[] = [1, 2, 3]; 자바스크립트의 배열은 destructuring assignment가 가능합니다. 이 문법을 사용하면 기존에 작성된 배열에다가 새로운 요소를 간편하게 추가할 수 있습니다. // 배열의 타입 선언 let stringArray: string[] = ["hello", "world"]; let numberArray: number[] = [1, 2, 3]; // 배열의 destructuring 문법 let newArray: string[] = [...strin..
[TypeScript] 타입스크립트와 타입 선언 타입스크립트와 타입 타입스크립트는 모든 변수, 함수의 파라미터나 리턴타입, 오브젝트(Object), 클래스(class) 등에 대하여 타입을 설정할 수 있다. 말 그대로 Java와 같은 프로그래밍 언어에서 자료형을 정하는 것과 같습니다. 타입스크립트의 타입 추가 타입스크립트는 자바스크립트 변수 등에 타입(like 자료형)을 추가할 수 있습니다. // 자바스크립트 변수에 타입을 추가하기 let someVariable1: number = 123; let someVariable2: string = "hello"; let someVariable3: boolean = true; // let someVariable4: number = "123"; // 오류! 타입스크립트는 타입과 다른 값이 변수에 할당되려 하면 아래..
[TypeScript] 타입스크립트와 설치 TypeScript란? 타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다.[4] 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다. 타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다.[5] 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다. 타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다. 타입스크립트는 모든 운영 체제, 모든 브라..
[REACT] Immer와 불변성 Immer란?? immer에 대해 이야기 하기 전 우리는 리액트의 함수형 컴포넌트와 Hook에 대하여 이해해야 합니다. https://1-hee.tistory.com/27 [REACT] 리액트의 컴포넌트(COMPONENT) 1. REACT의 컴포넌트(Component)란? 리액트는 화면을 컴포넌트(Component) 단위로 구성합니다. 컴포넌트란 화면을 구성할 수 있는 각각의 자바스크립트 파일들을 의미하며 root 태그로 묶여있습니다. 리 1-hee.tistory.com https://1-hee.tistory.com/33 [REACT] 리액트와 훅(HOOK) 리액트의 훅(Hook)이란? 리액트의 함수형 컴포넌트는 클래스형 컴포넌트와 같은 문법으로 state를 생성, 작성, 수정 등이 어렵습니다. 그래서 ..
[REACT] Context API ContextAPI란? 리액트에서 컴포넌트간 데이터의 흐름은 단방향 입니다. 이러한 특징은 JavaScript라는 언어의 특성 상 디버깅이 어렵다는 단점을 보완하기 위해 도입된 rule에서 기인하는데요. 그래서 컴포넌트 간에 데이터를 전달하려면, 부모 컴포넌트로부터 props의 형태로 값을 물려 받아야 할 것입니다. 개발을 편하게 하려고 이러한 규칙을 정했다지만, 개발을 하다보면 컴포넌트 간에 데이터를 송수신 해야 할 경우가 무척이나 많겠죠? 아래의 모식도를 보겠습니다. 리액트로 개발된 어떤 SPA가 위의 모식도와 같이 구성되어 있다고 가정해 봅시다. 개발자가 C라는 컴포넌트에서 이벤트가 발생하면 이웃한 B와 E 컴포넌트에서 어떤 데이터가 반영되고자 한다면 모식도 처럼 최상위 컴포넌트인 App 컴포넌트부..
[REACT] 리액트와 라우터(Router) 라우터란? 화면에 보여질 컴포넌트를 동적으로 전환할 수 있도록 하는 기능입니다. 구체적으로 설명하자면, 화면에 보여질 컴포넌트들을 사용자가 URL에 맞추어 구성하는 것입니다. 리액트의 컴포넌트만으로도 화면을 구성할 수 는 있지만, 다양한 사용자의 요청에 대해서 동적으로 화면을 구성하고 동적으로 바꾸려면 라우팅 기능은 필수입니다. index.js와 라우터 App.js 파일도 거슬러 올라가면 Router로 구성되어 있습니다. BrowserRouter라는 태그로 감싸진 형태입니다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportW..
[REACT] 리액트와 훅(HOOK) 리액트의 훅(Hook)이란? 리액트의 함수형 컴포넌트는 클래스형 컴포넌트와 같은 문법으로 state를 생성, 작성, 수정 등이 어렵습니다. 그래서 함수형 컴포넌트에서도 클래스형 컴포넌트처럼 state나 여러 값들 그리고 각종 가변적인 상황에 대해 대응할 수 있도록 Hook이라는 함수를 통해 값을 다룰 수 있도록 지원합니다. useState state를 관리하기 위한 함수입니다. 자바스크립트의 destructuring 문법으로 변수, set 함수를 할당하여 사용합니다. import { useState } from "react"; const MyUseStateComp = () => { // 카운터 const [value, setValue] = useState(0); // 입력창 const [name, set..
[REACT] 리액트의 라이프사이클(LifeCycle) 리액트의 라이프사이클(LifeCycle) 리액트의 각 컴포넌트는 생성되고 사라지는 일련의 생애주기(LifeCycle)를 가집니다. 단, 라이프 사이클은 리액트의 컴포넌트 중 클래스형 컴포넌트에만 적용 가능합니다. 함수형 컴포넌트는 Hook을 통해 얼추 이 라이프 사이클을 흉내낼 수는 있지만, 기본적으로 라이프 사이클은 클래스형 컴포넌트에서 사용 가능합니다. 리액트의 라이프사이클 흐름도(Life Cycle’s Flow) 리액트는 크게 마운트 - 업데이트 - 언마운트 의 흐름을 따른다고 설명합니다. 마운트는 리액트 컴포넌트가 화면에 등장할 때 한 번 동작하는 단계로, constructor 등으로 state를 설정하는 등의 작업을 하는 단계입니다. 업데이트는 컴포넌트의 input 상자에 값이 바뀐다거나, 클릭..

티스토리툴바