리엑트를 시작하기 위해 Node.js부터 설치 시작하겠습니다.
저는 현재 이 Youtube 보고 진행하였습니다.
1. 검색창에 노드JS 검색 한 후에 해당화면이 바로 보입니다.
Node.js를 설치 진행 합니다.
저는 유튜브 강의를 듣고 설치를 진행하였습니다. 영상의 기준은 2020년 6월 26일.
저는 11월 13일. 노드js 설치할 때는 최신버전 설치해주세요.
2. Visual Studio Code 설치
Visual Studio Code 또한 설치 진행 합니다.
코드 편집을 위한 에디터입니다. 터미널을 다루시지 않겠다고 하시면, 설치 진행 바랍니다.
3. 저장공간 만들기
이제 코드 작성을 하실 때, 코드를 저장하기 위한 저장공간을 원하는 곳에 지정을 합니다.
개인마다 원하는 위치는 서로 다르니 아무곳에서나 하셔도 상관은 없습니다.
4. Visual Studio Code 저장 경로 지정하기
Visual Studio Code에서 왼쪽 위의 File - Open Folder를 선택합니다.
그리고 내가 만든 파일 경로의 파일을 열어서 폴더를 선택합니다.
폴더 선택을 누르셨을 때, 위와 같이 무언가가 생겼다면 정상적으로 실행 된 모습입니다.
5. 터미널 만들기
빨간색 네모 영역에 마우스를 올리면 무언가 크기를 조절하는 커서모양으로 변형됩니다.
그곳에서 마우스를 위로 올리면 에디터가 생깁니다.
혹은
터미널에서 수동으로 만들 수 있습니다.
6. npx create-react-app blog 입력
새로 생긴 터미널에 npx create-react-app blog를 입력하셔서 설치를 진행해줍니다.
이 부분은 Node.js가 제대로 설치가 되어 있어야 진행이 가능한 부분 입니다.
만약, 빨간 문구가 뜨면서 설치가 진행되지 않았다면 Node.js가 설치가 잘못 되어있으니
지우고 다시 설치 진행 바랍니다.
설치가 모두 완료 되었다면
방금 전에 만든 react_class 폴더안에 새로운 파일들이 들어 온 것을 확인 할 수 있게 됩니다.
7. Open Folder 다시 설정
설정이 끝났다면, 다시 한 번 Open Folder를 진행해서
blog를 불러옵니다.
사진과 같이 경로가 다시 변경되었습니다.
새로 설정한 BLOG => src => App.js가 곧 메인 페이지입니다.
index.html, index.jsp와 동일합니다.
8. 작업하면서 결과, 미리보기
터미널에서 잘 보면, 경로명이 있습니다.
이는 위의 Open Folder를 제대로 지정한다면 문제 없이 실행됩니다.
여기서 명령어 npm start를 입력합니다.
정상적으로 실행이 된다면, 이와 같은 화면이 출력됩니다.
미리보기를 실행하기 위해서는 반드시 크롬 브라우저가 필요합니다.
그리고 찾아가기 어렵다면, 터미널에 출력 된 http://localhost:3000 을 주소창에 수동으로 접속하는 방법 또한 있습니다.
기타
Node.JS 를 설치 한 이유
1. Create React App을 실행하기 위함입니다.
여기에 npm 틀이 지원을 해줍니다. 그래서 필요시 바로 설치할 수 있기 때문에 Node.Js를 설치하게 됩니다.