220404 react study

11171 단어 JavaScriptvscodeCSSReacthtmlCSS

오늘 배울 내용

React Study 1일차, 기초 설명
다른분들과 함께 영상을 보면서 수업을 듣기 시작 한 지 1일차! 어떤 수업이 기다리고 있을지 기대된다.
바로 본론으로 들어가자.

VSCODE에 코드 작성하기

<body>
  <div id="app"></div>
  <script>
      const catItem = (
        <li>
          <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" />
        </li>
      );
 	  // 변수 선언 ( #app )
      const 여기다가그려 = document.querySelector("#app");
      ReactDom.render(catItem, 여기다가그려);
  </script>
</body>

위와 같이 영상을 보며 코드를 작성하였다. 그런데 문제가 생겼다.
바로

SyntaxError, 문법오류이다...

영상에서 곧 바로 설명을 해주었다!

기본적으로 React DOM 작성을 해야 할 때 3가지의 공식 문서에 있는 cdn을 가져와야한다.
참고 주소 : https://ko.reactjs.org/docs/add-react-to-a-website.html

위 내용 주소를 참고하여 React를 작업 할 때 기본적으로 불러와야 할 cdn 몇 가지를 추가해보자.

// react 관련 cdn
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
// babel cdn
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

우리가 보는 영상에서는 "JSX(babel)"을 설명해주었다. 우리말로 표현하자면 통역사 같은 느낌이라고 한다! React 문법으로 적혀진 내용을 적게 되면, 순수 자바스크립트 용어로 컴파일해준다.

하지만 위에 cdn만 긁어와봤자 문제는 해결되지 않는다.
바로, 입력한 스크립트에 script type="text/babel"이라 적어주어야 한다.

수정한 소스

<body>
<div id="app"></div>
  
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
      const catItem = (
        <li>
          <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" />
        </li>
      );
 	  // 변수 선언 ( #app )
      const 여기다가그려 = document.querySelector("#app");
      ReactDom.render(catItem, 여기다가그려);
  </script>
</body>

소스를 수정하고 나니

귀여운 고양이가 매우 잘 보인다!

오늘의 수업은 타이틀, 입력창, 고양이, 하트버튼까지 출력이 목표이다.
수업에서 알려주는 대로 따라쳐보고, 약간의 커스텀을 해보았다.

태그가 너무 지저분해보여서 조금 가다듬어볼까 했다.

엄청난 에러가 난다. 다중으로 선언은 안되는 듯 하여, div 태그로 묶어서 해결하였다.

좀 더 간결하게 사용하고 싶어서 줄여보긴 했지만 어차피 똑같은 내용이다.

1개 이상의 중괄호 영역을 지정하려면 div 태그를 꼭 사용해주어야 한다! 안그러면 오류가 난다..
만약 mainContents 가 아닌 각 이름으로 호출 할 때에는 순서를 꼭 지켜주자! 안그러면 순서에 따라 보이는 화면이 달라진다.

220404 예산
[Baekjoon] 1197. 최소 스패닝 트리 [G4]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage