반응형

 

실행 방법

 

 

1. Visual Studio Code 열기

 

 

2

 

2. File > Open Folder > 원하는 폴더에 workspace 설정

 

 

3

 

3. 파일 생성 > 코드 입력 > Ctrl + Alt + T 로 실행

console.log("내용!!");

 

 

 

+알아둘 것

더보기
1

 

1. + 버튼 클릭 > Command Prompt 클릭

 

 

2

 

2. cmd버전이 추가된 것을 확인할 수 있음 

 

 

3

 

3. cmd를 입력하여 powershell를 cmd로 변경 가능 

 

4. cls 로 TERMINAL 창 지우기

 

 

 

 

 

테스트

 

 

실행 방법 : node 파일 이름

 

 

 

test.js

console.log("내용!!");

const temp = [];
for(let i=1; i<=10; i++) {
    temp.push("숫자 " + i);
}
console.log("체크 : ", temp);

 

결과 화면1

 

 

 

create-react-app 설치

 

 

1

 

1. npx create-react-app 폴더 이름 엔터 > y 엔터

폴더 이름 적을 시 대문자가 들어가면 안 됨

 

 

2. cd 폴더 로 위치 변경

 

 

3. node server.js 로 실행

 

결과 화면2

 

 

 

폴더 생성된 것 설명

 

 

  • package-lock.json, package.json 파일 설명

package-lock.json, package.json 파일 설명

 

 

 

  • 실행 방법

실행 방법 : npm start => 실행 시 package.json의 scripts start가 실행됨

 

 

 

  • index.jsp와 index.html

 

 

 

=> 주석이 많기에 지운 최종 코드

 

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

 

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

 

 

 

  • App.js

.App로 연결되어있기에 src의 App.js 확인

 

 

App.js

function App() {
  return (
    <div>
      <h1>h1 테스트 글</h1>
      <h2>1개의 컴포넌트라고 부름</h2>
    </div>
  );
}

export default App;

 

실행 전 화면

 

결과 화면3

 

 

반응형