Angular 프론트엔드를 구축하고 백엔드에 연결하는 방법?

이 튜토리얼에서는 angular를 사용하여 할 일 목록 애플리케이션을 구축하고 back4app에서 제공하는 관리형 백엔드 서비스에 연결합니다 이 가이드는 필수 crud(생성, 읽기, 업데이트, 삭제) 작업을 마스터하고 angular로 동적이고 반응적인 인터페이스를 만들고자 하는 분들을 위해 설계되었습니다 이 튜토리얼이 끝나면 귀하의 애플리케이션은 데이터 저장, 인증 등을 처리하는 백엔드와 원활하게 통신할 것입니다 풀스택 애플리케이션을 구축하는 것은 종종 복잡한 백엔드 구성 및 데이터베이스 관리를 포함합니다 작업 흐름을 단순화하기 위해 우리는 back4app— 강력한 백엔드 서비스 —를 사용하여 기능이 풍부한 angular 프론트엔드 개발에 집중할 수 있습니다 back4app은 완전 관리형 nosql 데이터베이스, 사용자 인증, 사용자 정의 로직을 위한 cloud code 및 원활한 통합을 위한 sdk를 제공합니다 이를 통해 서버 인프라를 관리하지 않고도 확장 가능한 애플리케이션을 구축하고 배포할 수 있습니다 주요 내용 이 튜토리얼을 따르면 다음과 같은 작업을 수행할 수 있습니다 angular cli를 사용하여 현대적인 angular 프로젝트를 초기화합니다 애플리케이션의 데이터를 관리하기 위해 백엔드 서비스를 원활하게 통합합니다 동적 할 일 목록 을 위한 필수 crud 작업을 구현합니다 컨테이너화된 워크플로우를 사용하여 완전한 기능을 갖춘 애플리케이션을 back4app에 배포합니다 전제 조건 시작하기 전에 다음을 확인하세요 node js 및 npm 이 컴퓨터에 설치되어 있어야 합니다 설치를 확인하려면 node v 및 npm v 를 입력하세요 기본 angular 지식 , 구성 요소, 서비스 및 의존성 주입을 포함합니다 백엔드 서비스를 관리하기 위한 back4app 계정 이 필요합니다 아직 계정이 없다면 back4app https //www back4app com/ 에서 가입하세요 이러한 전제 조건이 준비되면 프로젝트를 시작할 준비가 된 것입니다 프로젝트 설정 로컬 개발 환경을 설정하고 angular cli를 사용하여 새 angular 프로젝트를 초기화하는 것으로 시작하세요 node js (lts 버전) 이 설치되어 있는지 확인하세요 설치되어 있지 않다면 nodejs org https //nodejs org/ 에서 다운로드하세요 아직 설치하지 않았다면 angular cli를 전역적으로 설치하세요 npm install g @angular/cli 새 angular 프로젝트 만들기 ng new todo app routing style=css 프로젝트 디렉토리로 이동하기 cd todo app 설정을 확인하기 위해 개발 서버 시작하기 ng serve 브라우저에서 http //localhost 4200 를 열어 angular 앱이 작동하는 모습을 확인하세요 프론트엔드가 준비되었으니, back4app에서 백엔드를 생성하세요 할 일 백엔드 생성하기 back4app은 parse , nosql 데이터베이스, 인증, 클라우드 코드 및 자동 생성된 api를 포함한 완전 관리형 백엔드 서비스를 제공합니다 백엔드를 설정하려면 다음 단계를 따르세요 로그인 하여 back4app 대시보드 https //www back4app com/ 를 클릭하고 "새 앱 만들기" 앱 이름 지정하기 (예 todoapp ) 및 백엔드 유형으로 nodejs/parse 를 선택하세요 "데이터베이스" > "브라우저"로 이동하여 , "클래스 만들기" 를 클릭하고 "사용자 정의" 를 선택하세요 클래스를 task 로 이름 짓고, 공개 읽기 및 쓰기를 허용하는 권한을 설정하세요 (이후에 수정할 수 있습니다) "task" 클래스에 다음 필드를 추가하세요 title (문자열) – 작업의 제목 description (문자열) – 작업에 대한 세부정보 completed (부울) – 작업 완료 상태 duedate (날짜) – 작업의 마감일 "저장" 을 클릭하여 스키마를 생성하세요 angular과 back4app 통합하기 angular 앱을 back4app 백엔드에 연결하기 위해 parse javascript sdk 를 사용합니다 parse sdk 설치하기 npm install parse angular 프로젝트에서 sdk 구성하기 src/app/app module ts (또는 전용 서비스를 생성하고) back4app 대시보드에서 application id 와 javascript key 로 parse를 초기화합니다 ( app settings > security & keys ) 예를 들어, parse service ts 라는 서비스를 src 디렉토리에 생성합니다 import { injectable } from '@angular/core'; import parse from 'parse'; @injectable({ providedin 'root', }) export class parseservice { constructor() { const parse app id = "your application id"; const parse js key = "your javascript key"; parse initialize(parse app id, parse js key); (parse as any) serverurl = 'https //parseapi back4app com/'; } } 그런 다음, 컴포넌트에서 parseservice를 생성자에 주입하기만 하면 됩니다 이 서비스는 한 번 (애플리케이션 시작 시) 생성자를 실행하여 parse를 초기화합니다 백엔드가 연결되었으므로 이제 to do list ui를 구축하고 crud 작업을 구현할 수 있습니다 프론트엔드 개발하기 angular 애플리케이션은 작업을 추가, 표시, 업데이트 및 삭제하는 컴포넌트와 서비스로 구성됩니다 angular의 컴포넌트 아키텍처와 의존성 주입을 활용하여 원활한 데이터 관리를 할 수 있습니다 컴포넌트 구조화하기 angular cli를 사용하여 다음 컴포넌트를 생성합니다 ng generate component components/task form ng generate component components/task list ng generate component components/task item 작업 양식 구성 요소 이 구성 요소는 새 작업을 추가하기 위한 양식을 렌더링합니다 사용자 입력을 캡처하고 작업 데이터를 back4app에 제출합니다 add task // src/app/components/task form/task form component ts import { component, eventemitter, output } from '@angular/core'; import { formsmodule } from '@angular/forms'; import as parse from 'parse'; @component({ selector 'app task form', templateurl ' /task form component html', styleurls \[' /task form component css'], imports \[formsmodule] }) export class taskformcomponent { title = ''; description = ''; @output() refreshtasks = new eventemitter\<void>(); async onsubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this refreshtasks emit(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } 작업 목록 구성 요소 이 구성 요소는 배열을 반복하여 작업 목록을 표시하고 각 작업을 taskitemcomponent를 사용하여 렌더링합니다 no tasks available // src/app/components/task list/task list component ts import { component, input, oninit } from '@angular/core'; import { commonmodule } from '@angular/common'; import as parse from 'parse'; import { taskitemcomponent } from ' /task item/task item component'; @component({ selector 'app task list', templateurl ' /task list component html', styleurls \[' /task list component css'], imports \[commonmodule, taskitemcomponent] }) export class tasklistcomponent implements oninit { @input() tasks any\[] = \[]; @input() fetchtasks! () => void; ngoninit() void {} } 작업 항목 구성 요소 이 구성 요소는 개별 작업을 나타내며 완료 상태를 전환하거나 작업을 삭제하는 버튼을 제공합니다 {{ task title }} {{ task description }} {{ task completed ? 'undo' 'complete' }} delete // src/app/components/task item/task item component ts import { component, eventemitter, input, output } from '@angular/core'; import as parse from 'parse'; @component({ selector 'app task item', templateurl ' /task item component html', styleurls \[' /task item component css'] }) export class taskitemcomponent { @input() task any; @output() taskchanged = new eventemitter\<void>(); async togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this taskchanged emit(); } catch (error) { console error('error updating task ', error); } } async deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this taskchanged emit(); } catch (error) { console error('error deleting task ', error); } } } 앱 컴포넌트 통합 주 컴포넌트에서 작업의 상태를 관리하고 작업 컴포넌트를 통합합니다 to do list // src/app/app component ts import { component, oninit } from '@angular/core'; import { parseservice } from ' /parse service'; import as parse from 'parse'; import { taskformcomponent } from ' /components/task form/task form component'; import { tasklistcomponent } from ' /components/task list/task list component'; @component({ selector 'app root', imports \[taskformcomponent, tasklistcomponent], templateurl ' /app component html', styleurl ' /app component css' }) export class appcomponent implements oninit { constructor(private parseservice parseservice) {} tasks any\[] = \[]; async fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); this tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } ngoninit() void { this fetchtasks(); } } 애플리케이션 스타일링 컴포넌트 css 파일 또는 src/styles css 에서 스타일을 생성하거나 업데이트합니다 / src/styles css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } 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; } 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/styles css 에서 스타일을 생성하거나 업데이트합니다 back4app 웹 배포에서 프론트엔드 배포하기 back4app 웹 배포는 angular 애플리케이션을 호스팅할 수 있는 컨테이너화된 환경을 제공합니다 프로덕션을 위한 angular 구성 프로덕션 준비가 완료된 angular 앱을 빌드하세요 ng build 이 명령은 컴파일된 angular 앱이 포함된 dist/ 폴더를 생성합니다 도커파일 만들기 프로젝트 루트에 다음 내용을 포함한 dockerfile 을(를) 생성하세요 from node 18 alpine as build workdir /app copy package json package lock json / run npm install g @angular/cli run npm install copy run ng build cmd \["ng", "serve", " host", "0 0 0 0"] 로컬에서 도커 컨테이너 테스트하기 도커 이미지를 빌드하세요 docker build t todo frontend 컨테이너를 실행하세요 docker run p 4201 4200 todo frontend 브라우저에서 http //localhost 4201 을(를) 열어 angular 앱이 올바르게 제공되는지 확인하세요 back4app에 배포하기 git 저장소를 초기화하고, 프로젝트 파일을 추가한 후 커밋하세요 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 브라우저에서 http //localhost 4201 을(를) 열어 angular 앱이 올바르게 제공되는지 확인하세요 로그인 하세요 back4app 웹 배포 https //www back4app com/containers 클릭하세요 "새 앱 만들기" , 프로젝트 이름을 제공하고 github 리포지토리를 선택하세요 back4app을 승인하고 dockerfile 배포 를 선택하세요 빌드 설정을 확인하고 "배포" 를 클릭하여 배포 프로세스를 시작하세요 배포 모니터링 배포 후, back4app 대시보드를 사용하여 디버깅을 위한 로그 보기 컨테이너 성능 및 리소스 사용 모니터링 새 커밋에서 재빌드를 트리거 필요한 경우 사용자 정의 도메인 구성 라이브 애플리케이션에 접근하려면 https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ 테스트 및 디버깅 배포 후, angular 프론트엔드가 back4app 백엔드와 효과적으로 통신하는지 확인하십시오 api 검증 브라우저의 개발자 도구(f12 → 네트워크)를 사용하여 api 요청을 검사하십시오 작업 운영 ui를 통해 작업을 추가, 완료 및 삭제하고 back4app 데이터베이스 브라우저에서 업데이트를 확인하십시오 오류 처리 오류에 대한 콘솔 로그를 확인하고 빈 제출과 같은 엣지 케이스를 테스트하십시오 성능 테스트 브라우저 도구를 사용하여 느린 네트워크 조건을 시뮬레이션하여 응답성을 평가하십시오 angular와 함께 back4app을 사용할 때의 모범 사례 애플리케이션을 최적화하려면 효율적인 요청 여러 작업을 처리하기 위해 배치 작업을 사용하십시오 const tasks = \[task1, task2, task3]; parse object saveall(tasks); 최적화된 쿼리 필요한 필드만 검색하기 query select('title', 'completed'); 환경 관리 민감한 키를 환경 변수에 저장하기 ng app parse app id=your app id ng app parse js key=your js key 보안 데이터 접근을 제한하기 위해 acl을 사용하기 task setacl(new parse acl(parse user current())); 백엔드 오프로드 복잡한 로직을 위해 클라우드 코드를 활용하여 프론트엔드 부하를 줄이세요 결론 이제 angular 프론트엔드를 생성하고 back4app의 백엔드와 통합하며 컨테이너화된 워크플로우를 사용하여 배포함으로써 전체 스택 할 일 목록 애플리케이션을 구축했습니다 이 튜토리얼은 로컬 개발부터 클라우드 배포까지 모든 단계를 안내하여 angular ui와 백엔드 서비스 간의 강력한 상호작용을 보장했습니다 앞으로는 실시간 업데이트, 개선된 인증 및 제3자 통합과 같은 향상을 고려하세요 더 많은 학습을 원하시면 back4app 문서 https //www back4app com/docs 를 방문하고 커뮤니티 리소스를 탐색하세요