그럼에도 불구하고

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

[ install ] npm install -g typescript [ TypeScript => JavaScript ] tsc 바꿀 파일 이름.ts [ 파일 수정시 서버에서 자동 갱신 ] npm install --save-dev lite-server [ TypeScript 관찰 모드 ] tsc 파일이름.ts --watch or tsc 파일이름.ts --w [ 특정 파일을 지정하지 않은 전체 관찰 모드 ] tsc --init 후 tsc --watch or tsc --w [ 컴파일 과정에서 포함시킬 파일을 타입스크립트에 알리는 법 ( 관찰할 파일을 추가하고, 여기 없으면 관찰 모드에서 제외 )] tsconfig.json "include": [ "app.ts", "analytics.ts" ] [ 특정 파일을 ..

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 삽입 ..

오늘은 TypeScript에 대해 알아보겠습니다. [ TypeScript ] 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다. 요즘은 대형 SI 프로젝트에서 흔하게 사용되고 있으며 개발자 구인 시 우대사항 기술로도 자주 언급되고 있습니다. 또한, 타입스크립트는 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있으며, 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수도 있습니다. 타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍하면 자바스크립트로 컴파일되어 실행할 수 있습니다. 타입스크립트는 ES5의 Superset이므로 기존의 자바스크립트 (ES5) 문법을 그대로 ..

오늘은 Redux에 대해 알아보겠습니다. :) [ Redux ] Redux(리덕스)란 JavaScript 상태관리 라이브러리입니다. 여기서 말하는 상태(State)란 간단하게 말하자면 데이터를 말합니다. 덧붙이자면 상태는 컴포넌트 내부에서 사용하는 데이터라고 할 수 있습니다. 요즘은 웹 사이트를 구성할 때, 사용자에게 보이는 UI들을 하나의 파일로 몽땅 구현하지 않고, 요소들을 컴포넌트 단위로 구성하여 조합하는 식으로 만듭니다. [ Redux의 원칙 ] 1. Single source of truth - 동일한 데이터는 항상 같은 곳에서 가져옵니다. - 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미입니다. 2. State is read-only - 리액트에서는 setState 메소드를 활용해야만 상태..

오늘은 Puppeteer에 대해 알아보겠습니다. [ Puppeteer ] puppeteer은 구글에서 만든 노드 라이브러리로 Headless Chrome 또는 Chrominum을 제어할 수 있습니다. * headless 백그라운드에서 작동하는 브라우저입니다. 때문에 일반 사용자가 브라우저를 사용할 때처럼 화면에 창이 시각적으로 보이지 않습니다. 보이는 화면은 없지만, 실제로 띄워진 화면에서 화면 테스트를 하듯이 테스트를 할 수 있습니다. puppeteer에서는 옵션 설정을 통해 headless모드와 non-headless모드 둘 다 사용할 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 [ Puppeteer의 용도 ] 1. 화면을 스크린샷 하거나 PDF를 생성할 수 있습니다. 2. SPA(Singl..

오늘은 Jest에 대해 알아보겠습니다. [ Jest란? ] Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리입니다. 출시 초기에는 프런트앤드에서 주로 쓰였지만 최근에는 백앤드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있습니다. Jest는 라이브러리 하나만 설치하면, Test Runner와 Test Mathcher 그리고 Test Mock 프레임워크까지 제공해 주기 때문에 현재 대세라고 말할 수 있습니다. [ Jest 설치 ] // 설치 npm install jest --save-dev package.json HTML 삽입 미리보기할 수 없는 소스 test 커맨드 지정하기 package.json 파일을 열고 test ..

Google maps platform API 사용하여 내 위치 찾기, 위치 검색, 위치 공유 할 수 있는 페이지를 만들어보겠습니다. Google Maps Platform 문서 | Google Developers Google Maps Platform 문서 developers.google.com API Key 발급받기: https://developers.google.com/maps/gmp-get-started?hl=ko index.html HTML 삽입 미리보기할 수 없는 소스 구글 Maps API 스크립트 불러오기 원격에 있는 구글 서버로부터 Google Maps API의 코드를 내려받기 위함입니다. 에는 내가 발급받은 고유 API 키를 넣어주시면 됩니다. HTML 삽입 미리보기할 수 없는 소스 Share..

오늘은 useMemo와 useCallback에 대해 알아보겠습니다. :) [ 메모이제이션 (memoization) ] 메모이제이션 (memoization)이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. momoization을 잘 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. [ useMemo ] useMemo는 React 컴포넌트에서 계산 비용이 큰 연산을 최적화하는 데 사용되는 Hook입니다. useMemo는 이전에 계산된 값을 기억하고, 해당 값이 변경되지 않은 경우에는 이전 값을 재사용합니다. 즉 , 메모이제이션된 '값'을 반환합니다. useMemo(() => ..

폴리필(Polyfill)이란 무엇인지 알아보겠습니다. [ 폴리필 Polyfill ] 브라우저에서 지원하지 않는 코드를 사용 가능한 코드 조각이나 플러그인으로 변환환 코드를 의미합니다. 즉, 최신 자바스크립트의 기능을 구식 자바스크립트 코드로 똑같이 구현한 코드를 말합니다. 아래는 pollyfill.io의 공식 레퍼런스입니다. 해당 사이트에선 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주고 있습니다. 아래 글은 해당 사이트에서 Pollyfill에 대해서 말해주고 있습니다. 📌 세계적으로 다양한 브라우저와 브라우저 버전을 사용하고 있으며, 각 브라우저에는 나머지 기능 집합이 약간씩 다릅니다. 이것은 브라우저용 개발을 어려운 작업으로 만들 수 있습니다. 인기 있는 브라우저의 최신 버전은 이전 브..