Solid.js 프론트엔드를 구축하고 백엔드에 연결하는 방법

이 가이드에서는 solid js를 사용하여 할 일 목록 애플리케이션을 구축하고 back4app에서 제공하는 강력한 백엔드에 연결합니다 이 튜토리얼은 기본 crud(생성, 읽기, 업데이트, 삭제) 작업을 다루고 명확하고 기능적인 사용자 인터페이스를 설계하는 방법을 안내하기 때문에 이상적인 시작점으로 설계되었습니다 마지막에는 관리되는 백엔드 서비스를 통합하는 방법을 보여주는 완전한 작동 애플리케이션을 갖게 되며, solid js를 활용하여 반응형 프론트엔드를 구현합니다 풀스택 애플리케이션을 개발하는 것은 백엔드를 설정하고, 데이터베이스를 관리하고, 인증을 처리하고, 인프라를 배포하는 복잡성 때문에 도전적일 수 있습니다 이 과정을 단순화하기 위해 우리는 back4app을 사용합니다 이는 확장 가능한 백엔드 서비스(baas) 솔루션 , 이를 통해 호스팅, 데이터베이스 및 api를 관리하는 동안 프론트엔드를 제작하는 데 집중할 수 있습니다 back4app은 즉시 사용할 수 있는 데이터베이스, 인증, 서버 측 논리를 위한 클라우드 코드 및 원활한 통합을 위한 sdk를 포함한 포괄적인 백엔드 서비스를 제공합니다 또한 컨테이너화된 배포를 지원하여 풀스택 애플리케이션 호스팅을 위한 유연한 선택이 됩니다 이 도구들을 사용하면 서버 유지 관리에 대한 걱정 없이 애플리케이션을 신속하게 개발하고 배포할 수 있습니다 주요 내용 이 튜토리얼을 따라하면 다음을 배울 수 있습니다 vite를 사용하여 현대적인 solid js 프로젝트를 초기화합니다 애플리케이션의 데이터를 처리하기 위해 백엔드 서비스를 원활하게 통합합니다 동적이고 상호작용적인 사용자 인터페이스를 위한 필수 crud 작업을 구현합니다 컨테이너화된 워크플로우를 사용하여 할 일 목록 애플리케이션을 배포합니다 전제 조건 시작하기 전에 다음 도구와 기술을 갖추어야 합니다 node js 및 npm nodejs org https //nodejs org/ 에서 node js (lts 권장)를 설치하고 node v 및 npm v 를 터미널에서 실행하여 확인합니다 기본 solid js 지식 구성 요소, 반응 신호 ( createsignal ) 및 jsx 구문에 대한 친숙함이 필요합니다 solid js가 처음이라면 기본 개념을 먼저 검토하는 것이 좋습니다 back4app 계정 back4app https //www back4app com/ 에 가입하여 백엔드 서비스를 설정하고 관리합니다 이러한 전제 조건이 갖추어지면 프로젝트를 설정하고 빌드를 시작할 준비가 된 것입니다 프로젝트 설정 로컬 개발 환경을 설정하고 vite를 사용하여 solid js 프로젝트를 초기화하여 빠른 개발 경험을 시작하세요 다음이 설치되어 있는지 확인하세요 node js (lts 버전) 이(가) 머신에 설치되어 있습니다 필요하다면 nodejs org https //nodejs org/ 에서 다운로드하여 설치하세요 설치를 확인하세요 node v npm v 다음 명령어를 사용하여 solid js 프로젝트를 초기화하세요 vite 터미널에서 다음 명령어를 실행하세요 (원하는 프로젝트 이름으로 todo app 을(를) 교체하세요) npm create vite\@latest todo app template solid 프로젝트 디렉토리로 변경하세요 cd todo app 필요한 모든 종속성을 설치하세요 npm install 설정을 확인하기 위해 개발 서버를 시작하세요 npm run dev 이제 solid js 애플리케이션이 로컬에서 실행되고 있어야 합니다 브라우저에서 표시된 url을 열어 확인하세요 다음으로, 데이터 저장 및 api 상호작용을 관리하기 위해 back4app에서 백엔드를 설정할 것입니다 todo 백엔드 만들기 back4app은 parse 에 의해 구동되는 완전 관리형 백엔드 서비스를 제공하며, nosql 데이터베이스, 인증, 클라우드 코드 및 자동 생성된 api를 즉시 제공합니다 이 섹션에서는 task 데이터 모델을 생성하여 할 일 목록 항목을 저장하고 이를 solid js 프론트엔드와 연결하는 방법을 안내합니다 백엔드 애플리케이션 설정하기 로그인 하여 back4app 대시보드 https //www back4app com/ 를 클릭하고 "새 앱 만들기" 애플리케이션 이름 지정하기 (예 todosolidapp ) 및 nodejs/parse 를 백엔드 유형으로 선택합니다 앱이 생성되면 "데이터베이스" > "브라우저" 클릭하여 "클래스 만들기" 를 선택하고 "사용자 정의" 를 선택합니다 클래스를 task 로 이름 짓고 클래스 수준 권한 을 설정하여 공개 읽기 및 쓰기를 허용합니다 (이 설정은 나중에 조정할 수 있습니다) "task" 클래스에 다음 필드를 추가합니다 title (문자열) – 작업 제목 description (문자열) – 작업의 세부사항 completed (부울) – 작업이 완료되었는지 여부를 나타내는 상태 duedate (날짜) – 작업의 마감일 "저장" 을 클릭하여 스키마를 완료합니다 solid js와 back4app 통합하기 당신의 solid js 프로젝트에 back4app을 통합하려면 parse javascript sdk 를 사용하여 백엔드와 통신하세요 npm을 통해 sdk를 설치하세요 npm install parse sdk를 구성하려면 application id 와 javascript key 로 초기화하십시오 이러한 정보는 app settings > security & keys 에서 back4app 대시보드에서 가져올 수 있습니다 당신의 src/index jsx (또는 동등한 진입 파일)에서 parse를 다음과 같이 가져오고 구성하십시오 import { render } from "solid js/web"; import ' /index css' import app from " /app"; 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; render(() => \<app />, document getelementbyid("root")); 백엔드가 구성되었으므로 solid js에서 to do list ui를 구축하고 crud 작업을 구현할 준비가 되었습니다 solid js로 프론트엔드 개발하기 이제 백엔드가 연결되었으므로 solid js를 사용하여 to do list 애플리케이션의 사용자 인터페이스를 구축하십시오 상태를 반응형 신호로 관리하면서 작업을 추가, 표시, 업데이트 및 삭제하는 구성 요소를 생성할 것입니다 구성 요소 정리하기 귀하의 애플리케이션은 다음과 같은 주요 구성 요소로 구성됩니다 taskform jsx – 새로운 작업 추가를 관리합니다 tasklist jsx – 모든 작업을 표시하고 완료하거나 제거할 수 있는 제어 기능을 제공합니다 taskitem jsx – 개별 작업을 나타내며 완료로 표시하거나 삭제하는 작업을 수행합니다 components 폴더를 src 안에 생성하고 다음 파일을 추가하세요 mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx solid js로 상태 관리하기 solid js의 createsignal 및 createeffect 를 사용하여 상태 관리 및 부작용을 처리하세요 app jsx 에서 상태를 설정하는 것으로 시작하세요 import { createsignal, onmount } from "solid js"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = createsignal(\[]); 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); } }; onmount(fetchtasks); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks()} fetchtasks={fetchtasks} /> \</div> ); } export default app; 작업 양식 구성 요소 만들기 taskform jsx , 작업을 추가하기 위한 제어된 양식을 만듭니다 createsignal 로 입력 값을 관리하고 back4app에 데이터를 제출합니다 import { createsignal } from "solid js"; import parse from "parse/dist/parse min js"; function taskform(props) { const \[title, settitle] = createsignal(""); const \[description, setdescription] = createsignal(""); const handlesubmit = 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(); props fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title()} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description()} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; 작업 목록 표시 tasklist jsx , 각 항목에 대해 taskitem 구성 요소를 사용하여 작업 목록을 렌더링합니다 import taskitem from " /taskitem"; function tasklist(props) { return ( \<div> {props tasks length === 0 ? ( \<p>no tasks available\</p> ) ( props tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={props fetchtasks} /> )) )} \</div> ); } export default tasklist; 작업 항목 구성 요소 만들기 에서 taskitem jsx , 작업을 완료로 표시하거나 삭제하는 작업을 설정합니다 import parse from "parse/dist/parse min js"; function taskitem(props) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(props task id); tasktoupdate set("completed", !props task completed); await tasktoupdate save(); props fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(props task id); await tasktodelete destroy(); props fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div class={`task item ${props task completed ? "completed" ""}`}> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \<button onclick={handlecomplete}> {props task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; 애플리케이션 스타일링 다음 스타일을 index css 파일에 추가하세요 src 폴더 / center the content and add spacing / 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; box sizing border box; 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; } container p { font size 1rem; } task item { display flex; flex direction column; align items center; justify content 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; } } css 파일을 src/index jsx 에 가져옵니다 import " /index css"; ui 최종화 당신의 solid js 할 일 목록 애플리케이션은 이제 back4app과 통합된 동적 프론트엔드와 사용자 정의 스타일을 갖추고 있습니다 이 앱은 작업을 추가, 표시, 업데이트 및 삭제할 수 있으며 효율적인 프론트엔드 백엔드 통신을 유지합니다 다음으로, back4app의 웹 배포 플랫폼을 사용하여 solid js 앱을 배포합니다 back4app 웹 배포에서 프론트엔드 배포 back4app 웹 배포는 애플리케이션을 배포하기 위한 완전 관리형 컨테이너화된 환경을 제공합니다 docker 기반 배포를 통해 solid js 프론트엔드를 패키징하고 손쉽게 배포할 수 있습니다 생산을 위한 vite 구성 vite로 구축된 solid js 애플리케이션은 기본적으로 개발 모드에서 실행됩니다 생산을 위해 정적 버전을 빌드하고 nginx와 같은 경량 웹 서버로 제공하십시오 적절한 기본 경로를 설정하려면 vite config js 를 업데이트하십시오 import { defineconfig } from 'vite'; import solidplugin from 'vite plugin solid'; export default defineconfig({ plugins \[solidplugin()], base ' /', // ensures correct asset paths in containerized environments }); 생산 준비가 완료된 파일 생성 npm run build 애플리케이션을 위한 dockerfile 생성 프로젝트 루트에 dockerfile 을 생성하여 앱이 어떻게 컨테이너화되는지 정의합니다 \# use an official lightweight node js image to build the app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# use nginx to serve the static files from nginx\ alpine \# copy custom nginx config for spa routing copy nginx conf /etc/nginx/conf d/default conf \# copy built app from build stage copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] dockerfile을 생성한 후, nginx를 구성하여 solid js 애플리케이션의 루트 index html 파일로 요청을 올바르게 라우팅합니다 이를 위해 프로젝트의 루트 디렉토리에 nginx conf 파일을 생성하고 아래의 코드 블록을 붙여넣습니다 server { listen 80; server name localhost; root /usr/share/nginx/html; index index html; \# gzip settings for better performance gzip on; gzip vary on; gzip min length 10240; gzip proxied expired no cache no store private auth; gzip types text/plain text/css text/xml text/javascript application/x javascript application/xml application/javascript; gzip disable "msie \[1 6]\\ "; \# handle static file requests location \\ (?\ jpg|jpeg|gif|png|ico|svg|woff2|woff|eot|ttf|css|js)$ { expires 30d; add header cache control "public, max age=2592000"; try files $uri =404; } \# redirect all requests to index html for spa routing location / { try files $uri $uri/ /index html; } \# error pages error page 404 /index html; error page 500 502 503 504 /50x html; location = /50x html { root /usr/share/nginx/html; } } 로컬에서 컨테이너 테스트하기 배포 전에 docker 컨테이너를 빌드하고 테스트합니다 docker build t todo solid frontend 컨테이너 실행 docker run p 8080 80 todo solid frontend 브라우저에서 http //localhost 8080 에 방문하여 앱이 올바르게 제공되는지 확인하세요 github에 푸시하고 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 웹 배포를 사용하여 배포합니다 로그인 하세요 back4app 웹 배포 https //www back4app com/containers "새 앱 만들기"를 클릭하고, 이름을 제공한 후 github 리포지토리 를 선택하세요 back4app이 귀하의 리포지토리에 접근할 수 있도록 승인하고 todo solid 리포를 선택하세요 "dockerfile 배포"를 선택하고 빌드 설정을 확인하세요 "배포"를 클릭하여 빌드 프로세스를 시작하세요 배포 모니터링 및 관리 배포 후 back4app 대시보드를 사용하여 디버깅을 위한 로그 보기 컨테이너 성능 및 리소스 사용 모니터링 새 커밋으로 재배포 트리거 원하는 경우 사용자 정의 도메인 구성 애플리케이션 테스트 및 디버깅 배포 후, solid js 앱을 철저히 테스트하세요 api 연결 확인 브라우저의 개발자 콘솔(f12 → 네트워크)을 열어 작업 중 api 호출을 확인하세요 작업 추가 및 검색 ui를 사용하여 작업을 추가한 후, 새로 고침하고 back4app의 데이터베이스 브라우저에서 데이터 지속성을 확인하세요 crud 작업 작업 완료 및 삭제를 테스트하여 업데이트가 백엔드에 반영되는지 확인하세요 엣지 케이스 처리 양식 입력을 검증하고 브라우저 개발자 도구를 사용하여 느린 네트워크 조건을 시뮬레이션하세요 문제가 발생하면 back4app 로그를 참조하거나 api 구성을 검토하세요 back4app 서비스 사용을 위한 모범 사례 애플리케이션의 성능과 보안을 향상시키기 위해 api 호출 최적화 여러 작업에 대해 배치 요청을 사용하고 쿼리에서 필요한 필드만 선택하세요 환경 변수 보안 민감한 자격 증명을 환경 변수에 저장하세요 vite를 사용하여 env 파일을 만드세요 vite parse app id=your app id vite parse js key=your js key 자동 확장 구현 높은 트래픽 시나리오를 위해 back4app 웹 배포에서 자동 확장을 활성화합니다 보안 강화 데이터 수정을 제한하고 필요에 따라 acl을 설정하기 위해 클래스 수준 권한(clps)을 사용합니다 클라우드 코드 활용 성능 향상 및 api 노출 감소를 위해 복잡한 로직을 클라우드 코드로 오프로드합니다 결론 이제 solid js를 프론트엔드로 사용하고 back4app의 강력한 백엔드 서비스를 이용하여 전체 스택 할 일 목록 애플리케이션을 구축했습니다 이 튜토리얼에서는 solid js 프로젝트 초기화 및 parse sdk 통합에서 back4app의 컨테이너화된 워크플로를 통해 앱을 배포하는 여정을 다루었습니다 진행하면서 고급 사용자 인증, 실시간 업데이트 및 타사 통합과 같은 기능을 추가하여 애플리케이션을 더욱 향상시키는 것을 고려하세요 자세한 내용과 지원을 원하시면 back4app 문서 https //www back4app com/docs 를 탐색하세요