라이브러리 vs 프레임워크
- 라이브러리는 개발 편의를 위한 도구들의 모음 like 공구
- 프레임워크는 기반 구조까지 잡혀있음 like 공장
리액트의 공식 문서 : https://ko.reactjs.org/ 만든이의 사용 설명서
그 안의 패턴을 찾고, 새로운 기술을 익히는 요령을 습득하자.
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
ko.reactjs.org
리액트를 라이브러리로서 접근하고,
약 20여개의 다양한 라이브러리들을 반복 접근하자.
리액트는 기술적으로 확실한 장점이 있다.
Virtual DOM/ JSX / Flux / Functional Programming ...
새로운 기술을 배우는 시작점으로 좋다.
생태계가 성숙해가면서 리액트를 풍성하게 해주는 라이브러리들이 많고, 새로운 좋은 라이브러리들이 계속 나오고 있다.
swr/ framer motion ...
데이터 가져오기를 위한 React Hooks – SWR
데이터 가져오기를 위한 React Hooks Suspense Pagination
swr.vercel.app
https://www.framer.com/docs/examples/
Examples | Framer for Developers
Simple examples for animation, gestures, components, transforms and more.
www.framer.com
DOM : 문서를 논리 트리로 표현한다. (브라우저가 이해하는 elements의 원형)
순수 자바스크립트(Vanilla JS) : 특정 라이브러리나 프레임워크를 사용하지 않은 그 자체의 자바스크립트
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
이것 저것 코드로 해 볼 수 있는 위의 창을 샌드박스(SandBox)라고 한다.
https://codesandbox.io/ ... 리액트 맛보기 동안 사용할 도구
CodeSandbox: Online Code Editor and IDE for Rapid Web Development
Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more.
codesandbox.io
프론트엔드 코드를 작성하고 이것저것 시도해 볼 수 있는 모래상자(놀이도구)
React 등 다양한 환경에 대한 기본 설정이 되어 있음
Static 파일(HTML)을 선택하여 열고 위와 같이 작성한다.
CDN (Content Delivery Network) : 웹에서 사용되는 다양한 컨텐츠(리소스)를 저장하여 제공하는 시스템
https://ko.reactjs.org/docs/cdn-links.html
CDN 링크 – React
A JavaScript library for building user interfaces
ko.reactjs.org
그런 다음, CDN 링크를 복사해 와 <body>에 붙여넣으면 이 Static 파일에서 바로 React(라이브러리)를 사용할 수 있게 된다 !
CDN으로 정적파일 안에 React와 React-dom을 주입해 줌.
React는 element를 생성하는데 사용했고, React DOM은 appendChild와 같은 render의 역할을 해주었다.
¶ 최지민 강사님
'컴퓨터 사이언스 > TIL 정리' 카테고리의 다른 글
| [자바스크립트] 강의 복습 Array 객체 (0) | 2022.07.22 |
|---|---|
| [자바스크립트] 강의 복습 객체와 DOM 요소 (0) | 2022.07.22 |
| [모자듀 스터디] 객체, 메서드, this (0) | 2022.07.21 |
| [모자튜 스터디] Chrome으로 디버깅하기 (0) | 2022.07.21 |
| [자바스크립트] String 객체 (0) | 2022.07.20 |
