sjindev 님의 블로그

브라우저의 렌더링 과정1. 요청과 응답브라우저 주소창에 URL 입력 시 브라우저가 DNS를 통해 IP 주소 조회함해당 서버로 HTTP 요청 전송함서버는 HTML 문서를 응답으로 반환함브라우저는 HTML 문서 수신 후 렌더링 엔진에 전달함2. HTTP 1.0 과 HTTP 2.0HTTP 1.0: 요청마다 TCP 연결 새로 생성함, 다중 요청 불가능함, 리소스가 많은 페이지에서 성능 저하 발생함HTTP 2.0: 하나의 연결에서 다중 요청 동시 처리 가능함, 헤더 압축과 서버 푸시 지원으로 성능 향상됨3. HTML 파싱과 DOM 생성DOM 생성과정 요약1. 렌더링 엔진이 HTML 문서를 읽고 토큰 단위로 분해함2. 토큰을 객체로 변환하여 노드를 생성(문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드).3...

심벌 (Symbol)1. 심벌값의 생성심벌은 ES6에서 도입된 원시 타입 중 하나임Symbol() 함수 호출로 생성함생성된 심벌값은 유일무이함new 연산자 사용 불가심벌값은 문자열로 자동 변환되지 않음const sym1 = Symbol('desc');const sym2 = Symbol('desc');console.log(sym1 === sym2); // false2. 심벌과 상수중복되지 않는 상수 값 생성 시 유용함주로 enum 대체 용도로 사용됨const DIRECTION = { UP: Symbol('up'), DOWN: Symbol('down')};3. 심벌과 프로퍼티 키객체 프로퍼티 키로 심벌 사용 가능함문자열 키와 달리 충돌 위험 없음const key = Symbol('key');const o..

함수 : 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.[함수를 사용하는 이유]필요할 때마다 한번 정의해 둔 것을 호출만 하면서 재사용할 수 있는 장점이 있다. 이러한 장점으로 우리는 함수를 사용한다. 그것도 아주 많이. + 코드의 가독성 향상 측면도 아주 크다.[함수 리터럴]함수 리터럴의 구성요소var f = function add(x, y) { return x + y;}- function 키워드- 함수 이름- 매개 변수 목록- 함수 몸체[함수정의]-함수 선언문 : function add(x, y) { return x+y; } 방식- 함수 표현식 : var add = function add(x, y) { return x+y; }; 이렇게 변수에 할당하는 ..

오늘은 비동기와 API 에 대해서 알아볼 예정입니다.위 그림은 동기 / 비동기 를 이해하기 가장 유용한 것 같아 첨부하였습니다.동기 예시는 아래와 같습니다.const workA = () => { console.log('workA');};const workB = () => { console.log('workB');};const workC = () => { console.log('workC');};workA();workB();workC();위와 같이 작성한 코드는 호출 순서인 workA(), workB(), workC() 순으로 수행됩니다. 이번에는 자바 스크립트에서 사용하는 비동기 내장함수 setTimeout() 을 수행하여 비동기의 동작 흐름을 알아보겠습니다.const workA = (..

목차07 연산자08 제어문09 타입 변환과 단축 평가10 객체 리터럴11 원시 값과 객체의 비교[07 - 연산자]산술연산자 : 수학적 계산으로 새로운 숫자 값 만듦. 산술 연산이 불가하 경우 NaN 반환이항 산술 연산자 : +, -, *, /, %단항 산술 연산자 : ++, --, +(어떠한 효과도 없다), - (음수는 양수로, 양수는 음수로 변환)문자열 연결 연산자 : 문자열a + 문자열b = 문자열ab. 단, 해당 연산은 피연산자 중 하나 이상이 문자열인 경우에만 발생한다. 그 외에는 산술연산자로 동작한다.// true는 산술 연산시 1이라는 값을 갖는다.1 + true; // 2// false 는 산술 연산시 0이라는 값을 갖는다.1 + false; // 1// null은 산술 연산시 0이라는 값을..

목차1장 - 프로그래밍2장 - 자바스크립트란?3장 - 자바스크립트 개발 환경과 실행 방법4장 - 변수5장 - 표현식과 문6장 - 데이터 타입 서론은 건너뛰고 주요내용 위주로 정리 예정 [2.2 자바스크립트의 표준화 및 배경] [배경]- 마이크로 소프트는 자바스크립트의 파생 버전인 JScript를 자사 브라우저에서만 동작하는 기능을 추가하기 시작했고 이로인해 크로스 브라우징 이슈가 발생- 표준화된 자바스크립트의 필요성 증가 [표준화] - 1997년 7월 ECMA-262 라는 표준화된 자바스크립트 초판 사양 완성 및 ECMAScript 로 명명 이후 2015년 ECMAScript 6 (ES6) 가 공개되었고 이때 - let / const 키워드- 화살표 함수- 클래스- 모듈위와 같은 기능들이 대거 도입되며..

콜백 함수란, 다른 함수의 인자로 넘겨져서 그 함수 안에서 특정 조건이나 이벤트가 발생했을 때 호출되는 함수이다. 즉, 다른 함수가 콜백 함수를 실행하는 것을 기다린 후, 특정 상황이 발생하면 콜백 함수를 실행하는 방식이다. 간단히 예제를 보며 이해해보자.const printResult = (a, b) => { let result = a + b; console.log("결과:", result);};const doubleResult = (a, b) => { let result = a + b; console.log("결과에 2를 곱한 값:", result * 2);};printResult(5, 3);doubleResult(5, 3);위와 같이 코드를 작성하면 let result = a ..

프로젝트를 하며 js를 다루다가, api 연동 혹은 리액트 코드 작성을 위해 사용한 함수식은 대부분 화살표 함수로 작성되어있다는 것을 깨달았다. 과연 내가 제대로 알고 쓰는것일까? 문득 궁금하여 다시 공부하고 내용을 정리해서 글로 남겨두고자 한다.어떻게 동작하는지 모른채로 접한다면 이해하기 힘들 수 있다. 우선 화살표함수는 ES6 이후 문법으로 function 키워드 대신 "=>" 모양을 사용하여 만든 함수이다. 이 글에서 알아볼 방식은 함수를 선언하는 방식 중 함수표현식과 함수선언식 방식이다. 화살표 함수 - 화살표 함수는 function 키워드 대신 => 기호를 사용하는 함수 표현식이다.const add = (a, b) => a + b;console.log(add(2, 3)); // 5 함수 선언식..