[ Dart&Flutter ] Dart Native & Web 개발 심화 학습

Korea Generation
Korea Generation
대한민국 서울특별시

⭐ Dart Native & Web 개발을 하는 방법에대해서 학생들이 Dart의 다양한 활용 범위를 쉽게 이해하고, 직접 실습을 통해 CLI, 서버, 웹 개발을 체험할 수 있도록 구성했습니다.


[ Dart&Flutter ] Dart Native & Web 개발 심화 학습
 [ Dart&Flutter ] Dart Native & Web 개발 심화 학습



⭐. Dart Native & Web 개발 심화 학습

Flutter만이 아니다!
Dart로 콘솔 앱, 서버, 웹까지 만드는 법!




✅ 1. Dart CLI 앱 개발 (Command Line Interface)

📘 개념 설명

  • Dart CLI 앱은 터미널(명령어 창)에서 실행되는 간단한 프로그램이에요.

  • 계산기, 텍스트 게임, 파일 관리 도구 등을 만들 수 있습니다.


Dart 파일은 .dart로 저장하고, 터미널에서 실행해요.
dart run 파일이름.dart





🏆 실습 예제 1: 간단 계산기 CLI 앱

void main() {
  int a = 10;
  int b = 5;
  print('합: ${a + b}');
  print('차: ${a - b}');
}

✅ 출력:

합: 15
차: 5




🏆 실습 예제 2: 사용자 입력받기

import 'dart:io';

void main() {
  print('이름을 입력하세요:');
  String? name = stdin.readLineSync();
  print('안녕하세요, $name님!');
}

✅ 실행 예시:

이름을 입력하세요:
지훈
안녕하세요, 지훈님!



✅ 2. Dart로 서버 개발 ( dart:io )

📘 개념 설명

  • Dart는 간단한 웹 서버도 만들 수 있어요!

  • dart:io 라이브러리를 사용해서 HTTP 요청을 처리할 수 있습니다.

  • Node.js처럼 Dart로도 백엔드 서버 개발이 가능해요.



🏆 실습 예제 1: 간단한 웹 서버 만들기

import 'dart:io';

void main() async {
  var server = await HttpServer.bind(InternetAddress.loopbackIPv4, 8080);
  print('서버 실행 중: http://localhost:8080');

  await for (HttpRequest request in server) {
    request.response.write('안녕하세요, Dart 서버입니다!');
    await request.response.close();
  }
}

✅ 실행 후 브라우저에서 http://localhost:8080 접속:

안녕하세요, Dart 서버입니다!




🏆 실습 예제 2: 요청 URL에 따라 다른 응답

import 'dart:io';

void main() async {
  var server = await HttpServer.bind(InternetAddress.anyIPv4, 8080);
  print('서버 시작: http://localhost:8080');

  await for (HttpRequest req in server) {
    if (req.uri.path == '/hello') {
      req.response.write('Hello Page');
    } else {
      req.response.write('Welcome!');
    }
    await req.response.close();
  }
}




✅ 3. Dart Web 개발 ( dart:html )

📘 개념 설명

  • Dart는 웹 프론트엔드 개발도 가능해요!

  • dart:html을 사용해서 브라우저에서 실행되는 웹앱을 만들 수 있습니다.

  • 다트 코드를 **JavaScript로 변환(compile)**해서 사용합니다.


주로 Flutter Web이 대세지만, 순수 Dart Web도 학습 가치가 있어요!




🏆 실습 예제 1: 버튼 클릭 이벤트 (Dart 웹)


📄 web/index.html

<!DOCTYPE html>
<html>
  <body>
    <button id="btn">클릭하세요!</button>
    <script defer src="main.dart.js"></script>
  </body>
</html>

📄 web/main.dart

import 'dart:html';

void main() {
  querySelector('#btn')?.onClick.listen((event) {
    window.alert('버튼이 클릭되었습니다!');
  });
}

✅ 실행 결과:

  • 버튼 클릭 시 팝업 알림!


🔧 빌드 명령어:
dart compile js web/main.dart -o web/main.dart.js




🏆 실습 예제 2: HTML 요소 변경하기

import 'dart:html';

void main() {
  ParagraphElement p = ParagraphElement()..text = '처음 인사!';
  document.body?.append(p);

  p.onClick.listen((event) {
    p.text = '클릭했어요!';
  });
}

✅ 결과:

  • 문구 클릭 시 텍스트가 변경됨




🎓 마무리 요약

분야

설명

Dart CLI

터미널에서 실행되는 콘솔 앱

Dart Server

간단한 웹 서버 구축 (REST API 가능)

Dart Web

브라우저에서 동작하는 웹앱 개발



💡 실전 활용 예시

  • CLI: 텍스트 기반 툴, 자동화 스크립트

  • Server: 간단한 API 서버, 채팅 서버

  • Web: 인터랙티브 웹페이지, Dart로 작성된 SPA


Related Posts

로드 중…

댓글 쓰기