minTech

"웹브라우저를 렌더링한다." 본격적인 내용에 들어가기에 앞서 브라우저의 렌더링이란 브라우저가 서버로부터 요청해 받은 내용(HTML, CSS, Javascript)을 브라우저 화면에 표시해주는 작업을 말한다. 렌더링 방식 중 CSR, SSR, SSG에 대해 정리해보았다.. ☝️클라이언트 사이드 렌더링(CSR: Client-Side Rendering) 서버로부터 받아온 데이터를 클라이언트 내에서 동적으로 조작하여 렌더링하는 방식이다. 동작원리 사용자가 웹페이지에 접속하면, 클라이언트는 서버로 요청한다. 요청을 받은 서버는 빈 HTML과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다. 클라이언트는 서버로부터 받은 텅빈 HTML 문서를 해석하고, 렌더링한다. 브라우저는 자바스크립트 파일을 다운받는다. 다운이..

알고리즘 문제를 풀다 보면 내가 원하는 배열의 길이와 그 원소 값을 가진 배열을 생성해야 하고 싶은 경우가 있다. 이럴 때 가장 자주 사용하던 메소드가 Array.from()이다. 알고리즘 문제를 풀다 보면 가끔 Array.from()을 사용해야 하는 경우가 생기는데, 매번 사용하는 것이 아니다 보니 항상 사용 전에 메소드를 다루는 법에 있어 제대로 사소한 실수들이 잦은 것 같아 머릿속에 뽝! 집어넣을 겸, Array.from()에 대해서 더 많은 정보도 찾아볼 겸, 블로그의 글로 작성해 보았다. 🧐 Array.from()이 무엇일까? Array.from() 메서드는 유사 배열 객체 또는 이터러블 객체를 전달받아 콜백함수를 통해 배열을 생성하는 메서드이다. 첫 번째 인수로 유사베열 객체 또는 이터러블 객..

javascript를 공부하다보면 다른 파트이더라도 반복되는 개념들이 많이 등장한다.실제로 자바스크립트를 공부하며 반복되는 단어 중 "실행 컨텍스트" 라는 말도 정말 자주 들어보았다. 그래서 이 단어에 대해 완벽하게 머릿 속에서 정리하고자 글을 작성해보았다. 실행 컨텍스트의 개념은 자바스크립트에서 굉장히 중요하고 핵심적인 개념이다. 이 실행 컨텍스트에 대해 완벽하게 이해한다면, 소스코드를 실행할 때 식별자와 변수를 관리하는 방식과 호이스팅이 발생하는 이유에 대해 자연스럽게 이해할 수 있다. 👀 들어가기 전에 자바스크립트 엔진은 소스 코드를 실행하기 위해 2가지 단계를 수행한다. 1) 소스코드를 평가한다. 실행 컨텍스트를 생성하고, 선언문만 실행하여 생성된 변수나 식별자를 실행 컨텍스트가 관리하는 스코프에..

자바스크립트의 동기와 비동기.. 복잡한 개념인 것 같아 배우면서 애를 먹었던 부분이다. 이 두 개념에 대해 이해한대로 정리해보았다. 동기(synchronous) 동기적으로 실행한다는 것은 무엇을 의미하는 것일까? ➡️ 동기 실행이란 한 번 시작한 작업을 다 처리하고 나서야 다음 코드로 넘어가는 것이다. 다음과 같이 변수를 선언해주어 값을 세 번 다른 값으로 할당 후에 중간중간 콘솔로 출력해보았다. let num = 1; console.log(num); num = 2; console.log(num); num = 3; console.log(num); 자바스크립트는 동기식 언어이기 때문에 코드를 위에서 아래로 내려오면서 한줄한줄 실행한다. 따라서 결과는 1,2,3이 차례대로 출력됨을 확인할 수 있다. 🖐️자바..

HTTP (HyperText Transfer Protocol) 한 번쯤 http에 대해서 많이 들어보았을 것이다. 특히 서로 친구들이나, 가족들에게 재밌는 동영상을 공유할 때 URL을 주고받는다. 이를 자세히 살펴보면 http가 URL의 맨 처음에 위치해있음을 알 수 있다. 👀 HTTP http는 하이퍼텍스트를 전송하는 프로토콜이다. 프로토콜 : 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계 - from MDN- 즉, 웹 브라우저와 서버가 데이터를 교환할 때 http 프로토콜에 맞게 이루어져야한다. HTTP Method 웹 브라우저와 서버 사이의 요청(request)과 응답(response)가 이뤄지는 방식을 말한다. request에 원하는 동작을 위한 메소드 값을 넣어..

📑 이벤트 객체 사용자의 입력을 트리거로 발생한 이벤트 정보를 담은 객체 웹 페이지에서 이벤트가 발생하면 이벤트와 관련된 정보를 담은 이벤트 객체가 자동으로 발생한다. 리스너 함수의 첫 번째 매개변수를 통해 이벤트 객체를 전달받을 수 있다. function printEvent(e) { console.log(e); } 다음과 같은 이벤트 함수를 등록하여 console 창을 통해 이벤트 객체를 확인해보았다. 위 그림에서 처럼 이벤트 객체 안에는 많은 프로퍼티들이 존재한다. 이 중 많이 사용하는 것이 type과 target 이다. - type: 발생한 event의 타입 - target : event가 발생한 해당 DOM요소를 가리킨다. 🖱️이벤트가 발생하면 이벤트가 발생하면 이벤트는 어떻게 전파되는 걸까? 이..

🖐️시작 전에 자바스크립트는 단일 스레드 기반의 언어이다. 그렇기 때문에 요청이 동기적으로 처리되어 한 번에 한 가지 일만 처리가 가능하기 때문에 한 번에 많은 작업들을 수행할 수 가 없다. 하지만 자바스크립트를 통해 만든 결과물을 보면 여러 동작을 한 번에 하는 것처럼 보인다. 어떻게 가능한걸까? 그렇다면 자바스크립트는 단일 스레드가 아닌걸까? NO!! 이런 동작이 가능하게 하는 것이 "event loop" 덕분이다. 자바스크립트 엔진이 이벤트 루프를 다루는 것이 아니다. 자바스크립트는 Call Stack을 통해 들어온 일을 순차적으로 처리할 뿐이다. 이러한 비동기 요청은 브라우저나 nodeJS같은 브라우저 환경이 담당한다. 🌐 브라우저 환경 👉 구성 ☝️ Javascript engine Heap : ..

🖐️시작 전 자바스크립트에서 변수 선언을 하는 방법에는 var, let, const 3가지가 있다. ES6 이전에는 var 하나로 변수 선언이 이루어졌지만 ES6 이후로 let과 const 로 변수 선언이 가능해졌으며, 두 개의 사용을 권장한다. 이 두 가지를 권장하는 이유는 무엇이며, 세 가지의 차이점은 무엇일까? 👉 변수 선언 방식 var의 경우 재선언이 가능하다. 아래와 같은 코드를 작성 후, 동작하면 정상적으로 "melon"이 잘 출력된다. var fruit = "apple"; var fruit = "melon"; console.log(fruit); //melon let과 const의 경우 재선언이 불가능하다. 재선언 시, 이미 선언이 이루어졌다고 오류가 발생한다. let fruit = "appl..