hoazzinews 님의 블로그

지난 시간에 node.js을 설치하고 리액트 프로젝트를 생성했습니다.리액트 프로젝트 생성하기 리액트 프로젝트 생성하기이번 시간에는 리액트 프로젝트 생성 방법에 대해서 살펴보겠습니다. 1. node.js 설치 파일 다운로드리액트 프로젝트를 생성하기 위해서는 먼저 node.js를 설치해야 합니다.node 사이트(https://nodejs.orhoazzinews.tistory.com 이번에는 생성된 프로젝트의 기본 구조를 이해하는 시간을 갖도록 하겠습니다. 1. 프로젝트 실행하기우선 프로젝트 폴더로 이동합니다.  프로젝트를 실행합니다.> npm start   2. VSCode에서 프로젝트 open하기VSCode를 실행 합니다. ※참고. 만약 VSCode가 설치되어 있지 않다면 아래 글을 참고해서 설치합니다.V..

이번 시간에는 리액트 프로젝트 생성 방법에 대해서 살펴보겠습니다. 1. node.js 설치 파일 다운로드리액트 프로젝트를 생성하기 위해서는 먼저 node.js를 설치해야 합니다.node 사이트(https://nodejs.org/en)에 접속해서 'Download'를 클릭합니다. 2. node.js 설치설치파일을 이용해서 node.js를 설치합니다.    node.js 설치 과정에서 빌드 툴 자동 설치 여부를 물어봅니다.'Automatically install the necessary tools. Note that this will also install Chocalatey.'체크를 하면 node.js가 설치된 후 자동으로 빌드 툴이 자동으로 설치됩니다. 시간이 많이 소요됩니다. 일반적인 React 프로젝..

함수형 컴포넌트를 코딩할 때 JSX로 만듭니다. 이렇게 만들어진 컴포넌트는 프로그램이 실행되면 가상 돔(Virtual Dom)에 탑재되는데요. 이것을 렌더링(Rendering)이라고 합니다.가상 돔에 탑재된 컴포넌트는 실제 돔(Real Dom, HTML DOM)에 커밋(Commit)되어 사용자가 볼 수 있게 됩니다.※ React에서는 가상 돔의 컴포넌트가 실제 돔에 출력되는 것을 커밋(Commit)이라고 합니다.※ Bable: JSX를 JS(Javascript) 파일로 변환하는 JSX 컴파일러입니다.[용어 정리] 가상 돔에 컴포넌트가 생성되는 것을 '렌더링'이라고 했습니다.  그리고, 가상 돔의 컴포넌트가 실제 돔에 적용하는 것을 '커밋' 외에 '업데이트' 또는 '렌더링'이라고도 합니다. 이렇게 되면 '..