[React 2022] 3-소스 코드 수정 방법 요약

 이번 강의에서는 수정하는 법을 배움  src 폴더   index.js 파일이 있는데, 이 파일이 입구 파일임   app  태그를 지우면 우측 화면이 나오지 않음 app이 UI 전체임 실제 코드 내용은 import한 곳에서 왔음 . 은 현재 디렉토리  실제로 코드를 열어보면 function App()~ 해서 코드가 있음. 웹에서 개발자 모드로 뜯어보면...

이번 강의에서는 수정하는 법을 배움

<code class="inline-code">src</code> 폴더 &gt; index.js 파일이 있는데, 이 파일이 입구 파일임

<code class="inline-code">&lt;app&gt;</code> 태그를 지우면 우측 화면이 나오지 않음

실제 코드 내용은 import한 곳에서 왔음

실제로 코드를 열어보면 function App()~ 해서 코드가 있음.

웹에서 개발자 모드로 뜯어보면 div 밑의 코드가 같음.

실제로 수정해보면 웹에도 바로 반영됨.

스타일 태그는 CSS에서 지정되어있음

<code class="inline-code">app.css</code> 에서 저장하면 반영됨.

class App 위의 &lt;div id="root"&gt; 는 왼쪽 코드에 보면 id가 root로 렌더링하라고 되어있음

public &gt; index.html에서 id root를 발견할 수 있음

터미널에서 기존에 켜져있던 개발 환경을 끄려면 ctrl+c를 누르면 꺼짐

<code class="inline-code">npm&nbsp;run&nbsp;build</code>

결과물 실행 : <code class="inline-code">npx serve -s&nbsp;build</code>

웹 서버가 -s라는 옵션을 주면 어떤 경로로 들어오든 index.html파일을 서비스 함

build로 지정하면, 그 폴더에 있는 index.html 파일을 쓰겠다는 의미

 이번 강의에서는 수정하는 법을 배움  src 폴더   index.js 파일이 있는데, 이 파일이 입구 파일임   app  태그를 지우면 우측 화면이 나오지 않음 app이 UI 전체임 실제 코드 내용은 import한 곳에서 왔음 . 은 현재 디렉토리  실제로 코드를 열어보면 function App()~ 해서 코드가 있음. 웹에서 개발자 모드로 뜯어보면 div 밑의 코드가 같음. 실제로 수정해보면 웹에도 바로 반영됨.  스타일 태그는 CSS에서 지정되어있음  app.css 에서 저장하면 반영됨.  class App 위의  div id="root"  는 왼쪽 코드에 보면 id가 root로 렌더링하라고 되어있음 public   index.html에서 id root를 발견할 수 있음   터미널 켜기 터미널에서 기존에 켜져있던 개발 환경을 끄려면 ctrl+c를 누르면 꺼짐  npm run build 결과물 실행 : npx serve -s build 웹 서버가 -s라는 옵션을 주면 어떤 경로로 들어오든 index.html파일을 서비스 함 build로 지정하면, 그 폴더에 있는 index.html 파일을 쓰겠다는 의미  누르면 배포 완료        

[React 2022] 3-소스 코드 수정 방법 요약

코드 수정 방법

파일 디렉토리 구조

배포 방법