본문 바로가기
[ Programming ] Project/React JS CRUD with Spring Boot

[리액트, 스프링부트 연동하여 CRUD 구현] #2 - 리액트 프로젝트 생성 및 기본개념 설명 (2/10)

by the_little_coder 2020. 1. 15.

리액트, 스프링부트 연동하여 CRUD 구현하기

#2 리액트 프로젝트 생성 및 기본개념 설명



들어가기 앞서, 저의 구축 환경은 이렇습니다.



OS - macOS Catalina (버전 10.15.2)

React JS - Visual Studio Code (npm 6.9.0)

Spring Boot - Spring Tool Suite 4 (4.4.1. RELEASE)

Database - MySQL (Ver 8.0.18)



리액트 환경 구성


리액트 프로젝트를 생성하고 실행하려면 CLI(Command Line Interface, 명령줄 인터페이스)로 진행해야 합니다. CLI는 간단히 말해서 윈도우의 명령프롬포트(커맨드), 리눅스의 터미널이라 생각하시면 됩니다. 먼저 진행하기 위해선 npm을 설치해야 합니다. 저의 npm 버전은 6.9.0. 입니다. mac의 터미널로 버전 확인을 하려면 다음 명령어를 입력하면 됩니다. 참고로 $은 user 이름 뒤에 붙는 특수문자로, 이 특수문자 뒤에 나오는 글자를 입력하시면 됩니다.



$ npm --version



저는 npm보다 성능이 좋다고 알려진 yarn으로 프로젝트 생성하고 관리합니다. 저의 yarn 버전은 1.19.2 입니다.



$ yarn --version



프로젝트 생성


기존의 전역설치를 했기 때문에 기존에 전역설치를 하신 분이시라면 아래와 같이 진행하시면 됩니다.


폴더 위치 잡기


리액트 프로젝트를 생성할 위치를 지정합니다. 저는 바탕화면(Desktop)에다가 "test" 이름으로 폴더 했습니다.


해당 폴더에 리액트 앱 설치


yarn이나 npm을 통해 설치해야 합니다. 저는 yarn으로 진행하겠습니다. 위에 생성한 폴더로 경로를 잡아주고 설치합니다.



$ cd /Users/사용자명/Desktop/test



위의 경로로 terminal이 이동합니다. 이후에 yarn에게 다음과 같이 명령합니다.


"yarn, 리액트 프로젝트 기본 템플릿 다운받아 줘."


이렇게 한국어로 얘기하고 싶지만, 컴퓨터는 이해할 수 없으니 다음과 같이 컴퓨터가 알아듣도록 명령합니다. 아래와 같이 명령하기 전에, 아까 생성한 폴더로 이동해있는지 먼저 경로를 확인합니다. 이상이 없으면 아래 명령어로 리액트 프로젝트를 생성합니다.



$ create-react-app .



이런 방법도 있지만 VS Code 내부에서 터미널을 실행한 후 진행해도 됩니다. 윈도우의 경우, 해당 폴더로 클릭해서 들어간 다음 마우스 우측버튼을 누르면 "현재 경로에서 VS Code 열기"라는게 있을 겁니다. 그리고 버튼을 누르면 그 경로에서 VS Code가 실행된 걸 볼 수 있습니다. 그리고 <Control + `>를 눌러 VS Code에서 명령프롬포트 창을 열어 위의 "create-react-app ."을 실행하면 됩니다. 아, 위 명령어에서 마침표가 의미하는 건 현재 경로입니다. 즉, yarn에게 현재 경로에 설치해달라고 명령하는 겁니다.


맥에서는 먼저 VS Code를 실행한 뒤 메뉴에서 "File -> Open"을 클릭해 해당 폴더를 엽니다. 그리고 VS Code에서 Terminal이 하단에 열려있다면 위 생성 명령어를 입력합니다. Terminal이 없는 경우, 위 메뉴에서 "Terminal -> New Terminal"을 클릭하면 아래에 창이 생성됩니다.





그러면 아래와 같이 설치가 진행됩니다.





설치가 완료되면 "Happy hacking!" 이란 메세지와 함께 아래 사진처럼 리액트 프로젝트 설치가 완료됩니다.





이 프로젝트에서 중요한 폴더 및 파일을 설명하고 다음으로 넘어가고자 합니다.


public 폴더 - public 폴더에는 index.html 파일이 있습니다. 리액트에선 html 페이지 하나(single page application, 단일페이지라고도 합니다.), 즉 html 파일 하나로 웹 앱을 만듭니다. 그리고 앞으로 작성할 모든 리액트 컴포넌트를 이 html 파일에서 렌더(render)합니다. 기본적으로 이 index.html 파일을 html 템플릿이라 합니다. index.html 파일에는 id가 "root"인 div 태그가 있습니다. 앞으로 작성할 모든 리액트 컴포넌트들은 이 div 태그 안에서 렌더됩니다.



index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

...(중략)

<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>



index.js 파일 - 리액트 앱에 존재하는 render 중 최상위에 있는 render가 존재하는 파일입니다. 이 파일엔 React.DOM.render(...)가 있는데, 이는 App.js 파일에서 렌더한 App 컴포넌트를 index.html 파일에 있는 id가 "root"인 div태그 안에 실행하라는 겁니다.



index.js

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

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();




src 폴더 - 이 폴더에는 리액트 앱 전체(global, 전역이라고 합니다.)에 적용되는 자바스크립트 파일과 CSS 파일이 있습니다. 앞으로 작성할 모든 리액트 컴포넌트들을 이 폴더 안에 생성할 겁니다.


App.js 파일 - 루트(root) 컴포넌트라고 불리며, 이 파일에는 브라우저에서 실제로 렌더되는 컴포넌트들을 포함하고 있습니다. App.js 파일은 JSX라는 확장자 파일을 리턴하는데, JSX는 자바스크립트를 확장한 문법입니다. '$' 표시가 없는 jsp 파일과 유사하다 할까요. HTML에서 클래스 속성은 <... class="" > 이렇게 'class'라고 적고 큰따옴표에 클래스 이름을 주었습니다. 반면 JSX에서 클래스 속성을 주기 위해선 class라고 적는 것이 아닌 className이라고 적어야 합니다. className에서 N은 소문자가 아닌 대문자로 적어야 합니다. 카멜 표기법이 생각나죠?



App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save...
</p>
</div>
);
}

export default App;



이제 실행 명령어를 입력해 해당 리액트 프로젝트가 잘 동작되는지 확인합니다.



$ yarn start



다음 화면처럼 나오면 성공!





저작자표시 비영리 변경금지

'[ Programming ] Project > React JS CRUD with Spring Boot' 카테고리의 다른 글

[리액트, 스프링부트 연동하여 CRUD 구현] #6 - Axios로 Service 생성 (6/10)  (2) 2020.01.19
[리액트, 스프링부트 연동하여 CRUD 구현] #5 - Routing Component 생성 및 파일 정리 (5/10)  (1) 2020.01.18
[리액트, 스프링부트 연동하여 CRUD 구현] #4 - Add/Edit User Component 생성 (4/10)  (2) 2020.01.17
[리액트, 스프링부트 연동하여 CRUD 구현] #3 - User List Component 생성 및 Delete 구현 (3/10)  (1) 2020.01.16
[리액트, 스프링부트 연동하여 CRUD 구현] #1 - 구상 (1/10)  (5) 2020.01.14

관련글

댓글

티스토리툴바