profile
잘 하고 싶다.
post-thumbnail

이벤트 버블링, 이벤트 캡처링과 이벤트 위임

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

6일 전
·
0개의 댓글
post-thumbnail

이벤트 루프와 매크로 테스크, 마이크로 태스크

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

2022년 6월 14일
·
0개의 댓글

TypeScript(타입스크립트) 고급타입

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

2022년 6월 8일
·
0개의 댓글

TypeScript(타입스크립트) 제네릭

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

2022년 6월 8일
·
0개의 댓글

쿠키(Cookie)와 세션(Session)

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

2022년 6월 5일
·
0개의 댓글

TypeScript(타입스크립트) Class

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

2022년 6월 2일
·
0개의 댓글
post-thumbnail

Javascript Symbol(심볼)

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

2022년 6월 1일
·
0개의 댓글

TypeScript(타입스크립트) 유니언과 교차 타입

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

2022년 5월 30일
·
0개의 댓글

TypeScript(타입스크립트) 리터럴 타입

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

2022년 5월 30일
·
0개의 댓글

TypeScript(타입스크립트) 함수

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

2022년 5월 29일
·
0개의 댓글

TypeScript(타입스크립트) 인터페이스

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

2022년 5월 25일
·
0개의 댓글

TypeScript(타입스크립트) 기본 타입

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

2022년 5월 23일
·
0개의 댓글
post-thumbnail

왜 TypeScript(타입스크립트)를 사용할까?

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

2022년 5월 22일
·
0개의 댓글

Next.js 페이지 구성 방법 (작성중...)

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

2022년 5월 20일
·
0개의 댓글

Javascript Arrow function(화살표 함수)

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

2022년 5월 18일
·
0개의 댓글

Javascript에서 this는 어떻게 동작할까?

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

2022년 5월 16일
·
0개의 댓글

JavaScript와 ECMAScript의 관계

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

2022년 5월 16일
·
0개의 댓글
post-thumbnail

Excution Context(실행 컨텍스트)

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

2022년 5월 14일
·
0개의 댓글

Strict mode(엄격 모드)

ES5에서 등장한 strict mode는 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해주며 스크립트나 함수의 최상단에 'use strict' 지시어를 사용하여 선언할 수 있다.스크립트 최상단에 선언하면 스크립트 전체에 strick mode가 적용되며 주의 할 사항

2022년 5월 9일
·
0개의 댓글

JavsScript var, let, const 차이점

var ES5 까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 방법이였지만 var 키워드로 선언된 변수는 아래와 같은 특징이 존재한다. 변수 중복 선언 가능 보통의 언어들은 유효 범위 내에서 같은 이름을 가진 변수를 중복 선언할 수 없다.

2022년 5월 9일
·
0개의 댓글