오공완(with 코드팩토리의 플러터 프로그래밍) #18 (서버 연동하기)

// 이곳에 쓴 내용은 앱 만들기라는 버킷리스트를 달성하기 위해 플러터를 공부하면서 정리하고 있는 내용입니다.

플러터에 대해 아는 것이 거의 없기 때문에 정리하면서 오류가 있을 수 있습니다.

오류를 발견하신 분은 댓글 남겨 주시면 감사하겠습니다.

 

오랜만에 다시 시작이다. 챕터가 얼마 안 남았는데 정말 질질 끌고 있는 기분이다..ㅜ.ㅜ

 

새로운 기능: 캐시, Node.js, REST API

 

사전 준비: 

1. Node.js 설치 및 실행하기

Node.js — Run JavaScript Everywhere (nodejs.org)

Node.js — Run JavaScript Everywhere

다운로드에서 내 환경에 맞는 녀석을 골라서 다운로드하고, 설치

 

2. 깃허브에서 예제 코드를 다운로드하여서 실행하란다. 여기서 설치하면 다른 앱에서도 작동을 하는 건가? 암튼, 하라는 대로 해 보자. 설명이 조금 더 친절했음 좋겠는데.. NestJS 서버 프로젝트를 열어달라고 되어 있는데..

NestJS 서버 프로젝트가 뭘까?

일단, 저 녀석을 읽어 오고.. cd를 이용해서 calendar_scheduler_server 폴더로 들어간다.그리고 node --version을 실행한다. 에러 메시지가 떴는데 불현듯.. 내가 안드로이드 스튜디오를 켠 상태에서 인스톨한 게 문제이지 않을까 하여 다시 안드로이드 스튜디오 재시작 후 실행해 봤는데.. 된다.

3. 재시작 후 다시 cd를 사용해서 경로를 서버 폴더로 바꾸고, 터미널 npm install 실행. 뭔가 뺑글뺑글 돌다가 설치 완료

 

4. 터미널에 npm run start:dev 실행. 아래처럼 뭔가를 또 설치하면서 뭘 묻네.. 액세스 허용을 해 준다.

 

인터넷 브라우저에 http:localhost:3000/api 입력해서 아래와 같이 뜬다면 서버 설정이 완료된 것이라고..

 

  서버 연동 구현하기

 

새로운 창에 기존에 했던 프로젝트 열기(NestJS 프로젝트 창은 그대로 두기)

1. REST API용 모델 구현

  - fromJson은 JSON으로부터 ScheduleModel을 만들어내는 기능

  - toJson은 JSON형식으로 변환하는 함수

  - copyWith는 입력하지 않은 값들은 그대로 보존, 입력해준 값들을 새로 저장

 

2. API 요청 기능 구현

  - GET 'date'query parameter에 YYYYMMDD형태로 입력

  - POST 생성하고 싶은 ScheduleModel을 JSON 형식으로 body에 입력

  - DELETE 삭제하고 싶은 일정의 ID를 'id' body값에 입력

 

3. 글로벌 상태 관리 구현

4. 프로바이더 초기화

5. 드리프트를 프로바이더로 대체

6. 캐시 적용

 

결과는?????

실패~~

 

원인은 내일 찾아보자~~ 일단, 오늘 공부는 여기서 끄읏~!!