TIL

웹 표준(Web Standards)웹에서 표준적으로 사용되는 기술이나 규칙✔ HTML 5는 W3C에서 2014년에 공식 표준화됨✔ 2019년에 WHATWG에 의해 HTML Living Standard가 표준화됨✔ 웹 표준에 의거하여 작성해야하는 이유 : 웹 표준을 준수

정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다✔ action 속성 : form을 보낼 목적지 주소✔ method 속성 : form을 제출할 때 사용할 HTTP 메서드 (post, get)dinput과 쌍을 이루어 사용자 인터페이스 항목의 설명을 나

HTML 구획 제목 요소 h1~h6❗ 글씨 크기를 위해 h태그 사용하지 말기 -> css의 fontsize 사용하기 하나의 문단을 나타낸다. block 레벨 요소이다.❗ 여백을 추가하기 위해서 <p>태그 추가 X <br> 태그는 줄바꿈 태그. <hr>

시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 방식입니다.non-semantic 요소 div, span 등이 있으며

src : 필수이며, 포함하고자 하는 이미지로의 경로를 저장srcset : 여러 개의 이미지 경로를 저장할 수 있음(쉼표로 구분) -> 반응형 이미지 가능alt(alternative text) : 이미지의 텍스트 설명이며 필수는 아니지만 alt값을 읽어 사용자에게 이미

Ordered List , 정렬목록 ✔ type 속성에 따라 숫자,알파벳,로마자로 변경 가능Unordered List, 비정렬목록✔ 중첩시 point 모양 자동으로 변경됨 Definition List, 정의 목록 ( 용어를 설명하는 목록 )<dt>definitio

간단히 말하면 데이터에 대한 데이터, 데이터를 설명하는 데이터이다. HTML에서 문서에 <meta> 요소를 이용해 공식적으로 메타데이터를 적용할 수 있다.<meta>문서 레벨 메타데이터 요소이고 빈 요소 이다. 메타관련 요소로 나타낼 수 없는 메타데이터를 나

HTML 요소가 공통으로 사용 가능한 속성.✔ 문서 전체에서 유일한 고유식별자를 정의 ✔ id는 두 번 사용할 수 없음 ✔ 공백이 들어가면 안됨 ✔ 시작은 무조건 알파벳 소문자✔ 공백으로 구분한 요소 클래스의 목록 ✔ 중복 사용이 가능함 ✔ 대소문자를 구분하지 않음✔

css는 룰 기반 (rule-based) 언어이다.css를 통해 특정, 요소 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있다.선택자 ( Selector ) : 스타일을 지정할 HTML 요소를 선택선언 블록(declation block) : 중괄호 내부의 여러

일관성 있게 적용해야 하는 스타일이 있을 때 사용주로 css 상단부에 작성됨❗ 하나의 요소만 선택할 때 사용하지 말기❗ id는 중복이 불가능하다class는 중복이 가능여러개의 class가 있을 때는 마지막 class가 이전 class보다 우선 적용됨attrattr=va

font-size글자의 크기를 조절하는 속성으로 기본값은 16px이고 단위가 다양함font-style글씨체를 조절하는 속성하는 기본값은 normal이고 기울임체를 위해 많이 사용함font-weight글자의 굵기를 조절하는 속성으로 기본값은 normal(400)이고 보통

Git이란 분산형 버전 관리 시스템 VCS(Version Control System) 의 한 종류이다.빠른속도 , 단순한 구조분산형 저장소 지원비선형적 개발 -> branch를 통한 개발이 가능ls : 현재 디렉토리의 파일,폴더 list 보기pwd : 현재 디렉토리 확

분기점을 생성하여 독립적으로 코드를 변경할 수 있도록 도와주는 모델git branch현재 사용가능한 branch들과 현재 local branch를 보여줌git branch yongwooyongwoo라는 branch를 생성git switch yongwoo현재 branch

content : 콘텐츠가 표시되는 영역padding : 콘텐츠와 테두리(border)사이의 여백border : padding과 margin사이의 테두리margin : 가장 바깥 쪽 레이어로 콘텐츠와 패딩,테두리를 둘러싸면서 해당 박스와 다른 요소 사이 공백 역할❗ b

이름만 변경되어 파일의 history를 남길 수 있음❌ mv 명령어만 사용시 파일의 history가 삭제될 수 있으므로 사용하지말기README.md 파일 변경 후 변경 전 README.md로 Undoing 한다.잘못하기 전 과거로 돌아가 최신을 유지하면서 되돌렸다는 이

display:none문서의 레이아웃을 변경하며 요소를 숨김(자리를 차지하지 않음) visibility: hidden문서의 레이아웃을 변경하지 않고 요소를 숨김 (자리를 차지함)요소의 레이아웃을 변경하지 않았을 때 웹페이지 요소가 자기 자신을 배치하는 방법으로 일반대열

6자리는 앞부터 두자리씩 묶어 (검은색 rgb(red 값, green 값, blue 값); rgba(red 값, green 값, blue 값, alpha 값);a(alpha)는 불투명도 값을 나타냄(opacity), 0부터 1까지 값 중에서 사용1은 완전히 불투명한 것

요소에 회전, 크기 조절, 기울이기, 이동효과를 부여scale(x,y) 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소scaleX(n)요소의 크기를 X축으로 n배 확대 또는 축소scaleY(n)요소의 크기를 Y축으로 n배 확대 또는 축소rotate(n d

flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다.flex container아이템들을 감싸고있는 바깥쪽 부모 영억flex item내부에 정렬을 위해 담아놓은

여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. grid-templa

신체적 차이나 장애 여부와 상관없이 누구나 원활하게 웹페이지를 이용가능하게 보장하는 것접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 Java

Web Content Accessibility Guidelines의 약자로 W3C 웹 콘텐츠 접근성 가이드라인 표준 권고안은 웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있도록 준수해야 하는 지침으로, 웹 서비스

LCP(Largest Contentful Paint)는 인식되는 로드 속도를 측정하는 항목으로 페이지가 로딩하는 성능을 측정하는 지표입니다.페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 보고합니다.

하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙힌 이름으로 값의 위치를 가리키는 상징적인 이름이다변수 할당(assignment)변수에 값을 저장하는 것으로 대입, 저장이라고도 불린다변수 참조(reference)변수에 저장된

데이터 타입이란 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. C나 자바와 같은 언어와 달리 자바스크립트는 독특하게 하나의 숫자 타입만 존재한다. ECMA Script 사양에 따르면 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따른다.

연산자는 하나 이상의 표현식을 대상으로 산술,할당,비교,논리,타입,지수 연산등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라 한다.피연산자는 값으로 평가될 수 있는 표현식이어야 한다.피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 불가

블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다.조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다. 조건식은 boolean 값으로 평가될 수 있는 표현

자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅 이라한다. 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에

자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체다. 원시 값을 제외한 나머지 값(함수, 배열, 표현식)은 모두 객체다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다

원시 타입(primitive type)의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이다. 다시 말해, 한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다.여기서 변경 불가능하다는 것은 변수가 아니라 값에 대한 진술이다. 즉, "원시 값은

프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수는 입력을 받아서 출력을 내보낸다. 이때 함수 내부로 입력을 전달받는 변수를 매개변수(parameter), 입력을 인수(argumen

변수는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정된다. 변수뿐만 아니라 모든 식별자가 그렇다. 다시 말해, 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결

변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 언젠가 소멸한다. 즉, 변수는 생성되고 소멸되는 생명 주기가 있다.✔ 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다.✔ var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기 와 일치

자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티의 상태란 프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부를 말한다. 프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는

new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.✔ 생성자 함수 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말한다. 생성자 함수에 의해 생성

다음 조건을 만족하는 객체를 일급 객체라 한다.1\. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.2\. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.3\. 함수의 매개변수에 전달할 수 있다.4\. 함수의 반환값으로 사용할 수 있다.✔ 일급

데이터 타입이란 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. Number, String, boolean, undefined, null, symbol, 객체 타입❓ 지금까지 공부했던 프로그래밍 언어에서는 숫자를 가리키는 데이터 타입이 int, f

객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. 여기서 객체는 속성을 통해 여러 개의 값을 하나의

ES5에 추가된 모드로 strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. ESLint 같은 도구를 사용해도 stri

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에

✔ 4가지 타입으로 구분하는 이유소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다.자바스크립트 엔진은 소스코드를 2개의 과정, 즉 "소스코드의 평가"와 "소스코드의 실행" 과정으로 나누어 처리한다.소스코드의 평가실행 컨텍스트를 생성하고

자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해

클래스를 new 연산자 없이 호출하면 에러가 발생하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다.클래스는 상속을 지원하는 extends와 super 키워드를 제공하지만 생성자 함수는 지원하지 않는다.클래스는 호이스팅이 발생하지 않는 것처럼 동작

ES6 이전사용 목적에 따라 명확히 구분되지 않는다. 즉, ES6 이전의 모든 함수는 일반함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. 즉, ES6 이전의 모든 함수는 callable 이면서 constructor다.ES6 이후ES6에서는 함수를

ES6에서 도입된 스프레드 문법(spread syntax) ... 는 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 순회할 수 있는 이터러블에 한정된다.❗ 스프레드 문법은 값을 생성하는 연산자가 아

배열(array)은 여러 개의 값을 순차적으로 나열한 자료구조다.요소배열이 가지고 있는 값으로 자바스크립트의 모든 값은 배열의 요소가 될 수 있다.인덱스배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다. 인덱스는 배열의 요소에 접근할 때

정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패팅 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.정규 표현식 객체를

String 객체에는 원본 String 래퍼 객체(String 메서드를 호출한 String 래퍼 객체)를 직접 변경하는 메서드는 존재하지 않는다. 즉, String 객체의 메서드는 언제나 새로운 문자열을 반환한다. 문자열은 변경 불가능한 원시 값이기 때문에 String

TDZ(Temporal Dead Zone) 란, 한글로 직역하자면 일시적인 사각지대란 뜻입니다.이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 말합니다.선언 단계 (Declaration phase)변수를 실행 컨텍스트의 변수 객체에 등록하는

파싱(구문 분석)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해(어휘 분석)하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다. 렌더링은 H

DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다.어트리뷰트 노드 : clas

이벤트 핸들러이벤트가 발생했을 때 호출될 함수이벤트 핸들러 등록이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용을 할 수 있다. 이와 같이 프로그램의 흐름을 이벤트 중

디자인 패턴이란 소프트웨어 공학에서 사용되는 방법론입니다. 적합한 디자인 패턴의 선정은 개발하는 데 있어 협업 및 유지보수를 용이하게 합니다. 디자인 패턴에는 수많은 종류가 있는데, 그 중 2개 이상의 패턴을 결합하여 사용하는 컴파운드 패턴(Compound Patter

이벤트 버블링(Event Bubbling)이란 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성이다.❓ 상위의 화면 요소는 무엇일까?👉 HTML 요소는 기본적으로 트리 구조를 갖는다. 여기서는 트리 구조상으로 한 단계

HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.그리고 영구저장소(LocalStorage)와

Same Origin Policy(동일 출처 정책)은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리해, 공격받을 수 있는 경로를 줄입니다

👎 html 문서 parsing중 script 태그를 만나면 parsing을 멈추고 script 태그안의 main.js파일을 불러오는 작업을 먼저 실행한다. 실행이 완료 된 후에 html 문서를 다시 parsing 한다. 따라서 사용자가 웹사이트를 보는데 걸리는 시간

위의 그림은 렌더링 엔진이 어떻게 화면을 표시하는지에 대한 그림이다.렌더링 엔진은 HTML 문서를 파싱 한다. 그리고 DOM tree를 구축한다. 다른 한쪽에서는 CSSOM tree를 구축한다. DOM tree와 CSSOM 결합되어 렌더 트리를 구성한다. 그리고 각각의

URI는 특정 리소스를 식별하는 통합 자원 식별자(Uniform Resource Identifier)를 의미한다. 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스다.✔ 어떤 특정한 자원을 보여줘야할때 사용Query Parameter 방식

Server Side Rendering의 약자로 말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.Client Side Rendering의 약자로 말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다.즉, 서버는 요청을 받으면 클라

쿠키 (Cookie) ❓ 쿠키란 무엇인가

퀵 정렬은 기준점을 획득한 다음 해당 기준점을 기준으로 배열을 나눈다. 한 쪽에는 기준점보다 작은 항목들이 위치하고 다른 쪽에는 기준점보다 큰 항목들이 위치한다. 나뉘어진 하위 배열에 대해 재귀적으로 퀵 정렬을 호출하여, 모든 배열이 기본 배열(요소가 하나뿐인 배열)이

‘존 폰 노이만(John von Neumann)’이라는 사람이 제안한 방법으로 하나의 리스트를 두 개의 균등한 크기로 분할하고 분할된 부분 리스트를 정렬한 다음, 두 개의 정렬된 부분 리스트를 합하여 전체가 정렬된 리스트가 되게 하는 방법이다.분할 ➡ 정복 ➡ 결합분할

손 안의 카드를 정렬하는 방법과 유사한 알고리즘으로 자료 배열의 모든 요소를 앞에서부터 차례대로 이미 정렬된 배열 부분과 비교 하여, 자신의 위치를 찾아 삽입함으로써 정렬을 완성하는 알고리즘이다.두개의 부분집합으로 나눔 ➡ 크기에 따라 index 변경✔ 처음 key값은

Random Access를 지원하므로 element들을 index를 통해 직접적으로 접근 가능 index를 안다면 시간복잡도는 O(1)데이터들이 순차적으로 저장되어있으므로 데이터가 추가될 경우 그 뒤에 있는 데이터들을 모두 한 칸씩 뒤로 미뤄야함시간복잡도배열의 끝 :

block(전체를 감싸고 있는 블록요소)\_\_element(내부 요소)--modifier(기능/수정)B (Block)블록(block)은 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 지칭header, footer, main 영역을 가지고 있다고 가정하면,

서비스 운영자들은 웹 사이트를 이용하는 유저의 경험(UX, User Experience)을 향상시키기 위해 다양한 노력들을 기울입니다. 사용자 경험이 불편한 웹사이트는 사이트 이용시간을 단축시키거나, 재사용성을 떨어트릴 수 있습니다. Web Vitals은 좋은 사용자

Global namespace: 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 하는 문제Dependencies: css 간의 의존관계를 관리하기 힘든 문제Dead Code Elimination: 기능 추가, 변경, 삭제 과정에서 불필요한

객체 지향 프로그래밍(Object-Oriented Programming, OOP)은 컴퓨터 프로그래밍의 패러다임 중 하나로 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다.객체들의 공통적인 특징을 도출하는 것 객체 지향 프로그래밍에서 일반적으로 추상 자료형

페이지를 불러올 때 필요한 모든 js파일을 한번에 불러오기 때문에 시간이 오래 걸림검색 엔진 봇이 사이트에 방문했을 때 contents를 제공하지 못하여 SEO에 취약넥스트는 SPA와 SSR의 단점을 해결하기 위해서 리액트(SPA)에 SSR의 기능을 더하여 두개의 장점

프로젝트 생성 eslint, prettier 라이브러리 설치 설정파일 예시 eslint 설정 파일 예시 (.eslintrc) prettier 설정 파일 예시 (.prettierrc)

pages 폴더를 이용하여 경로를 설정할 수 있다. Next.js에서 라우팅 설정은 pages폴더에 파일을 만들면 파일의 경로에 따라 경로가 설정이 된다.pages폴더 index.jsx 파일 ('/' 경로를 가지는 페이지)위의 코드에서 Link 컴포넌트를 import

정적 생성 : 빌드 시에 페이지를 HTML로 만들어 요청 시 제공public 폴더를 이용하게 되면 정적 파일을 제공할 수 있다.서버 사이드 렌더링 : 페이지 요청 시 서버 사이드 렌더링을 통하여 HTML을 제공👉 외부 데이터를 필요로 하지 않는다면 정적 생성 방법을

모든 자바스크립트 프로그램이 타입스크립트라는 명제는 참이지만, 그 역은 성립하지 않는다. 이는 타입스크립트가 타입을 명시하는 추가적인 문법을 가지기 때문이다.에러에서의 TS / JS 차이점자바스크립트❌ TypeError: city.toUppercase is not a

✔ any 타입에는 타입 안정성이 없다✔ any는 함수 시그니처를 무시한다함수를 작성할 때는 시그니처를 명시해야 한다. 호출하는 쪽은 약속된 타입의 입력을 제공하고 함수는 약속된 타입의 출력을 반환한다. 그러나 any타입을 사용하면 이런 약속을 어길 수 있다.birth

변수에 값을 할당하고 타입을 부여하는 두 가지 방법👎 타입 단언은 강제로 타입을 지정했으니 타입 체커에게 오류를 무시하라고 한다. 또한 타입 선언문에서는 잉여 속성 체크가 동작하지만 단언문에서는 동작하지 않는다.✔ 화살표 함수의 반환 타입 선언 방법타입 단언이 꼭 필

타입스크립트에서 명명된 타입을 정의하는 방법은 두 가지가 있다.✔ 공통점추가 속성과 함께 할당한다면 오류가 발생한다인덱스 시그니처를 사용할 수 있다.함수 타입을 정의할 수 있다.제네릭이 가능하다인터페이스는 타입을 확장할 수 있으며, 타입은 인터페이스를 확장할 수 있다.

✔ readonly number\[]과 number\[]의 차이점배열의 요소를 읽을 수 있지만, 쓸 수는 없다.length를 읽을 수 있지만, 바꿀 수는 없다.배열을 변경하는 pop을 비롯한 다른 메서드를 호출할 수 없다.❗ 변경 가능한 배열을 readonly 배열에

✔ 넓히기타입스크립트에서의 과정으로 지정된 단일 값을 가지고 할당 가능한 값들의 집합을 유추해야 한다는 뜻✔ 넓히기의 과정을 제어하는 방법const 사용재할당이 불가능 하기 때문에 타입스크립트는 좁은 타입으로 추론이 가능하다.❗ 객체의 경우 타입스크립트의 넓히기 알고리

✔ 콜백보다 프로미스나 async/await를 사용해야 하는 이유콜백보다는 프로미스가 코드를 작성하기 쉬움콜백보다는 프로미스가 타입을 추론하기 쉬움타입구문이 없어도 fetchWithTimeout의 반환 타입은 Promise로 추론된다.프로미스를 사용하면 타입스크립트의

타입 흐름을 개선하고, 가독성을 높이고, 명시적인 타입 구문의 필요성을 줄이기 위해 직접 구현하기보다는 내장된 함수형 기법과 lodash 같은 유틸리티 라이브러리를 사용하는 것이 좋다.👎 조건이 명확히 분리되어 있지 않아서 isLoading이 true이고 동시에 er

주석의 3가지 문제점함수가 string을 반환한다고 나와있지만 실제로는 {r, g, b} 객체를 반환한다.매개변수를 0개 또는 1개 받는다고 나와있지만 타입 시그니처만 봐도 명확하게 알 수 있는 정보다.불필요하게 장황하다.올바른 주석👉 주석과 변수명에 타입 정보를 적

layout이 LineLayout 타입이면서 paint 속성이 FillPaint 타입인 것은 말이 되지 않는다. 이런 조합을 허용하면 오류가 발생하기 쉽고 인터페이스를 다루기가 어렵다.이런 형태로 Layer을 정의하면 layout과 paint 속성이 잘못된 조합으로 섞

정확하게 타입을 모델링할 수 없다면, 부정확하게 모델링하지 말아야 한다. 또한 any와 unknown을 구별해서 사용해야 한다.geometry에 coordinates 속성이 있다고 가정한 것이 문제, GeoJSON은 GeometryCollection(coordinate

✔️ 오류 제거 방법f2형식으로 작성하는 것이 더 권장됨.❓ 이유는?👉 any 타입이 processBar 함수의 매개변수에서만 사용된 표현식이므로 다른 코드에는 영향을 미치지 않기 때문이다. f1에서는 마지막까지 x의 타입이 any이다.큰 객체 안의 한 개 속성이 타

out의 타입은 any\[]로 선언되었지만 number 타입의 값을 넣는 순간부터 타입은 number\[]로 진화한다. any 타입의 진화는 noImplicitAny가 설정된 상태에서 변수의 타입이 암시적으로 any인 경우에만 일어난다.하지만 명시적으로 any를 선언하

npm은 자바스크립트 라이브러리 저장소(npm 레지스트리)와, 프로젝트가 의존하고 있는 라이브러리들의 버전을 지정하는 방법(package.json)을 제공한다.✔️ npm의 3가지 종류의 의존성dependencies현재 프로젝트를 실행하는 데 필수적인 라이브러리들이 포

타입스크립트 언어 서비스가 JSDoc 스타일을 지원하기 때문에 적극적으로 활용하는 것이 좋다. 타입스크립트 관점에서는 TSDoc라고 부르기도 한다.👍 @param과 @returns를 추가하면 함수를 호출하는 부분에서 각 매개변수와 관련된 설명을 보여준다.❌ onCli

미러링 : 필요한 선언부만 추출하여 작성 중인 라이브러리에 넣는 것만약 작성 중인 라이브러리가 의존하는 라이브러리의 구현과 무관하게 타입에만 의존한다면, 필요한 선언부만 추출하여 작성 중인 라이브러리에 넣는것을 고려해 보는 것도 좋다.공개한 라이브러리를 사용하는 자바스

EventTarget은 DOM 타입 중 가장 추상화된 타입이다. 이벤트 리스너를 추가하거나 제거하고, 이벤트를 보내는 것밖에 할 수 없다.<html>은 HTMLElement, <svg>는 SvgElement일반적으로 타입 단언문은 지양해야 하지만 DOM 관련

파일 상단에 // @ts-check를 추가하면 자바스크립트에서도 타입 체크를 수행할 수 있다.전역 선언과 서드파티 라이브러리의 타입 선언을 추가하는 방법을 익히자.JSDoc 주석을 잘 활용하면 자바스크립트 상태에서도 타입 단언과 타입 추론을 할 수 있다.JSDoc 주석

✔️ 데이터 타입의 종류privitive type(원시 타입)Number, String, Boolean, null , undefined, SymbolReference type(참조 타입)Object(Array, Function, Date, RegExp, Map, Set

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.✔️ 콜스택 상태전역 컨텍스트 생성(1) -> outer 실행 컨텍스트 생성(3) -> inner 실행 컨텍스트 생성(2) ->

자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, this는 함수를 호출할 때 결정된다.전역 공간에서의 this는 전역 객체(브라우저 환경에서는 window, Node.js 환경에서는 glob

✔️ 콜백 함수 : 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수로 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행한다.map 메서드는 메서드의 대상이 되는 배열의 모든 요소들을 처음부터

❓ inner 함수의 실행 시점에는 outer 함수는 이미 실행이 종료된 상태인데 outer 함수의 렉시컬환경에 어떻게 접근할 수 있는 걸까?👉 가비지 컬렉터의 동작 방식 때문이다. 가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집 대상에 포함

어떤 생성자 함수를 new 연산자와 함께 호출하면 Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스가 생성된다. 이때 인스턴스에는 \_\_proto\_\_ 라는 프로퍼티가 자동으로 부여되는데 이 프로퍼티는 Constructor의 prototype이라는 프

인스턴스에서 직접 접근할 수 없는 메서드를 스태틱 메서드라고 한다. 스태틱 메서드는 생성자 함수를 this로 해야만 호출할 수 있다.✔️ ES5와 ES6의 클래스 문법 비교✔️ ES6의 클래스 상속