코딩기록

Redux - 1. 수업소개

byein — Fri, 1 Sep 2023 10:47:41 +0900

Redux - A predictable state container for JavaScript apps.

Redux는 JS로 만든 애플리케이션들을 위한 예측 가능한 상태의 저장소라고 자신을 소개한다.

예측 가능한

SW 개발 시 가장 큰 위험은 복잡성인데, 그 이유는 눈에 보이지 않기 때문이다. 이는 개발자가 슬럼프에 빠지는 원인이 되기도 하고 개발자와 경영자 사이를 멀어지게 이간질 하기도 한다.

또 엄청난 자본과 인력을 투입한 차세대 프로젝트들이 실패로 돌아가는 것도 바로 이 복잡성 때문이다.

따라서 우리는 더 복잡한 애플리케이션을 만들기 위해 코드의 복잡성을 낮추고 싶어진다.

Redux는 애플리케이션의 복잡성을 획기적으로 낮춰서 우리의 코드가 어떤 결과를 가져올 지 예측 가능하게 만들어주는 도구이다.

그럼 이게 어떻게 가능한지 앞으로 살펴보자.

1. Single Source of Truth

가장 중요한 Redux의 특징으로 단 하나의 진실의 원천이라는 개념이 있다. 하나의 상태를 낳는다는 것이 Redux의 특징이다. 여기서 상태는 그냥 객체를 의미한다고 생각하면 된다.

즉, 하나의 객체 안에 애플리케이션에서 필요한 모든 데이터를 우겨 넣음으로 복잡성을 한 번 낮춘다.

한 곳에서 데이터를 중앙 집중적으로 관리하면 여러 곳에 흩어져 있는 것보다 훨씬 더 데이터를 관리하기 쉬워진다.

데이터는 너무 추상적으로 생각할 필요 없다. 예를 들어, contents를 다루고 id가 2인 글을 선택했다면 아래와 같은 상태가 될 것이다.

state = {
	contents: [
    	{id: 1, title: 'HTML', desc: 'HTML is ...'},
        {id: 2, title: 'CSS', desc: 'CSS is ...'}
    ],
    selected_id: 2
}

이렇게 단 하나의 state를 유지하는 것을 통해서 애플리케이션의 복잡성을 낮추는 것이 첫 번째 컨셉이다.

2. 기밀성, 무결성

중요한 데이터라 외부로부터 철저히 차단시켜 데이터 수정을 차단한다. 데이터를 읽고 쓰는 것은 인가된 담당자만을 통해서 할 수 있다. 여기서 담당자란 사람이 아닌 함수를 의미한다.

예를 들어, 데이터를 쓰고 싶다면 직접 쓰지 못 하고 dispatcher라는 것을 통해서 또, reducer라는 걸 통해서만 데이터를 수정할 수 있다.

그럼 redux한테 글을 쓰고 싶다, 선택하고 싶다고 얘기한다면 redux가 그에 따라 꼼꼼하게 기록해서 최종적인 결과인 state를 변경시켜주는 역할을 하게 된다. 직접 state의 값을 바꾸지 못한다는 것이다.

데이터를 가져갈 때도 getState라는 것을 통해서만 데이터를 가져갈 수 있다.

따라서 데이터를 외부에서 직접적으로 제어할 수 없도록 하는 걸 통해서 의도하지 않게 예기치 않게 state 값이 바뀌는 문제를 사전에 차단하는 걸 통해서 애플리케이션을 보다 예측 가능하게 만든다.

그리고 state의 값이 바뀔 때마다 state에 데이터를 사용하는 애플리케이션의 여러 부분들에 데이터가 바뀌었음을 알려주고 각자 할 일을 하도록 알리는 도구가 있다. 그럼 각각의 애플리케이션들을 서로에 대해 신경 쓸 필요없이 그냥 자기 할 일만 하면 된다. 다른 부분에 신경 쓸 것 없이 딱 그 부분에만 신경쓰면 되기 때문에 애플리케이션을 만드는 과정에서 훨씬 더 적은 정신적 에너지를 소비하게 될 것이다.

아직까지 이 개념은 추상적이지만 강의를 통해 코드로 학습하며 나중에 추상적인 개념까지 설명할 수 있을 정도가 되는 것이 이 학습의 목표이다.

3. Undo, Redo

redux의 특징은 undo와 redo를 쉽게 할 수 있다는 것이다.

왜냐하면 각각의 state 값들을 생성할 때 철저하게 통제하고 데이터를 만들 때 원본을 바꾸는 것이 아니라 원본을 복제하고 복제한 데이터를 수정해서 그것을 새로운 원본으로 만드는 방법을 채택하고 있다. 따라서 각각의 변화가 서로에게 영향을 전혀 주지 않는 독립된 형태를 유지할 수 있고 이런 특징을 잘 이용하면 undo, redo와 같이 애플리케이션의 상태를 바꾸는 것을 매우 쉽게 처리할 수 있다.

그리고 개발을 할 때 디버거를 통해서 애플리케이션을 현재 상태를 볼 수 있다. 그런데 redux는 현재 상태 뿐만 아니라 이전의 상태까지도 꼼꼼하게 기록한다. 이를 통해 과거의 어느 시점으로 돌아가서 그 시점에서 애플리케이션의 상태가 무엇인가를 찾아내는 걸 통해서 문제 해결을 훨씬 더 쉽게 할 수 있도록 도와준다.

4. Hot Module Reloading

우리가 코드를 작성하면 자동으로 작성한 코드가 애플리케이션에 반영된다. 그런데 단순히 그렇게 되는 게 아니라 더 진보된 기능을 보인다.

보통 이런 개발 환경은 데이터를 입력하고 난 뒤 수정되면 데이터가 사라지게 된다. 그럼 다시 입력해줘야 한다. 그런데 Hot Module Reloading이라는 것을 이용하면 애플리케이션은 새로 refresh가 되는데 데이터는 그대로 남아있기 때문에 다시 입력 작업을 할 필요가 없도록 우리의 개발 환경을 세팅할 수도 있다.

그럼 후진이 없는 전진만 있는 개발을 할 수 있다.

참고자료

생활코딩 - Redux

https://opentutorials.org/course/4901

Redux - 생활코딩

수업소개 예측 가능한 애플리케이션의 상태 저장소인 Redux를 다루는 수업입니다. 이 수업에서는 순수한 웹기술인 HTML, JavaScript와 Redux만을 이용해서 웹애플리케이션을 만들어 볼 것입니다. 이

opentutorials.org

Typescript - 8. TypeScript 입문 수업을 마치며

byein — Fri, 1 Sep 2023 10:24:10 +0900

TypeScript 입문 수업을 마치며

TypeScript는 정적 타입 검사를 제공하여 코드의 품질과 안정성을 향상시키며, 개발 과정에서 오류를 방지할 수 있도록 도와준다. 지금까지 TypeScript의 기본 사항을 배웠다.

하지만 TypeScript는 더 많은 고급 기능을 제공하며, 이를 이용하면 코드를 더욱 강력하고 유연하게 만들 수 있습니다.

인터페이스
제네릭
네임스페이스와 모듈
타입 가드와 타입 단언
맵드 타입과 조건부 타입
유틸리티 타입
타입스크립트와 함께 사용되는 라이브러리 및 프레임워크

이러한 고급 주제들을 통해 TypeScript를 더 깊게 이해하고, 코드의 효율성과 품질을 더욱 향상시킬 수 있다. 앞으로 TypeScript를 학습하며 프로젝트를 더 발전시킬 수 있을 것이다!

참고자료

생활코딩 - Typescript

https://opentutorials.org/course/5080

TypeScript - 생활코딩

수업소개 타입스크립트 입문자를 위한 수업입니다. 수업대상 자바스크립트 개발자 버그 위험을 낮추고 싶은 개발자 중요한 기능만 빠르게 배우고 싶은 분 선행학습 이 수업을 듣기 위해서는

opentutorials.org

Typescript - 7. TypeScript의 Type Aliases

byein — Fri, 1 Sep 2023 10:23:56 +0900

TypeScript에서 Type Aliases

Type Aliases는 TS에서 기존 타입에 사용자 정의 이름을 부여할 수 있는 방법이다. 코드의 가독성을 높이고 복잡한 타입 구조를 단순화할 수 있다. Type Aliases는 원시 데이터 타입, Array, Tuple, 객체, 함수 등 다양한 타입에 적용할 수 있다.

1. 원시 데이터 타입의 별칭

TS에서 원시 데이터 타입의 별칭을 사용하면 특정 데이터 타입을 명확히 표현할 수 있다.

type Age = number;
const myAge: Age = 30;

위처럼 age와 같은 숫자를 나타내는 변수를 다룰 때, number 대신 Age라는 별칭을 사용할 수 있다.

2. Array와 Tuple, 객체, 함수에 적용한 사례

Array, Tuple, 객체, 함수와 같은 컬렉션 데이터 타입에도 Type Aliases를 적용할 수 있다.

1) Array

// Array
type Names = string[];
const myFriends: Names = ['Alice', 'Bob', 'Charlie'];

2) Tuple

// Tuple
type Coordinates = [number, number];
const myLocation: Coordinates = [37.7749, -122.4194];

3) 객체

// 객체
type User = {
  id: string;
  name: string;
  age: number;
};
const user: User = { id: '1', name: 'John Doe', age: 28 };

4) 함수

// 함수
type GreetingFunction = (name: string) => string;
const greet: GreetingFunction = (name) => `Hello, ${name}!`;

3. 좀 더 복잡한 형태

원시 데이터 타입의 별칭을 컬렉션 데이터 타입의 원소로 사용할 수도 있다. 이를 통해 코드의 가독성을 높일 수 있다.

type UserID = string;
type UserName = string;
type Age = number;
 
type User = {
  id: UserID;
  name: UserName;
  age: Age;
};
 
const user: User = { id: '1', name: 'John Doe', age: 28 };

참고자료

생활코딩 - Typescript

https://opentutorials.org/course/5080

TypeScript - 생활코딩

opentutorials.org

Typescript - 6. TypeScript의 함수

byein — Thu, 31 Aug 2023 16:40:58 +0900

TypeScript에서 함수의 데이터 타입

TS에서 함수를 사용할 때, 매개변수와 반환 값에 대한 데이터 타입을 지정할 수 있다. 이를 통해 코드의 안정성과 가독성이 높아진다.

예제 1: 매개변수와 반환 값의 데이터 타입 지정

function add(a: number, b: number): number {
  return a + b;
}

위의 함수는 두 개의 숫자를 매개변수로 받고, 두 숫자의 합을 반환한다. 이때 각 매개변수와 반환값에 데이터 타입을 지정해줬다.

예제 2: 선택적 매개변수 사용하기

함수에서 일부 매개변수는 선택적으로 받고 싶을 때, 매개변수 뒤에 '?'를 사용한다.

function greet(name: string, greeting?: string): string {
  if (greeting) {
    return `${greeting}, ${name}!`;
  } else {
    return `Hello, ${name}!`;
  }
}

위 코드에서 greeting은 선택적 매개변수로 지정되어 값을 전달하지 않으면 기본 인사말이 사용되도록 한다.

참고자료

생활코딩 - Typescript

https://opentutorials.org/course/5080

TypeScript - 생활코딩

opentutorials.org

Typescript - 5. TypeScript의 객체

byein — Thu, 31 Aug 2023 15:10:48 +0900

TypeScript에서 객체의 데이터 타입

객체의 데이터 타입을 정의하려면, 타입 주석을 사용하여 객체의 속성과 해당 속성의 데이터 타입을 명시하면 된다. 객체의 데이터 타입을 지정하는 것은 개발자가 코드를 더 명확하게 이해하고, 에러를 줄이는 데 도움이 된다.

// js
const user = {
  name: "John",
  age: 25
};

// ts
const user: {name: string, age: number} = {
  name: "John",
  age: 25
};

위 코드에서 user 객체를 생성할 때 타입 주석을 사용하여, 객체의 속성 name이 문자열이고, 속성 age가 숫자인 것을 명시했다. 이를 통해 객체의 속성과 데이터 타입이 올바르게 지정되었는지 확인할 수 있다.

만약 user 객체에 잘못된 데이터 타입의 속성을 할당하려고 하면, TS는 컴파일 시점에 오류를 발생시킨다.

const user: {name: string, age: number} = {
  name: "John",
  age: "25" // 오류: 타입 'string'은 'number'에 할당할 수 없습니다.
};

이렇게 명시적으로 객체의 데이터 타입을 정의하면 코드의 가독성과 안정성이 향상된다.

참고자료

생활코딩 - Typescript

https://opentutorials.org/course/5080

TypeScript - 생활코딩

opentutorials.org

Typescript - 4. TypeScript의 Array와 Tuple

byein — Thu, 31 Aug 2023 14:56:39 +0900

TypeScript에서 Array와 Tuple의 데이터 타입

TS는 JS의 타입을 확장하여 개발자에게 더 강력한 타입 검사와 편의성을 제공한다. 여기서는 TS에서 Array와 Tuple의 데이터 타입을 다루는 방법과 차이점에 대해 간략하게 다뤄보자!

1. Array 타입

TS에서 배열 타입을 선언하는 방법은 두 가지가 있다.

1) 타입 + [ ]

// 첫 번째 방법: 타입 + []
let arr1: number[] = [1, 2, 3];

2) Array<타입>

// 두 번째 방법: Array<타입>
let arr2: Array = [1, 2, 3];

두 가지 방법 모두 동일한 결과를 가져오며 개인의 취향에 따라 선택할 수 있다.

2. Tuple 타입

Tuple은 고정된 길이와 타입의 배열이다. 각 요소의 타입과 순서가 정해져 있다. JS는 없는 타입이며, TS에서만 제공된다.

let tuple: [string, number, boolean] = ['Hello', 42, true];

Array와 Tuple의 차이점

Array는 길이가 가변적이며, 동일한 타입의 요소로 구성된다.
Tuple은 길이가 고정되어 있으며, 각 요소의 타입이 정해져 있다. JavaScript에는 없는 데이터 타입이며, TypeScript에서만 사용할 수 있다.

Array와 Tuple 데이터 타입을 사용하여 TS에서 배열과 고정 길이 배열을 손쉽게 정의할 수 있다.

참고자료

생활코딩 - Typescript

https://opentutorials.org/course/5080

TypeScript - 생활코딩

opentutorials.org

Typescript - 3. TypeScript의 데이터 타입과추론

byein — Thu, 31 Aug 2023 14:43:56 +0900

왜 데이터 타입이 그렇게 중요한가?

JS의 변수에는 어떤 데이터 타입의 값도 할당 될 수 있다.

let myname = 'byein';

string 값이 담겨 있던 변수에 아래처럼 number 값이 담기더라도 에러가 발생하지 않는다.

myname = 1;

JS는 이런 문제를 사전에 막아주지 못하고 나중에 프로그램을 사용하다가 나중에 버그가 있는 걸 발견할 수 있다.

그럼 타입스크립트는 어떻게 이런 문제를 해결할 수 있을까?

변수에 데이터 타입을 지정하는 방법

타입스크립트는 변수 선언 시에 데이터 타입을 지정한다. 그럼 TS를 JS로 컴파일 할 때 다른 값이 할당되면 오류를 발생시켜 알려준다.

let myname: string = 'byein';

myname 변수에 string 타입을 지정했는데 아까처럼 number 타입을 할당하려고 하면 컴파일 에러가 발생하게 된다.

// 아래 코드는 오류를 발생시킵니다.
myname = 1;

데이터 타입의 종류

데이터 타입은 크게 기본 데이터 타입, 객체 타입, 특수 타입으로 나눌 수 있다.

기본 데이터 타입

number: 숫자 타입으로, 정수와 실수를 포함한다.
string: 문자열 타입이다.
boolean: 참(true)과 거짓(false)을 나타내는 불리언 타입이다.
null: 값이 없음을 나타내는 타입이다.
undefined: 값이 할당되지 않은 변수의 기본값인 타입이다.

객체 타입

object: 객체를 나타내는 타입이다.
array: 동일한 타입의 요소를 가진 배열을 나타내는 타입이다.
tuple: 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입이다. (TS 전용)

특수 타입

any: 어떠한 타입이든 할당될 수 있는 타입이다. (TS 전용)
unknown: 타입을 미리 알 수 없는 경우에 사용되는 타입이다. 이 타입은 안전한 타입 검사를 위해 사용된다. (TS 전용)
never: 절대 발생하지 않는 값의 타입을 나타낸다. 예를 들어, 함수가 항상 예외를 발생시키거나 무한 루프를 실행할 때 이 타입을 사용할 수 있다. (TS 전용)

타입 추론 기능

타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단할 수 있다. 즉, 명시적으로 타입을 지정하지 않아도 초기에 할당된 값을 바탕으로 타입스크립트 컴파일러가 변수의 타입을 추론한다.

let age = 30;

예를 들어 위의 코드에서 age 변수에 명시적으로 타입을 지정하지는 않았지만, 초기 값인 number 타입이 자동으로 추론된다.

이런 타입 추론은 코드를 간결하게 작성할 수 있도록 도와주지만, 모호한 경우나 복잡한 로직에서는 타입을 명시해주는 것이 좋다.

이렇게 타입스크립트의 데이터 타입을 이용하여 코드의 안정성을 높이고 개발자들이 더 효율적으로 협업할 수 있다.

참고자료

생활코딩 - Typescript

https://opentutorials.org/course/5080

TypeScript - 생활코딩

opentutorials.org

Typescript - 2. TypeScript 실습환경 - 내 컴퓨터에서 실행하기

byein — Thu, 31 Aug 2023 13:30:00 +0900

Node.js 설치

만약 Node.js가 이미 설치되어 있다면 넘어가고 아니라면 아래 사이트 가서 LTS(Long Term Support) 버전 설치

https://nodejs.org/

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

TypeScript 설치

npm install typescript --save-dev

프로젝트 초기화

npx tsc --init

위 명령어를 실행하면 tsconfig.json 파일 생성이 된다.

tsconfig.json 파일을 열고 아래 설정을 추가한다. src 폴더 내에 있는 모든 TS 파일을 컴파일하고, 결과를 build 폴더에 저장한다.

{
  "include": ["src"],
  "compilerOptions": {
    "outDir": "./build"
  }
}

TypeScript 컴파일

아래 명령어로 TS 컴파일러를 사용한다.

npx tsc

TS 파일의 변경사항을 실시간으로 감지하고 컴파일하려면 다음 명령어를 실행하면 된다.

npx tsc --watch

참고자료

생활코딩 - Typescript

https://opentutorials.org/course/5080

TypeScript - 생활코딩

opentutorials.org

Typescript - 1. TypeScript 실습환경 - TS Playground

byein — Thu, 31 Aug 2023 13:01:34 +0900

TS Playground

TS 온라인 플레이그라운드는 웹 브라우저에서 TS 코드를 작성하고 실행할 수 있는 도구다.

사용방법은 다음과 같다.

1. 접속

https://www.typescriptlang.org/play

TS Playground - An online editor for exploring TypeScript and JavaScript

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

www.typescriptlang.org

2. 코딩

코드를 작성하면 자동으로 TS를 JS 코드로 변환하고 오른쪽 창에 변환된 코드를 보여준다.

3. 실행

"Run" 버튼을 클릭하여 TS 코드를 실행할 수 있다. "Console" 탭에서 출력 결과를 확인할 수 있다.

4. 옵션

"Options"를 클릭해 컴파일러 설정을 변경할 수 있다.

5. JavaScript

TS가 JS로 변환된 결과를 볼 수 있다.

6. 결과

console.log의 실행 결과가 출력된다.

7.에러

에러를 확인할 수 있다.

참고자료

생활코딩 - Typescript

https://opentutorials.org/course/5080

TypeScript - 생활코딩

opentutorials.org

Typescript - 0. 소개

byein — Thu, 31 Aug 2023 12:52:19 +0900

Typescript란?

Typescript = Javascript + Type Check

TS는 JS에 타입 체크가 추가된 것으로 JS를 코딩하게 되면 100% 동작한다. 하지만 JS에서 TS를 코딩하게 되면 동작하지 않는다.

범주가 다르기 때문이다.

데이터 타입 체크

JS는 무엇이든 담을 수 있어 편리하지만, 그 안의 내용을 정확히 알 수 없어 매번 확인해야만 한다. 이처럼 JS는 Dynamic Type이기 때문에 변수의 데이터 타입을 명확하게 알기 어렵고 따라서 데이터 타입의 안정성이 낮다.

TS는 안에 어떤 것이 담기는지 명확하게 알 수 있으며, 다른 것들을 담지 못하도록 보장한다. 이처럼 TS는 변수의 데이터 타입을 명확하게 지정해주어 안정성을 높여준다.

TS를 왜 사용해야 하는가?

JavaScript에 타입 체크 기능을 추가 할 수 있습니다.
타입스크립트의 문법은 아는만큼, 원하는만큼 사용할 수 있습니다.
github에 따르면 4번째로 인기있는 언어가 되었습니다.

참고자료

생활코딩 - Typescript

https://opentutorials.org/course/5080

TypeScript - 생활코딩

opentutorials.org