Terminology
웹 사이트를 구성하는 3가지 : HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets), 자바스크립트 (Javascript)
HTML : 웹 페이지에서 제목, 이미지, 동영상, 문단, 표, 등을 정의하고 그 구조와 의미를 부여하는 정적 언어. 웹의 뼈대 담당.
CSS : Cascading Style Sheet의 약자로 WC3(웹 문서 표준을 만드는 기관)이 도입한 HTML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어. 글꼴, 배경색, 너비와 높이, 위치 등을 지정하거나 웹 브라우저나 스크린 크기, 디바이스 등에 따라 화면을 다르게 표시할 수 있도록 지정할 수 있음.
DOM : Document Object Model의 약자이며, 한글로는 "문서 객체 모델"을 의미합니다.
DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식입니다.
SPA : Single Page Application
한 개의 페이지를 가진 어플리케이션.
특징 : 사용자 친화 / 초기 렌더링 후 데이터만 받아오기 때문에 서버 요청이 적음 / 프론트 엔드와 백엔드 분리로 개발업무 분업화 및 협업 용이 / 개발이 상대적으로 효율적
SSR : Server Side Rendering
페이지를 이동할 때마다 서버에 새로운 페이지에 대한 요청을 하는 방식
서버에서 렌더링을 마치고, data가 결합된 HTML 파일을 내려주는 방식
CSR : Client Side Rendering
최초 요청 시 HTML을 비롯해 CSS, JS 등 각종 리소스 받는 방식
이후 서버에 데이터만 요청하고, JS로 뷰를 컨트롤.
초기 요청 때 SSR보다 많은 리소스를 요청하기에 렌더링 속도는 SSR이 더 빠름.
이후 다른 페이지로의 이동시 SSR보다 빠른 페이지 전환 속도와 향상된 사용자 경험 제공
Why React?
새로고침없이 웹탐색이 가능한, 앱과 유사한 Web-app을 만들기 유용한 라이브러리
장점 1. 모바일앱으로 발행이 쉬움 (react-native 사용)
장점 2. 앱처럼 뛰어난 UX
장점 3. 일반 웹사이트보다 비즈니스적 강점
단점 1. 문법 어려움
단점 2. 신 문법이 계속 등장하고 있음
필요한 사전지식
: var let const
var = 변수선언 (function 단위)
let = 변수선언 (block 단위)
const = 상수선언 (한번 선언하면 바꿀 수 없음(에러뜸))
if else
if (조건) {
코드
}
for
function return
array object 다루기
addEventListener
HTML/CSS 기초
