<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/"><span itemprop="name">Home</span></a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter"><span itemprop="name">flutter</span></a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter/vscode-settings/"><span itemprop="name">[Flutter] VSCode 설정</span></a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#개요">개요</a></li><li><a href="#flutter-ui-guides">Flutter UI Guides</a></li><li><a href="#hot-reload">Hot Reload</a></li><li><a href="#완료">완료</a></li></ul></div><h2 id="개요">개요</h2><p>많은 개발자들이 <a href="https://code.visualstudio.com/" rel="nofollow noreferrer" target="_blank">VSCode</a>를 사용하여 Flutter로 앱을 개발합니다.</p><p>이번 블로그 포스트에서는 <code>VSCode</code>로 Flutter 앱을 개발할 때, 개발에 도움이 되는 설정들에 대해서 알아보도록 하겠습니다.</p><h2 id="flutter-ui-guides">Flutter UI Guides</h2><p>Flutter로 앱을 개발하다보면 수많은 위젯들을 사용하게 됩니다. 하지만 위젯을 많이 사용하면, 위젯의 시작과 끝을 구분하기 어렵습니다.</p><p>VSCode에서 Flutter로 앱을 개발할 때에는 다음과 같이 위젯의 끝을 알려주는 주석이 자동으로 추가되어 표시됩니다. 이 기능을 통해 위젯의 시작과 끝을 구별할 수 있습니다.</p><picture><source srcset="/assets/images/category/flutter/2022/vscode-settings/end_of_widgets.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/vscode-settings/end_of_widgets.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/vscode-settings/end_of_widgets.jpg" alt="Flutter vscode settings - end of widgets"></picture><p>이 기능도 Flutter 개발에 정말 큰 도움이 되지만, <code>Flutter UI Guides</code> 활성화하면 더욱 간단하게 위젯을 구별할 수 있습니다.</p><p>VSCode의 설정을 열고 <code>Flutter UI Guides</code>을 검색하고 다음과 같이 두가지 옵션을 활성화시킵니다.</p><picture><source srcset="/assets/images/category/flutter/2022/vscode-settings/flutter_ui_guides.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/vscode-settings/flutter_ui_guides.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/vscode-settings/flutter_ui_guides.jpg" alt="Flutter vscode settings - Flutter UI Guides"></picture><ul><li>Dart: Preview Flutter UI Guides</li><li>Dart: Preview Flutter UI Guides Custom Tracking</li></ul><p>이와 같이 설정한 후, VSCode를 재실행하면 다음과 같이 가이드라인이 표시되어 위젯을 좀 더 쉽게 구별할 수 있게 됩니다.</p><picture><source srcset="/assets/images/category/flutter/2022/vscode-settings/flutter_ui_guides_activate.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/vscode-settings/flutter_ui_guides_activate.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/vscode-settings/flutter_ui_guides_activate.jpg" alt="Flutter vscode settings - Flutter UI Guides activate"></picture><h2 id="hot-reload">Hot Reload</h2><p>VSCode에서 Flutter를 개발할 때, 기본적으로 <code>Hot Reload</code>가 동작합니다. 이때 <code>Hot Reload</code>는 VSCode의 <code>onDidSave</code> 이벤트가 발생할 때, <code>Hot Reload</code>가 동작합니다. 즉, <code>VSCode</code>이외의 툴에서 파일을 수정하면 <code>Hot Reload</code>가 동작하지 않습니다.</p><p><code>VSCode</code>이외의 툴에서 <code>Dart</code> 파일을 수정하는 경우에도 <code>Hot Reload</code>가 실행되도록 만들기 위해서는 <code>Preview Hot Reload On Save Watcher</code> 옵션을 활성화할 필요가 있습니다.</p><p>VSCode의 설정을 열고 <code>Preview Hot Reload On Save Watcher</code>을 검색하고 해당 옵션을 다음과 같이 활성화시킵니다.</p><picture><source srcset="/assets/images/category/flutter/2022/vscode-settings/hot_reload_on_save_watcher.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/vscode-settings/hot_reload_on_save_watcher.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/vscode-settings/hot_reload_on_save_watcher.jpg" alt="Flutter vscode settings - Hot Reload On Save Watcher"></picture><ul><li>Dart: Preview Hot Reload On Save Watcher</li></ul><p>이렇게 해당 옵션을 활성화시켜두면, 다른 툴이나 명령어를 통해 코드를 생성하는 경우에도 <code>Hot Reload</code>가 동작하게 됩니다.</p><h2 id="완료">완료</h2><p>이것으로 <code>VSCode</code>에서 <code>Flutter</code>로 앱을 개발할 때, VSCode의 옵션 설정을 통해 Flutter 개발에 좀 더 도움이 되는 방법에 대해서 알아보았습니다. 여러분도 VSCode를 사용하여 Flutter를 개발한다면, 이런 설정을 통해 좀 더 편하게 Flutter를 개발해 보시기 바랍니다.</p><p><code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code></p><h2>앱 홍보</h2><div><p> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요.<br><code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다.</p><p> 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</p></div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

VSCode를 사용하여 Flutter로 앱을 개발할 때, 도움이 되는 설정들에 대해서 알아봅시다.