1. HTML 이란 무엇인가?
HTML(하이퍼 텍스트 마크업 언어) : 웹 페이지를 구조화하고 콘텐츠를 표시하는 데 사용되는 표준 마크업 언어.
- 태그를 사용하여 문서의 구조를 정의한다. 태그는 시작 태그와 종료 태그로 구성되며, 문서의 제목, 본문, 이미지, 링크 등을 구분하고 위치를 지정한다.
- CSS와 JavaScript를 이용하여 문서의 디자인과 동작을 구현할 수 있다. CSS는 문서의 스타일을 정의하고, JavaScript는 문서의 동작을 제어한다.
- 웹 브라우저에서 해석되어 화면에 출력된다. 대부분의 웹 브라우저는 HTML을 지원하며, HTML로 작성된 문서는 웹 브라우저에서 정상적으로 표시된다.
- 다양한 버전이 있으며, 현재는 HTML5가 최신 버전이다.
2. 웹사이트의 뼈대를 구성하는 태그들
- <html> : html 문서의 시작과 끝을 알린다. <html> 태그 안에는 <head>와 <body> 태그가 존재한다.
- <head> : 웹 사이트의 메타데이터(속성)을 담는다. Ex) <title> : 웹사이트의 제목
- <body> : 실제로 웹 사이트에서 보이는 콘텐츠를 담는다.
3. SPA (Single Page Application)
일반적으로 각 웹 페이지 별로 HTML 파일이 따로 존재하며 페이지를 이동하게 될 경우 브라우저에서는 해당 페이지의 HTML 파일을 받아와서 화면에 표시한다.
이러한 방식을 MPA(Multi Page Application)이라고 하는데, 이는 사용자가 한 페이지에서 다른 페이지로 이동할 때 새로운 페이지의 정적리소스를 다시 다운로드하는 방식이다.
하지만 SPA는 하나의 HTML 파일로만 이루어져 있다.
처음에는 HTML 파일의 <body> 태그가 텅 비어져 있다가 특정 페이지에 접근할 때, 해당 페이지에 해당하는 콘텐츠를 가져와서 동적으로 <body>태그를 채운다.
즉 사용자의 요청에 따라 전체 페이지를 다시 불러오지 않고 해당 콘텐츠만 변경하여 불러오기 때문에 로딩시간이 빠르다.
4. CSS란 무엇인가?
CSS는 웹사이트의 레이아웃과 글꼴, 색상 등의 디자인을 입히는 역할을 하는 언어이다.
5. JavaScript란 무엇인가?
웹페이지에서 동적인 부분을 구현하기 위한 스크립트 언어이다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
Node.js : 자바스크립트로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경.
npm : node package manager의 약자로 Node.js를 위한 패키지매니저.
패키지 매니저 : 프로젝트에서 필요로 하는 다양한 외부 패키지들의 버전과 의존성을 관리하고 설치/삭제를 지원한다.
Node.js 웹사이트에서 LTS 버전 설치가 가능하며, Node.js를 설치하면 npm은 자동으로 설치된다.
node --version
npm --version
명령어를 통해 Node.js, npm의 버전과 설치 여부를 확인할 수 있다.
'Spec UP - Frontend > 소플의 처음 만난 리액트' 카테고리의 다른 글
| chap 4. 엘리먼트 렌더링 (0) | 2024.03.18 |
|---|---|
| chap 1. 리액트 소개 (1) | 2024.03.05 |
댓글