20230510

<< [[20230509]] | [[20230511]]>>

TODO

• 강의 1시간

• 포폴 1시간

(강의) 웹 게임을 만들며 배우는 React

NOTE

• 뷰, 스벨트가 리액트보다 훨씬 편할 수 있음

• 리액트없이 spa페이지를 만들면 리액트의 필요성을 느끼기 좋음

• js, html, css 는 프론트엔드의 기본 소양

• IDE : webStorm 추천 =>유료 / vscode => 무료

• 웹브라우저는 html, css(화면) && js (동작) 밖에 읽지 못함 => js기본기가 탄탄해야 리액트도 원할하게 할 수 있음

• 배울 때는 원시적인 형태부터 하다보면 이해가 쉬움

• npm? Node Package Manager의 약자, node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포하는 역할 package.json? 패키지에 관한 정보와 의존중인 버전에 관한 정보를 담은 파일

npm init -y # package.json을 생성하는 역할
npm install react react-dom

---

-- SPA의 장단점 --

SPA의 장점

• 데이터가 변할 때 화면이 같이 변함

• 화면이 이동할 때 깜빡임이 없음

SPA의 단점

• 검색엔진 노출 어려움

-- react 사용하기 --

1단계 : html에서 script를 이용해 react를 사용하는 방법 참고

• script 작성

<!-- 개발용 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!-- 배포용 -->
<!--<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>-->

• 컴포넌트 생성

  • 컴포넌트 : 데이터와 화면을 하나로 묶어둔 것

  • class함수는 현재 1% (ErrorBoundary)정도에서만 사용함 = 거의 사용되지 않음

%% react 17버전 코드 %%
<script>
  'use strict';
  
  const e = React.createElement;
  
  class LikeButton extends React.Component {
    constructor(props) {
      super(props);
      this.state = {liked: false};
    }
  
    render() {
      if (this.state.liked) {
        return 'You liked this.';
      }

      return e('button', {onClick: () => this.setState({liked: true})}, 'Like');
    }
  }
</script>

• 화면에 컴포넌트 그리기

%% react 17버전 코드 %%
<script>
  ReactDOM.render(e(LikeButton), document.querySelector('#root')); // compoenent LikeButton을 #root에 그린다는 뜻
</script>

• 실행하기

  • html을 인터넷 브라우저로 열면 실행