프론트엔드
- 프론트엔드는 사용자 바로 앞에서 사용자와 상호작용하며 애플리케이션 로직을 수행하고, 백엔드 서버로 요청하는 역할로 웹 서비스에서 클라이언트 또는 프론트엔드란 웹 브라우저를 뜻한다.
- 브라우저는 인터넷을 이용해 서버에 있는 자원을 사용자의 컴퓨터로 다운로드한 후 브라우저에서 실행시킨다.
브라우저 동작 원리
- 브라우저의 주소창에 웹 주소를 입력하면 브라우저는 HTTP GET 요청을 서버로 전송하고, 프론트엔드가 있는 웹 서비스의 경우 HTML 파일을 결과로 반환한다.
- HTML을 받은 브라우저는 파싱과 렌더링 두 단계를 거쳐 텍스트로 된 HTML을 브라우저에게 보여준다.
파싱
- 브라우저는 HTML을 트리 자료 구조의 형태인 DOM 트리로 변환한다.
- IMAGE, CSS, SCRIPT 등 다운로드해야 하는 리소스를 다운로드한다.
- 다운받은 자바스크립트를 인터프리트, 컴파일, 파싱 및 실행한다.
렌더링
- DOM 트리와 CSSOM 트리르 합쳐 렌더 트리를 만든다.
- 트리의 각 노드가 브라우저의 어디에 어떤 크기로 배치될지 레이아웃을 정한다.
- 브라우저 스크린에 렌더 트리의 각 노드를 그려준다.
Node.js
- Node.js가 등장하기 전까지 자바스크립트는 브라우저 상에서 HTML 렌더링의 일부로 실행하거나 자바스크립트 콘솔을 이용해 실행할 수 있었다.
- Node.js는 자바스크립트를 내 컴퓨터에서 실행할 수 있게 해주는 프로그램으로, 즉 자바스크립트 런타임 환경이다.
- 자바스크립트를 클라이언트 언어뿐만 아니라 서버 언어로도 사용할 수 있으며, 자바스크립트로 서버를 만들 수도 있게 되었다.
- 자바스크립트로 된 node 서버는 요청이 왔을 때 HTML, JavaScript, CSS를 리턴한다.
npm (node package manager)
- nodejs 기본 패키지 관리자
- nodejs는 디폴트 로컬에 설치되기 때문에 전역 설치를 위해서는 global 옵션을 사용한다.
- 참고로 파이썬은 디폴트 전역에 설치되며, 로컬 설치를 위해 가상환경을 사용한다.
npm install --global 패키지명
npm install 패키지명
yarn
- 페이스북 주도로 개발된 패키지 관리자
yarn global add 패키지명
yarn add 패키지명
React
- React나 Anguler, Vue는 대중적인 SPA 라이브러리/프레임워크
- SPA란 싱글 페이지 애플리케이션의 약자로, 한 번 웹 페이지를 로딩하면 사용자가 임의로 새로고침하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션을 의미한다.
SPA 동작 원리
- 첫 페이지를 로딩하면 브라우저는 index.html을 로딩한다.
- HTML이 <body></body>를 렌더링하다 보면 마지막에 bundle.js라는 스크립트를 로딩하게 된다.
- bundle.js는 npm.start를 실행했을 때 만들어지는 스크립트로, index.js를 포함하고 있다.
- index.js가 실행되고, index.js 안의 ReactDom.render() 함수가 호출된다.
- root 엘리먼트 아래에 React.js가 생성한 HTML 엘리먼트가 추가된다.
- root 엘리먼트 하위 엘리먼트가 렌더링된다.
- 따라서, 페이지를 바꾸고 싶다면 root 하위 엘리먼트를 다른 HTML로 수정하면 된다.
- 브라우저의 자바스크립트는 fetch, ajax 등의 함수로 서버에 데이터를 요청하고, 받은 데이터를 이용해 자바스크립트 내에서 HTML을 재구성한다.
- 서버에게 새 HTML을 요청하지 않고 자바스크립트가 동적으로 HTML을 재구성해 만드는 클라이언트 애플리케이션을 SPA라 하고, 이 렌더링 과정을 클라이언트-사이드 렌더링이라고 한다.
create-react-app
- react 프로젝트를 생성해주는 명령행 도구
npx create-react-app 프로젝트-디렉토리
npx create-react-app 프로젝트-디렉토리 --template typescript
package.json
- 프로젝트의 메타데이터로 사용할 node.js 패키지 목록 등을 포함한다.
public 디렉터리
- index.html은 http://localhost:3000이 가장 처음으로 리턴하는 HTML 파일이다.
- 다른 페이지들은 React.js를 통해 생성되고 index.html에 있는 root 엘리먼트 아래에 동적으로 렌더링된다.
src 디렉터리
- index.js는 index.html과 함께 가장 처음으로 실행되는 자바스크립트 코드이다.
- 자바스크립트 코드가 리액트 컴포넌트를 root 아래에 추가한다.
- App.js는 기본으로 생성된 리액트 컴포넌트이다.
'Frontend' 카테고리의 다른 글
Promise와 async/await (0) | 2022.03.17 |
---|---|
ES6+ 문법 정리 (0) | 2022.03.17 |
react-router-dom과 로그인 인증 (0) | 2022.01.22 |
백엔드 통합과 CORS (0) | 2022.01.20 |
이벤트 처리 (0) | 2022.01.20 |