1. 리액트(React)란?
1) 프런트엔드 라이브러리 / 프레임워크
** 단순한 정적페이지
자바스크립트 없이 HTML과 CSS만을 사용한 정적페이지를 제작하는 것이라면 프런트엔드 라이브러리를 사용할 필요는 없습니다.
** 현재 트렌드
단순한 웹페이지가 아닌 웹어플리케이션, 유저의 행동에 따라 동적인 화면을 보여줘야 하고, 동적으로 유저인터페이스를 관리하기 위해서는 수많은 상태를 관리해야 해야 한다. 그래서 기존 자바스크립트나 제이쿼리로는 부족한 상황입니다.
** 프런트엔드 라이브러리의 등장
수많은 DOM, 상태값, 업데이트값에 대한 관리를 최소한으로 줄이고, 오직 기능개발과 사용자 유저 인터페이스(UI)를 구현하는데 집중할 수 있도록 새로운 형태의 JS들이 등장했습니다.
2) 프론트엔드 라이브러리 3 대장
1. Angular
- 구글의 앵귤러 팀과 개인 및 기업 공동체에 의해 주도되는 타입스크립트 기반 오픈 소스 프런트엔드 웹 애플리케이션 프레임워크
- 프로젝트 생성에서부터 코드 최적화 작업에 이르기까지 모든 작업에서 사용할 수 있는 폭넓은 프레임워크
- 전체적인 개발 과정에 있어서는 가장 다루기 힘든 프레임워크
2. Vue
- Vue.js팀에서 개발한 자바스크립트로 개발된 컴포넌트 구조 기반 프론트엔드 프레임워크
- 프리코딩(pre-coding) 구조를 가지고 있어서, 그 성능을 양보하지 않고도 애플리케이션을 빠르게 개발할 수 있음.
- 명령이 쉽기 때문에, 개발과정에서 원하는 것을 정확하게 이용할 수 있다. 뷰를 사용하면 앱개발이 쉽고 빠름.
3. React
- 페이스북(Facebook)에서 개발하여 단일 웹 페이지나 모바일 앱에서 사용자 인터페이스 중 화면에 표시되는 뷰 부분의 개발에 사용되는 자바스크립트 라이브러리.
- 앵귤러나 뷰에서처럼 지시자들이 없지만 대신에 유연성을 제공하고 있다. 어떠한 라이브러리라도 리액트에 맞춰 넣을 수 있는 장점이 있음.
3) 리액트를 선택하는 이유
## 뛰어난 생태계, 2023년 가장 핫한 프레임 워크
- 최근에는 Vue나 Svelte도 강세이기 하지만 여전히 2023년 1월 말인 현재는 리액트가 1위입니다.
## 채용공고에서 단연 돋보적, 사용하는 기업이 많음
## 리액트의 역사
- React.JS는 2011년에 Facebook의 뉴스피드 기능에 처음 사용이 되었습니다.
Facebook 소프트웨어 엔지니어인 Jordan Walke가 만들었습니다.
- 대중에게 최초 공개(V0.3.0)된 것은 2013년 7월이었습니다.
- 최신 버전은 V18.2.0(2023년 1월 현재)입니다.
2. 리액트(React) 플러그인 붙이기
1) 제이쿼리처럼 외부 플러그인을 사용하여 리액트 사용하기
## 개발할 때 붙이는 외부 플러그인
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>- 마지막 줄은 Babel인데 바벨은 자바스크립트 컴파일러입니다.
- 최신 버전의 자바스크립트 문법이라든지, 리액트가 사용하는 JSX문법을 브라우저가 이해할 수 있는 자바스크립트 문법으로 변환해 줍니다.
## 테스트 코드
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
function Hello() {
return <h1>안녕하세요!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById('mydiv'))
</script>
</body>
</html>
## 결과 보기
- 브라우저에서 바로 볼 수 있습니다.
3. 리액트(React) 개발환경 설정하기
- 제이쿼리처럼 플러그인을 붙이는 것은 테스트목적으로는 괜찮을 수 있지만, 개발할 땐 시간이나 속도를 고려하여 개발환경을 설정하는 것이 좋습니다.
1) Node.js 설치
- Node.js는 언어가 아닌 오픈 소스 서버환경
- Node.js를 사용하면 서버에서 JavaScript를 실행할 수 있습니다.
## 다운로드 주소
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
## 버전 선택
- 보통 안정적인 버전을 설치하는 것이 좋습니다.
- 현재는 18.13.0 LTS(2023년 1월)를 설치하도록 해주세요.
## Node.js의 장점
- 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임
- 웹브라우저 환경이 아닌 곳에서도 자바스크립트를 이용한 연산이 가능
- 리액트 프로젝트를 준비하기 위해 필요한 webpack, babel 등의 도구들을 실행하는 데에 사용
- 패키지 매니저 도구인 npm이 자동 설치
- npm으로 수많은 개발자가 만든 패키지(재사용가능한 코드)를 설치하고 관리할 수 있음
2) Yarn설치
- 프로젝트의 의존성을 관리하는 JavaScript의 패키지 매니저
- npm 혹은 npx로만 사용해도 되지만 yarn은 사용하면 속도가 훨씬 빠릅니다.
- 그래서 yarn을 쓰도록 할게요.
## 다운로드 주소
https://yarnpkg.com/en/docs/install
- 버전은 : windows - Stable
- 위의 내용이 안 보이면 [▶ Click to expand]를 누르면 활성화됩니다.
** NPM 설치말고 반드시 다운로드 해서 설치해주세요.
## Yarn의 장점
- 프로젝트의 의존성을 관리하는 JavaScript의 패키지 매니저
- Node.js를 설치하면 npm이 설치되어서 npm으로 해도 되긴 하지만 느림
- yarn을 사용하면 훨씬 빠른 성능
3) 에디터 선택
## 리액트가능한 에디터
- 서브라임텍스트, 브라켓, VS code, 아톰, 웹스톰 등이 리액트를 지원
## VS CODE
- 터미널 사용 및 git설치를 해서 [cmd] 대신 [bash]를 사용
- Reactjs Code Snippets 확장 플러그인 등 템플릿 단축키 사용이 편리함
- 자세한 사용법
https://ossam5.tistory.com/93?category=897190
[VS CODE] Reactjs Code Snippets
## Reactjs Code Snippets의 단축키 단축키 설명 rcc 클래스 컴포넌트 생성 rrc 클래스 컴포넌트와 react-redux 리덕스를 연결해서 생성 rccp 클래스 컴포넌트와 prop type들을 클래스 뒤에 생성 rcjc import와 e..
ossam5.tistory.com
4) Git 설치
- 많은 기능이 있지만 [cmd] 대신 [Bash] 시뮬레이터를 사용할 수 있음
## 다운로드 주소
Git - Downloading Package
Downloading Git Now What? Now that you have downloaded Git, it's time to start using it.
git-scm.com
4. 리액트(React) 배우기 전에 꼭 익히고 와야할 ES6문법
- ES6는 ECMAScript 6의 약자입니다.
- ECMAScript는 JavaScript를 표준화하기 위해 만들어졌으며 ES6는 ECMAScript의 6번째 버전으로 2015년에 공개되었으며 ECMAScript 2015라고도 합니다.
- React는 ES6문법으로 많이 이루어져 있으므로 아래 작성하는 문법들을 반드시 익히고 오세요.
** class문법, 화살표함수, 새로 나온 변수 let, const, 새로 나온 배열 메서드(ex) map), 모듈화(import, export),
비구조화 할당(destructuring assignment), Ternary Operator, Spread Operator 등등
'웹언어/자바스크립트 - ES6' 카테고리의 글 목록
웹프론트엔드의 모든것
ossam5.tistory.com
'유튜브관련 > 리액트입문(멤버십용)' 카테고리의 다른 글
| [React강좌] 6강 React Props - 오쌤의 니가스터디 (0) | 2023.01.31 |
|---|---|
| [React강좌] 5강 JSX문법 - 7가지 규칙 - 오쌤의 니가스터디 (0) | 2023.01.29 |
| [React강좌] 4강 컴포넌트 만들어보기 - 오쌤의 니가스터디 (0) | 2023.01.29 |
| [React강좌] 3강 Virtual DOM을 이용한 리액트 - 오쌤의 니가스터디 (0) | 2023.01.29 |
| [React강좌] 2강 VS Code를 이용한 프로젝트 생성 - 오쌤의 니가스터디 (0) | 2023.01.29 |
