리액트 프레임워크를 구성하는 3요소는 가상DOM, JSX, 컴포넌트이다. 이중 가상 DOM부터 알아보겠다. react 와 react-dom 리액트 플젝의 경우, 항상 react와 react-dom이 필요하다. react는 컴포넌트와 jsx, 리액트 훅 등 렌더러에 무관한 기능 (= 환경과 무관하게 공통 사용하는기능) 을 제공 react-dom은 앱이 동작하는 환경에 종속적인 기능을 제공하는데 특화된 패키지 다음과 같은 구조라고 보면 된다. XML 마크업 언어를 사용한다. document.createElement(요소); --xml요소를 만듬 document.appendChild(부모요소); --xml에서 부모요소의 자식 요소를 가리킬 때 사용 document.getElementById(아이디명); --x..
리액트 프로젝트 만드는 방법 : create-react-app 사용(CRA) Node.js 오픈소스 라이브러리 쉽게 설치하는법 : node pakage manager (npx) 사용 npx create-react-app 프로젝트명 --template typescript를 터미널에 입력하면, 프로젝트가 새로 생긴다. 리액트 프로젝트의 기본구조. package.json에 scripts 항목을 보면, start와 build에 대한 정의가 되어있다. npm run start -- 개발모드 npm run build -- 빌드모드 빌드모드 : 웹팩이 프로젝트 디렉터리 파일을 모두 모아 이름에 main이나 chunk라는 단어가 들어있는 번들 파일을 만듦. 번들 파일이란 ; 웹팩이 다양한 입력모듈(이미지,css,htm..
리액트는 페이스북에서 만든 오픈소스 자바스크립트 프레임워크. 리액트는 가상 DOM과 JSX에서 동작한다. 리액트는 SPA방식을 이용하며, SPA 란 single page application을 의미한다. index.html 파일 1개로 동작하기 때문에 서버에 자원을 1번만 요청하고, 화면 깜빡임 현상이 발생하지 않는다. 필요한 부분만 동적으로 화면을 생성하는 방식인 것이다. (jquery의 ajax랑 비슷한 느낌?) 전자정부프레임워크 4.0부터 리액트를 프론트앤드 기술로 도입한다고 한 만큼, 실제로 굉장히 많이 사용하고 있는 프론트앤드 언어이다. 나는 Do it ! 리액트 모던 웹개발 with 타입스크립트 책을 통해 리액트를 실제로 활용해 보면서 공부해보려고 한다. 설치할 개발 도구는 다음과 같다. 프로..
