Flutter로 "Hello World" 출력하는 웹사이트 만들기(feat. VS Code)

Flutter로 Windows 10과 VS Code를 사용하여 "Hello World" 출력하는 웹사이트 만들기

Flutter는 주로 모바일 앱 개발에 사용되지만, 웹 개발에도 사용할 수 있습니다. 이번 가이드에서는 Windows 10 환경에서 Flutter와 VS Code를 사용하여 간단한 "Hello World" 웹사이트를 만드는 방법을 쉽고 상세하게 설명하겠습니다. 또한 웹 서버에서 요청(Request)을 처리할 때의 진입점(Entry Point)도 함께 설명하겠습니다.

Flutter로 간단한 "Hello World" 웹사이트 만들기

---

1. Flutter 설치

Flutter를 사용하기 위해 먼저 Flutter SDK를 설치해야 합니다.

1. Flutter SDK 다운로드: Flutter 공식 사이트에서 Windows용 Flutter SDK를 다운로드합니다.
2. 압축 해제: 다운로드한 zip 파일을 압축 해제한 후, 예를 들어 C:\src\flutter 같은 위치에 저장합니다.
3. 환경 변수 설정:
   • flutter/bin 디렉토리를 시스템 환경 변수에 추가합니다.
   • Windows 검색창에서 **'환경 변수'**를 검색하여 '시스템 속성' 창을 엽니다.
   • '환경 변수' 버튼을 클릭한 후, 'Path' 항목을 선택하고 **'편집'**을 클릭합니다.
   • 새로 만들기를 클릭하여 C:\src\flutter\bin 경로를 추가합니다.
4. Flutter 설치 확인: 명령 프롬프트(cmd)에서 다음 명령어를 실행하여 설치 상태를 확인합니다:이 명령어는 Flutter 환경에 필요한 모든 구성 요소의 상태를 검사합니다.

   flutter doctor

---

2. VS Code 설치 및 Flutter 플러그인 설정

1. VS Code 다운로드: VS Code 공식 사이트에서 VS Code를 다운로드하고 설치합니다.
2. Flutter 및 Dart 플러그인 설치:
   • VS Code를 열고, 왼쪽의 확장(Extensions) 아이콘을 클릭합니다.
   • 검색창에 Flutter를 입력한 후 Flutter 플러그인을 설치합니다. Dart 플러그인은 자동으로 함께 설치됩니다.

---

3. 새 Flutter 프로젝트 생성

1. 프로젝트 생성: VS Code에서 Ctrl + Shift + P를 눌러 명령 팔레트를 엽니다. Flutter: New Project를 선택하고, 프로젝트 이름을 입력한 후 저장할 폴더를 지정합니다.
2. 웹 타겟 활성화: Flutter가 웹 개발을 지원하도록 설정해야 합니다. 다음 명령어를 실행하여 Flutter 웹 타겟을 활성화합니다:

   flutter config --enable-web

3. Flutter Web 프로젝트 생성 확인: 프로젝트 폴더로 이동한 후, 다음 명령어를 실행하여 올바르게 웹 타겟이 활성화되었는지 확인합니다:여기서 Chrome이 웹 타겟으로 표시되면 정상적으로 활성화된 것입니다.

   flutter devices

---

4. Flutter로 "Hello World" 출력하기

1. 메인 파일 열기: 프로젝트에서 lib/main.dart 파일을 엽니다. 이 파일은 Flutter 앱의 진입점입니다.
2. 코드 수정: main.dart 파일의 코드를 아래와 같이 수정하여 "Hello World"를 출력합니다:

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('Flutter Web'),
           ),
           body: Center(
             child: Text('Hello World!'),
           ),
         ),
       );
     }
   }

3. 웹에서 실행: 다음 명령어를 사용하여 웹 브라우저에서 Flutter 앱을 실행할 수 있습니다:명령을 실행하면 기본 웹 브라우저가 열리고, "Hello World"가 화면에 출력됩니다.

   flutter run -d chrome

---

5. 웹 서버에서 Request 처리 진입점 (Entry Point)

Flutter에서 웹 서버가 요청(Request)을 처리할 때, 웹 애플리케이션의 진입점(Entry Point)은 main.dart 파일에 정의된 main() 함수입니다. 이 함수는 Flutter 애플리케이션을 실행하는 시작점으로, 이곳에서 앱의 전체 구조가 결정됩니다.

main() 함수 내부에서 runApp() 함수가 호출되며, 이 함수는 Flutter 위젯 트리를 화면에 렌더링하는 역할을 합니다. 즉, runApp() 함수는 Flutter 앱의 진입점이며, 이 함수가 실행되면서 앱이 화면에 표시되기 시작합니다.

예를 들어, 사용자가 웹사이트에 접근하면, 이 요청은 Flutter에서 main() 함수로 전달되고, runApp() 함수가 호출되어 애플리케이션을 실행하게 됩니다.

---

결론

Flutter를 사용하면 Windows 10과 VS Code 환경에서 간단하게 "Hello World" 웹사이트를 만들 수 있습니다. 웹에서 요청을 처리하는 진입점은 main() 함수이며, 이 함수에서 Flutter 애플리케이션이 시작됩니다. 이 가이드를 따르면 Flutter로 웹 개발을 시작하는 데 필요한 기본적인 절차를 쉽게 이해할 수 있을 것입니다.