23.2.16

프로젝트 2주차 9일째

환경변수 설정해주기~

 

 

node.js를 깔면 npm도 자동적으로 같이 깔리고, 이렇게 파워쉘에 뜨면 성공적으로 깔린 것!

 

그리고 실제 react app을 편하게 쓸 수 있게 해주는 명령어가 제일 첫 줄이다.  VS code에 terminal을 열어 첫 줄을 입력해야한다.

do-rong 부분은 본인이 설정하고 싶은 패키지 이름으로 하면 되고, y를 입력해 패키지를 다운받아 준다.

패키지가 전부 완료되면 이렇게 명령어를 알려주면서 끝난다.

마찬가지로 이렇게 명령어를 쳐주면 아래와 같이 로컬 창이 나타난다.

 

 

JSX : JavaScript + XML/HTML 을 의미

이렇게 쓴다.

 

순수 자바 코드만을 이용한 코드로써 JSX 코드와 동일한 내용이다.

동일한 내용의 코드이다.

위 코드의 결과 값이다.

 

JSX를 굳이 안 써도 되지만 장점이 많고, 코드가 간결해지기 때문에 쓰는 것을 추천한다.

 

ㅁㅓ야 왜 없다 그래?

됐다. 선생님은 16버전이고 나는 18버전이라 선생님이랑 똑같이 코드를 짠 게 실패의 원인~

 

elements는 화면에서 보여주는 것을 기술, 제일 작은 단위이다.

웬만해서는 React Elements (자바스크립트의 객체) 이다. 

element는 생성 후 children이나 attribute를 변경할 수 없다.(불변성)

 

props : 속성 (attribute의 상위 속성)

루트 돔은 딱 하나이다. 기존 사이트에 추가적으로 리액트를 연결하게 되면 여러개를 가질 수도 있다.

 

머야 이렇게 했는데 왜 안돼....? 시간만 안나오

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';

import Clock from './chapter_04/Clock';

const root = ReactDOM.createRoot(document.getElementById('root'));
setInterval(() => {
  root.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>
  );
}, 1000);

18에서는 이렇게 해줘야 나온다.

setInterval(() => {
  root.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>
  );
})

 

 

리액트는 컴포넌트 기반~

props 특징: read only~

 

 

---

오... 프론트엔드 너무 어려운데??? xlqkf,,,,,

프엔만 하루종일 했는데 제대로 된거 하나 없는거 실화냐ㅠ