비동기 콜백 함수와 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 (상태 정보 유지 안함) 응답하고 접속을 끊기 때문에 클라이언트의 상태 정보를 알 수 없다. 쿠키와 세션은 ...
JavaScript module export & import
JavaScript module IE를 제외한 최신 브라우저에서 기본적으로 모듈 기능을 지원 구조 module.js에서 변수나 함수를 export main.js에서 module을 import index.html에서 main.js를 module 타입으로 참조 예시 module.js...
useEffect 동작 원리, 사용하기
useEffect() useEffect()를 사용하여 side effect를 수행할 수 있습니다. useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다. useEffect가 하는 일은 무엇일까요? useEffect ...