기술나눔

Flutter가 부분 새로 고침을 구현하는 여러 가지 방법

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

목차

머리말

1. 로컬 리프레시(Local Refresh)의 중요성

1. 컨셉

2. 중요성

2. 부분 새로 고침을 구현하는 여러 가지 방법

1. 부분 새로 고침을 위해 setState 메소드를 사용하십시오.

2. StatefulWidget 및 InheritedWidget을 사용하여 UI를 부분적으로 새로 고침

3.ValueNotifier와 ValueListenableBuilder

4.스트림빌더

5. 제공자

6.GetX

7. 글로벌키 사용

머리말

Flutter에서 상태 관리는 애플리케이션의 데이터 상태를 관리 및 업데이트하고 상태 변경에 따라 UI를 업데이트하는 방법을 나타냅니다. 효과적인 상태 관리는 개발자가 보다 효율적이고 유지 관리가 가능한 애플리케이션을 만드는 데 도움이 됩니다.

setState는 Flutter의 가장 기본적인 상태 관리 방법으로, 상태가 변경되면 프레임워크에 UI를 다시 빌드하라는 알림이 전달됩니다. 물론 우리는 setState 메소드를 호출하면 페이지가 다시 그려질 것이라는 것을 알고 있습니다. 페이지 레이아웃이 더 복잡해지면 때때로 별도의 UI만 업데이트해야 할 수도 있습니다. 현재 페이지 UI를 다시 그리는 데 더 많은 성능이 사용됩니다.

그렇다면 Flutter에는 UI를 부분적으로 새로 고치는 방법이 무엇입니까? 이 블로그에는 Flutter가 부분 새로 고침을 구현하는 여러 가지 방법이 나열되어 있습니다.

1. 로컬 리프레시(Local Refresh)의 중요성

1. 컨셉

부분 새로 고침은 전체 페이지가 아닌 인터페이스의 일부만 새로 고치는 것을 의미합니다. 이를 통해 성능과 사용자 경험이 향상됩니다.

2. 중요성

  1. 불필요한 다시 그리기 방지 및 성능 향상
  2. 보다 원활한 사용자 경험 제공
  3. 자원 소비 감소

2. 부분 새로 고침을 구현하는 여러 가지 방법

1. 부분 새로 고침을 위해 setState 메소드를 사용하십시오.

setState는 Flutter에서 가장 일반적으로 사용되는 상태 관리 방법으로, 상태 변경을 프레임워크에 알리고 인터페이스를 재구성하는 데 사용됩니다.

Flutter 프로젝트를 생성할 때 시스템에서 기본적으로 생성하는 타이머의 예는 setState 부분 새로 고침의 예입니다.

  1. import 'package:flutter/material.dart';
  2.  
  3. class SetStateMainPage extends StatefulWidget {
  4.   final String title;
  5.   const SetStateMainPage({super.key, required this.title});
  6.  
  7.   @override
  8.   State<SetStateMainPage> createState() => _SetStateMainPageMainPageState();
  9. }
  10.  
  11. class _SetStateMainPageMainPageState extends State<SetStateMainPage> {
  12.   int _count = 0;
  13.  
  14.   @override
  15.   Widget build(BuildContext context) {
  16.     return Scaffold(
  17.       appBar: AppBar(
  18.         title: Text(widget.title),
  19.       ),
  20.       body: Center(
  21.         child: Text(
  22.           '您点击了$_count次',
  23.           style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  24.         ),
  25.       ),
  26.       floatingActionButton: FloatingActionButton(
  27.           child: const Icon(Icons.add),
  28.           onPressed: () {
  29.             setState(() {
  30.               _count++;
  31.             });
  32.           },
  33.       )
  34.     );
  35.   }
  36. }

그림 1.setState 부분 새로 고침

페이지가 비교적 간단한 경우 setState 메소드를 직접 사용하여 UI를 부분적으로 새로 고칠 수 있습니다.

사용 시나리오: 버튼 클릭 횟수, 스위치 상태 등과 같은 간단한 상태 변경

지침:

  1. setState를 자주 호출하면 성능 문제가 발생할 수 있음
  2. 빌드 메소드에서 setState를 호출하지 마세요.

2. StatefulWidget 및 InheritedWidget을 사용하여 UI를 부분적으로 새로 고침

        StatefulWidget 상태가 있는 구성요소입니다.InheritedWidget 구성 요소 트리 내에서 데이터를 공유하는 데 사용됩니다.

데이터를 공유해야 할 경우 UI를 부분적으로 새로 고치기 위해 StatefulWidget 및 InheritedWidget을 고려할 수 있습니다.

전체 코드는 다음과 같습니다.

그림 2. 데이터를 공유하여 UI 새로 고침

  1. import 'package:flutter/material.dart';
  2.  
  3. class MyInheritedWidget extends InheritedWidget {
  4.   final int counter;
  5.   const MyInheritedWidget({
  6.     super.key,
  7.     required this.counter,
  8.     required super.child,
  9.   });
  10.   @override
  11.   bool updateShouldNotify(covariant InheritedWidget oldWidget) {
  12.     return true;
  13.   }
  14.   static MyInheritedWidget? of(BuildContext context) {
  15.     return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  16.   }
  17. }
  18.  
  19. class InheritedWidgetPage extends StatefulWidget {
  20.   final String title;
  21.   const InheritedWidgetPage({super.key, required this.title});
  22.  
  23.   @override
  24.   State<InheritedWidgetPage> createState() => _InheritedWidgetPageState();
  25. }
  26.  
  27. class _InheritedWidgetPageState extends State<InheritedWidgetPage> {
  28.   int counter = 0;
  29.   void _incrementCounter() {
  30.     setState(() {
  31.       counter++;
  32.     });
  33.   }
  34.  
  35.   @override
  36.   Widget build(BuildContext context) {
  37.     return MyInheritedWidget(
  38.       counter: counter,
  39.       child: Scaffold(
  40.         appBar: AppBar(
  41.           title: Text(widget.title),
  42.         ),
  43.         body: Center(child: Column(
  44.           children: [
  45.             const Divider(),
  46.             const CounterDisplay(),
  47.             const SizedBox(height: 20),
  48.             ElevatedButton(
  49.               onPressed: _incrementCounter,
  50.               child: const Text('add'),
  51.             ),
  52.           ],
  53.         ),),
  54.       ),
  55.     );
  56.   }
  57. }
  58.  
  59. class CounterDisplay extends StatelessWidget {
  60.   const CounterDisplay({super.key});
  61.   @override
  62.   Widget build(BuildContext context) {
  63.     final inheritedWidget = MyInheritedWidget.of(context);
  64.     return Text('点击次数: ${inheritedWidget?.counter}');
  65.   }
  66. }

이 방법의 주요 사용 시나리오는 테마, 언어 설정 등 구성 요소 트리에서 상태를 공유하는 경우입니다.

장점은 데이터 공유가 편리하고, 코드도입이

단점은 사용이 복잡하고 성능에 영향을 미칠 수 있다는 점입니다.

3.ValueNotifier와 ValueListenableBuilder

        ValueNotifier 간단한 상태 관리 도구이며,ValueListenableBuilder 모니터링을 위해ValueNotifier 변화.

사용법도 매우 간단합니다.

1. ValueNotifier 인스턴스화

2. 모니터링할 위젯 개체는 ValueListenableBuilder로 래핑됩니다.

3. 이벤트 발생 데이터를 변경하는 방법

이전 방법에 비해 이 방법은 매우 간단하고 사용하기 쉬우며 성능도 매우 높습니다.

단점: 간단한 상태 변경만 처리할 수 있습니다.

전체 코드는 다음과 같습니다.

  1. import 'package:flutter/material.dart';
  2.  
  3. class ValueNotifierPage extends StatefulWidget {
  4.   final String title;
  5.   const ValueNotifierPage({super.key, required this.title});
  6.  
  7.   @override
  8.   State<ValueNotifierPage> createState() => _ValueNotifierPageState();
  9. }
  10.  
  11. class _ValueNotifierPageState extends State<ValueNotifierPage> {
  12.  
  13.   final ValueNotifier<int> _counter = ValueNotifier<int>(0);
  14.  
  15.   @override
  16.   Widget build(BuildContext context) {
  17.     return Scaffold(
  18.         appBar: AppBar(
  19.           title: Text(widget.title),
  20.         ),
  21.         body: Center(
  22.           child: ValueListenableBuilder<int>(
  23.             valueListenable: _counter,
  24.             builder: (context, value, child) {
  25.               return Text(
  26.                 '您点击了$value次',
  27.                 style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  28.               );
  29.             },
  30.           )
  31.         ),
  32.         floatingActionButton: FloatingActionButton(
  33.           child: const Icon(Icons.add),
  34.           onPressed: () {
  35.             _counter.value ++;
  36.           },
  37.         )
  38.     );
  39.   }
  40. }

4.스트림빌더

Stream은 비동기 이벤트를 전달하는 데 사용되는 객체이며 StreamController를 통해 이벤트를 보낼 수 있습니다. UI를 새로 고쳐야 하는 경우 Stream으로 이벤트를 보낸 다음 StreamBuilder를 사용하여 Stream을 수신할 수 있습니다. 새 이벤트가 수신되면 StreamBuilder가 자동으로 UI를 다시 빌드합니다. 이 방법은 여러 비동기 이벤트를 모니터링해야 하는 상황에 적합합니다.

네트워크 요청, 실시간 데이터 등과 같은 비동기 데이터 스트림을 처리해야 하는 경우 StreamBuilder 사용을 고려할 수 있습니다. 예를 들어 다음 예제에서는 네트워크 요청을 시뮬레이션하는 비동기 메서드를 작성했습니다. 네트워크 요청이 올바른 결과를 반환하지 않으면 진행률 표시줄을 로드할 수 있습니다.

이 방법의 장점은 네트워크 요청 상태 등 비동기 요청을 보다 정확하게 제어할 수 있다는 점입니다. 그러나 Dior는 더 복잡하고 더 많은 코드가 필요할 수 있습니다.

전체 코드는 다음과 같습니다.

  1. import 'dart:async';
  2. import 'package:flutter/material.dart';
  3.  
  4. class StreamBuilderRefreshUIPage extends StatefulWidget {
  5.   final String title;
  6.   const StreamBuilderRefreshUIPage({super.key, required this.title});
  7.  
  8.   @override
  9.   State<StreamBuilderRefreshUIPage> createState() =>
  10.       _StreamBuilderRefreshUIPageState();
  11. }
  12.  
  13. class _StreamBuilderRefreshUIPageState extends State<StreamBuilderRefreshUIPage> {
  14.   late Future<String> _data;
  15.  
  16.   Future<String> fetchData() async {
  17.     // 模拟网络请求延迟
  18.     await Future.delayed(const Duration(seconds: 2));
  19.     // 返回模拟数据
  20.     return 'Hello, Flutter!';
  21.   }
  22.  
  23.   @override
  24.   void initState() {
  25.     // TODO: implement initState
  26.     super.initState();
  27.     _data = fetchData();
  28.   }
  29.  
  30.   @override
  31.   Widget build(BuildContext context) {
  32.     return Scaffold(
  33.       appBar: AppBar(
  34.         title: Text(widget.title),
  35.       ),
  36.       body: Center(
  37.         child: FutureBuilder<String>(
  38.           future: _data,
  39.           builder: (context, snapshot) {
  40.             if (snapshot.connectionState == ConnectionState.waiting) {
  41.               return const CircularProgressIndicator();
  42.             } else if (snapshot.hasError) {
  43.               return Text('Error: ${snapshot.error}');
  44.             } else {
  45.               return Text('Data: ${snapshot.data}');
  46.             }
  47.           },
  48.         ),
  49.       ),
  50.       floatingActionButton: FloatingActionButton(
  51.         onPressed: fetchData,
  52.         tooltip: 'Increment',
  53.         child: const Icon(Icons.add),
  54.       ),
  55.     );
  56.   }
  57. }

5. 제공자

       Provider Flutter에서 추천하는 상태 관리 솔루션입니다.Consumer 상태를 읽고 모니터링하는 데 사용됩니다.

타이머를 예로 들어 보겠습니다.

1. 먼저 공급자를 가져옵니다.

제공자: ^6.1.2

2. ChangeNotifier 클래스를 사용자 정의합니다.

ChangeNotifier는 Flutter SDK의 간단한 클래스입니다. 청취자에게 알림을 보내는 데 사용됩니다. 즉, ChangeNotifier로 정의된 경우 해당 상태 변경을 구독할 수 있습니다. (이것은 익숙한 관찰자 패턴과 유사합니다.)

우리가 구현하려는 코드에는 _counter1과 _counter2라는 두 개의 변수가 있습니다. 코드는 다음과 같이 정의됩니다.

  1. class CounterModel extends ChangeNotifier {
  2.   int _counter1 = 0;
  3.   int _counter2 = 0;
  4.   void addCounter1(){
  5.     debugPrint('counter:$_counter1');
  6.     _counter1 += 1;
  7.     notifyListeners();
  8.   }
  9.   void addCounter2(){
  10.     debugPrint('counter:$_counter2');
  11.     _counter2 += 1;
  12.     notifyListeners();
  13.   }
  14. }

3. Customer를 사용하여 새로 고치려는 위젯을 래핑합니다.

  1.             Consumer<CounterModel>(
  2.               builder: (context, counterModel, child) {
  3.                 return Row(
  4.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  5.                   children: [
  6.                     Text('计数器1个数: ${counterModel._counter1}'),
  7.                     ElevatedButton(onPressed: (){
  8.                       counterModel.addCounter1();
  9.                     }, child: const Icon(Icons.add),),
  10.                   ],
  11.                 );
  12.               },
  13.             ),

4. 전체 코드는 다음과 같습니다.

  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  3.  
  4. class ProviderRefreshPage extends StatefulWidget {
  5.   final String title;
  6.   const ProviderRefreshPage({super.key, required this.title});
  7.  
  8.   @override
  9.   State<ProviderRefreshPage> createState() => _ProviderRefreshPageState();
  10. }
  11.  
  12. class CounterModel extends ChangeNotifier {
  13.   int _counter1 = 0;
  14.   int _counter2 = 0;
  15.   void addCounter1(){
  16.     debugPrint('counter:$_counter1');
  17.     _counter1 += 1;
  18.     notifyListeners();
  19.   }
  20.   void addCounter2(){
  21.     debugPrint('counter:$_counter2');
  22.     _counter2 += 1;
  23.     notifyListeners();
  24.   }
  25. }
  26.  
  27. class _ProviderRefreshPageState extends State<ProviderRefreshPage> {
  28.  
  29.   @override
  30.   Widget build(BuildContext context) {
  31.     return Scaffold(
  32.       appBar: AppBar(
  33.         title: Text(widget.title),
  34.       ),
  35.       body: Center(
  36.         child: Column(
  37.           mainAxisAlignment: MainAxisAlignment.start,
  38.           children: <Widget>[
  39.             const SizedBox(height: 10,), // 添加一些间距
  40.             const Divider(),
  41.             const Text('计数器实例',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),
  42.             Consumer<CounterModel>(
  43.               builder: (context, counterModel, child) {
  44.                 return Row(
  45.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  46.                   children: [
  47.                     Text('计数器1个数: ${counterModel._counter1}'),
  48.                     ElevatedButton(onPressed: (){
  49.                       counterModel.addCounter1();
  50.                     }, child: const Icon(Icons.add),),
  51.                   ],
  52.                 );
  53.               },
  54.             ),
  55.  
  56.             Consumer<CounterModel>(
  57.               builder: (context, counterModel, child) {
  58.                 return Row(
  59.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  60.                   children: [
  61.                     Text('计数器1个数: ${counterModel._counter2}'),
  62.                     ElevatedButton(onPressed: (){
  63.                       counterModel.addCounter2();
  64.                     }, child: const Icon(Icons.add),),
  65.                   ],
  66.                 );
  67.               },
  68.             ),
  69.             const Divider(height: 20,),
  70.           ],
  71.         ),
  72.       ),
  73.     );
  74.   }
  75. }

6.GetX

GetX를 사용하여 UI의 부분 새로 고침을 구현할 수도 있습니다.

먼저 GetX를 설치하세요:

get: ^4.6.6

그런 다음 GetxController에 변수를 캡슐화합니다.

  1. class CounterManagerController extends GetxController {
  2.   final counter1 = 0.obs;
  3.   final counter2 = 0.obs;
  4.   void incrementCount1() {
  5.     counter1.value++;
  6.   }
  7.   void incrementCount2() {
  8.     counter2.value++;
  9.   }
  10. }

그런 다음 Obx를 사용하여 로직을 표시해야 하는 위젯을 래핑합니다.

Obx(()=&gt; Text('카운터 1 번호: ${controller.counter2.value}'))

전체 코드는 다음과 같습니다.

  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  3.  
  4.  
  5. class CounterManagerController extends GetxController {
  6.   final counter1 = 0.obs;
  7.   final counter2 = 0.obs;
  8.   void incrementCount1() {
  9.     counter1.value++;
  10.   }
  11.   void incrementCount2() {
  12.     counter2.value++;
  13.   }
  14. }
  15.  
  16. class GetXRefreshUIPage extends StatelessWidget {
  17.   final String title;
  18.   const GetXRefreshUIPage({super.key, required this.title});
  19.  
  20.   @override
  21.   Widget build(BuildContext context) {
  22.     final CounterManagerController controller = Get.put(CounterManagerController());
  23.     return Scaffold(
  24.       appBar: AppBar(
  25.         title: Text(title),
  26.       ),
  27.       body: Center(
  28.         child: Column(
  29.           mainAxisAlignment: MainAxisAlignment.start,
  30.           children: <Widget>[
  31.             const SizedBox(
  32.               height: 10,
  33.             ), // 添加一些间距
  34.             const Divider(),
  35.             const Text(
  36.               '计数器实例',
  37.               style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  38.             ),
  39.             Row(
  40.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  41.               children: [
  42.                 Obx(()=> Text('计数器1个数: ${controller.counter1.value}')),
  43.                 ElevatedButton(
  44.                   onPressed: () {
  45.                     controller.incrementCount1();
  46.                   },
  47.                   child: const Icon(Icons.add),
  48.                 ),
  49.               ],
  50.             ),
  51.             Row(
  52.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  53.               children: [
  54.                 Obx(()=> Text('计数器1个数: ${controller.counter2.value}')),
  55.                 ElevatedButton(
  56.                   onPressed: () {
  57.                     controller.incrementCount2();
  58.                   },
  59.                   child: const Icon(Icons.add),
  60.                 ),
  61.               ],
  62.             ),
  63.             const Divider(
  64.               height: 20,
  65.             ),
  66.           ],
  67.         ),
  68.       ),
  69.     );
  70.   }
  71. }

물론 GetX에서 부분 새로 고침을 구현하는 다른 방법도 있습니다. 해당 문서를 살펴보세요. 여기에 하나의 구현 아이디어가 있습니다.

7. 글로벌키 사용

위의 세 가지 구현 방법은 모두 프레임워크를 통해 구현됩니다. 이 프레임워크를 가져오지 않으려면 GlobalKey를 사용하여 UI의 부분 새로 고침 기능을 구현할 수 있습니다.

애플리케이션 전체에서 고유한 키 GlobalKey는 다음과 같은 관련 요소에 대한 액세스를 제공합니다.BuildContext .~을 위한StatefulWidgets, GlobalKey는 또한 다음을 제공합니다.State입장.

타이머 데모에서 GlobalKey를 통해 UI를 부분적으로 새로 고치면 먼저 부분적으로 새로 고쳐질 위젯을 꺼내 별도의 구성 요소로 캡슐화합니다.

전체 코드는 다음과 같습니다. 부분적으로 새로 고쳐질 위젯을 캡슐화하고 내부 데이터를 새로 고치는 인터페이스를 제공합니다.

  1. class CounterText extends StatefulWidget {
  2.   const CounterText(Key key) : super(key: key);
  3.   @override
  4.   State<StatefulWidget> createState() {
  5.     return CounterTextState();
  6.   }
  7. }
  8.  
  9. class CounterTextState extends State<CounterText> {
  10.   String _text="0";
  11.  
  12.   @override
  13.   Widget build(BuildContext context) {
  14.     return Center(
  15.       child: Text(_text,style: const TextStyle(fontSize: 20),),
  16.     );
  17.   }
  18.   void onPressed(int count) {
  19.     setState(() {
  20.       _text = count.toString();
  21.     });
  22.   }
  23. }

그런 다음 기본 인터페이스에서 GlobaKey를 인스턴스화합니다.

  1.   int _count   = 0;
  2.   int _count2  = 0;
  3.   GlobalKey<CounterTextState> textKey = GlobalKey();
  4.   GlobalKey<CounterTextState> textKey2 = GlobalKey();

UI를 새로고침해야 하는 경우에는 GlobalKey를 통해 이전 단계에서 제공한 인터페이스를 호출하고 새로고침합니다.

전체 코드는 다음과 같습니다.

  1. import 'package:flutter/material.dart';
  2.  
  3. class GlobalKeyRefreshPage extends StatefulWidget {
  4.   final String title;
  5.   const GlobalKeyRefreshPage({super.key, required this.title});
  6.  
  7.   @override
  8.   State<GlobalKeyRefreshPage> createState() => _GlobalKeyRefreshPageState();
  9. }
  10.  
  11. class _GlobalKeyRefreshPageState extends State<GlobalKeyRefreshPage> {
  12.   int _count   = 0;
  13.   int _count2  = 0;
  14. //包裹你定义的需要更新的weight
  15.   GlobalKey<CounterTextState> textKey = GlobalKey();
  16.   GlobalKey<CounterTextState> textKey2 = GlobalKey();
  17.  
  18.   @override
  19.   Widget build(BuildContext context) {
  20.     return Scaffold(
  21.       appBar: AppBar(
  22.         title:  Text(widget.title),
  23.       ),
  24.       body: Center(
  25.         child: Column(
  26.           mainAxisAlignment: MainAxisAlignment.start,
  27.           children: <Widget>[
  28.             const SizedBox(
  29.               height: 10,
  30.             ), // 添加一些间距
  31.             const Divider(),
  32.             const Text(
  33.               '计数器实例',
  34.               style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  35.             ),
  36.             Row(
  37.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  38.               children: [
  39.                 CounterText(textKey),
  40.                 ElevatedButton(
  41.                   onPressed: () {
  42.                     _count++;
  43.                     textKey.currentState?.onPressed(_count);
  44.                   },
  45.                   child: const Icon(Icons.add),
  46.                 ),
  47.               ],
  48.             ),
  49.             Row(
  50.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  51.               children: [
  52.                 CounterText(textKey2),
  53.                 ElevatedButton(
  54.                   onPressed: () {
  55.                     _count2++;
  56.                     textKey2.currentState?.onPressed(_count2);
  57.                   },
  58.                   child: const Icon(Icons.add),
  59.                 ),
  60.               ],
  61.             ),
  62.             const Divider(
  63.               height: 20,
  64.             ),
  65.           ],
  66.         ),
  67.       ),
  68.     );
  69.   }
  70. }
  71.  
  72.  
  73. class CounterText extends StatefulWidget {
  74.   const CounterText(Key key) : super(key: key);
  75.   @override
  76.   State<StatefulWidget> createState() {
  77.     return CounterTextState();
  78.   }
  79. }
  80.  
  81. class CounterTextState extends State<CounterText> {
  82.   String _text="0";
  83.  
  84.   @override
  85.   Widget build(BuildContext context) {
  86.     return Center(
  87.       child: Text(_text,style: const TextStyle(fontSize: 20),),
  88.     );
  89.   }
  90.   void onPressed(int count) {
  91.     setState(() {
  92.       _text = count.toString();
  93.     });
  94.   }
  95. }

개인 프로필

그는 30년 이상 기술 연구에 전념해 왔으며, java, linux, javascript, php, css 등 다양한 언어에 능숙하며, 오픈 소스 분야에 많은 공헌을 했습니다. 나중에 참조할 수 있도록 기술 개발의 일부 문제를 공유하는 개발자 문서 스테이션입니다.

내 연락처 정보

우편