천천히 느리게 천천히 느리게

◎ 면접을 진행하다 보면 이벤트 버블링과 이벤트 캡쳐의 차이에 대하 자주 물어본다. 근본적인 지식에 대한 정보는 없어서 정리를 한번 해볼까 한다. 1. 이벤트 버블링이란? ◎ 이벤트 버블링(Event Bubbling)은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위 요소들로 전달되어 가는 특성을 의미한다. 여기서 상위 요소란, HTML 요소는 기본적으로 트리 구조를 갖는다. 여기서는 트리 구조상으로 한 단계 위에 있는 요소를 상위 요소라고 한다. 다음 코드를 봐보자. 세 개의 div 태그가 있고 가장 아래에 있는 div 태그에서 이벤트가 발생했을 때 최상위 요소인 body 태그까지 이벤트가 전달되는 코드이다. 위의 코드는 세 개의 div 태그에 모두 클릭 이벤트를 등록하고 클릭했을 때 ..

◎ 지금까지는 객체지향 프로그래밍이었다면 이제 함수를 기반하는 함수형 프로그래밍으로 많이 작성한다. 함수형 프로그래밍에 대해서 간략하게 알아보자! 1. 함수형 프로그래밍이란? ◎ 함수형 프로그래밍은 순수한 함수를 작성하고, 공유된 상태와 변경 가능한 데이터 및 부작용을 피하여 소프트웨어를 작성하는 프로세스이다. 함수형 프로그래밍은 선언형이며, 애플리케이션의 상태는 순수한 함수를 통해 전달된다. 애플리케이션의 상태가 공유되고, 객체의 메서드와 사용되는 객체 지향 프로그래밍과는 대조된다. 2. 순수 함수 (pure function) ◎ 순수 함수란 하나 이상의 인자를 받고, 받은 인자를 처리하여 반드시 결과물을 돌려주어야 한다는 것이다. 인자를 제외한 다른 변수는 사용하면 안 되고 받은 인자만으로 결과물을 ..

◎ 우리가 어떠한 사이트를 들어가면 사이트는 많은 과정을 거쳐서 우리한테 보이게 된다. 이제 그 과정에는 어떠한 것들이 있는지 알아봐보자. 1. 브라우저의 주요 기능 ◎ 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. 브라우저는 HTML과 CSS 명세에 따라 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consorium)에서 정한다. 브라우저의 사용자 인터페이스는 서로 닮아 있는데 다음과 같은 요소들이 일반적이다. ..

◎ 코딩을 하다 보면 반복문을 많이 사용하게 된다. 반복문을 실행하다가 중간에 종료하게 되는 상황이 있는데 그 방법에는 break, continue, return 등이 있다. 각 각의 방법의 차이점을 알아보자 1. break ◎ 반복문을 실행하다가 break문을 만나면 반복문은 그 즉시 실행을 멈추고 반복문은 종료된다. const forBreak = () => { let sum = 0; for (let i = 0; i 100) { break; } sum += i; } console.log(sum); // 105 }; forBreak(); 위 코드는 0부터 100까지의 수를 모두 더하는 함수이다. 0부터 100까지 더하면 5050이 출력되어야 하지만, sum이 100보다 커질 때 break문을 만나 반복문..

◎ 아직까지도 헷갈리는 개념!! 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 개념과 지식에 대해 알아보자. 1. 렌더링 ◎ 렌더링이란, 요청받은 내용을 브라우저에 화면에 표시하는 것이다. 예를 들어, 우리가 어떠한 홈페이지를 접속하게 되면 브라우저에 해당하는 홈페이지가 나오는 것이라고 생각하면 된다. 1-1. 렌더링의 과정 로더(Loader)가 서버로부터 정보들을 불러옴 파싱(Phasing)을 통해 문서를 DOM 트리로 만듦 DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축 CSS 설정/레이아웃 위치 지정 렌더링 트리가 그려짐 2. 서버 사이드 렌더링(SSR) ◎ 웹의 시작부터 MPA(Multiple Page Application)이 있었다. 웹의 초기부터 SPA에 대한 개념이 나오기 전까지 ..

1. 비동기 방식 ◎ 비동기 방식이란, 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성을 말한다. 기다리는 과정에서 다른 함수를 호출할 수 있다. ※ 동기적 방식 : 작업이 끝날 때까지 다른 작업을 할 수 없다. 동기적과 비동기적 방식을 밑의 그림처럼 표현할 수 있다. 동기적은 1번이 끝날 때까지 2번을 시작하지 못한다. 1번이 끝나야 비로소 2번이 실행되고, 2번이 끝나야 3번을 시작할 수 있다. 하지만 비동기는 1번이 끝나기 전에 2번의 코드를 실행할 수 있고, 2번이 끝나기 전에 3번을 시작할 수 있다. setTimeout() 함수가 대표적인 비동기 함수이다. setTimeout()은 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행하는 것..

1. Arrow function이란 ◎ 화살표 함수(Arrow functioin)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있는 ES6문법 중 하나이다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 2. 문법 ◎ 이름이 없는 함수의 기본적인 문법을 봐보자. ES6에서는 function이라는 키워드가 빠지고 소괄호만 남았다. 그리고 =>(arrow)가 추가되었다. // ES5 function(){} // ES6 () => {} ◎ 이름이 있는 함수를 만들 때는 다음과 같다. // ES5 function getName() {} // ES6 const getName = () => {} 호출할 때는 둘 다 같다. getName(); ◎ 화살..

1. 함수 ◎ 함수는 특정 코드를 하나의 명령으로 실행 하 수 있게 해주는 기능입니다. 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같은 코드를 작성한다. 위의 작업을 함수로 만들어 보자. 함수를 만들 때는 function 키워들 사용하며, 함수에서 어떤 값을 받아올지 정해주는데 이를 파라미터(매개변수)라고 부른다. 함수 내부에서 return 키워드를 사용하여 함수의 결과물을 지정할 수 있다. 2. 문법 ◎ 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다. 한번 함수를 정의하는 문법을 봐보자. function 함수이름() { 실실행할 코드 작성 return; } function 키워드로 시작한다. 함수 이름을 지어준다. 함수를 알리는 ( )를 열고 닫는다. 함수의 시작..