생각기록

2023-01-03 React 첫 강의 본문

강의 정리/React JS

2023-01-03 React 첫 강의

끼록관 2023. 1. 3. 15:15

테츠.이효석 강사님

 

리얼소프트..

오늘의집 >시공 서비스 데이터

 

React js 의 뜻

뜻 : 반응형 JS

 

JS의 라이브러리가 React임

 

 

 

why?

stack overflow

ㅡ> 개발자들 사이에서 좋아요를 많이 받은 댓글이 좋은 해결책

세상에서 많이 쓰이는 프레임워크다

 

설문조사 중 

js 라이브러리 순위 

1.nodejs ㅡ>백엔드

2.reactjsㅡ>프론트

 

site:stackoverflow.com react

구글링시 검색량이 뜸

 

si 시장

스프링, 리엑트 

 

 

 

설치

wappalyzer - technology profiler 

해당 웹페이지 코드를 읽으며,

해당 웹페이지에서 어떤 기술을 쓰는지 알려 줌

 

 

리엑트는 페이스북에서 만들었다.

 

오래된 서비스라 하휘호환 컴퓨터도 검색을 할 수 있도록 하는게 중요하다

오래된 사이트들은 프론트 프레임워크가 사용 안 된 경우가 많다.

프론트 페이지를 간단하게 만들때 프레임워크를 많이 쓰고있다.

 

 

이 것을 쓰면 이 회사가 어느 언어를 집중적으로 쓰는지 파악할 수 있다.

 

리엑트에서 가장 관심을 갖고 기존 js와 다른 점은

virtual DOM 입니다.

 

virtual DOM

뜻은 먼가 좀 더 가상화 된 DOM을 제공한다..

 

예시를 들면

ex) 흰셔츠에 김치국물.. > 옷 전체를 세탁 해야하는데..

이만큼의 얼룩때매 옷 전체를 빠는것은.. 효율적이지 않다.

세탁기를 돌리지 않고, 단순하게 효율적으로 얼룩이 뭍었을때 그 부분만 지워버리면 편하다.

 

네이버 뉴스를 검색하면 모든 페이지가 새로고침이 됩니다.

효율, 최적화, 자동화적 측면에서 virtual DOM이 생겨났다.

 

기존의 DOM은 하나가 잘못되면 하나부터 끝까지 다시 그려야 했다.

 

1. Virtual DOM은 그 부분만! 고치면 된다.

 

효율성, 웹&앱 

인스타 에어비앤비등은 변화한 부분만 새로 그려준다.

 

2. 부드럽고 빠르다.

 

페이스북이 관리하는 프레임워크인 REACT

리엑트를 사용함으로 페이스북을 등에 업을 수 있다.,.

 

앵귤러는 구글

뷰JS는 에반

 

누가 오랫동안 유지보수를 잘할까..

앵귤러는 리엑트보다 어렵고, 해외에서 많이 쓰임

 

코드 짜는 스타일은

뷰는 한사람이 지휘해서

방향이 한가지라 장단점

3. 리엑트는 다방면

 

 

 

 

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (reactjs.org)

 

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

A JavaScript library for building user interfaces

ko.reactjs.org

 

CDN 링크

 

리액트를 시작하려면

1. react 라이브러리 추가

2. index.html 파일에 id가 app인 <div> 추가하기

3. jsx 문법 사용을 위한 babel 라이브러리 추가하기...

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

 

위의 설명대로라면, 이런식으로 해야한다.

//index.hmtl
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 <!-- 페이지가 로드된다음에 다시 자바스크립트 코드를 불러옴 -->
    <script defer src="./index.js"></script>
</head>
<body>
    <!-- 리엑트는 virtual dom 싱글페이지 html 하나로 굴러 가도록, 적극적으로 dom 요소가 바뀌도록
    1. div요소 하나를 app으로 만들어준다.
    -->
    <div id="app"></div>
</body>
</html>
// index.js
// React 따라하기

function HelloworldButton(){
    //변수, 함수 구조분해 할당 배열처럼 선언
const [isClick, setClickState ] = React.useState("It isn't clicked ");
console.log(isClick);
    //핵심
    return React.createElement(
        "button",
         { onClick: () => {setClickState("It's clicked")} },
         isClick );
}

const e = React.createElement;
const domContainer = document.querySelector("#app");
const root = ReactDOM.createRoot(domContainer);
//리엑트는 RENDER로 HTML 요소 자체를 함수에 담을 수 있다.
root.render(e(HelloworldButton));

기본 js를 편리하고, 간단하게 쓰기위해 기능을 추가한 라이브러리

 

 

JSX 문법

자바스크립트 코드 내부에 HTML을 그대로 사용할 수 있다.

직관적으로 편하게 쓰기위한 문법, 리엑트의 핵심 문법

JS에 XML을 추가한 문법입니다.

보통 리엑트에서만 사용됨

HTML 문서 구조를 JS에서도 사용이 가능하다 따라서 JS 내부에서도 HTML을 짜듯 코드 구성이 가능하다.

이를 읽기 위해서는 Babel 이라는 컴파일러(번역기)가 필요합니다.

 

 

Babel은

js의 컴파일러 입니다.js를 코드상 변환해서 브라우저가 이해할 수 있게 만드는 요소입니다.

 

과거에 jsx를 위해 태어난 것이 아닌es6가 나오고나서 몇몇 브라우저가 es6문법을 지원하지 않아서

+ es6문법과 es5문법의 충돌이 잦아서es6문법을 es5문법으로 변환해주던 기능을 했다.

그래서 예전 이름이 six to five 였다.

 

현재는 es6는 브라우저 레벨에서 지원을 많이 한다.다른 추가 적 언어들에 대한 컴파일러 역할을 많이 한다.

그중 대표적인 것이 React 이다.

 

 

 

리액트를 시작하려면

react 라이브러리 추가

index.html 파일에 id가 app인 <div> 추가하기

jsx 문법 사용을 위한 babel 라이브러리 추가하기...

 

이걸 벗어나기 위해 개발된 

Create React App

터미널에 npx create-react-app my-app

 

my-app은 내가 쓰고싶은 앱 이름!

*폴더명 대문자로 하면 오류뜬다..! 소문자로 해주세요!

 

알아서 리액트를 위한 폴더를 만들어줍니다.

 

처음 설치시 캐싱때매 좀 걸림

 

선생님 왈 > 터미널에서 뜨는 빨강, 파랑, 초록은 항상 읽어야 한다.

위에 파란 글씨로

cd my-app 해당 폴더에서

npm start를 하라고 쓰여있다.

 

설명대로 해보면,

실행하게 되면 이 창이 뜹니다.

 

3000번 포트에서 자동 열리며 해당 위치를 열어보라고 쓰여있다.

 

코드 에디터에서 src/App.js를 열고 소스 코드를 변경해보면 바로 브라우저 화면에 반영되는 것도 확인할 수 있다.

Create React App으로 생성한 프로젝트는 기본적으로 live reloading을 지원

Live Reloading은 변경이 이루어진 후 브라우저가 자동으로 전체 페이지를 다시 로드하는 경우

 

 

npx? npm?의 차이점은 뭘까요?

더보기

npx? npm?의 차이점은 뭘까요?

npm 노드 패키지 매니저의 준말

nodejs를 사용시 편리하게 사용할 수 있는 라이브러리, 패키지 모듈을 관리해주는 것

컴퓨터에 설치 관리 = npm은 컴퓨터에 남고

npm은 호환성이 중요

 

npx는 node package exute

최신 패키지를 한번 실행시켜주고 할 일이 끝나면, 삭제되어 사라집니다. =   npx는 남지 않는다.

먼가 실행할때... 사용

npx create-react-app "앱이름"

npx는 기본적으로 최신형을 불러와서 호환 이슈가 별로 없다.

 

package.json 왜 남아있을까?

react라이브러리 코드 써야...

즉 필요한 얘들만 남아있다.

 

scripts는

리엑트를 사용하기위한 명령어가 있다.

npm start - 시작

npm build - 웹 배포

npm test - 테스트

 

제일 큰 뿌리 index.html

 

우리가 만드는 리엑트의 기능은

이 html 파일에서 작동한다.

 

두번째 뿌리

리엑트 스트립트 모드란

내부에 들어있는 코드가 무조건 두번씩 실행시켜준다.

개발과정에서 만든 코드가 정상적으로 작동하는지 테스팅 하는 것

콘솔로그가 두번씩 찍혀도 멘탈 터지지 마셈 ㅋㅋ

<App /> 

컴포넌트 자바스크립트 덩어리이며..

jsx js 안에 html이 결합한 구조

 

실질적으로 app.js에서 우리는 개발하게 될 것

 

'강의 정리 > React JS' 카테고리의 다른 글

2023-01-07 props  (0) 2023.01.07
2023-01-05 React state  (0) 2023.01.05
2023-01-05 React prettier, eslint 설치 사용추천  (0) 2023.01.05
2023-01-03 JSX 문법  (0) 2023.01.03
2023-01-03 코테의 중요성과 하면 좋은 것 + React 강의 추천  (0) 2023.01.03
'강의 정리/React JS' Related Articles more