안녕하세요, 여러분! 오늘은 Dart로 서버 애플리케이션을 쉽게 구축할 수 있는 프레임워크인 Dart Frog의 초기 설정 방법에 대해 알아보겠습니다. Dart Frog는 간단하면서도 강력한 서버 사이드 개발을 가능하게 해주는 도구입니다. 이 글에서는 Dart Frog를 처음 설치하고 설정하는 과정을 단계별로 설명드리겠습니다.1. Dart SDK 설치Dart Frog를 사용하려면 먼저 Dart SDK를 설치해야 합니다. Dart는 Google에서 개발한 프로그래밍 언어로, Dart SDK는 Dart 언어를 실행하고 개발하는 데 필요한 도구들을 포함하고 있습니다. Dart 공식 웹사이트에서 운영 체제에 맞는 Dart SDK를 다운로드하여 설치하세요.설치가 완료되면 터미널(혹은 명령 프롬프트)을 열어 다음 ..

Flutter 2024. 6. 17. 04:55

1. frog에서 제작한 api를 build하여 나온 build파일을 서버에 업로드한다. #frog 프로젝트 디렉토리 내부에서 dart_frog build 2. Docker을 설치하고 build폴더 내부에 있는 DockerFile을 이용해 이미지를 빌드한다.#DockerFile 파일 위치에서 # . 반드시 해줘야 함 docker build -t [image이름] . 3. 빌드된 Docker 이미지를 사용하여 Docker 컨테이너를 실행한다. 이 때, 호스트의 포트와 컨데이너의 포트를 매핑한다. docker run -d -p 8080:8080 [image이름] - nginx 세팅

Server 2024. 4. 24. 08:31

Flutter는 Google에서 제공하는 UI프레임워크로, 크로스 플랫폼 앱 개발을 위한 강력한 도구입니다. 이번 포스트에서는 FLutter의 기본 위젯 중 하나인 Scaffold를 활용하여 앱의 기본 레이아웃을 구성하는 방법에 대해 알아보겠습니다. Scaffold는 Flutter 앱의 기본적인 레이아웃 구조를 제공하는 위젯입니다. AppBar, Body, FloatingActionButton, Drawer 등의 다양한 구성 요소를 포함할 수 있어, 앱의 기본 레이아웃을 빠르게 설정할 수 있습니다. Scaffold 구성 요소: AppBar: 앱의 상단에 표시되는 바로, 제목과 액션 버튼을 포함할 수 있습니다. Body: 앱의 주요 콘텐츠가 표시되는 공간입니다. FloatingActionButton: 주요..

Flutter 2024. 4. 4. 11:20

Flutter을 사용하여 앱을 만들다보면 가끔 Future 함수를 사용하여 외부와 통신할 때 하나의 FutureBuilder 내에서 여러개의 Future 함수를 사용할 때가 있다. 이럴 때 Future.wait를 사용하게 되는데 구글링을 통해 찾아볼 때 이를 실제로 활용하는 방법에 대한 소개가 많이 없어서 고생한 경험이 있었다. 이번 포스팅은 내가 사용한 기술, 내가 깨달은 방법을 잊지 않도록 적게 되어 문맥, 문법이 이상할 수도 있지만 이 방법은 실무에서도 유용하게 쓸 수 있을거라는 생각이 든다. 우선 구글링을 통해서 찾아본 방법들에 대해 이야기 해보면 main함수(혹은 다른 함수)에서 Future를 호출하는 예제를 보여줄 때 Future함수가 단순 리턴 함수를 사용하여 보여주는 경우가 많았다. 아래 ..

Flutter 2024. 2. 2. 15:15

Flutter에서 레이아웃을 구성할 때 유연성을 갖는 것은 중요합니다. 이때 Flexible 위젯이 유용하게 사용됩니다. Flexible 위젯을 사용하면 화면 공간을 동적으로 조절하여 다양한 화면 크기와 기기에 대응할 수 있습니다. Flexible 위젯의 개요 Flexible 위젯은 주로 Row 또는 Column 위젯 내에서 사용되며, 자식 위젯의 크기 및 가중치를 제어하는 데 사용됩니다. 이를 통해 다양한 화면 크기에서 레이아웃을 조절할 수 있습니다. Flexible 위젯 사용하기 Flexible 위젯으로 자식 위젯 설정 Flexible 위젯을 사용하려면 Row 또는 Column 위젯 내에 배치하고 Flexible 위젯의 flex 속성을 설정합니다. flex 값은 해당 위젯이 차지하는 비율을 나타냅니다..

Flutter 2023. 10. 5. 17:43

이전 포스팅에서 데이터 모델(DataModel)을 만들고 API 서비스(apiService)를 설정하여 데이터를 가져오는 작업을 마쳤습니다. 이제 이 데이터를 사용자에게 친숙한 방식으로 표시하기 위해 UI를 만들어야 합니다. 먼저, 이전 포스팅에서 설정한 apiService를 FutureBuilder 위젯에 연결해야 합니다. FutureBuilder(future: DataApiService().getData(),), FutureBuilder는 Flutter에서 비동기 작업의 결과를 기반으로 UI를 구축하는 데 사용되는 중요한 위젯 중 하나입니다. 주로 Future 객체와 함께 사용되며, Future 작업이 완료될 때 해당 결과를 기반으로 다양한 UI를 생성하도록 도와줍니다. 비동기 작업을 FutureBu..

Flutter 2023. 10. 1. 13:52

이전 포스팅에서 Data Model을 제작하는 방법에 대해 자세히 살펴보았습니다. 이번 포스팅에서는 이렇게 제작한 Data Model을 어떻게 화면에 표시하고 활용할지에 대해 다룰 예정입니다. 아직 이전 포스팅을 보지 못했다면 아래 링크를 이용해 확인할 수 있습니다. [Flutter] DataModel을 사용하여 api 데이터 화면에 보여주기 (1) [Flutter] DataModel을 사용하여 api 데이터 화면에 보여주기 (1) Flutter을 사용하여 앱을 개발하거나 인터넷에서 데이터를 가져올 때, 중요한 단계 중 하나는 서버에서 데이터를 가져오는 과정입니다. 하지만 앱에서 서버로 직접 통신하는 것은 대부분 불가능 space-engineers-developer.tistory.com 이전 포스팅에서 ..

Flutter 2023. 10. 1. 12:58

Dart 언어는 객체 지향 프로그래밍 언어로, 클래스를 사용하여 객체를 생성하고 초기화할 수 있습니다. 이 포스팅에서는 Dart의 명명된 생성자(Named Constructor)에 대해 자세히 알아보겠습니다. 명명된 생성자는 특정 역할을 수행하는 생성자로, 객체 생성 및 초기화 과정을 보다 유연하게 제어할 수 있는 중요한 도구입니다. 명명된 생성자란 무엇인가요? 명명된 생성자는 클래스 내에서 특정한 역할을 하는 생성자입니다. 클래스 내에 여러 개의 생성자를 정의하고, 각 생성자에 이름을 붙여서 사용할 수 있습니다. 이렇게 명명된 생성자를 활용하면 객체 초기화에 관련된 여러 시나리오를 다룰 수 있습니다. 왜 명명된 생성자를 사용해야 할까요? 가독성 향상: 명명된 생성자는 생성자의 역할을 명확하게 표현할 수..

Flutter 2023. 10. 1. 11:57