React 프론트 개발 언어 공부 초기 세팅

프론트엔드를 개발하기 위한 언어로는 다양한 언어가 있다.
많이 흔하게 사용하는 언어로 예를 들면 1. HTML,CSS,JavaScript 2. React 3. Vue.js를 대표적으로 사용하는데

이 중 React언어에 대해 알아보자.

React 언어란?

: 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용된다.

React를 사용하기 위한 초기 세팅 명령어

npx create-react-app my-app
cd my-app
npm start

my-app 자리에는 폴더의 이름을 적어주자 !!
이렇게 명령어를 치면 react를 개발하기 위한 초기 세팅이 완료된다.

DOM이란?

React를 공부하다보면 DOM에 대해 자주 언급되는데, DOM에 대해서 알아보자.

DOM이란(Document Object Model)로, 프로그래밍 언어가 이 구조에 접근하고 조작할 수 있도록 하는 인터페이스이다. 문서의 구조를 트리 형태로 표현하며, 각 요소를 객체로 나타낸다. 이때 자바스크립트와 같은 언어를 통해서 문서의 내용과 구조를 동적으로 변경할 수 있다.

즉 프로그래밍 언어는 DOM을 통해 문서의 구조, 스타일, 내용을 조작할 수 있다.

npm start로 실행시킨 브라우저는 다음과 같은 로고가 뜨면 성공 !!

다음과 같은 폴더의 구조가 생기고, 이중 우리는 src폴더를 건들면서 개발하면 댐.
rm -rf *.css logo.svg reportWebVitals.js setupTests.js App.test.js
다음의 명령어로 필요하지 않은 파일을 삭제후 app.js 코드 작성 시작.

index.js

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

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return <div className="App">Hello app.js !!</div>
  }
}

export default App;

npm start로 폴더 안에들어가서 실행시키면 성공적으로 Hello app.js가 뜨는 것을 확인할 수 있다.