이번 글에서는 타입스크립트의 타입 추론, 별칭에 대해 알아보자. 1. 타입 추론 타입 추론이란 타입스크립트가 대상 코드를 해석하는 과정을 말한다. 타입스크립트가 타입 추론을 해나가는 과정은 아래와 같다. 예를 들어, 아래와 같이 변수 하나를 선언했다고 가정해보자. let exampleA 타입스크립트에서는 위의 코드를 보고 아래와 같이 타입을 추론한다. exampleA 변수에 어떤 값이 들어올지 모르기 때문에 타입스크립트는 exampleA의 타입을 Any로 추측한다. 이번에는 아래와 같이 exampleA에 문자열을 넣어보자. let exampleA = '리뷰하는 개발자' 타입스크립트에서 위의 코드를 보고 아래와 같이 타입을 추론한다. exampleA 변수에 들어온 값이 문자열 타입이라는 것을 추론할 수 있..

자바스크립트나 파이썬과 같은 스크립트 언어들은 런타임 시 타입이 결정되는 동적 타입 언어이다. 따라서, 프로그램이 동작할 때 값을 보고 동적으로 타입을 결정하기 때문에 개발자가 예측하지 못한 문제들이 발생하는 경우가 많다. 이런 오류들을 줄이고자 타입스크립트가 탄생하게 되었다는 것은 이전 글에서 언급했던 적이 있으니, 아래의 링크에서 타입스크립트가 필요한 이유에 대해 한번 살펴보도록 하자. https://kim1124.tistory.com/93?category=232829 1. 타입 스크립트에 대해 알아보자. 타입 스크립트는 2012년 마이크로소프트에서 개발한 자바스크립트의 상위 호환 언어로 초기에는 크게 주목받지 못했지만, NodeJS와 ESNext의 등장으로 자바스크립트의 사용 범위가 프런트엔드, 백..

1. JS Doc JS Doc이란 자바스크립트 소스 코드에 대한 설명을 하기 위해 사용되는 마크업 언어이다. 우리가 흔히 알고 있는 대표적인 마크업 문서인 HTML은 꺽쇠 기호를 이용하여 요소를 표현하지만, JS Doc의 경우에는 /** */로 Scope를 지정하고 Scope 내부에 @기호로 태그를 지정하여 자바스크립트 코드의 설명을 표현한다. JS Doc의 가장 기본적인 예를 살펴보자. /** */ Scope 내부에 함수 foo의 설명을 문자열로 작성해놓았다. /** This is a description of the foo function. */ function foo() { } 다음은 태그를 사용한 예제이다. Book 함수가 생성자 함수라는 것을 @constructor 태그를 사용하여 설명하고 있다..

이번 글에서는 타입 스크립트를 연습하기 위해 개발 환경을 구성해보자. 개발 환경은 NodeJS 프로젝트로 구성하는 것이 쉽기 때문에 NodeJS 패키지를 설치하여 구성하도록 하겠다. 만약 NodeJS가 설치되어있지 않다면 아래의 경로에서 NodeJS를 설치하자. 참고로 이 글에서 설명하는 기준이 되는 OS는 윈도 10이다. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org NodeJS 설치가 완료되었다면 커맨드 창을 열고 (윈도 키 + R > cmd 입력 후 엔터) 타입 스크립트 연습용 프로젝트를 생성할 경로로 이동한다. cd 타입 스크립트 연습용 프로젝트 경로 다..

이번 글에서는 Svelte의 트랜지션에 대해 알아보자. 트랜지션이란, 어떠한 이벤트가 발생하였을 때 화면에 출력하는 여러 가지 특수 효과를 말한다. 트랜지션과 애니메이션은 화면에 특수한 효과를 출력한다는 점은 같지만 트랜지션은 효과를 출력하기 위해 사전에 이벤트나 작업이 필요하며 애니메이션은 사전 작업 없이 자동으로 효과를 출력한다는 점이 다르다. 트랜지션은 화면에 출력하는 특수 효과이기 때문에 사용 방법이 애니메이션과 거의 동일하며 사용자 정의 트랜지션 효과도 설정할 수 있다. Transitions 기본 사용 방법 Svelte에서 트랜지션을 사용하는 방법은 아래와 같다. import { 트랜지션 효과 } from 'svelte/transition'; ... 트랜지션 효과는 아래와 같이 효과를 사용자가 ..

타입 스크립트는 2012년 마이크로소프트에서 개발한 자바스크립트의 상위 호환 언어로 초기에는 크게 주목받지 못했지만, NodeJS와 ESNext의 등장으로 자바스크립트의 사용 범위가 프런트엔드, 백엔드, 심지어 데스크톱 애플리케이션까지 진출하면서 현재는 가장 많이 사용하는 인기 언어로 발전하게 되었다. 2019년 자바스크립트에 관련된 인기도를 조사한 stateofjs의 언어 인기도를 보면 2017년부터 전 세계의 자바스크립트 개발자들은 이미 타입 스크립트를 가장 많이 사용하는 것으로 조사되었다. 이처럼 이미 자바스크립트 개발 영역에서 타입 스크립트가 차지하는 비율은 매우 높은 수준이다. 이미 구글에서는 사내 기본 언어를 타입 스크립트로 지정하였으며, 국내에서도 IT 대기업들은 타입 스크립트를 사용하여 자..

이번에는 Svelte에서 제공하는 애니메이션에 대해 알아보자. Svelte의 애니메이션은 내장 모듈인 Flip과 사용자 정의 애니메이션을 제공한다. 먼저, Flip 효과에 대해 알아보자. Flip Flip 애니메이션은 요소가 추가되거나 제거될 때 부드럽게 밀리고 접히는 애니메이션으로, 리스트를 표현하고자 할 때 사용하기 좋은 애니메이션이다. Flip을 사용하는 방법은 아래와 같다. import { flip } from 'svelte/animate' 아래의 예제는 Svelte로 만든 Todolist 애플리케이션으로 상단 Input 태그에 할 일을 적고 Enter키를 누르면 좌측에 할 일이 추가된다. 계획한 일을 완료하면 아이템 좌측에 체크박스를 선택하여 우측에 완료 리스트로 보낸다. 만약, 아이템을 삭제하..

이번 글부터는 Svelte에서 제공하는 효과에 대해 알아보자. 첫 번째로 알아볼 효과는 Motion으로 트위닝 효과와 스프링 효과를 제공한다. CSS로도 이러한 효과를 만들 수 있지만, Svelte의 Motion은 Writable Store를 사용하여 효과를 쉽게 적용할 수 있도록 기능을 제공한다. 아래의 예제를 통해서 어떻게 사용하는지 알아보자. 앞으로 4개의 게시글로 Svelte의 효과에 대해 알아볼 것이다. 다만, 실제 개발 (회사에서 또는 사이트)에서는 효과를 주기 위해 CSS의 애니메이션을 사용하기 때문에 개인 프로젝트나 프로토 타입 개발에서 빠르게 효과를 적용해야 할 때 주로 사용할 것 같다. 효과에 대해 자세히 알고 싶다면, Svelte의 효과보다는 CSS의 트랜지션이나 애니메이션을 학습하는..