React launch! (매우중요)

 

참고: https://www.youtube.com/watch?v=6GECT2Jrr_g&t=572s

https://www.youtube.com/watch?v=5lgITNI0ZJo&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=3

리엑트는 특별한 존재가 아닙니다. 웹브라우저가 이해할 수 있는 언어는 결국 HTML, CSS, JS뿐입니다. 화면을 구성하는 것은 HTML, CSS일 뿐이고 그에 대한 동작은 자바스크립가 해주는 것입니다. React는 결국 자바스크립트일 뿐입니다. React는 JS로 HTML, CSS를 만들어 내는 존재일 뿐입니다. React로 작업해도 그 결과물은 html, css, JS가 나와야 합니다. 그래야만 브라우저가 코드를 읽고 화면을 그릴수 있는 것입니다. React가 결국은 자바스크립트이기 때문에 자바스크립트를 잘 알아야 React도 할 수 있습니다. 

 

VSCode에서 위와 같은 npm init react-app 생성프로젝트명 을 하면 아래와 같이 React프로젝트에 필요한  라이브러리 생성되고 진행됨

 

참고로 npm은 Node Package Manager의 약자 앞으로 npm을 통해 설치하는 모든 것은 node_modeules에 들어간다고 보시면 됩니다.

React프로젝트를 개발하기 위해 필요한 기본적인 라이브러리. React에서는 기본적으로 module이라고 부른다.

 

public폴더란? 우리가 React로 개발한 모든 코드는 결국 js파일로 만들어지게 되어있습니다. 그리고 최종적으로는 index.html파일 하나로 구동되게 되어있습니다. public 폴더안에는 이외에도 favicon과 같은 정적파일, manifest(=favicon관련된 설정 파일)파일이 있습니다.

 

src폴더란? 우리가 실제로 구현해 나가는 것들을 담을 폴더.  우리들은 src폴더안의 파일에다가 구현을 해 나가게 될 것입니다. 

package.json: 우리가 생성한 프로젝트에 관한 모든 정보를 담고있는 파일

package.json

package.json내부. dependencies는 react앱을 운영환경에서 구동할때 필요한 모듈에 관한 정보

package-lock.json이란?package.json안에 있는 dependencies의 모듈들이 작동하기위한 기본이 되는 모듈들이 담겨있는 파일

scripts란? 우리가 실질적으로 사용하는 명령어를 관리함. 예를 들어 이전에 내가 npm init react -app my-app명령어를 이용하여 react를 설치했을 때 마지막 부분에 아래와 같이 cd my-app npm start와 같이 my-app폴더로 이동하여 npm start명령어를 입력하라는 안내를 받은 적이 있다. 여기서 말하는 start가 package.json파일에 있는 "scripts"의 start명령어 이다. 즉 아래의 start는 scripts의 명령어인 것이고 명령어를 실행하라고 안내가 나온것임. 실제로 우리가 실행하는 명령어는 npm start이지만 실제로는 react-scripts start가 실행되는 것!!!

나중에 가면 최종적으로 개발된 파일을 가지고 npm run builld라는 명령어로 운영 환경에 배포하기 위한 빌드파일을 만들게 되는데 scripts는 이렇게 우리가 쓸수 있는 명령어들을 위 그림과 같이 관리한다고 보면 됩니다.  지금 위 그림에 나와있는 명령어는 4개 뿐이지만 얼마든지 나중에 추가 할 수 있음.

 

eslintconfig란? 우리가 코드를 올바로 작성하고 있는가에 대한, 즉 eslint에 대한 환경설정 부분임. (우연하게도 eslint는 이 글작성으로부터 몇일전에 접한적이 있다. 문법교정해 주는 확장 프로그램이다)

browserslist란? 어떤 브라우저를 지원할 것인지(내생각에는 해당 프로젝트를 운영하기 위해 어떤 브라우저를 사용할 수 있는지를 말하는 것 같음). 아래를 해석해 보면 이렇다.

운영환경에서는(production)전 세계인구의 0.2%이상이 사용하는 웹 브라우저를 지원한다는 뜻. 개발환경에서는 최근버전의 위와 같은 브라우저에서 지원해 주겠다는 말

 

위와 같이 npm init react -app "폴더명" 을 실행하고 react가 설치되면

와 같은 명령어로 react를 실행할 수 있다. 그 후 연이어 cd my-app, npm start명령어를 입력하면

와 같이 컴파일이 성공적으로 되었다는 문구를 볼수 있고

와 같은 주소와 함께 설치가 성공적으로 되었다는 문구를 볼수 있다. 위의 웹페이지에 들어가진다는 것이 Reac 프로젝트가 성공적으로 설치, 실행되어 지고 있다는 것이다.

 

당장에 이 src폴더 안에 있는 모든 파일을 알필요는 없지만이전에 했듯이 npm start 명령어를 터미널 창에 입력하는 순간 제일먼저 실행되는것이 index.js파일입니다.

(지금 내 생각으로는 index.html 이라는 가장 근본적으로 실행되는 파일안에서 index.js를 호출할 것이다. 이런 연관성있는 이해를 시도하려는 것 자체가 중요한 태도임. 그리고 이것만이 내가 내 프로젝트를 만들어가면서 필요한 수시로 해야하는, 필요한 태도다)

실제로 위와 같은 내 생각이 맞았다. 비록 내 소스파일인 index.html에서는 아래 브라우저에서 F12를 눌러서 실행한 웹개발자에서는 보이는 다음 코드가 보이지는 안치만(왜 내 소스코드에서는 안보이는지 아직은 모르겠다)

이 bundle.js가 우리의 index.html파일에는 없습니다. 그렇지만 터미널에 명령어로 npm start를 입력했을 때 bundle.js가 웹개발자도구의 코드상에 추가되는 것이고 결국은 여러분이 React에서 src폴더에 개발할 소스파일들이 스크립트 파일로 만들어지고 그 파일들이 bundle.js로 들어가게 되는 것입니다. 그리고 그것을 기준으로 우리가 보는 화면이 만들어지는 것입니다. 그리고 그 파일들중 가장 먼저 실행되는 것이 index.js입니다.

(잠깐 복습. JSX란? 자바스크립트 언어를 확장하여 XML태그를 쓸 수 있게 만들어준 언어. 즉 JS안에서 HTML태그를 사용할 수 있게끔 만들어준 언어라고 이해하시면 됩니다)

 

다음으로, ReactDOM의 역할은?

 

index.html파일을 열어보면 body태그안에 div태그가 보일 것입니다. 

index.html파일안에 있는 id="root"

index.js안에있는 위의코드는 index.html파일안에있는 id="root"를 가져오는 것이다.

그리고 이렇게 index.html에서 가져온 것(id가 "root"인 div태그)을 앞으로 React에플리케이션을 만드는 동안, React에서 JSX문법으로 만들어지는 것들을 넣을 수 있는, 즉, 랜더링할수 있는 ReactDom의 루트노드로 만들겠다는 말!!!(즉 ReactDom트리의 구성요소인 노드는 JSX문법으로 만들어지는 어떠한 태그들이 될 것이라고 예상한다)

이 부분이 나중에 HTML로 랜더링되는 부분임.

즉, 위의 <React.StrictMode>~~</React.StrictMode>부분이 index.html에 있는 위의 코드안으로 들어오게 되는 것입니다.

참고로 위에서 말하는 App은 아래 그림에서의 import App from './App'; 에서의 App이다. (마우스 올려보면 쉽게 알수 있음)

'./App'에서의 ./App은

이 App.js를 의미함. 즉, './App'은 App.js 파일을 의미하는 것임. 확장자가 .js면 이를 생략할 수 있습니다

결국 위의내용을 종합해 보면 <div id="root"> 태그 안에 <App /> 의 내용이 들어가고 그 내용은 바로 App.js파일에 있는

return문안에 작성된 코드가 JSX이다.

이다. 이것을 개발자 도구에서 확인해 보면 정확히 일치한다 :)

참고로 StrictMode라는 것은 자바스크립트를 엄격모드로 사용하겠다는 말임

=========================================================================================

index.js에는 마지막 부분에 아래와 같은 코드가 있다. WebVitals이라는 것은 웹의 퍼포먼스를 측정하기 위한 라이브러리입니다.