[Project] 모바일 서버 구축을 준비해보자 1

졸업 작품을 준비하면서  모바일 어플리케이션 서비스를 준비하는데 어떻게 서버를 구성할지, 그리고 모바일 서버에 대한 지식이 쌓기 위해 포스팅으로 정리하여 보았다.

 

먼저 나와 비슷한 궁금증을 가진 사람이 질문을 하여 한 분이 유튜브에 올린 영상인데 유익하여 정리해 보았습니다.

https://youtu.be/KNLIR3TMSx4?si=9qVdrZtpseCXvsMj

 

이 영상은 앱 개발 후 서버 준비의 중요성과 방법을 자세히 설명합니다. 앱을 만들고 나서 필요한 서버를 어떻게 효율적으로 설정할지를 고민하는 데에 도움이 될 것입니다.

 

1. 서버 사용 최소화

 

 

• 앱을 개발할 때, 앱의 목적과 기능을 먼저 고려해야 한다.
• 서버는 가능하면 최대한 사용을 안 하도록 권장되며, 이는 사용하지 말라는 것이 아니라, 필요한 경우에만 사용해야 한다는 의미이다. 
• 서버는 비용이고 사용자와 제공자 모두에게 비용
• 서버를 연결하는 것이 좋지 않은 이유는 네트워크 문제와 추가 비용 때문이며, 이는 사용자와 제공자에게 모두 해당된다. 
• 따라서 서버를 운영할 때는 정말 필요한 부분만 사용하는 것이 중요하다.

2. 웹뷰를 이용한 앱 구축 방법

• 앱을 웹으로 만들 수 있으며, 이를 웹뷰라고 부른다. 그러나 리액트나 Vue.js를 이용한 도구들이 있다고 하여도 효율적인 설명은 어려울 수 있다. 
• 네이티브 방식으로는 안드로이드의 컴포넌트를 이용하므로, 웹뷰를 활용하여 서버에서 제공하는 이미지를 포함하는 앱을 만들 수 있다. 
• 웹뷰에서 서버로부터 응답을 받을 때, 서버는 모든 화면을 제공해야 하며, 이를 위해 웹페이지와 URL이 필요하다. 
• node.js 를 활용하여 서버를 띄우고 HTML로 웹페이지를 만들 수 있으며, 이러한 과정을 통해 응답을 받을 수 있다.

2.1. 모바일 앱과 웹뷰의 연결

• 앱은 웹으로 만들 수 있으며, 이를 웹뷰라고 한다.
• 현재는 리액트나 Vue와 같은 기술을 사용해 렌더링 화면을 웹 기준으로 효율적으로 구현할 수 있다. 
• 앱을 만들기 위해 안드로이드에서 제공하는 네이티브 컴포넌트를 활용하거나, 웹뷰를 통해 서버에서 제공하는 화면을 보여줄 수 있다. 
• 앱의 구조는 사용자가 만들고자 하는 웹사이트의 방식에 따라 달라진다. 
• 예를 들어, 어지 도착 지도에서 맛집을 찾고자 할 때 여러 방식으로 이를 앱으로 구현할 수 있다.

2.2. ️ 모바일 서버 구축 개요

• 서버는 외부에서 웹 뷰로 접근할 수 있도록 설정되어야 한다. 
• 서버는 웹페이지와 URL을 제공해야 하며, 해당 URL로 접근 시 웹페이지를 출력한다. 
• 브라우저에서의 접근 방식은 동일하게 적용되며, 서버는 이를 위해 구동되어야 한다. 
• 서버를 구동하기 위해 노드 제이에스와 같은 기술을 사용할 수 있으며, 이를 통해 HTML 홈페이지를 만들 수 있다. 
• 자바스크립트는 웹페이지제작에 필수적이며, 이를 통해 서버와의 응답을 처리할 수 있다.

2.3. ️ 네이티브 앱과 웹뷰의 차이점 ( 웹서버와 API 서버 )

• 웹뷰는 상대적으로 심플한 방법으로, 네이티브 앱에서는 웹 대신 안드로이드 라이브러리에서 제공하는 API를 사용해야 한다. 
• 앱이 제공하는 자바스크립트를 이용하여, API 형태로 데이터에 접근할 수 있다.
• API 호출 시, 응답 값으로는 일반적인 페이지가 아니라 json 형식으로 제공된다.

3.  API 서버

 

 

 

• API 서버를 준비해야 하며, 이 서버가 특정 API 호출에 대해 JSON 형식의 응답 값을 제공해야 한다.
• 응답 값에는 맛집 검색앱을 예시로 들면 음식점 이름, 주소, 위치 등의 정보를 포함시키고, 이를 파싱하여 분석하는 과정이 필요하다.

4. AWS 서버 구축

 

 

• AWS는 가장 널리 사용되는 클라우드 서비스로, 기능 면에서 우수하다고 평가된다. 
• AWS에서 무료 계정을 발급 받아 인스턴스를 생성하면, 리눅스 OS를 띄울 수 있으며, 여러 프로그램을 통해 접속할 수 있다. 
• Nginx 서버 등 다양한 서버를 구축할 수 있으며, 웹페이지나 API 서버를 만드는 것이 가능하다.
• 클라이언트 측에서 안드로이드 앱등으로 서버에 접속하여 응답을 받아 서비스를 생성할 수 있다.
• 데이터 저장 방법에 대한 추가적인 설명도 필요하며, Node.js 를 이용해 API 서버를 구축할 수 있다.

5. 모바일 서버 구축 시 DB

 

 

• 서버 구축에서 DB는 필수적이며, DB 설계는 기본적으로 테이블(컬렉션)을 만드는 과정을 포함한다. 
• MongoDB에서는 테이블 대신 컬렉션이라는 개념을 사용하며, 해당 컬렉션에 저장할 항목을 고민해야 한다. 
• DB 설계와 관련된 기본 작업인 CRUD를 포함한다.
• DB를 구축한 후, Node.js 또는 AWS와의 연결을 통해 서버와의 통신을 설정해야 한다.

 

 

 

• API 서버가 준비되면, 앱에서 필요한 기능을 제공받을 수 있다.
• 서버를 사용하려는 이유가 중요한데, 만약 앱이 2MB 이하로 용량이 줄어든다면, 앱만으로 운영하는 것을 추천한다.
• 그러나 서버가 필요하고 데이터를 저장해야 하는 경우, 서버를 준비해야 한다.

https://youtu.be/IBLclx1OukU?si=2pw7Fu5sZSI0Uj4U

 

이 영상은 썸내일 때문에 들어가서 보았는데, 이분은 학원 관리 앱을 만들어서 서비스 했고 유저가 하루에 150명 정도가 되는데 카페24에서 호스팅 서버로 월 11000원짜리 비즈니스 모델을 사용한다고 한다.

 

근데 보면 800GB중 1퍼센트 정도의 몇 MB만 쓰고 있음

 

 

이 분은 이미지와 동영상은 서버에서 요청하지 않고 텍스트만 필요해서 웹에 화면 틀이나 코드 등이 무조건 다운로드 되는 웹서버를 이용하지 않고 플러터를 사용에 네이티브 앱처럼 로드하고 서버에서 필요한 부분만 통신하여 가져오는 방식을 사용했다고 함

 

 

플러터로?

 

 

Flutter(플러터)는 어떤 프로그램?

Flutter는 Google에서 개발하고 관리하는 오픈 소스 모바일 앱(Application) 개발 프레임워크(Framework)입니다. 이 프레임워크는 Android와 iOS 등 다양한 플랫폼에서 동작하는 앱을 개발하기 위해 사용되며, 모바일 앱(Application)의 개발 속도를 높이기 위한 다양한 기능과 도구를 제공합니다.

 

Flutter는 Dart라고 하는 언어를 사용해 개발합니다. 구글이 멀티 플랫폼 상에서 동작되도록 하는 앱을 위해 디자인된 프로그래밍 언어이며, 2011년 10월에 공개되었습니다. 기본적으로 C언어의 문법과 거의 같으며 프로그래머들에게 자연스럽게 다가가는 Dart의 목적에 맞게, 기존 프로그래밍 언어들의 특징들이 많이 보입니다. 이것은 다른 언어를 경험해 본 유저라면 쉽게 접할 수 있는 장점이 됩니다.

 

Flutter의 UI 구성 요소는 위젯으로 이루어져 있습니다. 이 위젯들은 서로 다양하게 조합되어 복잡한 UI를 만들어냅니다. Flutter에서는 머티리얼 디자인 스타일의 위젯과 iOS 스타일의 위젯을 기본적으로 제공하며, 커스터마이징이 가능한 다양한 위젯들도 제공합니다.

 

Flutter에서 서버와의 통신을 쉽게 처리할 수 있는 HTTP 요청을 보내는 방법과 관련 라이브러리를 제공하고 있습니다. 즉, 서버와의 통신을 구현하기 위해 반드시 Flutter만 사용해야 하는 것은 아니지만, Flutter에서는 특정 라이브러리와 기능을 활용하여 이를 간편하게 처리할 수 있습니다.

Flutter에서 서버와 통신하는 일반적인 방법은 HTTP 요청을 보내는 것입니다. 이를 위해 가장 많이 사용되는 라이브러리는 http 패키지입니다.

 

서버와의 통신 방법

1. http 패키지 사용: Flutter에서 서버와 데이터를 주고받기 위해 가장 기본적으로 사용하는 패키지는 http 패키지입니다. 이 패키지를 사용하면 GET, POST, PUT, DELETE와 같은 HTTP 요청을 쉽게 보낼 수 있습니다. pubspec.yaml 파일에 http 패키지를 추가해야함

dependencies:
  http: ^0.13.3

 

GET 요청 예시:

import 'package:http/http.dart' as http;

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

  if (response.statusCode == 200) {
    // 서버에서 데이터를 성공적으로 받았을 때
    print(response.body);
  } else {
    // 서버와 통신 실패 시 처리
    print('Request failed with status: ${response.statusCode}');
  }
}

 

POST 요청 예시:

import 'package:http/http.dart' as http;

Future<void> sendData() async {
  final response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/posts'),
    headers: {"Content-Type": "application/json"},
    body: '{"title": "foo", "body": "bar", "userId": 1}',
  );

  if (response.statusCode == 201) {
    // 서버에서 데이터 추가 성공
    print('Data sent successfully: ${response.body}');
  } else {
    // 요청 실패 시 처리
    print('Failed to send data: ${response.statusCode}');
  }
}

 

2. 다양한 라이브러리를 이용하는 방법:

• Dio: 좀 더 고급 기능을 제공하는 라이브러리로, HTTP 요청뿐만 아니라 응답 인터셉터, 파일 업로드/다운로드 등 다양한 기능을 지원합니다. 복잡한 서버 통신이 필요할 때 유용합니다.
• graphql_flutter: GraphQL을 사용하는 서버와 통신할 때 유용한 라이브러리입니다.

 

* HTTP 패키지는 API 서버가 아니고. http 패키지는 Flutter 애플리케이션에서 API 서버와 통신할 수 있도록 도와주는 라이브러리임. 다시 말해, http 패키지는 Flutter 앱이 API 서버에 요청을 보내거나, 서버로부터 데이터를 받아올 수 있게 하는 역할을 함.

 

 

HTTP 패키지의 역할:

• 서버와의 통신: http 패키지는 HTTP 요청(GET, POST, PUT, DELETE 등)을 보내고, 서버에서 응답을 받는 데 사용
• 서버 데이터 처리: 앱에서 서버로 데이터를 전송하거나, 서버에서 보내온 데이터를 처리하는 데 유용

HTTP 요청을 보내는 패키지는 여러 프로그래밍 언어와 플랫폼에서 사용됨. 다음은 각 언어나 프레임워크에서 사용되는 주요 HTTP 라이브러리이다.

1. Dart (Flutter): http 패키지
2. JavaScript/TypeScript (웹):
   • Axios
   • Fetch API
3. Python: requests
4. Java:
   • HttpURLConnection
   • OkHttp
5. C# (.NET): HttpClient
6. Ruby: Net::HTTP
7. Go: net/http
8. Swift (iOS): URLSession

 

2025.01.14 - [CV/프로젝트] - [Project] 모바일 서버 구축을 준비해보자 2

[Project] 모바일 서버 구축을 준비해보자 2