JayGo 개발 연습장

JSX와 React.createElementJSX는 리액트에서 HTML과 유사한 형식으로 마크업을 작성할 수 있게 해주는 문법이다. 익숙한 HTML 문법을 그대로 활용해 DOM의 구조를 표현할 수 있기 때문에 직관적이고 편리하다.JSX는 아래와 같은 형태로 사용한다.const App = () => { return ( Hello World! )}JSX로 작성한 구문은 트랜스파일을 통해 아래와 같은 리액트 메서드로 변환되며,// ~ React 16 버전React.createElement("div", null, React.createElement("h1", null, "Hello, world!"));// React 17 버전 ~_jsx("div", null, _jsx("h1", nu..

여러 개발 문서들을 보면 빌드, 번들링, 트랜스파일링 등의 용어가 빈번하게 사용되는 걸 보게 된다. 대충은 무슨 의미인지 알고 있지만, 정확한 이해가 없으니 문서의 내용 이해가 어려웠던 경험들이 있다. 실제로 사용해 보는 게 가장 좋겠지만, 아직 배포할 서비스가 없는 관계로, 문서를 읽는 데 이해를 높이는 정도로만 간단하게 공부해 봤다.번들링(Bundling)코드를 효과적으로 관리하기 위해선 적절한 방식으로 파일을 쪼개서(모듈화 해서) 관리하는 것이 필요하다. 이렇게 사용 목적이나 시점에 따라 자바스크립트 파일을 쪼개서 관리하는 것을 '모듈 시스템'이라고 한다. ES5까지는 언어 차원에서 모듈 시스템 지원이 없었지만, ES6로 넘어오면서 언어에서 모듈 시스템을 지원해 주게 됐다.모듈로 파일을 나눠서 관리..