✅TypeScript의 장점과 단점
TypeScript 자바스크립트 Superset(확대집합) 컴파일 언어 정적 타입 언어 TypeScript의 장점 컴파일 시점에 타입을 체크하여 오류 확인 미리 타입을 결정하기 때문에 실행 속도가 빠르다. 코드 자동완성이나 실행 전 피드백을 제공하여 생산성이 높다. 특정 기능에만 타입스크립트를 도입함으로써 프로젝...
고양이발
✅실행 컨텍스트
소스코드의 타입 타입 설명 전역 코드 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 ...
비동기 콜백 함수와 Promise의 차이점, Promise 이해하기
비동기 처리 일반 함수의 비동기 처리 const get = (url) => { const xhr = new XMLHttpRequest() xhr.open('GET', url) xhr.send() xhr.onload = () => { if (xhr.status === 200) { console.log(JS...
CORS(교차 출처 리소스 공유), SOP(동일 출처 정책)
CORS란? Cross-Origin Resource Sharing, 즉 교차 출처 리소스 공유이다. (잘 안 외워진다..) 결론부터 말하자면, CORS는 HTTP 헤더(Access-Control-Allow-Origin)를 사용하여 한 출처에서 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. CORS 정책을 ...
가상 셀렉터 :nth-child와 :nth-of-type의 차이
:nth-child 부모의 n번째 자식 요소 :nth-of-type 부모의 자식 요소 중 type 조건을 만족하는 n번째 자식 요소 무엇이 다른가? <div> <h1>Heading1</h1> <p>Lorem</p> <p>ipsum</p> <p...
block과 inline-block, inline 요소의 차이
block 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지 width와 height를 지정할 수 있다. padding, margin을 지정하면 공간을 점유한다. inline text 크기만큼만 점유한다. width와 height를 지정할 수 없다. padding, margin을 지정하면 좌...
CSS-in-JS? 장점과 단점
CSS-in-JS CSS-in-JS는 단어 그대로 JavaScript 코드에서 CSS를 작성하는 방식이다. 런타임 환경에서 CSS와 컴포넌트를 이어주는 classname이 필요하기 때문에 각 컴포넌트를 hashing하여 동적인 classname을 만든다. 컴포넌트가 생성될 때 <head>에 <style>로 같이 생성되며 라이...
HTTPS란? SSL 인증서와 동작과정
HTTP와 HTTPS의 차이 HTTP: Hypertext Tranfer Protocol HTTPS: Hypertext Tranfer Protocol Over Secure Socket Layer HTTP는 암호화되지 않은 방법으로 데이터를 전송하기 때문에 보안성이 낮다. ...
이터러블과 이터레이터, 제너레이터
이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for…of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사...
쿠키(cookie), 세션(session), 캐시(cache)
HTTP의 특징 Connectionless (비연결 지향) 클라이언트에서 서버에 요청을 보내면 서버는 클라이언트에 응답을 보내고 접속을 끊는다. Stateless (상태 정보 유지 안함) 응답하고 접속을 끊기 때문에 클라이언트의 상태 정보를 알 수 없다. 쿠키와 세션은 ...