react를 설치하는 방법에 대해서 알아보도록 하겠습니다.
우선 Node.js를 먼저 설치를 해주겠습니다.
아래 링크를 통해서 다운로드 받으시면 됩니다.
node.js 사이트에 들어가면 바로 다운로드를 받으실 수 있으시며
저는 Most Users가 적혀 있는 12.16.1 LTS를 다운로드 받아 설치를 하였습니다.
설치는 간단하게 Next를 눌러 주시면 됩니다.
기본 위치에 설치되는 것을 원하시지 않으시면 Change 버튼을 눌러 변경하시면 됩니다.
node.js를 설치하고 나면 cmd에서 npm 명령을 사용할 수 있게 되고
npm install -g create-react-app 을 입력해서 react를 설치합니다.
(npm (노드 패키지 매니저/Node Package Manager)은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다. 명령 줄 클라이언트(npm), 그리고 공개 패키지와 지불 방식의 개인 패키지의 온라인 데이터베이스(npm 레지스트리)로 이루어져 있다. 이 레지스트리는 클라이언트를 통해 접근되며 사용 가능한 패키지들은 npm 웹사이트를 통해 찾아보고 검색할 수 있다. 패키지 관리자와 레지스트리는 npm사에 의해 관리된다.
npm의 정의는 위키백과에서 가져왔습니다.)
해당 명령은 npm을 통해서 create-react-app을 설치하라는 것이고 -g 옵션은 전역으로 설치하라는 의미로
모든 프로젝트가 공통으로 사용할 경우 전역 설치를 하고 그렇지 않은 경우 지역 설치를 합니다.
(전역에 설치된 패키지는 OS에 따라 설치 장비가 달라집니다.
Windows의 경우 C:\Users\사용자명\AppData\Roaming\npm\node_modules 의 경로로 설치가 되며
Mac의 경우 /usr/local/lib/node_modules에 설치가 됩니다.)
이제 create-react-app을 이용해서 react 프로젝트를 하나 생성하도록 하겠습니다.
create-react-app 프로젝트명 을 입력하시면 자동으로 생성을 시작합니다.
(저는 react라는 디렉토리를 별도로 만들어 test라는 프로젝트명으로 생성하였습니다.)
설치가 완료 되면 하기와 같이 나옵니다.
설치한 경로로 이동 후 npm start를 입력하시면
하기와 같은 웹사이트가 나오고 cmd 창에 컴파일이 성공했다는 메시지가 출력이 됩니다.
다음 포스트에서는 실제 react를 통해 웹사이트를 만드는 과정에 대해서 설명 드리도록 하겠습니다.
'개발 > react' 카테고리의 다른 글
게시판 만들기(Toast UI Editor 추가) (0) | 2023.01.02 |
---|---|
react_웹사이트 만들기_3.네비게이션바로 사이트 이동 (4) | 2022.10.18 |
react_웹사이트 만들기_2. 네비게이션바 만들기 (1) | 2020.03.18 |
react_웹사이트 만들기_1. Visual Studio Code 설치 (0) | 2020.03.12 |
react에서 img 상대경로 이미지 출력 안될 때 (6) | 2020.02.09 |
댓글