그럼에도 불구하고

오늘은 유니온 타입에 대해 알아보겠습니다. [ 유니온 타입 (Union Types) ] 가끔, number나 string을 매개변수로 기대하는 라이브러리를 사용할 때가 있습니다. 예를 들어, 다음과 같은 함수를 사용할 때입니다. HTML 삽입 미리보기할 수 없는 소스 위 예제에서 padLeft의 문제는 매개변수 padding이 any 타입으로 되어있다는 것입니다. 즉, number나 string 둘 다 아닌 인수로 함수를 호출할 수 있다는 것이고, TypeScript는 이를 무리 없이 받아들입니다. HTML 삽입 미리보기할 수 없는 소스 전통적인 객체지향 코드에서, 타입의 계층을 생성하여 두 타입을 추상화할 수 있습니다. 이는 더 명시적일 수는 있지만, 조금 과하다고 할 수도 있습니다. 기존 방법의 pa..

오늘은 리터럴 타입에 대해 알아보겠습니다. [ 리터럴 타입 좁히기 (Literal Narrowing) ] var 또는 let으로 변수를 선언할 경우 이 변수의 값이 변경될 가능성이 있음을 컴파일러에게 알립니다. 반면, const로 변수를 선언하게 되면 TypeScript에게 이 객체는 절대 변경되지 않음을 알립니다. HTML 삽입 미리보기할 수 없는 소스 무한한 수의 잠재적 케이스들 (문자열 값은 경우의 수가 무한대)을 유한한 수의 잠재적 케이스 (helloWorld의 경우: 1개)로 줄여나가는 것을 타입 좁히기 (narrowing)라 합니다. [ 문자열 리터럴 타입 (String Literal Types) ] 실제로 문자열 리터럴 타입은 유니언 타입, 타입 가드 그리고 타입 별칭과 잘 결합됩니다. 이런..

Webpack에 대해 알아보겠습니다. [ Webpack ] Webpack이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원 (HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 그럼 모듈과 모듈 번들링에 대해서 조금 더 살펴보겠습니다. [ 모듈이란? ] 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다. 자바스크립트로 치면 아래와 같은 코드가 모듈입니다. // math.js function sum(a, b) { return a + b; } function substract(a, b) {..

dependencies와 devDependencies의 차이에 대해 알아보겠습니다. [ 배포용 라이브러리 ] dependencies에 설치되어 있는 라이브러리의 경우 배포용 라이브러리입니다. 아래의 사진은 예시입니다. 이렇게 설치된 배포용 라이브러리는 npm run build로 빌드를 하면 최종 애플리케이션 코드 안에 포함됩니다. 📌 npm i "내가 설치할 라이브러리" [ 개발용 라이브러리 ] devDependencies에 설치되어 있는 라이브러리의 경우 개발용 라이브러리 입니다. 📌 npm i "내가 설치할 라이브러리" -D 설치 옵션에 -D를 주었다면 해당 라이브러리는 빌드하고 배포할 때 애플리케이션 코드에서 빠지게 됩니다. 따라서, 최종 애플리케이션에 포함되어야 하는 라이브러리는 -D로 설치하면 ..

NPM에서 가장 많이 사용되는 명령어인 npm install에 대해 알아보겠습니다. [ NPM 지역 설치 ] NPM 초기화 명령어로 package.json파일을 생성하고 나면 해당 프로젝트에서 사용할 자바스크립트 라이브러리를 설치하게 됩니다. 이 때 명령어는 아래와 같습니다. npm install "내가 설치할 라이브러리" --save-prod 그리고 지역 설치 명령어의 경우 명령어 옵션으로 --save-prod를 붙이지 않아도 동일한 효과가 납니다. 또한, install 대신 i를 사용해도 됩니다. # 위 명령어와 동일한 효과 npm i "내가 설치할 라이브러리" [ NPM 지역 설치 경로 ] 위 명령어로 라이브러리를 설치하면 해당 프로젝트의 node_modules 라는 폴더가 생깁니다. 그리고 그 폴..

인터페이스의 선택적 프로퍼티에 대해 알아보겠습니다. [ 선택적 프로퍼티 (Optional Properties) ] 인터페이스의 모든 프로퍼티가 필요한 것은 아닙니다. 어떤 조건에서만 존재하거나 아예 없을 수도 있습니다. 선택적 프로퍼티들은 객체 안의 몇 개의 프로퍼티만 채워 함수에 전달하는 "option bags" 같은 패턴을 만들 때 유용합니다. HTML 삽입 미리보기할 수 없는 소스 선택적 프로퍼티를 가지는 인터페이스는 다른 인터페이스와 비슷하게 작성되고, 선택적 프로퍼티는 선언에서 프로퍼티 이름 끝에?를 붙여 표시합니다. 선택적 프로퍼티의 이점은 인터페이스에 속하지 않는 프로퍼티의 사용을 방지하면서, 사용 가능한 속성을 기술하는 것입니다. 예를 들어, createSquare안의 color 프로퍼티 ..

오늘은 Enum의 특징에 대해 알아보겠습니다. [ 숫자형 이넘 ] 타입스크립트에서 숫자형 이넘은 아래와 같이 선언합니다. enum Direction { Up = 1, Down, Left, Right } 위와 같이 숫자형 이넘을 선언할 때 초기 값을 주면 초기 값부터 차례로 1씩 증가합니다. Up - 1 Down - 2 Left - 3 Right - 4 만약 아래와 같이 초기 값을 주지 않으면 0부터 차례로 1씩 증가합니다. enum Direction { Up, // 0 Down, // 1 Left, // 2 Right // 3 } [ 숫자형 이넘 사용하기 ] 이렇게 선언한 이넘은 아래와 같이 사용할 수 있습니다. enum Response { No = 0, Yes = 1, } function respond..

오늘은 TypeScript로 Google Maps API 사용해 보겠습니다. 기능적인 측면에 목적을 두었기 때문에 외적인 모습은 딱히 꾸미지 않았습니다 :) 📌 index.html HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 발급받은 API KEY를 채워주시면 됩니다. https://developers.google.com/maps?hl=ko Google Maps Platform | Google Developers Google Maps Platform 설명 developers.google.com 📌 app.ts HTML 삽입 미리보기할 수 없는 소스

오늘은 Redux middleware에 대해 알아보겠습니다. 리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, '미들웨어(middleware)'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있습니다. 다음은 리덕스를 적용한 간단한 리액트 프로젝트를 준비후, 이 프로젝트를 통해 리덕스 미들웨어에 대해 알아보겠습니다. 1..

오늘은 react-router-dom v6에 대해 알아보겠습니다. react-router-dom v6의 경우 이전 버전과 달라진 점이 있습니다. 본 게시물은 v6을 기준으로 작성하였습니다. [ install ] yarn add react-router-dom [ 프로젝트에 라우터 적용 ] 프로젝트에 리액트 라우터를 적용할 때는 src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTML5 dml History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해 줍니다. 📌 index.js HTML..

오늘은 immer에 대해 알아보겠습니다. :) [ immer ] immer는 React에서 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트하기 위해 사용하는 라이브러리입니다. 📌 불변성이란? 쉽게 말해 상태를 변경하지 않는 것입니다. [ install ] yarn add immer [ immer를 사용하지 않고 불변성 유지 ] 아래 예시는 immer를 사용했을 때와 비교하기 위해 작성된 코드입니다. HTML 삽입 미리보기할 수 없는 소스 폼에서 아이디와 이름을 입력하면 하단 리스트에 추가되고, 리스트 항목을 클릭하면 삭제되는 컴포넌트입니다. 이렇게 전개 연산자와 배열 내장 함수를 사용하여 불변성을 유지하는 것은 어렵지 않지만, 상태가 복잡해진다면 조금 귀찮은 작업이 될 ..

extends와 implements의 차이에 대해 알아보겠습니다. 자바스크립트에서 어떤 클래스를 상속받고 싶을 때 하위 클래스에 extends 키워드를 사용하면 상속받을 수 있습니다. 그리고 타입스크립트에서는 implements 키워드를 통해서, interface와 class를 동시에 확장할 수 있습니다. [ extends ] extends 키워드는 class 선언문이나 class 표현식에서 만들고자 하는 class의 하위 클래스를 생성할 때 사용할 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 [ implements ] implements 키워드는 class의 interface에 만족하는지 여부를 체크할 때 사용됩니다. implements 한 interface의 타입이 없다면 에러를 반환합니다...