React 초보 실습 - 2

기초부터 실습을 연습하려 합니다. 글 내용을 굳이 참고하실 필요 없고

생활코딩 유투브 강의 들으시면서 진행하시면 됩니다.

https://www.youtube.com/watch?v=XQ-XqLVJBwg&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=3

 

1. src 폴더 - index.js 는 리액트 프로젝트의 입구 파일

git 연동한 React 프로젝트 폴더 구조

src 폴더 안에는 index.js 파일이 있다.

2. index.js 에 App 부분은 App.js 에서 불러와짐

index.js 의 import 현황 -> 현재 경로(index.js 기준) 에 있는 App을 불러오는 것을 알 수 있다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

App.js 의 import 현황 -> 현재 경로(App.js 기준)에 있는 App.css 도 불러오는 것을 알 수 있다.

import logo from './logo.svg';
import './App.css';

3. 개발자 도구 (크롬: F12) 에서 해당 App.js 코드가 작동하고 있는 것을 확인할 수 있다.

4. 요약하면 index.js -> App.js 로 깊게 들어감.

 

5. id="root" 는 

index.js 에 보면 const root 로, root 라는 변수를 선언하는 문장이 있음.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

여기서 id 인 root는 public 의 index.html 에 있음.

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

6. ctrl+c 후 Y를 누르면 테스트 중인 프로젝트를 중지할 수 있음

 

7. npm run build 를 통해 빌드 (배포용 빌드 생성)

npm run build

8. 빌드 성공시 build 폴더가 생성되는 것을 확인할 수 있음.

9. serve -s build

serve 는 nojde.js 서버의 옵션 중, -s 옵션을 이용하면 사용자가 index.html 파일부터 이용하게 됨

npx serve -s build

 

10. + 리액트 js 파일 주석은 {/* */} 로 감싸 주석을 달 수 있음.

 

11. github push 방법

# git 프로파일 설정
git config --global user.name [깃허브 닉네임]
git config --global user.email [깃허브 이메일]

# git 파일생성
git init 
# git 버전 관리 추가
git add .
# git 버전 관리 추적.
git status

# commit
git commit -m "commit 문구"

# push
git push