그럼에도 불구하고

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의 타입이 없다면 에러를 반환합니다...

interface에 대해 알아보겠습니다. :) [ Interface ] 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙 (파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 간단한 예제를 살펴보겠습니다. HTML 삽입 미리보기할 수 없는 소스 logAge 함수의 인자에 personAge라는 타입을 가져야 한다고 선언하였습니다. 그리고 위 코드를 보고 다음과 같이 추론할 수 있습니다. 인터페이스를 인자로 받아 사용할 때 항상 인터페이스의 속성 개수와 인자로 받는 객체의 속성 개수를 일치시키지 않아도 된다. 즉, 인터페이스에 정의된 속..

2023년 4월 30일에 강남 모나코 스페이스에서 열린 점핏 북 콘서트를 다녀왔습니다!! 강의 세션은 총 4개로 이루어져 있었습니다. 다들 어디서 한 번씩은 들어본 적 있는 유명한 분을 만나 뵙게 되어 영광이었습니다! ( 특히 캡틴판교님 인강을 보고 있는데 더 반가웠습니다 ㅎㅎ ) 콘서트는 오프라인 추천과 온라인 추천이 동시에 이루어졌는데 오프라인 추천은 200명을 추첨하였는데 무려 2천 명 이상이 지원했다고 하네요. 거기에 운이 좋게 제가 선정되어 다녀오게 되었습니다. 됐으면 좋겠다 싶었는데 진짜 돼버렸다. 😄 자리도 운 좋게? 앞자리에 앉게 되어서 좋았습니다. 그리고 각종 이벤트도 진행되었는데 참여하는 재미도 있었습니다. 개발 관력 서적을 한 사람당 한 권씩 가져갈 수 있게 해 준 부분도 좋았던 것 ..

props의 defaultProps에 대해 알아보겠습니다. 📌 App.js HTML 삽입 미리보기할 수 없는 소스 App 컴포넌트에서 MyComponent의 props 값을 Zenghyun으로 지정한 상태입니다. 📌 MyComponent.js HTML 삽입 미리보기할 수 없는 소스 MyComponent 컴포넌트에서는 name이라는 props를 렌더링 하도록 설정되어 있습니다. 🧷 결과 여기서 만약, app.js에서 props의 값을 지정하지 않으면 어떻게 될까요? HTML 삽입 미리보기할 수 없는 소스 위와 같이 이름란은 공백이 나오게 됩니다. 이를 방지하기 위해 부모 컴포넌트에서 props의 값을 지정하지 않아도 자식 컴포넌트의 props에서 default value를 설정할 수 있습니다. [ .def..

TypeScript의 기본 타입에 대해 알아보겠습니다. [ 타입스크립트 기본 타입 ] 타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다. 타입스크립트의 기본 타입에는 크게 다음과 같이 12가지가 있습니다. Boolean Number String Object Array Tuple Enum Any Void Null Undefined Never 📌 String 자바스크립트 변수의 타입이 문자열인 경우 아래와 같이 선언해서 사용합니다. HTML 삽입 미리보기할 수 없는 소스 💡 Tip 위와 같이 : 를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기 (Type Annotation)이라고 합니다. 📌 Number 타입이 숫자이면 아래와 같이 선언합니다. HTML 삽입 ..