[React + Spring Boot 연동 (1/3)] - 프론트엔드 설정과 화면그리기

! 이 포스팅은 유튜버 "메타코딩" 님의 강의를 활용해 만들었습니다.

 

react & springboot

 

1편 - 프론트엔드 설정과 화면그리기 - https://junikang.tistory.com/274

2편 - 백엔드 설정과 API 만들기 - https://junikang.tistory.com/275

3편 - API를 사용하여 정보 주고받기 - https://junikang.tistory.com/276

 

 

 

---

⚙️ 프론트엔드 설정하기

1. 폴더 만들기

프로젝트를 만들 폴더를 만들어줍니다. 저는 workspace에 'blog' 로 만들겠습니다.

 

 

2. Open Folder로 'blog' 열기

 방금 만든 폴더를 비쥬얼스튜디오로 열어줍니다.

 

 

 

3. 리엑트 프로젝트 만들기

비쥬얼 스튜디오 코드에서 터미널을 열고 아래 명령어를 실행해서 'frontend' 이름의 리엑트 프로젝트를 생성합니다.

npx create-react-app frontend

(설치가 안되면 nodejs를 다운받으세요 => https://nodejs.org/ko/)

 

 

 

4. OpenFolder로 'frontend'열기

설치가 끝나면, frontend 폴더를 다시 한 번 "Open Folder"로 열어줍니다.

 

 

 

5. 실행확인하기

터미널을 열고 npm start 를 입력해서 리엑트가 동작하는지 확인합니다.

npm start

동작을 확인하면 ctrl+c로 실행을 종료해줍니다.

ctrl+c

 

 

 

6. 프로젝트에 필요한 라이브러리 패키지 다운로드 받기

터미널에 다음을 입력해서 패키지를 하나씩 다운받습니다.

(리덕스와 스타일 컴포넌트는 이번 포스팅과 딱히 관련 없으나, 유용합니다.)

(부트스트랩 - 디자인 된 템플릿 제공)
npm i react-bootstrap bootstrap@5.1.3

(리덕스 - 상태 관리)
npm i redux react-redux

(라우터 - 화면 이동해주는거)
npm i react-router-dom@5.2.0

(스타일 컴포넌트 - CSS 편하게 작성)
npm i --save styled-components

(통신)
npm i axios

 

 

 

7. 코딩을 도와주는 확장 프로그램 받기

그리고 Extensions를 다운 받습니다.

ESLint
Prettier-Code formatter
Reactjs code snippets
vscode-styled-components

 

 

 

8. '.prettierrc' 설정하기

.prettierrc라는 파일을 가장 상위인 blog디렉토리에 만들고 따라쳐줍니다. Prettier 확장프로그램의 자동정렬기능을 설정해주는 코드입니다. 아래와 같이 설정하면 신경쓰지 않아도 예쁘게 정렬해줍니다.

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

 

 

 

9. 저장시, 자동정렬 설정하기

파일을 저장할 때, 자동으로 코드를 정렬해주기 위해 설정을 해줍니다.

File-Preferences-Setting-Text Editor-Formatting-Format On Save (check)

 

 

 

10. 부트스트랩css import하기

index.js에 부트스트랩 css를 쓰기위해 아래 코드로 import 해줍니다.

import 'bootstap/dist/css/bootstrap.min.css';

 

 

 

11. 라우터 사용을 위해 BrowserRouter로 감싸주기

Router 기능을 쓰기위해 <BrowserRouter>로 감싸줍니다.

라우터는 SPA에서 페이지를 이동할 때 a태그를 대신하는 방법 이라고 생각해주세요.

 

 

 

12. App.css 안의 내용 지워주기

마지막으로, App.css 안의 내용을 지워줍니다.

 

 

이제 설정이 끝났습니다.

 

---

👨‍🎨  화면 그리기

1. 폴더, 파일 구성하기

다음과 같이 폴더와 파일을 만들어주세요.

• components
  • Header.js
  • PostItem.js
• pages
  • List.js
  • Write.js

 

 

 

---

Header.js

헤더부터 만들겠습니다. rsc를 입력해서 리엑트 구조를 만듭니다.

rsc

 

 

리엑트 부트스트랩 사이트에서 마음에 드는 navbar를 복사합니다.

https://react-bootstrap.github.io/components/navbar/

React-Bootstrap

      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

 

 

header.js에 붙여넣습니다.

 

 

오류가 뜨는 부분을 import 해줍니다.

 

 

Link 태그를 사용해서 수정합니다.

부트스트랩의 <Nav.Link>태그는 className="nav-link"로 바꿔서 사용할 수 있습니다.

 

Header.js 완성 코드

import React from 'react';
import { Container, Nav, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const Header = () => {
    return (
      <Navbar bg="dark" variant="dark">
        <Container>
          <Link to="/" className="navbar-brand">Navbar</Link>
          <Nav className="me-auto">
            <Link to ="/" className="nav-link">홈</Link>
            <Link to ="/write" className="nav-link">글쓰기</Link>
          </Nav>
        </Container>
      </Navbar>
    );
};

export default Header;

 

 

 

---

App.js

리액트가 실행되었을 때 index.html => index.js => App.js 순으로 보이게 됩니다.

App.js에서 라우터를 사용해서, 우리가 만들게 될 컴포넌트를 조합해서 보여주겠습니다.

 

 

1. List.js와 Write.js를 구별할 수 있도록, 간단하게 만들어줍니다.

 

 

 

2. App.js에서 Header를 import합니다.

 

 

 

3. <Route>태그를 사용해 라우팅합니다.

라우터를 사용해 List와 Write로 이동할 수 있도록 만들어줍니다. (import가 자동완성이 안된다면 타이핑 해줍니다.)

좌우 간격을 자동 설정해주는 부트스트랩의 <Container>로 감싸줍니다.

 

 

 

4. 동작을 확인합니다.

서버를 실행하고 잘 동작하는지 확인합니다.

 

 

App.js 완성 코드

import { Container } from 'react-bootstrap';
import { Route } from 'react-router-dom';
import './App.css';
import Header from './components/Header';
import List from './pages/List';
import Write from './pages/Write';

function App() {
  return (
    <div>
      <Header />
      <Container>
        <Route path="/" exact={true} component={List} />
        <Route path="/write" exact={true} component={Write} />
      </Container>
    </div>
  );
}

export default App;

 

 

 

---

Write.js

 

1. 부트스트랩 코드 사용하기

헤더와 마찬가지로, 부트스트랩사이트에서 Form controls를 복사합니다.

https://react-bootstrap.github.io/components/forms/

React-Bootstrap

<Form>
  <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
    <Form.Label>Email address</Form.Label>
    <Form.Control type="email" placeholder="name@example.com" />
  </Form.Group>
  <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
    <Form.Label>Example textarea</Form.Label>
    <Form.Control as="textarea" rows={3} />
  </Form.Group>
</Form>

 

 

부트스트랩에서 복사한 코드를 붙여넣습니다.

 

 

 

2. 수정하기

제목과 내용을, 등록하기 버튼까지 만들어줍니다.

 

 

실행하면, 이런 화면이 그려진 것을 볼 수 있습니다!

 

 

Write.js  코드

import React from 'react';
import { Button, Form } from 'react-bootstrap';

const Write = () => {
  return (
    <Form>
      <Form.Group className="mb-3">
        <Form.Label>제목</Form.Label>
        <Form.Control />
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>내용</Form.Label>
        <Form.Control as="textarea" rows={3} />
      </Form.Group>
      <Button>글쓰기</Button>
    </Form>
  );
};

export default Write;

 

 

 

 

---

PostItem.js & List.js

홈화면인 List에서 각각의 글을 표현할 그림으로, PostItem 컴포넌트를 만들겠습니다. pages가 아닌, components로 분류한 이유는, 한페이지에서 여러번 재사용되기 때문입니다.

 

 

1. 부트스트랩에서 코드 복사하기

부트스트랩에서, Card를 복사하겠습니다.

https://react-bootstrap.github.io/components/cards/

React-Bootstrap

<Card>
  <Card.Header>Featured</Card.Header>
  <Card.Body>
    <Card.Title>Special title treatment</Card.Title>
    <Card.Text>
      With supporting text below as a natural lead-in to additional content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>

 

 

2. 수정하기

PostItem.js에 rsc로 구성하고, Card를 붙여넣은 후, 제목, 내용, 자세히보기를 작성해줍니다.

 

 

3. List.js에서 PostItem.js 사용하기

만들어진 PostItem을 List에서 import해서 사용해줍니다.

 

 

실행하면, PostItem이 그려지는 걸 볼 수 있습니다!

 

List.js 코드

import React from 'react';
import PostItem from '../components/PostItem';

const List = () => {
  return (
    <div>
      <PostItem />
      <PostItem />
      <PostItem />
      <PostItem />
    </div>
  );
};

export default List;

 

 

 

PostItem.js 코드

import React from 'react';
import { Card } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const PostItem = () => {
  return (
    <Card>
      <Card.Body>
        <Card.Title>제목</Card.Title>
        <Card.Text>내용</Card.Text>
        <Link to="" className="btn btn-primary">
          자세히보기
        </Link>
      </Card.Body>
    </Card>
  );
};

export default PostItem;

 

 

 

---

이렇게 해서, 간단하게 홈과 글쓰기 화면을 만들었습니다. 다음 포스팅에는 스프링 부트로 backend를 코딩해봅시다!

 

4. 리엑트, 스프링부트 연동 - 백엔드 설정과 API 만들기 (2/3)