React를 경험해보자. 1탄

 

✏️React를 경험해보자 1탄

 

신입 시절, 아니 신입도 아닌 취준생 시절.... 자바스크립트 프레임워크/라이브러리는 Vue.js, Angular.js, React.js 등이

있다는 정도만 아는 상태로 취업을 해버렸다. 취업하고 나니 실무 프로젝트에서는 Vue.js를 사용한다고 하여 

몇개월동안 죽어라 Vue.js만 공부하고, 일을 하다 보니 벌써 Vue.js를 사용한지는 1년이 다 되어간다. 

 

Vue.js 3이 은근 인기가 있는 것 같은데, 요즘 채용 공고들을 보면 React.js 사용을 하는 회사들이 Vue.js를 사용하는

곳보다 훨씬 많다는 것을 정말 알게되었다. Vue.js도 참 좋은데... Vue.js 밖에 안 써봐서 뭐라 설명할 수가 없네... 

 

그래서...!! React를 공부하려고한다! 

 

우선, Node.js의 Express를 통해 백엔드 서버는 간단하게 회원가입, 로그인, 로그아웃 등 정도만 구현을 해두었다. 

오늘은 1탄이니 React.js의 설치와 시작만 간단하게 해보자! 

 

- React를 설치해보자

 

React.js를 설치하기 위한 명령어! npx create-react-app . (.은 현재 폴더에 설치를 뜻한다)

여기서 궁금한 점 하나! 왜 npm이 아니라 npx일까? 

 

간략하게만 말하면, 패키지가 설치되어 있다면 그대로 실행하고, 설치되어 있지 않다면 npx가 최선 버전의 

패키지를 설치한 후 실행하는 것이다! 

 

잠시 주제가 이탈했네요...

 

다시 React로 돌아와서, 설치가 완료됐다면 public, src 등의 폴더가 설치되어 있다. (Vue cli랑 비슷하다)

src폴더의 index.js를 보면 

 

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

이렇게 작성이 되어있다. 

document.getElementById('root') root이라는 ID를 찾아서 해당 Element안에 App을 랜더해주고 있다. 

npm run start 후 local을 보면 React 아이콘이 뱅글뱅글 돌아가는 걸 볼 수 있다! 

 

다음은 랜딩페이지, 회원가입 페이지 등을 만들어보려고 한다.