<div id="readability-page-1" class="page"><div>
 <div id="SE-60bab83c-eb73-4b23-a7c4-00932f0a24a5">
 ​개요​flutter 에서 거의 필수로(?) 사용되는 freezed 에 대해 알아보려 한다.​​​디펜던시 설치​code generation 을 통해 freezed 를 사용하기 위해서 필요한 관련 dependency 들을 보자.​<ul><li>freezed_annotation : freezed 관련 어노테이션을 사용하기 위함</li><li>build_runner : <ul><li>code-generators 를 실행하기 위기 위함</li><li>패키지마다 패키지에 해당하는 code-generator 가 있음<ul><li>ex. freezed 는 freezed 전용 code-generator 가 있음</li><li>ex. json_serializable 또한 전용 code-generator 임</li></ul></li></ul></li><li>freezed : <ul><li>freezed 전용 code generator</li></ul></li></ul>
 </div> <div id="SE-bd31b8af-3329-41db-8a83-eedd06a6412e">
 flutter pub add freezed_annotation
flutter pub add --dev build_runner
flutter pub add --dev freezed
 </div> <div id="SE-0af848b3-88ee-4bf4-9aa5-eedb61de55e5">
 ​만약 fromJson / toJson 메서드도 포함해서 생성하려면 아래 두 패키지도 추가해야한다.<ul><li>json_annotation : json_serializable 로 code-generation 하기 위해 필요한 어노테이션 포함 </li><li>json_serializable : code-generator</li></ul>
 </div> <div id="SE-d8695210-9e61-4e6b-95b7-af0e7cca44f0">
 # if using freezed to generate fromJson/toJson, also add:
flutter pub add json_annotation
flutter pub add --dev json_serializable
 </div> <div id="SE-26b56fe4-2ace-413d-a74e-41805b70e696">
 ​​​analysis_options.yaml 설정​code-generator 와 annotation 관련하여 warning 이 뜨는것을 방지하기 위해 analysis_options.yaml 에 다음과 같이 설정을 해주자.​<ul><li>invalid_annotation_target : json_serializable 관련 warning 을 무시하기 위함</li><li>exclude : code generator 로 생성된 파일에 대해 lint warning 을 무시하기 위함<ul><li>*.freezed.dart : freezed 관련 생성되는 파일</li><li>*.g.dart : json_serializable 관련 생성되는 파일</li></ul></li></ul>
 </div> <div id="SE-84d60b6a-98cd-44c2-b269-ff01a4b0901e">
 analyzer:
 errors:
 invalid_annotation_target: ignore
 exclude:
 - '**/*.freezed.dart'
 - '**/*.g.dart'
 </div> <div id="SE-c24bf73f-77b9-4149-b591-f7ce18c18096">
 ​​​VSCode Freezed extension 설치
 </div> <div id="SE-f9a98537-f80d-4aaf-bc6b-ae873a780d12">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-f9a98537-f80d-4aaf-bc6b-ae873a780d12&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMzEyMTRfOTcg/MDAxNzAyNTIyMzAxMDg5.NZvlY7h7eVaN5nTDgAVH9Ic1SaQj6f14u8p5plAA50Eg.d-CEIH33JibDAv-fVy9fGuGr0OxSRoPxPdjnXm4BbiQg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-12-14_%EC%98%A4%EC%A0%84_11.51.35.png&quot;, &quot;originalWidth&quot; : &quot;1133&quot;, &quot;originalHeight&quot; : &quot;493&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyMzEyMTRfOTcg/MDAxNzAyNTIyMzAxMDg5.NZvlY7h7eVaN5nTDgAVH9Ic1SaQj6f14u8p5plAA50Eg.d-CEIH33JibDAv-fVy9fGuGr0OxSRoPxPdjnXm4BbiQg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-12-14_%EC%98%A4%EC%A0%84_11.51.35.png?type=w800" data-width="693" data-height="301" alt="">
 </a>
 
 </div>
 <div id="SE-bb93c981-a2f3-49f6-b74f-9d4b7bb8fd78">
 Freezed 관련 코드를 좀 더 쉽게 짤수있게 도와주는 snippets tool 이다.Freezed 로 data class 를 만들다보면 반복적으로 작성해야 하는 코드가 꽤 되는데, 이걸 쉽게 짤수있게 도와준다.​<ul><li>ptf : part 'person.freezed.dart' 를 입력해준다.</li><li>pts : par 'person.g.dart' 를 입력해준다.</li><li>fdataclass : freezed 어노테이션이 달린 DataClass 를 만들어준다.</li><li>fromJson : <ul><li>fromJson 메서드를 만들어준다.</li><li>(fromJson 메서드만 만들면) code-generator 에 의해 toJson 메서드도 만들어진다.</li><li>json_serializable 이 필요하다.</li></ul></li></ul>​
 </div> <div id="SE-baa733c5-1dad-4db7-9e08-a48594e34573">
 import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:flutter/foundation.dart';

part 'person.freezed.dart';
part 'person.g.dart';

@freezed
class Person with _$Person {
 const factory Person({
 required int id,
 required String name,
 required String email,
 }) = _Person;

 // custom getter 혹은 method 필요시 추가
 const Person._();

 factory Person.fromJson(Map&lt;String, dynamic&gt; json) =&gt; _$PersonFromJson(json);

 get nameLength =&gt; name.length;

 void hello() {
 print("Hello");
 }
}


 </div> <div id="SE-94da95b1-c2b1-4d3f-a6a1-b3019b9b4230">
 <ul><li>만약 custom getter 나 method 추가시 private 생성자를 추가해줘야 한다.</li></ul>​​run generator​아래 명령어를 통해 실행시킬수 있다.명령어 실행시 build 와 watch 두가지 중 하나를 사용할수 있는데 딱 봐도 알다시피 build 는 일회성, watch 는 파일 수정시 자동반영임을 알수있다.build 로 실행하면 할때마다 시간이 더 오래걸릴수 있다.watch 의 경우, 최초 실행시에만 시간이 조금 오래 걸리고 그 이후에는 바뀐 파일에 대해서만 반영하기 때문에 더 빠르다.
 </div> <div id="SE-4ef339d1-3f8a-4e6d-91e6-5faf1ac46486">
 $ dart run build_runner build -d
$ dart run build_runner watch -d
 </div> <div id="SE-2b678f09-47f4-45bf-a767-439c7ba61e58">
 위 커맨드를 실행하면 아래와 같이 파일이 생성된걸 볼 수 있다.
 </div> <div id="SE-bdcfd5d1-c7d7-43f9-b408-bca671944c1f">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-bdcfd5d1-c7d7-43f9-b408-bca671944c1f&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMzEyMTRfNCAg/MDAxNzAyNTIzODM1MTE3.9TUY5XYxqf2Nqrl5IYFPMIs-LcUhEOibrDn6ahD4IlEg.zYeoI9Pet-NLJ5dBJ61UVUqDZjUgGlJ9F-NPzKaA2f0g.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-12-14_%EC%98%A4%ED%9B%84_12.17.11.png&quot;, &quot;originalWidth&quot; : &quot;297&quot;, &quot;originalHeight&quot; : &quot;111&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyMzEyMTRfNCAg/MDAxNzAyNTIzODM1MTE3.9TUY5XYxqf2Nqrl5IYFPMIs-LcUhEOibrDn6ahD4IlEg.zYeoI9Pet-NLJ5dBJ61UVUqDZjUgGlJ9F-NPzKaA2f0g.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-12-14_%EC%98%A4%ED%9B%84_12.17.11.png?type=w800" data-width="693" data-height="259" alt="">
 </a>
 
 </div>
 <div id="SE-c9d990cd-1200-48ec-90f8-0945c25ab17b">
 ​build_runner 로부터 전체적인 실행구조는 다음과 같다.
 </div> <div id="SE-8ce7aefd-7b82-4938-b58d-692d71b3e1cd">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8ce7aefd-7b82-4938-b58d-692d71b3e1cd&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMzEyMTRfMjUx/MDAxNzAyNTIxNzg0MjQ2.Gjb95vQ-VETUIgw_EjJLvsA8pLN3BjRY4laB5tu5p6Mg.u1lsQb94Ebwrx8rNo-4bOvecwOAUWTNx4lbG9xPZjXsg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-12-14_%EC%98%A4%EC%A0%84_11.43.00.png&quot;, &quot;originalWidth&quot; : &quot;1173&quot;, &quot;originalHeight&quot; : &quot;605&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyMzEyMTRfMjUx/MDAxNzAyNTIxNzg0MjQ2.Gjb95vQ-VETUIgw_EjJLvsA8pLN3BjRY4laB5tu5p6Mg.u1lsQb94Ebwrx8rNo-4bOvecwOAUWTNx4lbG9xPZjXsg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-12-14_%EC%98%A4%EC%A0%84_11.43.00.png?type=w800" data-width="693" data-height="357" alt="">
 </a>
 
 </div>
 <div id="SE-8b7c41d2-2e9a-4943-a025-106de9bce715">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8b7c41d2-2e9a-4943-a025-106de9bce715&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;256&quot;, &quot;originalHeight&quot; : &quot;103&quot;, &quot;linkUse&quot; : &quot;true&quot;, &quot;link&quot; : &quot;https://qr.kakaopay.com/2810060110000443710583945dc00000&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1" alt="">
 </a>
 
 카카오페이로 후원
 </div>
 <div id="SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;330&quot;, &quot;originalHeight&quot; : &quot;330&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1" alt="">
 </a>
 
 카카오페이 QR코드로 후원
 </div>
 </div></div>

나만의공간。

KIM JUNGHWAN

개요 flutter 에서 거의 필수로(?) 사용되는 freezed 에 대해 알아보려 한다. 디펜던시 설치  code generation 을 통해 freezed 를 사용하기 위해서 필요한 관련 dependency 들을 보자. freezed_annotation : freezed 관련 어노테이션을 사용하기 위함 build_runner : code-generators 를 실행하기 위기 위함 패키지마다 패키지에 해당하는 code-generator 가 있음 ex. freezed 는 freezed 전용 code-generator 가 있음 ex. json_serializable 또한 전용 code-generator 임 freezed : freezed 전용 code generator 만약 fromJson / toJson 메서드도 포함해서 생성하려면 아래 두 패키지도 추가해야한다. json_annotation : json_serializable 로.......

[Flutter] Freezed (with. Code Generation)

댓글