Help
Flutter
http
#
Find similar titles
Structured data
- Category
- Programming
Table of Contents
플러터(Flutter) #
플러터란 #
- Flutter 개요 : http://www.incodom.kr/Flutter
- Flutter 설치 : http://www.incodom.kr/Flutter/setting
- Flutter state(상태) : http://www.incodom.kr/Flutter/state
- Flutter FCM(알림메세지) : http://www.incodom.kr/Flutter/FCM
- Flutter http(서버사용) : http://www.incodom.kr/Flutter/http
- Flutter FutureBuilder(비동기) : http://www.incodom.kr/Flutter/FutureBuilder
- Flutter 앱 접근 권한 설정 : https://www.incodom.kr/flutter%20%EC%95%B1%20%EC%A0%91%EA%B7%BC%20%EA%B6%8C%ED%95%9C%20%EC%84%A4%EC%A0%95
http #
- front-end flutter
- http
- 서버 연동
- 데이터 전송
http #
front-end flutter #
Flutter는 front-end 프레임워크이다.
-
- Front-end
- 웹이나 앱 상에서 보거나 이벤트적인 모든 상호작용에 대해 하는 것이 front-end 개발 분야에 속한다. 주로 사용자 인터페이스(UI)와 사용자 경험(UX)를 만드는데 이용한다.
-
- Flutter
- Flutter은 2018년도 이전부터 서서히 성장한 프론트엔드 프레임워크라 할 수 있다. Flutter에서 가장 중요한 부분은 상태관리이며, 상태관리는 Flutter/state 상단에 링크가 존재한다. 간단하게 요약하자면 변할 수 있는 상태와 변할 수 없는 상태가 존재하는데 이를 stateful, stateless로 표현된다.
-
- opning
- 앞서 flutter의 설치, 상태, Pub.dev와 FCM 까지 진행되었다. 개발을 하면서 서버와 데이터를 주고 받으면서 올바른 값과 타입이 전달되는지 아는 것에 대해 얼마나 중요한지를 알게 되었다. 본 글에서는 flutter와 서버간의 데이터를 주고 받는 방법에 대해서 작성된다.
http #
- http(pub.dev) : https://pub.dev/packages/http
플러터에서 서버 연동을 하려면 http 라이브러리를 이용해야한다. 하단 이미지와 같은 방법으로 프로젝트에 적용시킨다.
- 이미지에 표기한 순서대로 따라한다.
import부분에서 http로 별칭을 주는 이유는 post()가 아닌 http.post()로 명시하기 위해서이다. http 패키지의 메소드들(get, post, put ...)을 아무런 프리픽스 없이 사용하면 유지보수 및 개발하면서 매우 보기 힘들다.
서버 연동 #
서버를 node.js express를 이용하여 서버를 생성한다.
작업환경 #
- vsCode
- npm express
- npm nodemon
js 파일 생성 및 express 설치 : npm install express --save
nodemon 설치
nodemon 설치 확인
server.js 파일
서버 구동
데이터 전송 #
구축된 서버는 localhost:3000 포트에서 console.log 값이 나타나는 것을 확인하면 된다.
다음은 Flutter와 node.js간의 연결을 한다.
Flutter code #
ipconfig로 IPv4 주소를 기입 후 3000 포트번호를 url로 설정한다.
floatingActionButton을 이용하여 클릭 시, 값을 받아오게 한다.
여기서 async와 await은 데이터를 받아오기 위한 기다림이 된다. 필수적으로 적용한다.
Server(node.js) code #
View #
Result(flutter) #
Result(Server) #
-
- end
- post방식으로 flutter-> server로 전달하는 것은 Flutter/post에 작성된다.
