React 기초 1강 : 리액트 설치와 셋팅법 (2022+ 스타일)

React 기초 1강 : 리액트 설치와 셋팅법 (2022+ 스타일)

https://www.youtube.com/watch?v=nahwuaXmgt8

1.Node.js 검색 후 최신버전 설치하세요.
 ㄴ Q. 저는 Node.js 설치가 이미 되어 있는데요?
 ㄴ A. 100% 에러남 최신버전으로 재설치 ㄱㄱ
2. Visual Studio Code 에디터 설치
3. 코드짤 응큼한 폴더 만드셈 
4. 에디터에서 작업폴더 Open Folder 하셈
5. 리액트 프로젝트 생성은 터미널을 열고 
npx create-react-app 프로젝트명   입력
$ npx create-react-app blog  // 의미 : blog란 이름의 리액트 프로젝트를 만들겠다는 의미.

npx : 라이브러리 설치를 도와주는 명령어, (nodejs 설치가 잘 되어잇어야 이용이 가능하다.)
create-react-app : 리액트 셋팅이 다된 boilerplate만들기 쉽게 도와주는 라이브러리 이다.

npx란 무엇인가!

https://basemenks.tistory.com/232
npm = Package Manager (관리)
npx = Package Runner (실행)

6. 프로젝트명의 하위폴더를 다시 Open Folder 해서 코딩 ㄱㄱ
🌈 src 폴더 안의 App.js 파일이 메인 페이지 입니다. + index.js 파일과 비슷하다고 보시면 되요. 

7. 코드짠걸 미리보기 띄우기
ㄴ 터미널을 열어서 > npm start  입력
ㄴ 실시간으로 라이브 서버(개발서브)를 띄어주게 된다.


<궁금증 해결시간>
Q. node.js 를 왜 설치하나요?
ㄴ create-react-app 라이브러리 때문.
https://create-react-app.dev/

node.js를 설치하면 npm이라는 툴이 이용가능하다.
(ㄴ node.js를 설치한 컴퓨터에서 라이브러리 같은 것을 설치할 때 , 제이쿼리나 북스랩 같은 라이브러리를 쉽게 설치할 수 있게 도와주는 npm이라는 툴을 Node.js를 설치하면 이용할 수 있게 된다. )

nodejs 설치하면 npm이라는 툴 이용가능
npm으로 create-react-app 이용했음

App.js 는 메인페이지에 들어갈 HTML 짜는 곳 
ㄴ Q 그럼 실제 메인 페이지는 어디있을까요?
 ㄴ public/index.html 이 메인페이지.

Public 이라는 폴더 안을 보게 되면 html파일이 하나가 있는데 ( index.html ) - 이게 바로 실질 메인 페이지다.

 

App.js 에 있는 것을 , index.html에 다 갖다 박아 넣도록 하고 있어서 메인페이지가 돌아가고 있는 거에요.

박아놓는 건 어디서 하고 있느냐? index.js 란 파일에 다 가져다 박아주세요 하고 있는 것입니다.

 

나머지 폴더나 파일들을 설명해보도록 하겠습니다.

🟢node_modules : (여러분들이 설치한 모든) 라이브러리 모은 폴더 

ㄴ 이것을 구동하기 위해서는 수많은 라이브러리들이 필요한데, 그런것들을 모아놓아 둔 폴더.

🟢public : static 파일 보관함 (ex. 정적인 이미지 파일들)

 ㄴ 보통 리액트 프로젝트를 다 만들고 나면 ,  빌드-발행-컴파일 같은 것들을 하는데, 그러면 우리가 짰던 코드들이 다 ( 이상한 언어들로 ) 압축이 된다.  그런데 public 폴더 안에 넣게 되면  압축이 안되고 잘 남아 있게 된다. ☞ 그래서 static 파일들을 보관하기에 좋다. 

🟢src : 소스코드 보관함 

ㄴ 실질적인 코딩은 다 여기에(App.js) 하게 된다.  웹 개발 방식과 별반 다른게 없다. 리액트는 뭐 특별하게 웹만들고 그런 게 아니고 HTML, CSS 만들어서 코딩을 합니다. 그런데 그걸 약간 다른 REACT 문법을 이용해서 코딩할 뿐이고요. 그러면 우리가 조금 더 편리하게 웹 개발을 할 수가 있어요.

🟢package.json : 설치한 라이브러리 목록 

ㄴ 설치한 라이브러리들(이름과 버전들) 을 쭉 다 모아두는 파일  (→ npm으로 라이브러리 설치할 때마다 자동으로 기록이 된다. )