DEEPDIVE
![[React] Deep Dive 모던 리액트(5) 가상 DOM & 리액트 파이버](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcGfyq4%2FbtsCbd2fQpE%2FVPa5Zy9G2CbdoSRWDG5w50%2Fimg.png)
[React] Deep Dive 모던 리액트(5) 가상 DOM & 리액트 파이버
리액트의 가장 큰 특징중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다! 이러한 가상 DOM은 왜 만들어졌고 실제 DOM과는 어떤차이가 있는지 알아보자. DOM(Document Object Model) 웹페이지에 대한 인터페이스로 브라우저가 웹 페이지의 콘텐츠와 구조를 어떠한 방식으로 보여줄지에 대한 정보가 담겨있다. 브라우저가 웹 사이트 접근 요청을 받고 화면은 그리는 일은 아래의 순서대로 일어난다. 1. 브라우저가 URL에서 HTML파일을 다운로드 2. HTML을 파싱하여 DOM 트리를 만든다. 3. (2)번과정 진행중 CSS파일을 만나면 CSS파일을 다운로드 4. CSS를 파싱하여 CSSOM을 구성 5. (2)번 DOM노드를 순회한다. (display : none 과 같은 사용자에게 안..
![[React] Deep Dive 모던 리액트(4) JSX](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAR7My%2FbtsB8Vt7NK0%2FHzDUwTrWhCngpyAghKN5D0%2Fimg.png)
[React] Deep Dive 모던 리액트(4) JSX
이제 리액트의 핵심 요소들을 하나씩 알아보자. JSX(JavaScript XML) 많은 프론트엔드 개발자들이 착각하는 것은 JSX가 리액트의 전유물이라는 것이다. 물론 JSX가 리액트가 등장하며 소개된 구문인점은 맞지만 리액트와는 독립적으로 동작하는 문법이다. JSX는 ECMAScript 자바스크립트 표준의 일부는 아니기 때문에 해당 코드를 바로 실행하면 에러가 발생한다. 따라서 JSX를 활용하려면 트랜스파일러를 거쳐서 의미있는 JS 코드로 변환하는 작업이 필요하다. JSX의 주 목적중 하나는 HTML이나 XML을 JS내부에 표현하는 것이다. 그 외에도 JSX내부에 트리구조로 표현하고 싶은 다양한 것들을 작성하고 이를 JS가 이해할 수 있는 코드로 변경하는 것이 주된 목적이라고 할 수 있다. JSXEle..
![[React] DeepDive 모던 리액트 (1) 리액트의 역사](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc2jFtn%2FbtsBUdbAukV%2F4M3aWy2Ko4GIew9KDq4BYk%2Fimg.png)
[React] DeepDive 모던 리액트 (1) 리액트의 역사
감명있게 읽었던 JavaScript DeepDive의 리액트 버전 책이 나와서 바로 구매해보았다. 마찬가지로 책을 읽으면서 정리해보려고 한다. 사실 리액트를 깊게 공부해야한다 생각은 했지만 정말 리액트란 라이브러리의 원리에 대해 깊게 파거나 리액트에 존재하는 여러 유용한 훅에 대해 공부할 필요성을 느껴서 구매해보기도 했다. 책은 900페이지가 넘어갈정도로 두껍지만 그만큼 배워갈 부분도 많을 것 같아 기대된다. Why React? 리액트는 2011년 페이스북에서 선보인 10년이 넘은 라이브러리이다. 심지어 리액트가 전자정부 표준 프레임워크의 프런트 엔드 개발도구로도 채택되었다. 그만큼 리액트라는 라이브러리의 안정성또한 보장되었음을 알 수 있다. jQuery또한 2018년도 리액트에 밀리기 시작하였으며 당분..
![[JS] DeepDive(49) Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdqHOz0%2Fbtsv5mSTkly%2FzvV5x2ugzaeK4cRVdoqFzk%2Fimg.png)
[JS] DeepDive(49) Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축
크롬,사파이 , 파이어폭스 , 엣지 등 대부분 브라우저는 ES6을 지원한다. IE 11의 ES6 지원률을 매우 낮으며 매년 새롭게 도입되는 ES6+ 버전이나 제안단계의 ES제안 상양은 브라우저에 따라서 지원율이 제각각이다. 즉 ES6+와 ES.NEXT의 ECMAScript사양을 활용하려면 최신 사양으로 작성된 코드를 때에 따라서는 구형 브라우저에서도 동작시키기 위한 환경 구축이 필요하다. 대부분 프로젝트가 모듈을 사용하므로 모듈 로더도 필요한데 ESM은 대부분 브라우저에서 사용할 수 있긴 하지만 몇가지 이유로 별도의 모듈 로더를 사용하는것이 일반적이다. 1. 구형브라우저에서 ESM을 지원하지 않음 2. ESM을 사용해도 트랜스파일링이나 번들링이 필요함 3. ESM이 아직 지원하지 않는 기능이 있으며 해결..
[JS] DeepDive(48) 모듈
모듈의 일반적 의미 모듈이란 애플리케이션을 구성하는 개별적 요소이다. 모듈이 성립하기 위해선 모듈은 자신만의 파일 스코프를 가질 수 있어야 한다. 모듈의 모든 자산은 캡슈로하되어 다른 모듈에서 접근할 수 없으며 즉 모듈은 애플리케이션과 분리된다. 하지만 애플리케이션과 모듈이 완전히 분리된다면 모듈은 사용하는 의미가 없다. 따라서 공개에 필요한 부분에 한정해서 선택적으로 공개한다. 이게 export이다. 모듈 사용자는 모듈이 공개한 자산 중 일부나 전체를 선택하여 자신의 스코프로 불러올 수 있으며 이를 import라고 한다. 자바스크립트와 모듈 자바스크립트는 웹페이지의 단순한 보조 기능을 처리하기위한 제한 적 용도를 목적으로 태어난 언어이다. 따라서 타 언어와 비교할때 부족한 점이 몇가지 있는데 대표적으로..
[JS] DeepDive(47) 에러처리
에러 처리의 필요성 에러가 발생하지 않는 코드를 작성하는 것은 불가능하다. { // 매개변수 f에 전달된 인수가 함수가 아니면 TypeError를 발생시킨다. if (typeof f !== 'function') throw new TypeError('f must be a function'); for (var i = 0; i < n; i++) { f(i); // i를 전달하면서 f를 호출 } }; try { repeat(2, 1); // 두 번째 인수가 함수가 아니므로 TypeError가 발생(throw)한다. } catch (err) { console.error(err); // TypeError: f must be a function } 에러의 전파 에러는 호출자 방향으로 전파되며 콜 스택의 아래방향으로 ..