리액트를 배우기 위해 필요한 기초 지식 정리 📄 & 실습 환경 구축 💻
[무료] 처음 만난 리액트(React) - 인프런 | 강의
자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런...
www.inflearn.com
HTML (Hyper Text Markup Language)란?
웹사이트의 뼈대를 구성하기 위해 사용되는 마크업 언어
● 마크업: 문서나 데이터를 처리하기 위해 문서에 추가되는 정보
● 마크업 언어: 마크업 정보를 표현하기 위한 언어
HTML은 주로 웹에서만 사용, 요즘은 웹브라우저를 이용해서 데스크탑용 앱을 만들 수 있는 기술에서도 HTML이 사용되기도 함
Tag (태그)
HTML에서는 Tag를 이용해서 웹사이트의 구조를 만들고 웹사이트에 들어갈 내용들을 채워넣음
<태그이름>
태그는 열었으면 꼭 닫아주어야 함 !
ex)
<html> 를 이용해서 열고
</html> 를 이용해서 닫음 (슬래쉬가 들어가면 닫는 역할)
<br /> 처럼 열고 닫는 것을 동시에 할 수도 있음
웹사이트의 뼈대를 구성하는 태그들
<html>
<head>
</head>
<body>
</body>
</html>
● <html>, </html> : html의 시작과 끝을 알리는 코드
● <head>, </head> : html의 머리를 담당
head 태그 안에는 웹사이트의 속성이 들어감 - 이 웹사이트가 어떤 웹사이트인지 제목, 설명 등의 속성(Meta data)을 담고 있음
● <body>, </body> : html의 몸통을 담당
실제로 웹사이트에서 보이는 컨텐츠가 들어가게 됨, body tag 안에 있는 내용이 실제로 우리가 웹브라우저에서 보게 되는 내용
하나의 웹 사이트를 탐색할 때, 여러 버튼이나 탭을 누르면서 여러 페이지를 왔다 갔다 할 때 마다 브라우저의 내용이 달라지는 경험?
브라우저에 나오는 내용이 바뀐다는 것 = body tag로 둘러싸인 부분의 내용이 바뀐다는 것
각 페이지 별로 html 파일이 따로 존재하며, 페이지를 이동하게 될 경우 브라우저에서는 해당 페이지의 html 파일을 받아와서 화면에 표시해줌
수많은 페이지가 존재하는 복잡한 웹사이트의 경우 html 파일이 수십, 수백개가 될 텐데, 어떻게 다 관리할까?
ㄴ> 이러한 문제를 해결하기 위해 나온 것이 SPA
SPA(Single Page Application)란?
하나의 페이지만 존재하는 웹사이트 또는 웹애플리케이션
어떻게 하나의 페이지만으로 복잡한 웹사이트를 모두 표현할 수 있을까?
● 좌측: Multi Page Application 여러 개의 페이지가 존재하는 형태
전통적인 방식의 웹애플리케이션
- 사용자가 페이지를 요청할 때 마다 새로운 페이지가 로딩되어 화면에 나타나게 됨
- 각 페이지는 각자의 html 파일을 가지고 있음
● 우측: Single Page Application 단 하나의 페이지만 존재 (html 파일이 하나)
- 처음에는 html 파일의 body tag의 내용이 텅 비어있다가, 해당 페이지에 접속할 때 그 페이지에 해당하는 컨텐츠를 가져와서 동적으로 body tag 내부를 채워넣게 됨
- 이때 리액트가 body tag 내부를 채워넣는 역할을 함
CSS (Cascading Style Sheets)란?
웹사이트의 레이아웃, 글꼴, 색상 등의 디자인을 입히는 역할을 하는 언어
html로 웹사이트의 구조를 만들었다면, 그 위에 CSS를 사용해서 디자인을 입혀야 웹사이트가 완료
'개발공부 > REACT' 카테고리의 다른 글
| 리액트의 장점과 단점 [처음 만난 리액트 #6] (0) | 2023.01.23 |
|---|---|
| 리액트는 무엇인가? [처음 만난 리액트 #5] (0) | 2023.01.21 |
| 개발환경 설정하기 - Node.js와 npm / VS Code 설치 [처음 만난 리액트 #4] (1) | 2023.01.21 |
| JavaScript의 연산자/함수 [처음 만난 리액트 #3] (2) | 2023.01.21 |
| JavaScript 소개 및 자료형 [처음 만난 리액트 #2] (1) | 2023.01.20 |
