소스코드 수정방법

Frontend/React

희디 2023. 2. 15. 02:58

index.js가 입구이고 전역적인 설정이 들어감.

App.js는 화면 구성하는 것.

App.css는 디자인을 구성하는 파일 => 해당 웹페이지

index.css는 index의 디자인이 포함된 파일

index.js파일을 읽고 동작을 시킴. (npm start 시키면)

<App />를 주석처리하면 기존의 화면이 없어짐을 알 수 있다. -> UI 전체!!

이 UI 전체는 4번째 줄의 App에서 왔고 이 App은 ./App(현재 폴더에서 App.js)에서 왔다.

마찬가지로 App.js에서 App()이란 함수에서 클래스이름이 App이면 실행되는 것을 주석처리하면 아무것도 안 뜨는 것을 알 수 있다. 그래서 즉 웹 페이지가 만들어내는 UI는 모두 App.js에서 나타남을 알 수 있다.

그리고 디자인은 App.css에서 설정할 수 있다.

(웹 페이지 상에서 검사에서 보이는 style태그에서 안에 있는 내용보기)

.App은 <div className="App">을 가져온다!!

index.js에서 id=root는

10번째 App태그가 id가 root인 태그로 rendering 되라는 코드가 있다.

rendering은 public 폴더안에 index.html안에 있다. 31번째에

<배포>

개발환경을 끄고싶으면 Ctrl + C를 누르면 꺼짐

npm run build 명령어 -> 배포판이 생김 -> build폴더 생김 -> index.html이 서비스해줌

배포시 공백이 없고 최대한 줄여서 파일이 생김.

serve란 웹서버를 사용하면, -s옵션을 사용하면 index.html을 서비스하게 해줌

serve는 node.js로 만들어진 애플리케이션이므로,

npx serve -s build => 접속 주소가 생김. (개발환경이 아닌 실제로 서비스할 수 있는 버전의 파일)