본문 바로가기

Programming310

[Redux] 리덕스 1. 리덕스란? Redux 리덕스란 자바스크립트 상태 관리 라이브러리입니다. 상태 관리 라이브러리도 무수히 많지만 그 중에서 가장 많은 다운로드 수를 기록하고 있습니다. 앞에 소개에서 자바스크립트의 상태 관리 라이브러리라고 하는 만큼 리액트뿐만 아니라 바닐라부터 앵귤러, Vue 등 다양한 자바스크립트 라이브러리, 프레임워크에서 사용을 할 수 있는 것이 리덕스입니다. 리덕스를 통해 리액트는 전역 상태 관리를 편리하게 할 수 있습니다. 뿐만 아니라 리덕스는 다양한 도구들과 미들웨어 덕분에 리액트에서 중요한 상태관리를 편하게 만들어주는 도구이기도 합니다. 2. 리덕스의 기본 개념 리덕스에서 사용되는 몇 가지 기본적인 개념들을 짚고 넘어가겠습니다. 2-1. 액션 action 액션은 상태에 변화가 필요해지면 발생.. 2022. 1. 4.
[Typescript] readonly와 순수 함수 1. 순수 함수 우선 순수 함수에 대해 설명을 해야합니다. 순수 함수(pure function)이란 함수형 프로그래밍에서 사용되는 언어로 함수가 수행하는 기능 외에 다른 효과가 나타나지 않는 것을 의미(부작용이 없다)합니다. 순수 함수가 아니고 기능 외에 다른 효과가 나타나는 함수를 불순 함수(impure function)이라고 부릅니다. 불순 함수는 순수 함수로 만드는 조건에 부합하게 재작성하면 순수 함수로 만들 수 있으며, 순수 함수의 조건에는 다음과 같은 조건들이 있습니다. 함수 내부에 입출력 코드가 존재하면 안 된다. 함수 내부에서 매개변수가 변경되면 안 된다. 함수는 만들어진 결과를 즉시 반환한다. 함수 내부에 전역/정적 변수를 사용하지 않는다. 함수가 예외를 발생시키지 않는다. 함수가 콜백이거.. 2022. 1. 3.
[Typescript] 배열 메소드 filter, map, reduce 이번에는 자바의 Array 객체의 메소드가 아닌 타입스크립트 배열 메소드인 filter, map, reduce 세가지를 소개하겠습니다. 이 세 메소드는 메소드 체인으로 연결되어 자주 등장하는 세쌍둥이급의 메소드입니다. 1. filter 가장 먼저 만날 메소드는 filter입니다. 자바스크립트 Array.filter처럼 배열을 특정 조건으로 걸러주는 메소드입니다. .filter(콜백함수); .filter((요소: 타입, 인덱스?: number) => {}); 다음은 숫자 배열에서 filter 메소드로 짝수 요소만을 추출해내는 코드입니다. let nums: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let result: number[] = nums.filter((value.. 2022. 1. 3.
명령형 프로그래밍과 선언형 프로그래밍 1. 명령형 프로그래밍 명령형 프로그래밍은 input data를 받아들여 가공해 output data를 만들어내고 출력하는 구조의 프로그래밍 방식입니다. 즉, 문제를 어떻게(how) 해결할 것인지를 설명하는 프로그래밍 방식입니다. 예를 들면 회사로 출근을 하는 것을 명령형 프로그래밍으로 만들어보겠습니다. 집을 나선다. xxxx번 버스를 탄다. xxxx번 버스로 환승한다. 버스에서 내려 회사 건물에 들어간다. 사무실에 들어가 출근 인증을 한다. 예시처럼 어떻게 해서 목적을 달성한다라는 프로그래밍입니다. 프로그램이 수행해야 하는 작업들을 일일히 나열하기 때문에 개념적으로 이해하기 쉽고, 익숙합니다. 2. 선언형 프로그래밍 선언형 프로그래밍은 명령형 프로그래밍과는 대조되는 개념으로, 과정보다는 달성에 필요한 .. 2021. 12. 31.
[Typescript] 배열 배열의 선언은 자바스크립트와 동일합니다. new Array를 통한 인스턴스 생성 방식 혹은 []를 이용한 배열 생성 방식. 하지만 타입스크립트 배열의 특징은 배열에 타입이 존재한다는 점 입니다. 1. 배열의 선언과 타입 타입스크립트에서 배열에 타입을 주는 방식은 변수때와 동일합니다. 다만 타입 뒤에 대괄호([])가 들어간다는 점이 다릅니다. let 배열명: 타입[] = []; 배열에 타입을 주게하면서 다음과 같은 아름다운 코드는 불가능해졌습니다. let arr = [1, '안녕', true, [0, 4], {}]; 다음은 몇 가지 타입스크립트 배열 선언의 예시입니다. let nums: number[] = [1, 2, 3, 4]; let str: string[] = ['Typescript', 'Javasc.. 2021. 12. 31.
[Typescript] 메소드 클래스의 속성으로 오는 함수를 메소드라고 부릅니다. 타입스크립트에서 이 메소드들을 사용하는 방법들을 소개해드리려고 합니다. 1. 클래스 메소드 이전 포스트에서 소개해드린대로 클래스 메소드를 구현해보면 다음과 같습니다. class Student { constructor(protected name: string) {} printInfo: () => void = function (): void { console.log(`이름: ${this.name}`); } } 이렇게 보니 좀 복잡하고 지저분한 감이 있지않아서 타입스크립트에서는 이것을 간단하게 줄여쓸 수 있도록 단축 구문을 제공합니다. 위의 printInfo() 메소드를 단축구문을 이용해서 줄여보겠습니다. class Student { constructor(p.. 2021. 12. 31.
300x250

티스토리툴바