Free Will

[ React ]원저자Jordan Walke개발자페이스북 및 공동체발표일2013-05-29안정화 버전18.3.1 / 2024-04-26저장소github.com/facebook/react프로그래밍 언어자바스크립트플랫폼크로스 플랫폼종류자바스크립트 라이브러리라이선스MIT 허가서웹사이트react.dev리액트(React, React.js, ReactJS)는 자바스크립트 라이브러리의 하나로사용자 인터페이스를 만들기 위해 사용된다페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다[ 역사 ]리액트는 페이스북의 소포트웨어 엔지니어 Jordan Walke가 개발했다.그는 PHP용 HTML컴포넌트 프레임워크인 XHP에 영향을 받았다2011년 페이스북의 뉴스피드에 처음 적용되었다가2012년 인스타그램닷컴에 적용되었다..

1. 배포할 프로젝트 경로에서 명령어를 통해 프로젝트 빌드를 해줌( build폴더가 생성됨 ) npm run build # npm을 통해 serve라는 웹서버를 설치하는 명령어 npm install -g serve # serve웹서버 실행시 DocumentRoot를 build 폴더로 지정하는 명령어 serve -s build 2. public폴더 밑의 index.html파일의 내용이 빌드되어 bulid폴더 밑의 index.html로 생성됨 3. 웹서버의 최상위 경로(Document Root)에 생성된 build폴더밑의 파일들을 넣어주면된다 4. npm serve를 이용해 배포후 테스트 -serve웹서버 실행시 DocumentRoot를 build폴더로 npx serve -s build

1. create-react-app 명령어로 react프로젝트 생성후 보여지는 첫화면은 index.html이다 2. index.html의 id가 root인 엘리먼트의 밑으로 컴포넌트들이 들어가게된다 이유는 index.js에 작성되어있다 3. 리액트의 진입파일은 index.js이고 id가 root인 엘리먼트에 렌더링 되도록 작성되어있다 4. App은 App.js를 뜻하며 리액트 컴포넌트이다 5. App.js 컴포넌트가 id가 root인 엘리먼트 밑으로 렌더링 된것을 확인할 수 있다 6. App.js 컴포넌트를 수정하여 내용이 변경되는것 확인

1. Node.js 설치하기nodejs.org/ko/ Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org2. Node.js 설치확인node -v3. npm 설치확인npm -v4. create-react-app 설치npm install -g create-react-app5. create-react-app 설치확인create-react-app -V6. react프로젝트를 생성할 경로로 이동후 명령어 실행npx create-react-app .7. react프로젝트 실행npm run start