ReactJS 템플릿
ReactJS와 Back4App으로 블로깅 플랫폼 SPA 만들기

26min
1. 소개
이 튜토리얼은 ReactJS를 프론트엔드로, Back4App을 백엔드로 사용하여 블로깅 플랫폼을 위한 완전한 단일 페이지 애플리케이션(SPA)을 구축하는 과정을 안내합니다. 개발 환경 설정, Redux를 사용한 전역 상태 관리, 라우팅 및 내비게이션 구현, Back4App을 사용한 CRUD 작업 수행까지 모든 내용을 다룰 것입니다.
목표:
사용자가 블로그 게시물을 생성, 편집 및 삭제할 수 있고, 독자가 게시물을 보고 댓글을 달 수 있는 완전한 기능의 블로깅 플랫폼을 만듭니다. 이 애플리케이션은 프론트엔드에 ReactJS를, 백엔드 작업에 Back4App을 활용합니다.
주요 기능:
사용자 인증
게시물 생성, 편집 및 삭제
게시물 및 댓글 보기
Redux를 사용한 전역 상태 관리
React Router를 사용한 라우팅 및 내비게이션
전제 조건:
JavaScript, ReactJS 및 Redux에 대한 기본 지식
활성 Back4App 계정
로컬 환경에 Node.js 및 npm 설치
2. 초기 설정
2.1. ReactJS 프로젝트 설정
1단계: create-react-app을 사용하여 새로운 React 프로젝트를 생성합니다.
2단계: 개발 서버를 시작합니다.
2.2. Back4App 설정
1단계: Back4App 계정에 로그인하고 새로운 애플리케이션을 생성합니다.
2단계: Back4App 대시보드에서 "Core > Browser"로 이동하여 다음 클래스를 생성합니다:
Post (블로그 게시물을 저장하기 위해)
Comment (게시물에 대한 댓글을 저장하기 위해)
3단계: "앱 설정 > 보안 및 키" 섹션에서 애플리케이션 ID와 JavaScript 키를 얻습니다.
2.3. 필요한 패키지 설치
React, Redux 및 Back4App 통합을 위한 필요한 종속성을 설치합니다.
MacOS
npm install parse @reduxjs/toolkit react-redux react-router-dom
npm install parse @reduxjs/toolkit react-redux react-router-dom
﻿
2.4. Parse SDK 구성
1단계: 다음 이름의 파일을 생성합니다: ParseConfig.js src 폴더에 Parse SDK를 구성합니다.
JS
import Parse from 'parse';

Parse.initialize("YOUR_APP_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com/';

export default Parse;

import Parse from 'parse';

Parse.initialize("YOUR_APP_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com/';

export default Parse;
﻿
﻿
3. 블로깅 플랫폼 개발
3.1. 프로젝트 구조
다음 구조로 프로젝트를 구성합니다:
Text
src/
|-- components/
|   |-- PostList.js
|   |-- PostDetails.js
|   |-- PostForm.js
|   |-- CommentList.js
|-- redux/
|   |-- store.js
|   |-- postSlice.js
|   |-- commentSlice.js
|-- ParseConfig.js
|-- App.js
|-- index.js
src/
|-- components/
|   |-- PostList.js
|   |-- PostDetails.js
|   |-- PostForm.js
|   |-- CommentList.js
|-- redux/
|   |-- store.js
|   |-- postSlice.js
|   |-- commentSlice.js
|-- ParseConfig.js
|-- App.js
|-- index.js
﻿
3.2. 전역 상태 관리를 위한 Redux 구현
1단계: Redux 스토어를 설정합니다 redux/store.js.
JS
import { configureStore } from '@reduxjs/toolkit';
import postReducer from './postSlice';
import commentReducer from './commentSlice';

export const store = configureStore({
  reducer: {
    posts: postReducer,
    comments: commentReducer,
  },
});

import { configureStore } from '@reduxjs/toolkit';
import postReducer from './postSlice';
import commentReducer from './commentSlice';

export const store = configureStore({
  reducer: {
    posts: postReducer,
    comments: commentReducer,
  },
});
﻿
2단계: 게시물을 관리하기 위한 슬라이스를 생성합니다 redux/postSlice.js.
JS
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import Parse from '../ParseConfig';

export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const query = new Parse.Query('Post');
  const results = await query.find();
  return results.map(post => ({
    id: post.id,
    title: post.get('title'),
    content: post.get('content'),
  }));
});

const postSlice = createSlice({
  name: 'posts',
  initialState: {
    list: [],
    status: null,
  },
  reducers: {},
  extraReducers: {
    [fetchPosts.fulfilled]: (state, action) => {
      state.list = action.payload;
      state.status = 'success';
    },
  },
});

export default postSlice.reducer;

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import Parse from '../ParseConfig';

export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const query = new Parse.Query('Post');
  const results = await query.find();
  return results.map(post => ({
    id: post.id,
    title: post.get('title'),
    content: post.get('content'),
  }));
});

const postSlice = createSlice({
  name: 'posts',
  initialState: {
    list: [],
    status: null,
  },
  reducers: {},
  extraReducers: {
    [fetchPosts.fulfilled]: (state, action) => {
      state.list = action.payload;
      state.status = 'success';
    },
  },
});

export default postSlice.reducer;
﻿
3단계: 댓글을 관리하기 위한 슬라이스를 생성합니다 redux/commentSlice.js.
JS
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import Parse from '../ParseConfig';

export const fetchComments = createAsyncThunk('comments/fetchComments', async (postId) => {
  const query = new Parse.Query('Comment');
  query.equalTo('post', { __type: 'Pointer', className: 'Post', objectId: postId });
  const results = await query.find();
  return results.map(comment => ({
    id: comment.id,
    content: comment.get('content'),
    postId: postId,
  }));
});

const commentSlice = createSlice({
  name: 'comments',
  initialState: {
    list: [],
    status: null,
  },
  reducers: {},
  extraReducers: {
    [fetchComments.fulfilled]: (state, action) => {
      state.list = action.payload;
      state.status = 'success';
    },
  },
});

export default commentSlice.reducer;

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import Parse from '../ParseConfig';

export const fetchComments = createAsyncThunk('comments/fetchComments', async (postId) => {
  const query = new Parse.Query('Comment');
  query.equalTo('post', { __type: 'Pointer', className: 'Post', objectId: postId });
  const results = await query.find();
  return results.map(comment => ({
    id: comment.id,
    content: comment.get('content'),
    postId: postId,
  }));
});

const commentSlice = createSlice({
  name: 'comments',
  initialState: {
    list: [],
    status: null,
  },
  reducers: {},
  extraReducers: {
    [fetchComments.fulfilled]: (state, action) => {
      state.list = action.payload;
      state.status = 'success';
    },
  },
});

export default commentSlice.reducer;
﻿
3.3. React Router를 사용한 라우팅 구현
1단계: 라우팅을 설정합니다 App.js.
JS
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import PostList from './components/PostList';
import PostDetails from './components/PostDetails';
import PostForm from './components/PostForm';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={PostList} />
        <Route path="/post/:id" component={PostDetails} />
        <Route path="/new-post" component={PostForm} />
      </Switch>
    </Router>
  );
}

export default App;

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import PostList from './components/PostList';
import PostDetails from './components/PostDetails';
import PostForm from './components/PostForm';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={PostList} />
        <Route path="/post/:id" component={PostDetails} />
        <Route path="/new-post" component={PostForm} />
      </Switch>
    </Router>
  );
}

export default App;
﻿
3.4. 컴포넌트 생성하기
1단계: 모든 블로그 게시물을 표시하기 위해 PostList 컴포넌트를 생성합니다.
JS
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchPosts } from '../redux/postSlice';
import { Link } from 'react-router-dom';

const PostList = () => {
  const dispatch = useDispatch();
  const posts = useSelector(state => state.posts.list);

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  return (
    <div>
      <h1>Blog Posts</h1>
      <Link to="/new-post">Create New Post</Link>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link to={`/post/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default PostList;
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchPosts } from '../redux/postSlice';
import { Link } from 'react-router-dom';

const PostList = () => {
  const dispatch = useDispatch();
  const posts = useSelector(state => state.posts.list);

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  return (
    <div>
      <h1>Blog Posts</h1>
      <Link to="/new-post">Create New Post</Link>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link to={`/post/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default PostList;
﻿
단계 2: PostDetails 구성 요소를 만들어 특정 게시물의 세부정보를 표시합니다.
JS
import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { fetchComments } from '../redux/commentSlice';

const PostDetails = () => {
  const { id } = useParams();
  const dispatch = useDispatch();
  const comments = useSelector(state => state.comments.list);

  useEffect(() => {
    dispatch(fetchComments(id));
  }, [dispatch, id]);

  return (
    <div>
      <h1>Post Details</h1>
      <p>Comments:</p>
      <ul>
        {comments.map(comment => (
          <li key={comment.id}>{comment.content}</li>
        ))}
      </ul>
    </div>
  );
};

export default PostDetails;
import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { fetchComments } from '../redux/commentSlice';

const PostDetails = () => {
  const { id } = useParams();
  const dispatch = useDispatch();
  const comments = useSelector(state => state.comments.list);

  useEffect(() => {
    dispatch(fetchComments(id));
  }, [dispatch, id]);

  return (
    <div>
      <h1>Post Details</h1>
      <p>Comments:</p>
      <ul>
        {comments.map(comment => (
          <li key={comment.id}>{comment.content}</li>
        ))}
      </ul>
    </div>
  );
};

export default PostDetails;
﻿
단계 3: PostForm 구성 요소를 만들어 게시물을 생성하고 편집합니다.
JS
import React, { useState } from 'react';
import Parse from '../ParseConfig';
import { useHistory } from 'react-router-dom';

const PostForm = () => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const history = useHistory();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Post = Parse.Object.extend('Post');
    const post = new Post();
    post.set('title', title);
    post.set('content', content);

    try {
      await post.save();
      history.push('/');
    } catch (error) {
      console.error('Error creating post:', error);
    }
  };

  return (
    <div>
      <h1>Create New Post</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Title</label>
          <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
        </div>
        <div>
          <label>Content</label>
          <textarea value={content} onChange={(e) => setContent(e.target.value)} />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default PostForm;

import React, { useState } from 'react';
import Parse from '../ParseConfig';
import { useHistory } from 'react-router-dom';

const PostForm = () => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const history = useHistory();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Post = Parse.Object.extend('Post');
    const post = new Post();
    post.set('title', title);
    post.set('content', content);

    try {
      await post.save();
      history.push('/');
    } catch (error) {
      console.error('Error creating post:', error);
    }
  };

  return (
    <div>
      <h1>Create New Post</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Title</label>
          <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
        </div>
        <div>
          <label>Content</label>
          <textarea value={content} onChange={(e) => setContent(e.target.value)} />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default PostForm;
﻿
4. 테스트 및 배포
4.1. 애플리케이션 테스트
1단계: 애플리케이션을 로컬에서 테스트하여 모든 기능이 작동하는지 확인합니다:
게시물 생성, 편집 및 삭제 테스트.
각 게시물에 대한 댓글이 올바르게 표시되는지 확인합니다.
다양한 경로 간의 탐색 테스트.
4.2. 프로덕션을 위한 애플리케이션 빌드
1단계: 프로덕션을 위한 애플리케이션을 빌드합니다.
MacOS
npm run build

npm run build
﻿
2단계: 빌드된 애플리케이션을 Back4app Containers와 같은 호스팅 서비스에 배포합니다.
4.3. Back4App을 프로덕션에 맞게 구성하기
Back4app은 이미 프로덕션 준비가 완료된 환경이지만, 코드를 살펴보고 필요한 환경 변수와 키를 업데이트할 수 있습니다.
5. 결론
요약:이 튜토리얼은 ReactJS와 Back4App을 사용하여 완전한 블로깅 플랫폼 SPA를 만드는 과정을 안내했습니다. Back4App에서 백엔드를 설정하고 구성하는 방법, Redux로 전역 상태를 관리하는 방법, React Router로 라우팅을 구현하는 방법, CRUD 작업을 수행하는 방법을 배웠습니다. 이제 이 플랫폼은 사용자 인증, 고급 댓글 시스템 등과 같은 추가 기능으로 확장할 수 있습니다.
다음 단계:
Back4App을 사용하여 사용자 인증 추가 탐색하기.
실시간 업데이트로 댓글 시스템 향상하기.
검색 엔진 가시성을 개선하기 위한 SEO 기능 구현하기.
6. 소스 코드 및 추가 리소스
GitHub 리포지토리:GitHub에서 애플리케이션의 전체 소스 코드에 대한 링크를 제공합니다.
추가 리소스:
﻿ReactJS 문서﻿
﻿Redux 문서﻿
﻿React Router 문서﻿
﻿Back4App 문서﻿
7. 자주 묻는 질문 / 문제 해결
일반적인 문제:
Back4App에 연결하는 오류: 애플리케이션 ID와 JavaScript 키를 다시 확인하세요.
Redux 상태가 업데이트되지 않음: 액션과 리듀서가 올바르게 구성되었는지 확인하세요.
지원: 문제를 겪으시면 Back4App 지원팀에 문의하시거나 관련 개발자 커뮤니티에서 질문하실 수 있습니다.
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter와 Back4App으로 소셜 네트워킹 앱 만들기
Flutter에서 List.generate를 사용하여 데이터 처리하는 방법과 Back4app 활용하기