All

[Typescript] 타입스크립트란?

이제는 프로젝트를 진행하면서 항상 타입스크립트 문법으로 구현했지만 블로그를 한 번도 쓰지 않았다. 더 늦기전에 타입스크립트에서 하나 둘씩 정리해서 써 볼려고 한다. Typescript란? 타입스크립트는 마이크로소프트에서 개발한 오픈소스 프로그래밍 언어이다. 자바스크립트에 타입을 부여한 언어로 자바스크립트의 확장된 언어이다. 대규모 애플리케이션을 개발하는데 자바스크립트가 어렵고 불편하다는 불만에 대응하기 위해서 개발되었다. 자바스크립트는 동적 타입 언어(dynamic type language) 이기 때문에 런타임 속도는 빠르지만 타입 안정성이 보장되지 않는다. 여기서 타입 안정성이란 값의 종류가 잘못 전달될 경우 버그를 잡기 어렵다는 것을 의미한다. 타입스크립트는 정적 타입 언어(static type la..

[Redux] Redux?

Redux 시작하기 Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 즉, 일관적으로 동작하고, 서로 다른 환경에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와준다. 본격적으로 들어가기 전에 리덕스의 역사를 알아보자 MVC 아키텍처의 한계 애플리케이션을 작성해 본 개발자라면 한 번쯤은 사용 혹은 들어봤을 MVC 패턴에 대해 알아보자. MVC 패턴에서 Controller는 Model에 정의된 데이터를 조회하거나 업데이트 하는 역할을 하며, 변결된 Model의 데이터를 View에 반영한다. 사용자는 View를 통해 데이터를 입력하고 Model에 반영되며, View와 Model은 데이터를 양방향으로 주고받는 형태이다. 하지만 프로젝트 규모가 커질수록 수많은 View와 Modele들이 생겨..

6장 반복기와 생성기

이번 장에서는 타입스크립트 언어가 제공하는 반복기와 반복기 제공자, 그리고 생성기에 대해 알아보자. 6-1 반복기 이해하기 실습 프로젝트 설정 이번 장에서 소개하는 예제는 Node.js 설정과 tsconfig.json 파일에 별도의 설정이 필요하다. 먼저 다음 명령을 터미널에서 실행하자. npm init -y npm i -D typescript ts-node @types/node mkdir src 다음, tsc —init 명령으로 tsconfig.json 파일을 생성하고 다음 내용으로 대체하자. // tsconfig.json { "compilerOptions": { "module": "commonjs", "esModuleInterop": true, "target": "es2015", "moduleReso..

5장 배열과 튜플

함수형 프로그래밍에서 배열은 매우 중요한 기능을 한다. 이번에는 순수 함수를 다루면서 배열과 튜플에 대해 살펴보자. 5-1 배열 이해하기 자바스크립트에서 배열은 Array 클래스의 인스턴스이며 다음처럼 선언한다. let 배열 이름 = new Array(배열 길이) 배열에 담긴 각각의 값을 아이템(item) 혹은 원소(element)라고 한다. [ ]단축구문 자바스크립트는 [ ]라는 단축 구문을 제공한다.. let numbers = [1,2,3]; let strings = ["Hello", "World"]; console.log(numbers, strings) // [1,2,3] ["Hello","World"] 자바스크립트에서 배열은 객체다 자바스크립트에서 배열은 다른 언어와 다르게 객체이다. 배열은 Ar..

4장 함수와 메서드

자바스크립트에서 함수는 function 키워드와 화살표 ⇒ 기호로 만드는 두 가지 방법이 있다. 타입스크립트 함수는 이를 바탕으로 타입 기능을 추가한 것이다. 이번 장은 함수를 효과적으로 구현하는 방법과 클래스의 메서드를 구현하는 방법을 알아보자. 4-1 함수 선언문 자바스크립트에서 함수는 function 키워드로 만드는 함수와 ⇒ 기호로 만드는 화살표 함수 두 가지 방법이 있다. 다음은 function 키워드로 만드는 함수 구조이다. function 함수이름(매개변수1, 매개변수2[,...]){ body } 타입스크립트 함수 선언문은 자바스크립트 함수 선언문에서 매개변수와 함수 반환 값에 타입 주석을 붙이는 형태로 구성된다. function 함수이름(매개변수:타입1, 매개변수:타입2[,...]):반환값..

3장 객체와 타입

3-1 타입스크립 변수 선언문 타입스크립트 기본 제공 타입 자바스크립트는 다음 표에서 보는 타입을 기본으로 제공한다. 타입스크립트는 자바스크립트와 호환성을 위해 자바스크립트 타입은 물론 그에 대응하는 타입스크립트 타입 도한 제공한다. 유형 자바스크립트 타입 타입스크립트 타입 수 타입 Number number 불리언타입 Boolean boolean 문자열 타입 String string 객체 타입 Object object let과 const 키워드 ES5 자바스크립트는 variable의 앞 에 글자를 딴 var라는 키워드를 사용해 변수를 선언할 수 있었다. 아지만 다른 프로그래밍 언어와는 다르게 동작하기 때문에 ESNext 자바스크립트는 let과 const라는 키워드를 도입해 다른 프로그래밍 언어와 같은 방..

2장 타입스크립트 프로젝트 생성과 관리

2-1 타입스크립 프로젝트 만들기 타입스크립트 개발은 노드제이에스 프로젝트를 만든 다음, 개발 언어를 타입스크립트로 설정하는 방식으로 진행. 노드제이에스 프로젝트는 디렉터리를 하나 만들고 여기에 package.json이란 이름의 파일을 만드는 것으로 시작한다. package.json은 노드제이에스가 관리하는 패키지 관리 파일로서 프로젝트 정보와 관련 패키지가 기록된다. 즉, 필요한 패키지를 관리할 수 있다. 프로젝트 생성자 관점에서 패키지 설치하기 npm install 혹은 npm i 명령으로 설치가능하다. 이때 패키지 설치 명령은 두 가지 옵션을 줄 수 있다. —save : 프로젝트를 실행할 대 필요한 패키지로 설치한다. 패키지 정보가 package.json dependencies 항목에 등록된다 —s..

[Next.js] React-Query로 쿼리 캐싱한 데이터 가져오기

리액트 쿼리는 서버사이드 렌더링을 지원한다. NextJS에서 React-Query를 연동하는 방법을 지난번에 소개했었다. 그러나 나 조차도 프로젝트를 하면서 내가 캐싱에 대해서 잘못 생각하고 있었나?라는 사실을 깨닫게 되었다. 그래서 이번에는 React-Query에 캐싱개념을 좀 더 공부해 볼려고 한다. 지난번에도 말했지만 이번에도 한 번 더 개념을 짚어보고 가보자. NextJS에서는 getStaticProps 또는 getServerSideProps에서 props 객체를 페이지로 전달한 후에 리액트 쿼리의 initialData 옵션을 이용해서 SSR을 구현할 수도 있다. 이렇게 하는 방식이 잘못된 것은 아니지만 공식문서에서는 권장하지 않는다. 이유는 깊이 있는 컴포넌트 단에서 서버 사이드 렌더링한 데이터..

[Zustand] React 상태관리 라이브러리

현재 리액트 상태관리 라이브러리는 다양하게 존재한다. 대표적으로 Context API, Redux, MobX, Recoil, Jotai 등이 있다. 이 중 Redux가 상태관리 라이브러리의 시초격이라 할 수 있다. 그렇기 때문에 아직까지 많은 개발자들로 부터 사용되고 있으며 여전히 인기가 많다. 하지만 시간이 지날수록 상태관리 라이브러리로 Redux를 기피하고 걷어내고 있는 이유도 있다. 그것이 바로 보일러 플레이트 코드 때문이다. 즉, 반복적으로 비슷한 코드들이 여러곳에서 재사용되며, 비슷한 형태를 띄우는 코드를 뜻한다. 물론 Redux Toolkit이 이러한 점을 극복하고 있고 계속해서 업데이트되고는 있지만 여전히 보일러플레이트가 존재하며 문법이나 사용하는 방법이 익히는 데 어렵고 난해한 편이라고 생..

[Next.js] Serverless + Github Actions로 Vercel 배포 및 자동화 작업

Github Actions란? GitHub Actions는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다. 레포지토리에 대한 모든 풀 요청을 빌드 및 테스트하는 워크플로를 생성하거나 병합된 풀 요청을 프로덕션에 배포할 수 있다. GitHub Actions는 단순한 DevOps를 넘어 리포지토리에서 다른 이벤트가 발생할 때 워크플로를 실행할 수 있도록 한다. 예를 들어, 누군가가 저장소에 새 문제를 생성할 때마다 적절한 레이블을 자동으로 추가하는 워크플로를 실행할 수 있다. GitHub 홈페이지 쉽게 얘기하면 깃헙에서 특정 이벤트가 발생했을 때 어떤 동작을 할지 설정해놔서 리액션을 자동화하는 서비스라고 보면 된다. CI / CD란? CI (Continuous Integratio..