프론트엔드 개발

프론트엔드 개발 환경 설정

React.js : 자바스크립트 라이브러리.
Node.js : React.js를 사용하기 위한 자바스크립트 런타임 환경. 브라우저 밖에서 자바스크립트 컴파일 가능. 브라우적 밖에서 컴파일 가능하다는 것은 자바스크립트를 클라이언트 언어뿐만 아니라 서버 언어로 이용 가능하다는 뜻. node를 통해 프론트엔드 서버개발. 프론트엔드 서버는 요청이 들어오면 HTML, JavaScript, CSS를 리턴.

NPM(Node Package Manager)

node.js의 패키지 관리 시스템.
npmjs(https://www.npmjs.com) node.js 설치, npm은 같이 설치됨.

버전정보 확인.

npm init : Node.js 프로젝트를 초기화.

패키지 이름, 버전, 등 기본적인 정보를 입력.
다 입력하면 package.json 파일 생성.
package.json에는 메타데이터가 들어간다.

npm install react 명령 후 package.json에 인스톨한 패키지가 명시.
dependencies에 추가된 라이브러리는 이후 프로덕션 배포에 사용.

우리는 npx 툴로 리액트 애플리케이션 초기화. npm으로할 경우 일일이 설정해야하는 부분이 많기 때문.

비주얼 스튜디오 코드 설치

프론트엔드 애플리케이션 생성

react.js 애플리케이션 생성.

프로젝트 폴더에 들어간 후, npm start 실시.


react.js 기본화면 실행.

비주얼 스튜디오 코드에서 개발 환경 설정

비주얼 스튜디오에서 todo-react-app 실행.

Add Folder to Workspace 선택. 후 저장.

package.json, package-lock.json, node_modules

package.json : 프로젝트의 메타데이터, 사용할 node.js 패키지 목록 등을 포함한다.
node_modules : package.json 토대로 node_modules에 설치
package-lock.json : 어느 환경에서든 같은 버전의 패키지를 설치하기 위해 각 패키지가 사용할 버전을 고정.
==> npm install, create-react-app 명령 시 자동으로 실행.

public 디렉토리 아래의 파일

index.html : http://localhost:3000(서버)가 가장 처음 반환하는 HTML파일. 반환후 사용자에게 보여줌. 리액트에서 HTML파일은 index.html하나 뿐.
다른 페이지 들은 react.js를 통해 생성, indext.html에 있는 root 엘리먼트 아래에 동적으로 렌더링.

src 디렉토리 아래의 파일

index.js : index.html과 함께 처음으로 실행 되는 자바스크립트 코드.
리액트 컴포넌트를 root 아래에 추가한다.

App.js : 기본으로 생성된 리액ㅌ 컴포넌트.

meterial-ui 패키지 설치

meterial-ui : 프론트엔드 애플리케이션 개발하기 위해 UI 패키지를 사용. 사용시 따로 UI를 위한 컴포넌트나 CSS작성하지 않아도 됨.

npm install @mui/marerial@6.6.0 @mui/icons-material@5.6.0

meterial-ui에 관련된 패키지, meterial-ui를 사용하기 위한 코어 패키지.

npm install @emtion/react@11.9.0 @emtion/styled@11.8.1

emtion 관련된 패키지를 설치. 이패키지는 material을 사용할 때 필요한 패키지이다.

브라우저의 작동 원리

브라우저 창에 '웹 주소'를 입력하면, 브라우저는 HTTP GET 요청을 '웹 주소' 서버로 전송. 보통 프론트엔드가 있는 웹 서비스의 경우 HTML 파일로 결과를 반환.

HTML을 받은 브라우저는 두 단계에 걸쳐 텍스트로 된 HTML을 보여준다.
파싱과 렌더링 과정이다.

파싱 : 렌더링을 위한 전처리 단계.
파싱 단계 브라우저가 하는일
첫째, HTML을 트리 자료구조 형태인 DOM(Document Object Model)트리로 변환.

둘째, image, css, script등 다운로드 해야하는 리소스를 다운. 특히 CSS의 경우 다운로드하고 CSS를 CSSOM(CSS Object Mode)트리로 변환.
셋째, 다운로드한 자바스크립트를 인터프리트, 컴파일, 파싱, 실행.

랜더링 : 파싱을 마친 후 실행.
첫번 째, DOM 트리와 CSSOM 트리를 합쳐 랜더 트리를 만듦. 내용(DOM)과 디자인(CSSOM)을 합친 것.
두번 째, 레이아웃을 정함. 트리의 각 노드가 브러우저의 어디, 어떤 크기로 배치 될지 정하는 것.
세번 째, 브라우저 스크린에 랜더트리의 각 노드를 그려준것. 브라우저상 시각화 된 HTML 파일을 볼 수 있음.

브라우저는 개발을 돕기 위한 개발자 툴을 제공.
시각화된 HTML, CSS, 자바 스크립트 로그를 볼 수 있음.

디버깅 창, 순서대로 HTML Elements, CSS, 자바스크립트 콘솔이 있음.
네트워크탭, Application탭을 주목해야함.

React.js

SPA(Single Page Application)

React.js, Angular.js, Vue.js는 대중적인 SPA라이브러리/프레임워크 임.
한번 웹 페이지를 로딩하면 유저가 임의로 새로고침하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션을 의미.

1) index.html 랜더링 : 빈 화면에 아무것도 없는 브라우저. index.html을 로딩, 찰나의 순간.

body를 랜더링하다 보면 마지막 bundle.js라는 스크립트를 로딩하게 됨.
이 자바스크립트는 npm start를 실행했을 때 생성, index.js를 포함.
따라서 2)와 같이 ReactDom.render() 함수가 실행.
render() : 동적으로 HTML Element를 리액트 첫 화면으로 바꿔줌.
매개 변수는 <'App /'> 부분.

--> 페이지를 바꾸고 싶다면 root의 하위 엘리먼트를 다른 HTML로 수정하면 됨.

브라우저의 자바스크립트는 fetch나 ajax 등의 함수로 서버와 주고 받은 데이터를 이용해 자바스크립트 내에서 HTML을 재구성.
이렇게 서버에서 완성된 페이지를 보내는것이 아닌 자바스크립트가 동적으로 HTML을 재구성해 만다는 클라이언트 애플리케이션을 싱글 페이지 애플리케이션이라고 함.
그리고 이 렌더링 과정을 클라이언트-사이드(Client-Side Rendering)이라고 한다.

React 컴포넌트

컴포넌트는 자바스크립트 함수 또는 자바스크릅티 클래스 형태로 구현할 수 있음.
App.js : 리액트 애플리케이션을 생성하면서 생성.


두 코드 모두 자바스크립트 파일 내에서 HTML 코드를 사용.
이는 React가 JSX 문법을 사용하기 때문
JSX : 한 파일에서 HTML과 자바스크립트를 함께 사용하기 위해 확장한 자바스크립트 문법.

App 컴포넌트는 이처럼 렌더링 부분인 HTML과 로직 부분인 자바스크립트를 포함하는 JSX를 리턴. 이 JSX 문법은 Babel이라는 라이브러리가 빌드 시간에 자바스크립트로 번역.

App 컴포넌트 사용 : ReactDOM이 매개변수로 넘겨받은 <'App /'>컴포넌트를 이용해 DOM트리를 만드는데, 이때 컴포넌트의 render함수가 반환한 JSX를 렌더링.

1. import를 이요해 App 컴포넌트를 불러온다
2. <컴포넌트이름 />을 이용해 컴포넌트를 사용한다.

ReactDOM.render는 첫 번째 매개변수로 리액트 컴포넌트를 받고, 두번 째 매개변수로 root 엘리먼트를 받음. 이는 root 엘리먼트에 첫 번째 매개변수로 넘겨진 리액트 컴포넌트를 root 엘리먼트 아래에 추가하라는 뜻.
root 엘리먼트는 index.html에 정의돼 있음. React로 만든 모든 컴포넌트는 이 root 엘리먼타 하위에 추가.