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

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 통합을 위한 필요한 종속성을 설치합니다 npm install parse @reduxjs/toolkit react redux react router dom 2 4 parse sdk 구성 1단계 다음 이름의 파일을 생성합니다 parseconfig js src 폴더에 parse sdk를 구성합니다 import parse from 'parse'; parse initialize("your app id", "your javascript key"); parse serverurl = 'https //parseapi back4app com/'; export default parse; 3\ 블로깅 플랫폼 개발 3 1 프로젝트 구조 다음 구조로 프로젝트를 구성합니다 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 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 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 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 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 컴포넌트를 생성합니다 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 구성 요소를 만들어 특정 게시물의 세부정보를 표시합니다 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 구성 요소를 만들어 게시물을 생성하고 편집합니다 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단계 프로덕션을 위한 애플리케이션을 빌드합니다 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 문서 https //reactjs org/docs/getting started html redux 문서 https //redux js org/ react router 문서 https //reactrouter com/ back4app 문서 https //www back4app com/docs 7\ 자주 묻는 질문 / 문제 해결 일반적인 문제 back4app에 연결하는 오류 애플리케이션 id와 javascript 키를 다시 확인하세요 redux 상태가 업데이트되지 않음 액션과 리듀서가 올바르게 구성되었는지 확인하세요 지원 문제를 겪으시면 back4app 지원팀에 문의하시거나 관련 개발자 커뮤니티에서 질문하실 수 있습니다