Kim-Baek 개발자 이야기

브라우저에서 html을 그리기 위해서 여러 가지 과정이 있다는 것을 알고 있었지만 정확하게 알지 못했는데, 렌더 트리가 어떻게 그려지고, 어떤 과정인지를 정확하게 설명하고 있는 내용이다. 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다. 클라이언트 (브라우저) 를 보면 렌더링엔진과 자..

프론트엔드 관련 테스트를 하면서, 항상 사용했던 것이 브라우저의 개발자 도구이다. 개발자 도구를 통해서 어떤 행동을 할 수 있을지를 아래에서 설명한다. 1.1 개발자 도구 크롬 브라우저가 제공하는 개발자 도구(DevTools)은 자바스크립트 개발에 필수적인 강력한 도구이다. 개발자 도구는 브라우저에 기본 내장되어 있으므로 별도의 설치가 필요없다. 개발자 도구는 아래의 단축키로 오픈할 수 있다. 단축키 Windows F12 또는 Ctrl + Shift + I macOS command ⌘ + option ⌥ + I 예전에 프론트엔드를 개발할 때 가장 어려운 것이 무엇일까요? 라는 질문을 들은 적이 있다. 그 때의 나는 디버깅이 아닐까요 라고 대답을 했던 것 같다. 사실 프론트엔드의 디버깅을 내가 잘 할 줄 ..

함수 호출과 this Arguments 객체 자바스크립트에서 함수를 호출할 때 인수들과 함께 암묵적으로 arguments 객체가 함수내부로 전달된다. arguments 객체는 유사 배열 객체이다 넘겨진 인자(배열), length, callee(함수의 참조 값) 으로 구성되어 있다. function sum(a, b){ return a+b; } console.log(sum(1)); //NaN console.log(sum(1,2)); //3 console.log(sum(1,2,3)); //3 // length를 이용한 구현 function sum(){ var result = 0; for(var i=0; i < arguments.length; i++){ result += arguments[i]; } return..

Function Object 자바스크립트에서는 함수도 객체이다. 함수에 정의된 로직 말고도 객체처럼 프로퍼티들을 가질 수 있다. function add(x, y){ return x+y; } add.status = "good"; console.log(add(3,3)); //6 console.log(add.status); //good 함수를 생성할 때 만들어 지는 함수 코드는 함수 객체의 [[Code]] 내부 프로퍼티에 자동으로 저장된다. 함수는 일급 객체이다 자바스크립트에서는 함수도 일반 객체처럼 취급된다. 따라서 일급 객체를 만족하는 특징들이 있다. 리터럴에 의한 생성 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능 함수의 인자로 전달 가능 함수의 리턴값으로 리턴 가능 동적으로 프로퍼티를 생성 및 ..

JavaScript Function 함수 정의하기 자바스크립트 함수는 3가지 방법으로 생성할 수 있다. 함수 선언문 함수 표현식 Function() 생성자 함수 1. 함수 선언문 방식 함수 선언문 방식은 객체 리터렁 방식과 같다. 자바스크립트에서는 함수도 일반 객체처럼 취급하기 때문이다. 함수 선언문 방식으로 정의할 경우 반드시 함수명이 정의 되어야 한다. function sum(x, y) { return x+y; } 2. 함수 표현식 방식 자바스크립트에서는 함수도 하나의 값처럼 취급된다. 함수를 만들고 변수에 할당하여 생성하는 것을 함수 표현식이라 한다. //sum 이라는 변수에 두 값을 더해주는 익명 함수 참조 값을 저장한다. var sum = function(x, y) { return x+y; } ..

Data Type 자바스크립트는 크게 2가지의 데이터 타입으로 나뉜다. (기본타입 / 참조타입) 1. 기본 타입 - Number - String - Boolean - Undefined - Null 자바스크립트의 기본 타입은 그 자체가 하나의 값을 나타내는 것이다. var num = 10; var str = "jeahyun"; var flag = true; var empty; var val = null; typeof num // number typeof str // string typeof flag // boolean typeof empty // undefined typeof val // object typeof 는 피연산자의 타입을 리턴해준다. 모든 숫자를 64비트 부동 소수점 형태로 저장한다(C의 do..

Javascript 란? 자바스크립트는 객체 기반의 웹 브라우저에서 동작하는 스크립트 언어이다. node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용된다. 웹 개발, 서버 개발, 애플리케이션 개발 등 다양한 분야에서 사용된다. Javascript의 핵심 개념 객체 : 자바스크립트의 기본 데이터 타입을 제외한 거의 모든 것은 객체이다. 함수 : 자바스크립트의 함수는 일급 객체로 다뤄지고, 함수 역시 객체이다. 프로토타입 : 모든 객체는 프로토타입을 가진다. 프로토타입으로 상속 등 다양한 자료구조를 구현할 수 있다. 실행 컨텍스트, 클로저 : 자바스크립트는 실행 컨텍스트를 가지고 scope가 존재한다. scope를 이용해 우리는 클러저를 활용 할 수 있다. 객체지향 프로그래밍 &..