How to Build a Redwood.js Frontend and Connect It to a Backend?

이 튜토리얼에서는 redwood js를 사용하여 할 일 목록 애플리케이션을 구축하고 back4app의 관리형 백엔드에 연결합니다 이 실습 가이드는 redwood js 프로젝트 설정부터 백엔드 통신을 위한 parse 통합까지 모든 단계를 안내하므로 동적이고 반응적인 사용자 인터페이스를 만드는 데 집중할 수 있습니다 redwood js는 현대적인 react 기반 프론트엔드와 강력한 백엔드 아키텍처를 결합하여 전체 스택 개발을 단순화하도록 설계되었습니다 이 튜토리얼에서는 back4app을 사용하여 백엔드 서비스를 관리하여 서버 인프라를 관리하는 번거로움 없이 필수 crud 작업을 수행할 수 있습니다 주요 내용 이 가이드를 마치면 다음을 수행할 수 있습니다 업계 표준 도구로 현대적인 redwood js 프로젝트를 초기화합니다 parse javascript sdk를 사용하여 redwood js 프론트엔드를 back4app 백엔드에 연결합니다 할 일 목록을 관리하기 위해 crud 작업을 구현합니다 to do list redwood js 앱을 컨테이너화하고 back4app 웹 배포를 통해 배포합니다 전제 조건 시작하기 전에 다음 사항을 확인하세요 node js 및 npm/yarn 이 설치되어 있어야 합니다 설치 여부는 node v 및 npm v 또는 yarn v 로 확인하세요 기본적인 redwood js 지식 , 프로젝트 구조, 라우팅 및 컴포넌트를 포함합니다 react 개념에 대한 이해가 도움이 됩니다 백엔드 서비스를 설정하고 관리하기 위한 back4app 계정 이 필요합니다 필요시 back4app https //www back4app com/ 에서 가입하세요 이러한 전제 조건이 갖춰지면 redwood js 프로젝트를 설정하고 확장 가능한 백엔드에 연결할 준비가 된 것입니다 프로젝트 설정 새로운 redwood js 애플리케이션을 생성하는 것으로 시작하세요 터미널을 열고 다음 명령을 실행하세요 todo app 을 원하는 프로젝트 이름으로 바꾸세요 yarn create redwood app todo app 프로젝트 디렉토리로 이동하세요 cd todo app 모든 종속성을 설치하세요 yarn install 개발 서버를 실행하여 프로젝트가 올바르게 설정되었는지 확인하세요 yarn rw dev 터미널에 표시된 url을 방문하여 redwood js 앱이 실행 중인지 확인하세요 back4app에서 todo 백엔드 설정하기 back4app은 애플리케이션의 데이터 처리를 간소화하는 관리형 parse 백엔드를 제공합니다 이 섹션에서는 할 일 목록을 저장할 데이터 모델을 생성합니다 백엔드 애플리케이션 만들기 당신의 back4app 대시보드 https //www back4app com/ 에 로그인하고 "새 앱 만들기" 애플리케이션 이름을 지정하세요 (예 todoredwoodapp ) 그리고 백엔드 유형으로 nodejs/parse 를 선택하세요 "데이터베이스" > "브라우저" 섹션에서 "클래스 만들기" 를 클릭하고 "사용자 정의" 을 선택하세요 클래스를 task 로 이름 짓고 클래스 수준 권한을 설정하여 공개 읽기 및 쓰기를 허용하세요 (필요에 따라 이러한 설정을 나중에 조정하세요) 다음 필드를 task 클래스에 추가하세요 title (문자열) – 작업의 제목 description (문자열) – 작업에 대한 세부정보 completed (부울) – 작업이 완료되었는지 여부 duedate (날짜) – 작업의 마감일 스키마를 완료하려면 "저장" 을 클릭하세요 redwood js와 back4app 통합하기 redwood js 앱을 back4app에 연결하려면, parse javascript sdk를 설치하세요 yarn add parse 다음으로, web/src 디렉토리에 새 파일을 만들어 parse를 구성하세요 파일 이름은 parseclient js 로 하고 다음 코드를 추가하세요 'your application id' 및 'your javascript key' 를 back4app 대시보드에서 받은 자격 증명으로 교체하세요 ( 앱 설정 > 보안 및 키 ) // web/src/parseclient js import parse from 'parse/dist/parse min js' const parse app id = 'your application id' const parse js key = 'your javascript key' const parse server url = 'https //parseapi back4app com/' parse initialize(parse app id, parse js key) parse serverurl = parse server url export default parse 이 구성은 redwood js 구성 요소에서 parse 메서드를 호출할 수 있게 해줍니다 redwood js로 프론트엔드 구축하기 백엔드가 연결되었으니, 이제 할 일 목록 인터페이스를 구축할 시간입니다 redwood js에서는 페이지가 web/src/pages 디렉토리 아래에 배치됩니다 할 일 페이지 만들기 새 폴더를 생성하십시오 todopage 에 web/src/pages 파일을 추가하십시오 todopage jsx mkdir p web/src/pages/todopage touch web/src/pages/todopage/todopage jsx 열기 web/src/pages/todopage/todopage jsx 및 다음 코드를 추가하세요 // web/src/pages/todopage/todopage jsx import { usestate, useeffect } from 'react' import parse from 'src/parseclient' const todopage = () => { const \[tasks, settasks] = usestate(\[]) const \[title, settitle] = usestate('') const \[description, setdescription] = usestate('') useeffect(() => { fetchtasks() }, \[]) const fetchtasks = async () => { try { const task = parse object extend('task') const query = new parse query(task) const results = await query find() settasks(results map((task) => ({ id task id, task tojson() }))) } catch (error) { console error('error fetching tasks ', error) } } const addtask = async (e) => { e preventdefault() try { const task = parse object extend('task') const task = new task() task set('title', title) task set('description', description) task set('completed', false) await task save() settitle('') setdescription('') fetchtasks() } catch (error) { console error('error adding task ', error) } } const toggletask = async (id, currentstatus) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) task set('completed', !currentstatus) await task save() fetchtasks() } catch (error) { console error('error toggling task ', error) } } const deletetask = async (id) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) await task destroy() fetchtasks() } catch (error) { console error('error deleting task ', error) } } return ( \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={addtask} classname="form"> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<div key={task id} classname={`task item ${task completed ? 'completed' ''}`} \> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={() => toggletask(task id, task completed)}> {task completed ? 'undo' 'complete'} \</button> \<button onclick={() => deletetask(task id)}>delete\</button> \</div> )) )} \</div> \</div> ) } export default todopage 경로 구성하기 todo 페이지에 접근할 수 있도록 하려면, routes jsx 파일을 열고 web/src/routes jsx 에 새로운 경로를 추가하세요 // web/src/routes jsx import todopage from 'src/pages/todopage/todopage' const routes = () => { return ( \<router> \<route path="/" page={todopage} name="todo" /> \<route notfound page={notfoundpage} /> \</router> ); }; export default routes; 전역 스타일 추가하기 전역 스타일을 추가하려면, index css 라는 css 파일에 아래 css 스타일을 추가하세요 web/src 폴더에 / web/src/index css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } 이제 당신의 redwood js 앱은 back4app 백엔드와 상호작용하는 기능적인 할 일 목록 인터페이스를 갖추고 있습니다 redwood js 앱을 back4app에 컨테이너화하고 배포하기 back4app 웹 배포는 앱 배포를 간소화하는 컨테이너화된 환경을 제공합니다 이 섹션에서는 redwood js 앱을 docker 컨테이너로 패키징하고 배포할 것입니다 생산을 위한 앱 준비하기 먼저, redwood js 앱을 프로덕션용으로 빌드하세요 yarn rw build web dockerfile 생성하기 redwood js 프로젝트를 위해 docker를 설정하려면, 터미널에서 docker 설정 명령을 실행해야 합니다 yarn rw setup docker 설정 명령은 여러 작업을 수행합니다 dockerfile, dockerignore, docker compose dev yml, 및 docker compose prod yml의 네 개 파일을 생성합니다 api 측에 @redwoodjs/api server 패키지를 추가하고, 웹 측에 @redwoodjs/web server 패키지를 추가합니다 redwood toml에서 browser open 설정을 업데이트합니다 이 설정이 true로 남아 있으면, docker compose dev yml을 실행할 때 개발 서버가 중단됩니다 이 명령은 redwood js 애플리케이션을 빌드하고 최소 node js 런타임을 사용하여 프로덕션 이미지를 준비하는 dockerfile을 제공합니다 다음과 같이 dev compose 파일을 시작할 수 있습니다 docker compose f /docker compose dev yml up 브라우저에서 http //localhost 8390 을 열어 redwood js 앱이 올바르게 실행되고 있는지 확인하세요 back4app 웹 배포를 통한 배포 프로젝트를 github에 푸시하세요 git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main 그런 다음, back4app 웹 배포 https //www back4app com/containers 에 로그인하고 다음 단계를 따르세요 "새 앱 만들기"를 클릭하고 프로젝트 세부정보를 입력하세요 "github 리포지토리"를 선택하고 back4app을 승인하세요 "todo redwood" 리포지토리를 선택하세요 "dockerfile 배포"를 선택하고 빌드 설정을 확인하세요 "배포"를 클릭하여 배포 프로세스를 시작하세요 배포 후, back4app 대시보드를 사용하여 로그를 모니터링하고, 빌드를 관리하며, 필요시 사용자 도메인을 설정하세요 애플리케이션 테스트 및 디버깅 배포가 완료되면, 앱이 예상대로 작동하는지 확인하세요 api 연결 브라우저 개발자 도구를 사용하여 작업 추가, 전환 및 삭제를 위한 api 요청이 성공적인지 확인합니다 데이터 지속성 ui를 통해 작업을 추가하고 새로 고침하여 작업이 back4app 데이터베이스에 지속되는지 확인합니다 crud 작업 콘솔이나 api 로그에서 오류를 확인하면서 작업 전환 및 삭제를 테스트합니다 엣지 케이스 입력 유효성 검사가 빈 제출을 방지하는지 확인합니다 모범 사례 및 최적화 팁 안전하고 효율적인 애플리케이션을 위해 다음 사항을 고려하세요 api 요청 최적화 배치 처리를 사용하고 필요한 필드만 가져옵니다 환경 변수 환경 변수를 사용하여 민감한 자격 증명(애플리케이션 id 및 javascript 키)을 보호합니다 액세스 제어 권한이 있는 사용자만 데이터를 수정할 수 있도록 동적 acl을 구현합니다 클라우드 코드 성능과 보안을 개선하기 위해 복잡한 로직을 back4app 클라우드 코드로 오프로드합니다 결론 이제 redwood js와 back4app 백엔드를 통합하여 전체 스택 할 일 목록 애플리케이션을 구축했습니다 이 튜토리얼에서는 프로젝트 초기화 및 백엔드 통합부터 컨테이너화된 배포까지 모든 내용을 다루었습니다 개발을 계속하면서 고급 사용자 관리, 실시간 업데이트 및 타사 통합과 같은 기능을 추가하는 것을 고려하세요 자세한 내용은 back4app 문서 https //www back4app com/docs 및 redwood js 리소스를 탐색하세요