Hi, I'm JeongHun

0. webpack을 사용하는 이유 컴포넌트는 .jsx 형태로 클래스 또는 hooks로 만들어지며 만들어진 컴포넌트는 react-dom의 render 함수를 통해 html DOM 트리에 장착(?) 하게 된다. facebook과 같은 2만개의 컴포넌트가 존재하는 웹 사이트를 만든다면 jsx 파일이 2만개 존재할 수 있고 이 2만개의 jsx 파일을 html의 script태그로 정의해야하고 사실 jsx파일을 html파일에서 위 디렉토리 구조와 같이 client.jsx 파일에서 BaseBallGame.jsx 라는 Component를 require해서 client.jsx 에서 ReactDom.render를 호출해주는 파일이 된다. 그리고 index.html에서 root id를 가지는 요소 아래 웹펙을 통해 cli..

1. require class ComponentA {} module.exports = ComponentA; const ComponentA = require('./ComponentA.jsx); js 파일에서 해당 컴포넌트를 불러오는 방법 중하나로 require문이 있는데 require문으로 외부 파일로 선언된 컴포넌트를 불러오려면 module.exports = ComponentA; 형태이다. 2. import 1) 형태1 //이 클래스가 선언된 파일이름은 CompoB라고 가정. class ComponentB {} export default ComponentB; import ComponentB from 'CompoB'; 3. 여러 모듈을 export하는 방법 1) 형태1 //파일 이름이 react.js 이며..

0. 헷갈릴 내용 정리 class ClassA { name = 'kim'; obj = { name :'Lee', p : this.name, f: function() { console.log(this.name); // Lee console.log(this.p); // kim } } } var c1 = new ClassA(); c1.obj.f(); 클래스를 선언하고 클래스 안에서 프로퍼티로 obj를 선언하였다. 헷갈릴 내용이 이 obj 안에서 this 사용이다. 객체가 만들어지는 과정은 위 전역 코드가 '평가'되어서 객체 리터럴이 전역 코드 안에 일종의 동륵이 되는데 이때 객체의 프로퍼티들의 값을 하나하나 넣게 된다. 먼저 name: 'Lee'를 저장하고 p : this.name을 저장하려고하는데 이때 th..

1. React 란 위와 같은 html 코드를 보면 실제로 저런 태그는 존재하지 않는다. 따라서 태그에는 내용중 Top에 해당하는 내용이, SideBar, Bottom에는 그에 맞는 내용들에 해당하는 엄청 긴 html 코드를 직접 작성해야한다. 그렇게 된다면 코드의 가독성의 가독성이 떨어짐은 물론이고 내용을 수정하고 관리하는 유지보수 작업이 매우 힘들어진다. 만약 위와 같은 태그들이 실제로 존재하고 그 태그 안에 엄청나게 긴 내용들을 packing 하여 나타낼 수만 있다면 유지보수관리 측면에서 코드의 재활용과 효율성이 좋아질 것이다. 이것을 가능하게 해주는 것이 React이다. 사용자 정의 태그를 만들어주는 여러 가지 기술이 있는데 리액트는 그 여러 가지 기술 중 하나이다. 그리고 React에서는 사용자..