Flutter: ๋Ÿฐํƒ€์ž„ ์‹œ ์ž์‚ฐ ๋กœ๋“œ ์˜ค๋ฅ˜๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ์›ํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 08์›” 02์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: flutter/flutter

ํ˜„์žฌ Flutter๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ž์‚ฐ์ด ๋ถ„์„ ์‹œ(๋˜๋Š” ์‹œ์Šคํ…œ์—์„œ ์ƒ์„ฑ/์ œ๊ณต) ์œ ํšจ์„ฑ์ด ํ™•์ธ๋˜์ง€ ์•Š๋Š” ๋ฌธ์ž์—ด๋กœ ๊ตฌ์„ฑ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋Ÿฐํƒ€์ž„ ์‹œ ์ž์‚ฐ ๋กœ๋“œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ๊ฐ€ ๋งค์šฐ ์‰ฝ์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ ๋ผ์ด๋ธŒ ์•ฑ์—์„œ Posse์˜ ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ธ ์ถฉ๋Œ์€ ์ž์‚ฐ ๋ฌธ์ž์—ด ๋กœ๋“œ ์‹คํŒจ์ž…๋‹ˆ๋‹ค.

๊ทธ๋“ค์€ ๋˜ํ•œ pubspec.yaml์—์„œ ์œ ์ง€ ๊ด€๋ฆฌํ•˜๋Š” ๋ฌธ์ž์—ด ์ƒ์ˆ˜์˜ ์ˆ˜๋™ ํŒŒ์ผ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค(์•„๋งˆ๋„ ๊ฝค ์‰ฝ๊ฒŒ ์ž๋™ ์ƒ์„ฑ๋  ์ˆ˜ ์žˆ์Œ).

์ด๊ฒƒ์€ ์šฐ๋ฆฌ๊ฐ€ ๋„์šธ ์ˆ˜ ์žˆ๋Š” ํŒจํ„ด์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค. ์ด ๋ฒ„๊ทธ๋Š” ์ด๋Ÿฌํ•œ ์ข…๋ฅ˜์˜ ์‹คํŒจ ๊ฐ€๋Šฅ์„ฑ์„ ์ค„์ด๊ธฐ ์œ„ํ•œ ์•„์ด๋””์–ด๋ฅผ ์ฐพ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ฐธ๊ณ  ๋กœ @yjbanov

P5 assets framework passed first triage tool

๋ชจ๋“  3 ๋Œ“๊ธ€

์•Œ๋ ค์ง„ ์ž์‚ฐ ์ด๋ฆ„ ๋“ฑ์˜ ์—ด๊ฑฐํ˜•์„ ์ž๋™ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์—ฌ์ „ํžˆ ์ด๊ฒƒ์„ ์ „๋‹ฌํ•˜๊ธฐ๋ฅผ ์—ด๋งํ•˜๊ณ , ๋‚˜๋Š” ๊ทธ๊ฒƒ์— ๋Œ€ํ•œ flutter ํŒ€์˜ ์˜๊ฒฌ์ด ๋ฌด์—‡์ธ์ง€ ๊ฒฐ์ฝ” ํ™•์‹ ํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚ด POC๋Š” ๋ฒ ํƒ€ ์‹œ์ ˆ๋ถ€ํ„ฐ ๋™๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. PR์ด ๋  ์ˆ˜ ์žˆ์„ ๋งŒํผ ๊น”๋”ํ•œ MVP๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ณง (TM).

์•ˆ๋…•, ๋ชจ๋‘:

์ €๋Š” NetEase ํšŒ์‚ฌ์˜ Fly-Mix ํŒ€ ์˜ ์ผ์›์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ ํŒ€์€ ์—ฌ๋Ÿฌ๋ถ„์ด ์›ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด Flutter ๊ฐœ๋ฐœ ๋„๊ตฌ Flr(Flutter-R) ๋ฅผ ๊ฐœ๋ฐœํ–ˆ์Šต๋‹ˆ๋‹ค.

Flr ๋Š” Flutter ๊ฐœ๋ฐœ์ž๊ฐ€ pubspec.yaml ์˜ ์ž์‚ฐ์„ ์ž๋™์œผ๋กœ ์ง€์ •ํ•˜๊ณ  Android์—์„œ R.java ๋ฅผ ์ข‹์•„ํ•˜๋Š” r.g.dart ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” Flutter ๋ฆฌ์†Œ์Šค ๊ด€๋ฆฌ์ž ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ํ”Œ๋Ÿฌํ„ฐ ํ”„๋กœ์ ํŠธ ์ž์‚ฐ์„ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค. r.g.dart ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด flutter ๊ฐœ๋ฐœ์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž์‚ฐ ID ๊ธฐ๋Šฅ์„ ์ฐธ์กฐํ•˜์—ฌ ์ฝ”๋“œ์— ์ž์‚ฐ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import 'package:flutter_r_demo/r.g.dart';

// test_sameName.png
var normalImageWidget = Image(
  width: 200,
  height: 120,
  image: R.image.test_sameName(),
);

// test_sameName.gif
var gifImageWidget = Image(
  image: R.mage.test_sameName_gif(),
);

// test.svg
var svgImageWidget = Image(
  width: 100,
  height: 100,
  image: R.svg.test(width: 100, height: 100),
);

// test.json
var jsonString = await R.text.test_json();

// test.yaml
var yamlString = await R.text.test_yaml();

์ถ”์‹ : ์˜ˆ, Android์˜ AAPT(Android Asset Packaging Tool)์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ง€๊ธˆ๊นŒ์ง€ Flr์€ Android Studio ํ”Œ๋Ÿฌ๊ทธ์ธ, CLI ๋ฐ VSCode ํ™•์žฅ์„ ์ง€์›ํ–ˆ์Šต๋‹ˆ๋‹ค.

  1. Flr Android ์ŠคํŠœ๋””์˜ค ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ฒ„์ „

  2. Flr CLI ๋ฒ„์ „

  3. Flr VSCode ํ™•์žฅ ๋ฒ„์ „

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰