인트로, 개발환경 셋팅, 리액트 동작 원리

https://leeeeeyeon.tistory.com/96 에서 작성한거처럼 이제 프론트엔드와 백엔드의 역할에 대한 경계를 이해했다.

그리고 나는 백엔드 쪽으로 공부를 하고 싶다. 풀스택이라는 길도 있지만, 어디서 주워듣길 진정한 풀스택 개발자는 스스로를 자신 있게 풀스택이라고 말하지 않는다구 했다 (˘･_･˘) 결국 그만큼 잘하지 않으면 풀스택 개발자라기보단, 프론트엔드 조금, 백엔드 조금 아는 애매한 세미 풀스택 개발자가 된다고 생각했다.

그렇기 때문에 나는 풀스택 개발자 시러! 백엔드만 할거야!라고 했다. 하지만 json으로만 이루어진 API를 보며, 이것이 웹사이트에 어떻게 보일지에 대한 궁금증이 계속 마음 한 켠에 남았다.

그래서 난 결심했다! 1인 토이 프로젝트를 한다는 셈 치고 프론트엔드와 백엔드를 모두 직접 해보고 그것을 통해 둘 사이의 통신을 파악해보자고!

그래서 노마드코더를 보며 React를 이용한 프론트엔드를 만들고, 회원가입, 마이 페이지 등 백엔드가 필요한 요소를 추가하여 나만의 프로젝트를 만들어보기로 했다 !!!

그럼 이제 시작해보자 얍 (。・・)ノ

 

---

리액트를 배우는 이유, 개발환경 셋팅 

 

리액트는 페이스북이 만든 프론트엔드 프레임워크이며, 에어비앤비, npm, 넷플릭스, 스포티파이 등 많은 유명한 사이트들이 리액트를 사용하고 있다. 이렇듯 리액트는 많은 곳에서 사용되고 있으며, 수요가 있는 프레임워크이다.

그리고 리액트는 js로 구성되어 있기 때문에 특별히 프레임워크를 다시 공부하지 않아도 된다.

 

이제 개발환경을 셋팅해보자.

본격적으로 시작하기 전에 node js, npm, npx가 설치되어야 한다. 나는 node js와 npm이 설치되어 있으므로 npx만 추가적으로 설치해주었다. ( git은 당연하니까 언급만 하고 skip...~ )

 

이전에는 브라우저가 react 코드를 이해하지 못하기 때문에 react를 사용하기 위해 webpack, babel 등 복잡한 과정이 필요했다.

하지만 지금은 create react app으로 react web app을 간단하게 셋팅할 수 있다.

 

프로젝트를 만들 폴더로 일단 이동하자.

그리고 터미널에 npx create-react-app (프로젝트 이름)을 쳐주자.

나는 폴더 이름을 'yeonmovie', 리액트 프로젝트 이름을 'frontend'로 했다.

npx create-react-app frontend

 

 

첫 리액트 앱 제작

디렉토리 구조

이 중 package.json에 들어가보자.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
},

test와 eject은 지워주었다.

 

이제 npm start를 통해 우리의 첫 리액트 앱을 열어보자.

짜잔

 

수업에서 다루지 않는 부분을 제외하기 위해 index.js를 아래와 같이 바꾸자.

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

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

 

App.js도 수정해주자.

import React from "react";

function App() {
  return <div className="App" />;
}

export default App;

그리고 src 폴더에서 App.js와 index.js를 제외한 나머지 파일들을 다 지워주자.

 

+ create-react-app은 변경사항을 브라우저에 자동으로 적용해준다 !

 

 

리액트 동작 원리

 

마지막으로, 리액트의 작동 원리에 대해 알아보자.

우리의 index.html을 보면 root라는 div 안이 비어있다.

근데, 개발자 도구를 보면 root라는 div 안에 내용이 들어있다 !!!

즉, 리액트의 역할은 div 안에 element를 넣는 역할을 한다!

 

다시 index.js로 가보자.

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

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

이 코드를 다시 해석하면 index.js는 App을 render해서 document.getElementById()에 해당하는 곳 내부에 내용을 넣어주는 것이다!

이것이 바로 리액트가 동작하는 방법이다!

그리고 이렇게 소스코드에는 존재하지 않는 것을 virtual DOM (virtual document object model)이라고 한다.