Overview 오늘도 평소처럼 새로운 repository를 생성하고 수정된 파일들을 내 local환경에서 git add, git commit, git push 과정으로 실행했다. (참고로 나는 주로 맥 환경에서만 commit을 해왔었고 윈도우환경에서는 처음으로 세팅하고 commit하는 것이었다.) 정상적으로 push가됐다는 메시지를 보고 내 깃헙 프로필 contribution graph를 확인해봤는데 어라? 분명 정상적으로 push됐는데 잔디가 채워지지 않았네? 잘못됐나싶어 다시 추가하고 push를 해봤지만 commit은 정상적으로 될뿐 잔디는 채워지지 않았다. 물론 github에 올리는거에 목적을 두지만 분명 활동을 했는데 내 contribution graph에 잔디가 안채워 진다니 허탈했다. Con..

자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하다 자바스크립트 엔진은 기본적으로 웹 브라우저에 내장되어 있다. 물론 브라우저마다 엔진의 종류가 다르지만 코드 실행과정은 비슷하기 때문에 웹 브라우저에서 자바스크립트 엔진을 이용한 코드 실행 과정은 알고있어야 한다. 자바스크립트 엔진을 이용한 코드 실행 과정은 다음 그림과 같다. 자바스크립트 소스코드를 파싱(parsing)하여 AST(Abstract Syntax Tree)로 변환한다. 인터프린터(Interpreter)는 AST를 기반으로 하여 바이트 코드(Byte code)를 생성한다. 인터프리터가 바이트코드를 생성할 때 사용되는 함수 및 타입 정보들을 프로파일링 데이터(Profiling data)를 최적화 컴파일러(Optimizing compil..

일반적으로 브라우저가 서버로부터 페이지에 대한 응답을 받을경우 화면에 표시되기까지 많은 동작을 거쳐야한다. 여기서 브라우저가 HTML파일을 초기 화면에 표시하기 위한 이 순서를 CRP(Critical Rendering Path)라고 한다. CRP는 다음과 같이 6단계의 순서로 실행된다. HTML파일을 파싱하여 각 HTML태그들을 오브젝트 노드로 변환하여 이를 기반으로 DOM트리를 구축한다. CSS파일을 파싱하여 CSSOM(CSS Object Model) 구축한다. javascript 실행한다. 여기서 HTML파싱 중 외부 파일과 연결된 script태그를 만나면 파싱을 중단하고 script 파일을 요청하고 다운로드 한다. 요청 한 파일이 다운로드가 완료되면 다시 다음 태그들을 파싱한다. (단, defer,..

DOM(Document Object Model)이란 무엇일까? hello! 예를들어 위와 같은 HTML파일을 브라우저에서 읽게될 때 body, section태그 등 이런 태그들은 노드로 변환된다. 즉, 각각의 태그들을 분석해서 브라우저가 읽을 수 있는 노드로 변환되어진다. HTML파일에서 쓰인 태그들은 자바스크립트에서 노드로 변환되고 이 노드 오브젝트 안에는 HTML파일에서 작성한 클래스같은 정보들이나 텍스트같은 것들이 포함되어있다. 상속관계를 시각적으로 표현해보자면 Node는 EventTarget을 상속한다. 결국 모든 Node는 이벤트를 발생할수 있고 document라는 것은 node를 상속하고 node는 EventTarget을 상속하기 때문에 document와 동일하게 node를 상속하는 eleme..

이번 사이드 프로젝트로 Youtube에서 제공하는 data API를 사용하여 데이터를 받아오고 받아온 데이터 중 가장 인기있는 비디오를 리스트형식으로 화면 출력, 비디오 재생, 비디오 정보, 검색기능을 추가할 계획이다. 먼저 Youtube데이터를 받아오기 위해 Youtube data API를 추가하여 고유 key를 발급받는다 1. GoogleAPIs에 접속하여 Youtube Data API 라이브러리에 추가 2. API 추가 후 key 발급 자 이제 key를 발급받았으니 이 key를 사용하여 youtube에서 제공하는 data를 얼마든지 불러올수있다. 하지만 어떻게 데이터를 받아올것인가? 여기서 이 API를 테스트 및 손쉽게 관리할 수 있고 생산성을 높여주는 프로그램인 Postman을 사용할 것이다. P..

함수 컴포넌트 함수형 컴포넌트는 JSX리턴하는 함수를 정의한다. 컴포넌트 자체에 State(데이터)가 없거나 외부에서 전달받은 데이터(Props)를 보여주거나 State, Props 둘다 없는 정적인 컴포넌트를 만들때 함수형 컴포넌트를 사용한다. 클래스 컴포넌트와 반대로 함수를 호출할때마다 함수 코드블럭 전체가 재실행되고 그 안에서 선언된 로컬변수, 값들이 다시 정의,할당 되어진다. 따라서 일반 함수형 컴포넌트에서는 자체적인 State를 가질수 없다. 정리: 함수형 컴포넌트는 자체적인 데이터가 필요없고 라이프 사이클 메소드를 사용하지 않는 정적인 컴포넌트를 만들때 사용한다 클래스 컴포넌트 리액트에서 제공하는 React.Component 클래스를 상속하는 클래스를 만들고 UI를 어떻게 표기할 것인지 정의하..

변수 선언 방식 자바스크립트에서 변수를 선언하는 방법으로는 다음과 같이 세 가지 방법이 있다. let const var let 과 var로 선언할 경우는 값이 변할수 있는 경우에 사용되고 const는 상수와 같이 정해진 값으로 나중에 변경할 일이 없을 때 사용한다. 하지만 var는 오래된 선언방식이고 최신 코드에선 쓰이지 않는 선언방식이기에 let과 var 둘 중에 하나를 써야한다면 추세에 맞게 let을 써야한다. 그럼에도 불구하고 최근엔 var을 쓰지도않는데 알아야 할 필요가 있을까? 여기서 let으로 선언한 변수와 var로 선언한 변수는 유사하지만 차이점이 존재한다. 현재 var는 최신 스크립트에서는 볼 수 없지만 오래된 스크립트에선 아직 볼 수 있다. 때문에 오래된 스크립트 코드에서 var을 let..

State state는 컴포넌트 안에서 내부적으로 데이터를 정의하는 오브젝트이다 컴포넌트 UI를 위한 데이터를 보관하는 오브젝트이며 state 업데이트를 통해 데이터가 변경되면 리액트가 자동적으로 render함수를 호출한다. Props props는 컴포넌트 밖에서 주어지는 데이터라고 한다 컴포넌트 안에서 데이터를 직접 정의하는 state와 달리 props는 외부에서 데이터를 제공받는다 props를 쓰는 근본적인 이유는 재사용률을 높이기 위함이며 상황에 따라 주어진 데이터를 그 데이터에 맞게 UI에 표기해준다. 위와 같이 부모 컴포넌트에서 LikeButton 컴포넌트를 사용할 때 title 과 onClick이라는 아이들을 인자로 전달해주면 전달 받은 인자들은 props 오브젝트로 묶여서 LikeButton..