패스트캠퍼스 챌린지 21일차 - 프론트엔드 시작
0. 공부인증
공부 시작 23 : 00
공부 종료 23 : 54
하 오늘은 아이패드 프로를 사러 1시간 걸려 중고 거래 장소에 갔다가
판매자가 연락을 안받고 그냥 2시간을 시간을 버리고 와서 그런지...
나름 사기를 당하고 멘탈이 흔들렸....다
(공부하러 간 사무실에서도 오래있지 않고 그냥 집으로 돌아왔다..)
패캠도 까먹을 뻔하다가 자기 직전에 생각이 나서 작성하고 있다.
여튼 빨리 작성하자.
1. 리액트란 무엇인가
- 페이스북에서 제작함.
-Virtual DOM 이 가장큰 특징
> 이를 통해서 HTML 파일을 통으로 변경하지 않고, 필요한 부분만 변경할 수 있음.
> 이전의 HTML 모습과 바뀐 HTML 모습을 비교함. (이것이 React JS 의 가장 큰 특징)
- 그동안 MVC패턴에 작동하는 것과 달리, 개발자들이 너무 편해졌음
> 아키텍쳐에 대한 고민이 사라졌기 때문에.
- Components, State Management, VirtualDOM 이 가장 큰 특징
> 얻는 것 : 부드럽고 빠른 페이지 전환과 연속적인 사용자 경험.
> 잃는 것 : 일반 정적 페이지보다는 첫 로딩이 살짝 느릴 수 있음.
2. CDN 으로 리액트 사용하기
React – A JavaScript library for building user interfaces
A JavaScript library for building user interfaces
reactjs.org
리액트는 "사용자 인터페이스를 만들기 위한 JavaScript 라이브러리" ..!!
CDN으로 사용하는 방법
<html>
<body>
<div id="react-root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src = "index.js"></script>
<body>
</html>index.js 파일에 대해서! (이렇게는 사용을 잘 안함)
-그래서 그냥 캡쳐본으로 대체..ㅎ
해당 방법은 CDN으로 구현하는 것임.
npm을 통해서 작성을 하게 되면,
hook이나, 기본 돔 렌더를 쉽게 할수 있음.
다만, 위의 방법으로 하는 이유는 React 자체의 작동 방법을 파악할 수 있도록 하는 것임.
(CDN 으로 개발하면, 간단한 웹페이지 정도는 npx install 없이 바로 JS 파일만 가지고 서비스를 할 수 있음)
으어 늦겠다.
빨리 수업 업로드 해야지....
환급 챌린지 (21/30)
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지