스토리북은 개발 모드에서 앱과 함께 실행된다. 비지니스 로직과 분리된 UI 컴포넌트를 만들 수 있도록 도와주며 목적에 따라 다양한 방식으로 사용된다.회사 내부 UI 라이브러리를 문서화하기 위해서 사용하거나 외부 공개용 디자인 시스템을 위해 사용되기도 한다. 처음에는 리

디바운싱은 검색어 입력 최적화에 많이 사용된다. 검색어 입력 후 엔터를 누르지 않아도 결과가 바로 출력되는 서비스를 본적이 있을 것이다. 엔터를 누르지 않아도 결과를 즉시 보여주려면 input은 이벤트에 항상 대기하고 있어야 한다.콘솔이 출력되면 ajax 요청이 발생한

이벤트 등록은 웹 애플리케이션에서 사용자의 입력을 받기 위해서 필요한 기능이다.위 예제는 add Item 버튼을 클릭하면 addItem 함수가 실행되어 event 파라미터를 출력하여 이벤트에 대한 정보를 확인할 수 있다.addEventListener() Web API는

자바스크립트는 싱글 스레드 기반의 언어이다. 자바스크립트의 엔진은 하나의 호출 스택을 가지고 있으므로 한 번에 한가지 일만 처리가 가능하다. 따라서 시간이 오래 소요되는 작업을 수행하면 그 사이에 클릭이나 다른 요소가 랜더링 되어져야 하는게 있더라도 블락킹 되어있어 아

아래 예제에서 pet 에 어느 타입이 들어오든 공통으로 가지고 있는 메소드에는 접근이 가능하다. 하지만 어느 한 쪽이 가지고 있지 않은 메소드 실행이 필요한 경우에는 어떻게 해야할까?타입스크립트에서 pet.swim() 은 컴파일 타임에 오류가 발생한다. pet 의 타입

재사용 가능한 컴포넌트를 구축하는 것은 소프트웨어 엔지니어링에서 중요한 부분이다. 현재의 데이터와 미래의 데이터를 모두 다룰 수 있는 컴포넌트는 소프트웨어 시스템을 구성하는데 있어서 가장 유연한 능력을 제공할 것이다.아래의 예제를 매개변수를 그대로 반환하는 함수이다.함

쿠키와 세션에 대해 알아보기 전에 HTTP의 특징에 대해서 알아보자.HTTP 통신의 특징은 Connectionless(비 연결지향)과 Stateless(상태 정보 유지 안함) 라고 할 수 있다.클라이언트에서 서버에 요청을 보내면 서버는 클라이언트에 응답을 하고 연결을

자바스크립트는 재사용 가능한 컴포넌트를 만들기 위해 함수와 프로토타입 기반의 상속을 사용한다. ES6 부터는 객체 지향 클래스 기반 접근 방식을 사용해서 어플리케이션을 만들 수 있다.타입스크립트에는 일반적인 객체 지향 패턴을 사용할 수 있다. 클래스 기반 프로그래밍의

자바스크립트의 심볼(Symbol)은 ES6에서 새롭게 추가된 변경 불가능한 원시 타입의 값이다.객체의 프로퍼티 키로는 문자형과 심볼형만 허용한다. 객체의 프로퍼티 키로 심볼값을 사용하면 어떤 장점이 있는지 알아보자.Symbol은 유일한 식별자를 만들고 싶을 때 사용한다

number 나 string 을 매개변수로 기대하는 라이브러리가 존재한다고 가정해보자. paddingLeft 함수의 매개변수인 padding이 any 타입으로 되어있다. number 나 string 이 아닌 인자로 함수를 호출할 수 있다는 뜻이고, 타입스크립트는 pad

리터럴 타입은 집합 타입의 보다 구체적인 하위 타입이다. 이것이 의미하는 것은 "Hello World" 는 string 이지만, string 은 "Hello World" 가 아니라는 것이다.var, let 으로 변수를 선언하면 이 변수의 값이 변경될 가능성이 있음을 컴

각 파라미터 타입과 반활될 타입을 지정할 수 있다. 타입스크립트는 반환 문을 보고 반환 타입을 추론할 수 있으므로 반환 타입을 생략 할 수 있다.함수는 매개변수 타입, 반환 타입을 가진다. 전체 함수 타입을 작성하려면 이 두 가지 타입이 필요하다.함수를 선언할 때 각

인터페이스는 상호 간에 정의한 약속 혹은 규칙이다. 타입스크립트에서 인터페이스는 보통 아래와 같은 경우에 규칙을 정의할 수 있다.객체의 스펙(속성과 속성의 타입)함수의 스펙(파라미터, 반환 타입)함수의 파라미터배열과 객체를 접근하는 방식클래스아래 예제를 통해서 타입스크

타입스크립트는 자바스크립트와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 사용해 더 편리하게 사용할 수 있다.boolean 값이라고 일컫는 참/거짓(true/false) 값이다.자바스크립트와 동일하게 타입스크립트의 모든 숫자는 부동 소수 값이며 부동 소수에는 nu

타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 자바스크립트에서 확장된 언어라고 볼 수 있다. 타입스크립트는 브라우저에서 실행하려면 자바스크립트 파일로 변환해주어야 한다. 이 변환 과정을 컴파일(compile)이라고 부른다.타입스크립트는 코드 품질 및 가독성이 높

1. Pages(페이지) Next.js에서 페이지는 pages 디렉토리 내부의 '.js', '.jsx', '.ts', '.tsx' 파일에서 내보낸 React 컴포넌트이다. 각 페이지는 파일 이름에 따라 경로와 연결된다. 예를 들어 아래처럼 React 컴포넌트를 내보

화살표 함수는 function 키워드 대신에 화살표(=>)를 사용해서 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수는 익명 함수로만 사용되기때문에 함수를 호출하기 위해서는 함수 표현식을 사용한다.콜백 함수로도 사용할 수 있다. 이 경우에 일반적인 함수보다 표현식

자바스크립트의 함수는 호출될 때 인자 값 이외에 arguments 객체와 this를 암묵적으로 전달받는다.자바스크립트의 this는 함수 호출 방식에 따라 바인딩되는 객체가 달라진다.자바스크립트는 함수 호출 방식에 따라서 this에 바인딩할 객체가 동적으로 결정된다. 함

Ecma 인터내셔널은 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구이다. Ecma는 표준을 제정하며 대표적으로 CECMA-262는 Ecma 인터내셔널에 의해 제정된 하나의 기술 규격 이름이며, 범용 목적의 스크립트 언어에 대한 명세이다. 즉, 언어에 대한 표준을

실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심 원리이다. 실행 컨텍스트를 이해하고 자바스크립트 코드가 어떻게 동작하는지 알아보자.실행 컨텍스트는 실행 가능한 코드가 실행되기 위해