리액트를 시작하기 위하여 Node.js와 React를 설치하는 방법.
그리고 기본적인 파일들의 설명을 정리해 보았습니다.
#1 Node.js 설치하기
다음 사이트로 이동하여 Node.js를 설치합니다
왼쪽은 많은 사람들이 사용하고 있어 신뢰할 수 있는 안정성을 가진 버전, 오른쪽은 최신 버전입니다.
(그냥 최신버전 받으시면 됩니다)
※ Node.js는 라이브러리를 설치하기 쉽게 도와주는 툴
#2 Visual Studio Code 설치
다음 사이트로 이동하여 Visual Studio Code를 설치합니다
링크 : https://code.visualstudio.com/
1) 작업 폴더 생성
원하는 위치에 리액트를 사용하기 위한 폴더를 생성합니다.
2) 작업 폴더 열기
Visual Studio Code에서 [파일] > [폴더 열기]를 선택한 후, 조금 전 만든 폴더를 열어줍니다.
3) 터미널 실행
« 터미널을 여는 방법 3가지 »
① 마우스를 화면 아래쪽으로 가져오면 화살표 모양으로 바뀌는데 이 상태로 클릭해서 위로 드래그.
② 상단의 메뉴바에서 [터미널] > [새 터미널] 실행
③ 단축키 ctrl + shift + `(1번 숫자 왼쪽 키)를 눌러 터미널을 실행 (window는 ctrl + art + `)
#3 라이브러리 세팅하기
터미널에 다음 문장을 입력한 후 [엔터]를 치게 되면 리액트를 사용하기 위한 라이브러리 설치를 하게 됩니다.
npx create-react-app bicute
npx : 노드 모듈을 통해 라이브러리를 설치할수 있게 해주는 명령어
create-react-app : 전역 명령이 포함된 리액트 라이브러리
bicute : 마지막 bicute 는 자신이 만들고 싶은 프로젝트의 이름을 적어주는 부분입니다. 원하는 대로 설정해주시면 됩니다.
뭔가 개발자 스러운 단어들이 알록달록하게 나오며 프로그램들을 설치하기 시작하는데, 시간이 좀 걸리니 잠시 기다려 줍니다.
※ 뭔가 작동이 안된다면 터미널을 사용할 때 가장 마지막에 현재 작업 중인 폴더의 이름이 제대로 떠있는지 확인해주세요
#4 설치 파일 설명
이제 처음 설정한 폴더 안에 방금 설정한 프로젝트 명의 폴더가 생성되어 있고 그 안에 엄청 다양한 파일들이 다 설치되었을 것입니다.
※ 중요한 폴더와 파일들에 대한 간략한 설명.
[폴더] node_modules
리엑트에 필요한 라이브러리가 모여있는 폴더. 건들 필요도 없고 신경 쓰지 않아도 됨.
[폴더] public
지금까지 웹페이지 만들 때 보았던 파일들이 이곳에 있다고 생각하면 됨.
압축되지 않고 그대로 발행될 파일들을 이곳에 보관 (로고 같은 이미지 등). 아래쪽 파일 app.js에서 내용 추가.
[폴더] src
리엑트 코딩 관련 파일들은 모두 이곳에 있으며, 새로운 파일을 추가하여 import, export 등을 하는 작업 폴더.
[파일] app.js
메인 페이지를 작성하기 위한 파일 (HTML의 index.html 같은 느낌이지만 js기반이기 때문에 조금 사용법의 차이가 있음).
이 파일을 그대로 내보내는 것이 아니고 이곳에 작성된 내용이 public폴더에 있는 index.html로 랜더링 해서 넘어감.
이 기능을 명령하는 건 src 폴더 안에 있는 index.js 파일.
이곳에 들어가는 파일들은 모두 압축되어 전송되는데, 퍼블릭 폴더에 있는 파일들은 압축되지 않고 그대로 유지되고 있음.