jinwon0707

[✈️] 항공권 가격 검색 앱 개발해보기 <6> 크롤링

2026.01.12

이제 실제 항공권 데이터를 받아오기 위한 작업을 해볼 것이다. 먼저 항공권이 판매되는 시스템부터 알아보면, 항공사 자체 홈페이지에서 판매하는 항공권이 있고 스카이스캐너같은 사이트에 제공하는 항공권등이 따로 있어서 어디에는 올라와있는데 어디에는 없거나, 같은 항공편이라도 가격이 다른 상황이 발생한다. 그래서 최대한 많은 곳에서 데이터를 받아온 뒤, 판매처별로 가격을 보여주는 식으로 구조를 변경하는 게 좋을 것 같다. 먼저 서버측의 요청, 반환 데이터 구조를 수정해준다.from fastapi import FastAPIfrom pydantic import BaseModelfrom typing import Listfrom search_naver import search_naver_flightsapp = Fast..

📱 개발일지

[✈️] 항공권 가격 검색 앱 개발해보기 <5> 서버 연동

2026.01.11

항공권 데이터를 받아오는 기능을 구현할건데, 플러터에서 직접 데이터를 로드하면 항공사에서 차단할 수 있어서 대신 중간 서버가 필요하다. 먼저 파이썬이 설치되어있다는 가정하에 터미널에서 pip install fastapi uvicorn로 서버를 만드는 프레임워크인 FastAPI를 설치한다. 이후 server를 담당할 파일을 다른 경로에 만들고 (데이터는 일단 하드코딩)from fastapi import FastAPI, Queryapp = FastAPI()@app.get("/search")def search(from_city: str = Query(..., alias="from"), to_city: str = Query(..., alias="to"), date: str = Query(...)): ret..

📱 개발일지

[✈️] 항공권 가격 검색 앱 개발해보기 <4> 사용자 입력 UI

2026.01.10

이번엔 항공권 검색 기능을 만들 것이다.먼저 필요한 UI 요소를 생각해보면 여행지 선택 (드롭다운) 날짜 입력 (캘린더) 검색 시작 (버튼) 출발편 / 도착편 (토글) 1. 항공사 이름 2. 출발 시간 3. 가격 4. 예매 버튼 (위 4가지를 묶어 가격 오름차순으로 리스트)정도가 있을 것 같다. 입력 요소부터 구현해보자.class SearchPage extends StatefulWidget { const SearchPage({super.key}); @override State createState() => _SearchPageState();} 드롭다운이나 DatePicker, Switch등은 상태가 바뀌는 UI이기 때문에 setState()로 선택값을 화면에 반영하기 위해 검색페이지는 State..

📱 개발일지

[✈️] 항공권 가격 검색 앱 개발해보기 <3> 웹 뷰

2026.01.08

첫 번째 기능인 이벤트 페이지를 보여주는 기능부터 구현해보자. 외부 브라우저가 아닌 앱 내부에서 이벤트 페이지를 보여주기 위해 '웹 뷰' 형식을 사용해보려고 한다. 먼저 pubspec.yaml 파일의 종속성(dependencies)에dependencies: flutter: sdk: flutter webview_flutter: ^4.13.1이런식으로 최신버전을 추가해주고터미널에서 flutter pub get 으로 웹 뷰 패키지를 설치해준다. 설치가 완료되었다면 웹뷰 권한 설정을 위해android/app/src/main/AndroidManifest.xml 파일에android:usesCleartextTraffic="true"두 권한을 추가해준다. 이제 코드로 돌아가서class AirlineEvent ..

📱 개발일지

[✈️] 항공권 가격 검색 앱 개발해보기 <2> 탭 컨트롤러

2026.01.05

본격적으로 개발을 위해 UI 구조부터 생각해보자.크게 이벤트페이지 탭, 항공권 검색 탭 2가지로 나눠서 보여주면 될 것 같다. 이번에는 일단 플러터 기본 구조를 익히고, 탭 구분까지 구현해 볼 예정이다. 코드 부분으로 들어가서 main.dart 파일을 보면 여러 클래스가 있는데, '위젯' 단위로 클래스를 정의한다고 한다. 다른 언어들과 마찬가지로 main() 함수가 시작점이 되고, 각 클래스에 대해 설명하면class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: '항공권 가격 비교', th..

📱 개발일지

[✈️] 항공권 가격 검색 앱 개발해보기 <1> 설치

2026.01.02

앱을 개발하려면 자바나 코틀린 언어로 개발해야하는 줄 알았는데, 요즘에는 리액트나 플러터를 많이 사용하는 것 같다. 플러터에 대해서 알아보니 Dart라는 언어를 사용하고 하나의 코드로 iOS, 안드로이드에서 모두 작동이 가능하며 성능도 좋다고 한다. 그리고 앱 개발을 배울 때 입문하기 좋은 라이브러리라고 해서 플러터를 사용해서 개발해 볼 것이다. [ 설치 단계 ]크게 3가지를 설치해야 한다.1. VSCode2. Flutter3. Android Studio 먼저 VSCode는 깔려있어서 Flutter extension을 설치하고 플러터 새 프로젝트 생성하기를 눌러 SDK도 설치했다.다음으로 시스템 환경변수도 추가한 후, 생성한 프로젝트에서 터미널에 다음 명령어를 입력하여flutter pub get의존성(패..

전체 글

[✈️] 항공권 가격 검색 앱 개발해보기 <6> 크롤링

[✈️] 항공권 가격 검색 앱 개발해보기 <5> 서버 연동

[✈️] 항공권 가격 검색 앱 개발해보기 <4> 사용자 입력 UI

[✈️] 항공권 가격 검색 앱 개발해보기 <3> 웹 뷰

[✈️] 항공권 가격 검색 앱 개발해보기 <2> 탭 컨트롤러

[✈️] 항공권 가격 검색 앱 개발해보기 <1> 설치

티스토리툴바