Skip to content

Flutter http #
Find similar titles

Structured data

Category
Programming

플러터(Flutter) #

플러터란 #

http #

  1. front-end flutter
  2. http
  3. 서버 연동
  4. 데이터 전송

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 라이브러리를 이용해야한다. 하단 이미지와 같은 방법으로 프로젝트에 적용시킨다.

  • 이미지에 표기한 순서대로 따라한다.

server1

server2

import부분에서 http로 별칭을 주는 이유는 post()가 아닌 http.post()로 명시하기 위해서이다. http 패키지의 메소드들(get, post, put ...)을 아무런 프리픽스 없이 사용하면 유지보수 및 개발하면서 매우 보기 힘들다.

서버 연동 #

서버를 node.js express를 이용하여 서버를 생성한다.

작업환경 #
  • vsCode
  • npm express
  • npm nodemon

js 파일 생성 및 express 설치 : npm install express --save

서버1

nodemon 설치

서버2

nodemon 설치 확인

서버3

server.js 파일

서버4

서버 구동

서버5

데이터 전송 #

구축된 서버는 localhost:3000 포트에서 console.log 값이 나타나는 것을 확인하면 된다.

다음은 Flutter와 node.js간의 연결을 한다.

Flutter code #

ipconfig로 IPv4 주소를 기입 후 3000 포트번호를 url로 설정한다.

데이터0

floatingActionButton을 이용하여 클릭 시, 값을 받아오게 한다.

데이터9

여기서 async와 await은 데이터를 받아오기 위한 기다림이 된다. 필수적으로 적용한다.

Server(node.js) code #

데이터2

View #

데이터3

Result(flutter) #

데이터5

데이터6

Result(Server) #

데이터7

  • end
    post방식으로 flutter-> server로 전달하는 것은 Flutter/post에 작성된다.

Suggested Pages #

0.0.1_20140628_0