[React] 개발환경

Start. React

개발환경

[샘플 앱 실행하기]

1) 'VSCode-메뉴창-보기-모양-패널 표시'에 들어가서 터미널 실행

2) 터미널 창에서 npm run start를 입력해주었을 때 보라색 창이 뜨면서 React로고가 보이면 올바르게 실행된 것

 

 

[JavaScript 코딩하는 법]

📌작업 시 모든 파일들은 src파일에서

 

📌div태그 안에 Hello, React!!! 를 넣으면 실시간으로 업데이트

📌App.js

import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';

class App extends Component {
  render(){
    return (
      <div className="App">
        Hello, React!!!
      </div>
    );
  }
  
}

export default App;

[CSS 코딩법]

📌src/index.css 파일에서 작업

body {
  background-color: powderblue;
}

 

📌코드 4번째 줄 처음에 있는 App과 9번째 줄에 있는 App의 이름은 서로 동일해야 함

📌코드 4번째 줄 뒤에 있는 App은 파일 이름을 적는 곳이다. App.js로 .js가 생략되어 있는 것

[배포하는 법]

📌실제로 서비스(배포)할 때는 터미널에서 npm run build를 입력하면 build 폴더가 생기는데 그 안에 있는 파일을 사용

📌터미널에서 npx serve -s build를 실행하고 localhost:5000으로 들어가면 '캐시 비우기 및 강력 새로고침'을 했을 때 localhost:3000보다 용량이 더 작음

 

 

💡대부분의 작업은 src/App.js파일에서 이루어진다. 다른 파트 보니까 파일 분리 부분도 있어서 html과 css처럼 일부분은 분리도 할 거 같다.

 

아직은 재밌다.

한 일주일 전에 전인가 쯤에 React언어가 있다는 걸 봤었는데

막상 시작하려니까 막막해서 잠깐 접어두고(?) 있었는데 강의가 얼마 안 되는 거 같아서 이참에 끝까지 열심히 들어보려고 한다. 

 

 

📎강의-생활코딩: opentutorials.org/module/4058/24666

📎npm관련 추가 설명: opentutorials.org/module/4044