React로 간단한 블로그 웹사이트 만들기

안녕하세요 devRookie 입니다. 

^^

 

React는 자바스크립트 라이브러리로, 단일 페이지 애플리케이션(SPA)을 쉽게 개발할 수 있도록 해줍니다. 

이번 포스팅에서는 React를 이용하여 간단한 블로그 웹사이트를 만들어보겠습니다.

Step 1: React 앱 생성

먼저 React 앱을 생성해야합니다. 다음 명령어를 이용하여 앱을 생성합니다.

npx create-react-app my-blog

이 명령어는 `my-blog`라는 이름의 React 앱을 생성합니다. 명령어 실행 후 `my-blog` 디렉토리로 이동하여 앱이 제대로 생성되었는지 확인합니다.

Step 2: 컴포넌트 생성

React에서는 컴포넌트를 이용하여 UI를 구성합니다. 이번 블로그 웹사이트에서는 다음과 같은 컴포넌트를 생성합니다.

- `Header`: 웹사이트 상단에 위치하는 헤더
- `PostList`: 게시글 목록
- `PostItem`: 게시글 아이템
- `Footer`: 웹사이트 하단에 위치하는 푸터

`src` 폴더 내에 `components` 디렉토리를 생성하고, 위에서 나열한 컴포넌트를 각각의 파일로 분리하여 작성합니다.

Step 3: 데이터 가져오기

블로그 웹사이트에서는 게시글 목록을 보여주어야합니다. 이를 위해서는 미리 작성된 게시글 데이터가 필요합니다.
`src` 폴더 내에 `data` 디렉토리를 생성하고, `posts.js` 파일을 작성합니다. 이 파일에서는 더미 데이터를 생성하여 반환합니다.

Step 4: 데이터 표시

이제 `PostList` 컴포넌트에서 `posts.js` 파일에서 가져온 게시글 목록 데이터를 이용하여 게시글 목록을 표시합니다. `PostItem` 컴포넌트에서는 게시글 제목, 작성일 등의 정보를 표시합니다.

Step 5: 라우팅

블로그 웹사이트에서는 여러 개의 페이지를 보여줘야합니다. 이를 위해 React Router를 이용하여 라우팅을 설정합니다. `Header` 컴포넌트에서는 페이지 이동을 위한 링크를 제공합니다.

Step 6: 스타일링

웹사이트의 디자인을 꾸미기 위해 CSS를 이용하여 스타일링합니다. 각 컴포넌트에서 필요한 CSS를 작성하여 `App.css` 파일에서 불러옵니다.

 

 

프로젝트 생성

먼저 프로젝트를 생성하겠습니다.

1. `create-react-app`을 이용하여 프로젝트를 생성합니다.
	npx create-react-app my-blog

2. 프로젝트 폴더로 이동합니다.
   cd my-blog

3. 프로젝트를 실행합니다.
   npm start

   실행이 잘 되는지 확인해보세요.

## 디자인

이제 블로그 웹사이트의 디자인을 작성하겠습니다. 기본적으로 `src/App.js` 파일에서 레이아웃을 구성합니다.

1. `src/App.js` 파일에서 다음과 같이 코드를 작성합니다.

   import React from 'react';
   import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
   import Home from './pages/Home';
   import Post from './pages/Post';

   function App() {
     return (
       <Router>
         <Switch>
           <Route path="/post/:id">
             <Post />
           </Route>
           <Route path="/">
             <Home />
           </Route>
         </Switch>
       </Router>
     );
   }

   export default App;

2. `src/pages/Home.js` 파일을 생성하고 다음과 같이 코드를 작성합니다.

   import React from 'react';

   function Home() {
     return (
       <div className="container">
         <h1>My Blog</h1>
       </div>
     );
   }

   export default Home;

3. `src/pages/Post.js` 파일을 생성하고 다음과 같이 코드를 작성합니다.

   import React from 'react';
   import { useParams } from 'react-router-dom';

   function Post() {
     const { id } = useParams();
     return (
       <div className="container">
         <h1>Post {id}</h1>
       </div>
     );
   }

   export default Post;

이제 기본적인 레이아웃이 완성되었습니다. 다음 단계에서는 블로그 포스트를 불러오는 기능을 추가하겠습니다.

## 블로그 포스트 불러오기

이번에는 Axios를 사용하여 블로그 포스트를 불러오는 기능을 추가하겠습니다.

1. `src/pages/Home.js` 파일

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

const Home = () => {
  const posts = [
    {
      id: 1,
      title: '포스트 제목 1',
      content: '포스트 내용 1',
      date: '2022-01-01',
      image: 'https://source.unsplash.com/random/400x400',
    },
    {
      id: 2,
      title: '포스트 제목 2',
      content: '포스트 내용 2',
      date: '2022-01-02',
      image: 'https://source.unsplash.com/random/400x400',
    },
    {
      id: 3,
      title: '포스트 제목 3',
      content: '포스트 내용 3',
      date: '2022-01-03',
      image: 'https://source.unsplash.com/random/400x400',
    },
  ];

  return (
    <div>
      <h1>최신 글</h1>
      <PostList posts={posts} />
    </div>
  );
};

export default Home;

위 코드에서는 `PostList`라는 컴포넌트를 사용하여 포스트 리스트를 화면에 표시합니다. 이 컴포넌트는 `src/components/PostList.js` 파일에서 구현할 예정입니다.

이제 `PostList` 컴포넌트를 작성해보도록 하겠습니다.

## PostList 컴포넌트 작성하기

`PostList` 컴포넌트는 블로그 포스트 리스트를 보여주는 역할을 합니다. `Home` 컴포넌트에서 렌더링됩니다.

`src/components/PostList.js` 파일을 생성하고 다음과 같이 작성해보세요.

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

const PostList = ({ posts }) => {
  return (
    <div>
      <h2>Recent Posts</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link to={`/post/${post.slug}`}>
              <h3>{post.title}</h3>
              <p>{post.excerpt}</p>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default PostList;

위 코드에서는 `props`로 `posts` 배열을 전달받아 블로그 포스트 리스트를 보여주도록 작성했습니다. 각각의 포스트는 `Link` 컴포넌트를 사용하여 상세 페이지로 이동할 수 있도록 만들었습니다.

`key` prop은 리액트에서 배열을 렌더링할 때 각각의 요소를 식별하는 데 사용됩니다. 여기서는 포스트의 고유 ID를 사용했습니다.

## Home 컴포넌트에 PostList 추가하기

이제 `PostList` 컴포넌트를 `Home` 컴포넌트에 추가해보겠습니다.

`src/pages/Home.js` 파일을 다음과 같이 수정해주세요.

import React from 'react';
import PostList from '../components/PostList';
import posts from '../data/posts';

const Home = () => {
  return (
    <div>
      <h1>Welcome to my blog!</h1>
      <PostList posts={posts} />
    </div>
  );
};

export default Home;

위 코드에서는 `PostList` 컴포넌트에 `posts` 배열을 전달하여 블로그 포스트 리스트를 렌더링하도록 했습니다.

## 포스트 상세 페이지 만들기

이제 포스트의 상세 페이지를 만들어보겠습니다. 포스트 상세 페이지는 `src/pages/PostDetail.js` 파일에서 작성할 예정입니다.

## PostDetail 컴포넌트 작성하기

`PostDetail` 컴포넌트는 포스트의 상세 정보를 보여주는 역할을 합니다.

`src/pages/PostDetail.js` 파일을 생성하고 다음과 같이 작성해보세요.

import React from 'react';
import { useParams } from 'react-router-dom';
import posts from '../data/posts';

const PostDetail = () => {
  const { slug } = useParams();
  const post = posts.find(post => post.slug === slug);

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </div>
  );
};