개념보단 실습 위주로 공부하자
너무 완벽히 이해하려고 하지는 말자
3세대 웹이 나타난 이유?
- 과거에는 정적인 사이트 (야후/백과사전 등)
- 요즘 웹을 통해서 상호작용/액션을 한다
- 웹의 발전에 따라 복잡해짐
- 웹이 수행해야 할 기능이 더 많아짐
- 기존의 방식으로는 처리하기 힘듦 -> 프 / 백 나눠짐
대표적인 웹 프레임워크 / 라이브러리
- 리액트 / 뷰 / 앵글러
- 리액트 = 라이브러리(UI를 만들기 위한)
- 앵글러/뷰 -> 프레임워크
리액트 특징
- 컴포넌트 단위로 개발
- 가상 돔의 존재
- 선언식이 아니다
절차적 / 선언적 프로그래밍
- 리액트 = 선언적 프로그래밍 접목시킴
Ex)
절차적 : 청소할 때 로봇청소기 (1 -> 4 항목 순서 정해서 시킴) 만약 중간에 청소 실행이 안 될 경우 1->4 단계별로 확인해야됨
선언적 : 순서를 정하는 것이 아닌 정리된 방의 사진을 찍어놓고 로봇에 입력 -> 로봇 = 사진과 똑같은 형태를 만들기 위해 동작함 (과정은 내가 설정하지 않음) 완료된 모습과 사진이 일치한지
에러가 난 상태 = 현재 상태와 완료 사진을 비교하여 부족한 부분 / 결함을 확인하여 비교
돔을 사용해서 바닐라 자바스크립트 = 절차적 방식
리액트에서는 결과가 중요함
지금까지 한 것은 절차적 -> 리액트를 통해서 선언적 프로그래밍
CRA (Create React App)
- 세팅 툴체인/도구
- 프로젝트 관련된 초기세팅/환경구성 필요함 -> CRA 사용 권장
- 리액트 개발환경 세팅해주는 도구
Node
- 자바스크립트를 실행하는 환경
- 자바스크립트 = 브라우저 조작하기 위해
- 자바스크립트 활용도가 증가함에 따라 브라우저 외 환경에서 개발하고자 하는 니즈 증가
Npm (Node Package Manager)
- 패키지 도구 모음
- 일종의 앱스토어
- 니즈에 따라서 다운받을 수 있는 기술
Component
- 재사용 가능한 UI 단위
- 한번에 통으로 실행하는 방식이 아님
- UI를 조각해서 블록 단위로 만들자
클래스/함수형 컴포넌트
- 클래스보다는 함수형의 사용이 증가
- 클래스형을 모르면 안됨 -> 기존에 작성된 코드에 대한 유지보스
JSX (Javascript Syntax Extension)
- 리액트에서만 사용가능한 리액트 문법
- 자바스크립트만으로는 실행이 안됨
- 바벨 등 도구를 통해서
- 리액트에서 만든 문법
- 개발자의 편의를 위해서 만들어짐
