CDN (Content Delivery Network) 이란?
CDN은 Content Delivery Network의 약자로, 데이터 센터와 서버 네트워크를 활용하여 사용자에게 웹 페이지의 콘텐츠를 빠르고 안정적으로 제공하는 시스템을 말합니다. 기본적으로 웹 페이지의 로딩 속도를 빠르게 하고, 서버의 부하를 줄이는 역할을 합니다.
React components are JavaScript functions
App.js ========
function MyButton() {
return (
<button>
I'm a button
</button>
);
}
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}JSX =========
return (
<h1>
{user.name} ... JS표현한다
</h1>
);
<img
className="avatar" ... className은 JSX에서 class 선택자 대신 사용
src={user.imageUrl}
/>
rendering : 컴퓨터 과학과 그래픽 디자인에서 널리 사용되는 용어입니다. 이는 원시 데이터를 그래픽이나 웹 페이지와 같은 사용자가 인식할 수 있는 형태로 변환하는 과정
Hooks let you use different React features from your components.
like a DOM node
import { use } from 'react';
function Button() {
const theme = use(ThemeContext);// ...
import { createContext, use } from 'react';
const ThemeContext = createContext(null);
export default function MyApp() {
return (
<ThemeContext.Provider value="dark">
<Form />
</ThemeContext.Provider>
)
}useCallback is a React Hook
useState is a React Hook
Q. API 무엇인가요 ?
API는 응용 프로그램 간의 상호 작용을 가능하게 하는 규약, 함수, 프로토콜의 집합
React에서 함수 컴포넌트는 더 간단하게 컴포넌트를 작성하는 방법
props를 입력받아서 렌더링할 대상을 반환하는 함수를 작성
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}https://ko.reactjs.org/docs/hello-world.html
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);- Component와 Props
https://unpkg.com/react-dom/umd/react-dom.development.js
- This source code is licensed under the MIT license found in the
- LICENSE file in the root directory of this source tree.
reactjsexample.comreactjsexample.com
React.js Examples
A nice collection of often useful examples done in React.js
webpack
html 파일에 들어가는 여러개의 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다.
필요한 다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어주는 것을 webpack 이라고 한다.
Babel
새로운 ESNext 문법으 기존의 브라우저에 사용하기 위해서 최신 ES6 버전을 구 버전인 ES5로 변환해주는 도구다.
ESLint
ES 와 Lint를 합친 것입니다.
ES는 Ecma Script로서, Ecma라는 기구에서 만든 Script, 즉 표준 javascript를 의미
JSX(javascript의 확장 문법)
Component 기반 작업 : 재사용이 가능하고, 유지보수 뛰어남
단방향 데이터 흐름 : 부모 컴포넌트와 자식 컴포넌트 간에 데이터를 전달할 때 부모에서 자식에게로만 데이터가 전달 가능하다.
react는 자바스크립트로 element로 만들어 이를 html안에 넣는 역할을 담당.
소스코드에 처음부터 html을 넣지 않고 html에서 html을 추가하거나 제거하는 방식으로 동작.
처음 애플리케이션을 로드할 때는 빈 html을 로드하게 되고, 그런 다음에 리액트가 html(우리가 컴포넌트에 작성해뒀던 것들)을 밀어넣게 됨.
컴포넌트를 작성해도 앱을 실행했을 때 소스보기에서는 해당 컴포넌트의 내용이 보이지 않는다.
(id가 "root"인 div만 보임) 이렇게 보이지 않기 때문에 가상돔(Virtual DOM)이라고 한다.
Q.서버사이드 ?
node.js는 서버 사이드 자바스크립트로 서버측에서 실행되는 자바스크립트 실행 환경을 의미
React rendering
•html----------------------------------------
<div id="app"></div>•script-------------------------------------------------
ReactDOM.render(
붙일요소들,
document.getElementById("app")
);1.html tags
2. Component
3. 함수
1.html tag
const 변수명 = 붙일요소들;
ReactDOM.render(변수명, document.getElementById("root");
JavaScript의 ES6 모듈 문법을 사용하여 lodash 라이브러리를 불러오는 코드
jsx
state
여러 개의 자식으로부터 데이터를 받아오거나, 두개 이상의 자식들 간에 서로 통신하려면 부모 컴포넌트에 위치 시켜야 한다.
