Next.js, Vercel 및 Back4App으로 티켓팅 앱 구축하기

이 튜토리얼에서는 티켓팅 시스템 을 구축할 것입니다 next js 를 사용하고, back4app 을 백엔드 서비스로, tailwind css 를 스타일링에 사용할 것입니다 이 앱은 사용자가 티켓을 생성, 업데이트, 조회 및 삭제할 수 있도록 하며, 데이터베이스 관리를 위해 parse server 를 back4app에서 활용합니다 1\ 필수 조건 시작하기 전에 다음 사항을 확인하세요 node js 가 당신의 컴퓨터에 설치되어 있어야 합니다 ( node js 설치 가이드 https //nodejs org/ ) back4app 계정이 필요합니다 ( 무료로 가입하기 https //www back4app com/ ) vercel 배포를 위한 계정이 필요합니다 ( vercel에 가입하기 https //vercel com/ ) 2\ back4app 설정하기 back4app 대시보드에 로그인하고 새 프로젝트를 생성하세요 데이터 브라우저로 이동하여 새로운 클래스 를 생성하세요 클래스 이름은 티켓 이며, 다음 스키마를 사용하세요 필드 이름 유형 제목 문자열 설명 문자열 카테고리 문자열 우선순위 번호 진행 번호 상태 문자열 생성일 날짜 (자동 생성) 업데이트됨 날짜 (자동 생성) 3\ 프론트엔드 설정 (next js) 3 1 새로운 next js 프로젝트 만들기 다음 명령어를 실행하여 새로운 next js 프로젝트를 생성하세요 npx create next app\@latest ticketing app cd ticketing app 3 2 의존성 설치 설치 tailwind css , font awesome , 및 parse sdk 백엔드 작업을 위해 npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome free parse npx tailwindcss init p 3 3 tailwind css 설정 tailwind css 콘텐츠 경로를 구성하기 위해 tailwind config js 파일을 편집하세요 module exports = { content \[ ' /app/ / {js,ts,jsx,tsx}', ' /components/ / {js,ts,jsx,tsx}', ], theme { extend {}, }, plugins \[], } styles/globals css , tailwind 가져오기를 추가하세요 @tailwind base; @tailwind components; @tailwind utilities; 3 4 프로젝트 구조 만들기 제공된 구조를 따라 필요한 디렉토리와 구성 요소를 만드세요 디렉토리 구조 /app /tickets /\[id] page js layout js page js /components deleteblock jsx nav jsx prioritydisplay jsx progressdisplay jsx statusdisplay jsx ticketcard jsx ticketform jsx /lib parseclient js 4\ parse 클라이언트 설정하기 in the /lib folder, create a parseclient js file to configure the parse sdk import parse from 'parse'; // initialize parse sdk parse initialize('your app id', 'your js key'); parse serverurl = 'https //parseapi back4app com'; export default parse; replace 'your app id' and 'your js key' with your back4app project credentials 5\ 주요 구성 요소 만들기 5 1 ticketform this component will handle both creating and updating tickets in /components/ticketform jsx , create the following import { usestate } from 'react'; import parse from ' /lib/parseclient'; export default function ticketform({ ticket }) { const \[title, settitle] = usestate(ticket? title || ''); const \[description, setdescription] = usestate(ticket? description || ''); const handlesubmit = async (e) => { e preventdefault(); const ticket = parse object extend('ticket'); const newticket = ticket || new ticket(); newticket set('title', title); newticket set('description', description); try { await newticket save(); alert('ticket saved successfully!'); } catch (error) { console error('error saving ticket ', error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" value={title} onchange={(e) => settitle(e target value)} placeholder="title" required /> \<textarea value={description} onchange={(e) => setdescription(e target value)} placeholder="description" required /> \<button type="submit">save ticket\</button> \</form> ); } 5 2 ticketcard 이 구성 요소는 개별 티켓 정보를 표시합니다 에서 /components/ticketcard jsx import link from 'next/link'; import progressdisplay from ' /progressdisplay'; export default function ticketcard({ ticket }) { return ( \<div classname="border p 4"> \<h2>{ticket title}\</h2> \<p>{ticket description}\</p> \<progressdisplay progress={ticket progress} /> \<link href={`/tickets/${ticket objectid}`}>edit\</link> \</div> ); } 5 3 deleteblock 티켓 삭제를 위한 확인 구성 요소 에서 /components/deleteblock jsx import parse from ' /lib/parseclient'; export default function deleteblock({ ticketid, ondelete }) { const handledelete = async () => { const query = new parse query('ticket'); const ticket = await query get(ticketid); try { await ticket destroy(); alert('ticket deleted successfully'); ondelete(); } catch (error) { console error('error deleting ticket ', error); } }; return ( \<button onclick={handledelete}>delete ticket\</button> ); } 5 4 progressdisplay 이 구성 요소는 진행 상황을 백분율 막대로 표시합니다 에서 /components/progressdisplay jsx export default function progressdisplay({ progress }) { return ( \<div> \<div classname="w full bg gray 200 rounded"> \<div classname="bg blue 600 text xs font medium text blue 100 text center p 0 5 leading none rounded" style={{ width `${progress}%` }} \> {progress}% \</div> \</div> \</div> ); } 5 4 progressdisplay 6\ 페이지 및 라우팅 6 1 티켓 목록 에서 /app/page js , 티켓 목록을 표시합니다 import { useeffect, usestate } from 'react'; import parse from ' /lib/parseclient'; import ticketcard from ' /components/ticketcard'; export default function home() { const \[tickets, settickets] = usestate(\[]); useeffect(() => { const fetchtickets = async () => { const query = new parse query('ticket'); const results = await query find(); settickets(results); }; fetchtickets(); }, \[]); return ( \<div> \<h1>tickets\</h1> {tickets map(ticket => ( \<ticketcard key={ticket id} ticket={ticket} /> ))} \</div> ); } 6 2 티켓 세부정보 및 편집 에서 /app/tickets/\[id]/page js import { useeffect, usestate } from 'react'; import { userouter } from 'next/router'; import parse from ' / / /lib/parseclient'; import ticketform from ' / / /components/ticketform'; import deleteblock from ' / / /components/deleteblock'; export default function ticketdetail() { const router = userouter(); const { id } = router query; const \[ticket, setticket] = usestate(null); useeffect(() => { if (!id) return; const fetchticket = async () => { const query = new parse query('ticket'); const result = await query get(id); setticket(result); }; fetchticket(); }, \[id]); const handledelete = () => { router push('/'); }; if (!ticket) return \<div>loading \</div>; return ( \<div> \<ticketform ticket={ticket} /> \<deleteblock ticketid={ticket id} ondelete={handledelete} /> \</div> ); } 7\ vercel에 배포하기 7 1 vercel 계정 만들기 vercel 계정이 없다면, vercel com https //vercel com/ 로 가서 계정을 만드세요 github, gitlab 또는 bitbucket으로 가입할 수 있습니다 vercel은 배포를 위해 리포지토리를 직접 연결하는 것을 쉽게 만들어 줍니다 7 2 코드를 github에 푸시하기 vercel에 앱을 배포하려면 github (또는 gitlab/bitbucket)과 같은 버전 관리 플랫폼에 프로젝트가 호스팅되어 있어야 합니다 프로젝트가 아직 github에 없다면, 다음 단계를 따르세요 프로젝트 디렉토리에서 git을 초기화하세요 프로젝트를 github에 추가하세요 7 3 vercel cli 설치 (선택 사항) 명령줄에서 직접 배포하는 것을 선호한다면, vercel cli 를 전역으로 설치하세요 또는 vercel의 대시보드를 통해 배포할 수 있으며, 다음에 다룰 것입니다 7 4 github 리포지토리를 vercel에 연결하기 이동하십시오 vercel https //vercel com/ 클릭하십시오 새 프로젝트 당신의 next js 프로젝트가 포함된 git 저장소를 선택하십시오 프로젝트를 구성하십시오 vercel은 자동으로 이것이 next js 프로젝트임을 감지하고 올바른 빌드 설정을 적용합니다 루트 디렉토리 를 프로젝트의 폴더로 설정하십시오 (필요한 경우) 7 5 환경 변수 설정 당신은 back4app 자격 증명 및 vercel의 다른 환경 변수를 구성해야 합니다 vercel의 프로젝트 설정 , 환경 변수 섹션으로 이동하십시오 다음 환경 변수를 추가하십시오 7 6 env local에서 parse 구성 설정 (선택 사항) 개발 중에 로컬 환경 변수를 사용하는 경우, 다음 변수를 포함하여 루트 프로젝트 디렉토리에 env local 파일을 생성해야 합니다 이 환경 변수는 vercel 대시보드에 설정되면 vercel에서도 사용됩니다 7 7 빌드 설정 구성 (선택 사항) 다음 사항을 확인하십시오 node js 버전 및 빌드 명령 이 올바르게 구성되어 있습니다 (vercel이 자동으로 감지합니다) next js 앱의 경우 기본 설정은 다음과 같아야 합니다 빌드 명령 npm run build 출력 디렉토리 next/ 7 8 프로젝트 배포 github 리포지토리를 연결하면 vercel이 자동으로 빌드 및 배포 프로세스를 트리거합니다 vercel 대시보드에서 빌드 상태를 확인할 수 있습니다 7 9 배포 로그 확인 배포 중 문제가 발생하면 배포 로그를 검사하여 디버깅할 수 있습니다 7 10 배포된 앱에 접근하기 배포가 성공하면 vercel이 next js 앱이 실시간으로 실행되는 고유한 url을 제공합니다 이 url을 방문하여 배포된 티켓팅 앱에 접근할 수 있습니다 예 https //your app name vercel app/ 8\ 원활한 배포 보장 back4app 자격 증명 back4app 환경 변수가 env local(로컬 개발용) 및 vercel 대시보드(프로덕션용)에 올바르게 설정되어 있는지 다시 확인하세요 cors (교차 출처 리소스 공유) back4app이 cors 설정에서 vercel url을 허용하는지 확인하세요 이는 back4app 대시보드의 보안 에서 구성할 수 있습니다 api 테스트 배포하기 전에 back4app api 상호작용을 로컬에서 테스트하여 모든 것이 원활하게 작동하는지 확인하세요 9\ 결론 이 단계들을 통해 next js 티켓팅 앱 이 이제 vercel , back4app 을 백엔드로 사용하여 배포되었습니다 이는 back4app 설정, next js에서 프론트엔드 생성, vercel에서 앱을 실시간으로 배포하는 전체 개발 사이클을 완료합니다 업데이트를 원하시면 github 리포지토리에 변경 사항을 푸시하면 vercel이 자동으로 새로운 배포를 트리거합니다