React_설치와개념_Day_01

1

2

3

4

5

6

7

8

ㅡㅡㅡ

 

●리액트 설치

 

#

2가지방식

클래스방식 - 이전

펑션방식 - 최근

 

ES(에스마 스크립트) - 자바스크립트 약자

 

#노드JS( JS는 자바스크립트) - 리액트하기전에

기본 NEXT

#

NPM  ( Node Packaged Manager(node.js다운로드시 자동으로설치 됩니다.))

노드제이에스에서 ,생김

의존성, 그것과 관련된 라이브러리 다운로드 받아지게 합니다.외부 패키지버전하고 의존성 같은 것들, 관리하고 편하게 사용할수있게 도와주는 프로그램

#CMD창 열기

node -v 입력 후 버전확인

npm -v 입력 후 버전확인

#폴더 생성

객체(인스턴스)

컴포넌트(붕어빵틀) - 엘레멘트(컴포넌트에서 파생, 요소, 붕어빵) - 한번 만들어지면 수정못합니다.

컴포넌트 단위로 처리 됩니다.

 

엘리먼트 문제 되면, 빼고 다시 새로넣는 엘리먼트 집어넣는게 리액트의 특징

(리로딩 시간이 굉장히 빠릅니다. 렌더링 시간이 빠릅니다.) 로드밸류?로 처리

 

정리하면,

붕어빵틀로 붕어빵만듬, 한번 만들면 수정 못합니다.

#하나의 싱글페이지

한페이지안에 쭉 들어오는 것들

#리액트(SPA single page application - 싱글 페이지 어플리케이션) 만드는법

전부 설치해줍니다. 그래서 몆개만 고쳐서 사용합니다.

●2설치

 

#cmd 에서 npm config set prefix "C:\Program Files\nodejs 입력

 

이후

 

입력(비쥬얼스튜디오, 리엑트에서 입력)

 

이후

입력

#폴더 - 폴더상위가 - MY-APP로 설정해야 합니다.

●3 예제

 

#이름 일치

#엘리멘탈의 감싸기가 필요합니다. ex) div  > 안그러면 에러가 떨어집니다.

 

#컴포넌트

#

Fruit은 퍼스트01을 3개를 렌더링한다.

 

#컴포넌트를 실행하는 

1.improt를 시켜줍니다.

2.넣어줍니다.(APP /> 을 <Fruit />  으로 변경합니다.

 

3.실행하기

 

4.성공화면

●4. 개념설명

 

#JSX

자바스크립트 + xml/html = 합친 것 = 자바스크립트의 확장 문법

사용이 필수는 아니다.

자바스크립트 안에서 UI 적으로 도움이 되는 가독성의 향상이 있습니다.

에러및 경고 메세지를 표시할 수 있게 해줍니다.

 

관심사의 분리(종단,횡단 분리)

마크업로직 = xml/html

 

#

create Element() 

 

#

JSX쓰면

1.코드 간결

2.보안의 강화가 있습니다.(100퍼센트는 아니지만..)

3.자바스크립트 문법 그대로 지원 , (ex) 

props : 자바스크립트의 객체를 의미합니다.(그래서 속성들을 가져옵니다.)

key, value ?

엘리멘트는 React앱의 가장 작은 단위

클래스를 통해서 객체(인스턴스) 만든다.

 

#

클래스 = 컨포넌트

객체인스턴스 = 엘리멘트(하나의 컨포넌트의 여러개 엘리먼트)

 

 

브라우저 DOM (도큐먼트 오브젝트 모델)와 React 엘리먼트는 다르다.

React엘리먼트는 - 버츄얼입니다.

#setInterval()을 통한 예제

 

#Clock.jsx

import React from "react";

 

function Clock(props){

    return(

        <div>

            <h1>Hello, world!!</h1>

            <h2>현재 시간 : {new Date().toLocaleTimeString()}</h2>

        </div>

    );

}

 

export default Clock;

 

 

#index.js

 

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import Fruit from './exam01/Fruit';

 

import Clock from './exam01/Clock';

 

const root = ReactDOM.createRoot(document.getElementById('root'));

setInterval(function(){

 

 

  root.render(

  <React.StrictMode>

    <Clock />

      </React.StrictMode>,

      document.getElementById('root')

  );

}, 1000);

 

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

 

 

 

컴포넌트 > 엘리먼트

●5

 

엘리먼트 해당되는 것만 불려져옵니다.

 

 

 

#결과

 

 

#리엑터의 중요한 개념 - hook

 

#리엑터의 중요한 개념 - 라우터

#리엑터의 중요한 개념 - 테스팅

●자습

●자습

●자습

#분할,정리

- 요구사항

- 파일명, 엑셀화시키기

- 설계가 잘나와야한다. ★

입력 / 출력을 나누는 것

리액트

 

리눅스

#프로젝트가 완료

 

조원화합

코드리뷰(★같이 코드를 보는 구조 ㅡ 같이 설명, 같이 듣는것★)

ㅡ계획표대로

ㅡ코드리뷰해서 최소화합시다.

#

카프카,크론

배치프로그램만들어서  ★자동제어

데이터를 끌어와야대는 것 - 스케줄링 ★

API - 쉽게 만들어져 있어서 끌어와서 사용하면된다.

#순서

기획 > 설계 > 디자인 > 개발

 

#근본

자바

자바스크립트