{"id":52,"date":"2026-10-13T21:15:45","date_gmt":"2026-10-13T21:15:45","guid":{"rendered":"https:\/\/dingdonghome.duckdns.org\/?p=52"},"modified":"2026-10-14T04:04:04","modified_gmt":"2026-10-14T04:04:04","slug":"vscode-flutter-%ec%84%a4%ec%a0%95","status":"publish","type":"post","link":"https:\/\/dinggo.duckdns.org\/?p=52","title":{"rendered":"[\uac1c\ubc1c\uc77c\uc9c0 #02 | \uc778\ud504\ub77c] Mac\uc5d0\uc11c Flutter & VS Code \uac1c\ubc1c \ud658\uacbd \uad6c\ucd95\ud558\uae30 (\ucd08\ubcf4\uc790 \uc644\ubcbd \uac00\uc774\ub4dc)"},"content":{"rendered":"\n
\n

\uce74\uce74\uc624\ud1a1 \uac19\uc740 \ud06c\ub85c\uc2a4\ud50c\ub7ab\ud3fc \uba54\uc2e0\uc800 ‘\ub529\ub3d9(DingDong)’ \ub9cc\ub4e4\uae30 \ud504\ub85c\uc81d\ud2b8 2\ud0c4!<\/strong>
\uc774\ubc88 \uae00\uc5d0\uc11c\ub294 macOS(Apple Silicon M1\/M2\/M3\/M4 \ubc0f Intel) \ud658\uacbd\uc5d0\uc11c Flutter SDK\ub97c \uc124\uce58\ud558\uace0, Visual Studio Code(VS Code)\ub97c \uc2e4\ubb34 \uac1c\ubc1c\uc6a9\uc73c\ub85c \uc644\ubcbd\ud558\uac8c \uc138\ud305\ud558\ub294 \uacfc\uc815\uc744 \ub2e4\ub8f9\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n\n\n\n

\n\n\n\n

1. \uc0ac\uc804 \uc694\uad6c\uc0ac\ud56d \ubc0f \ud655\uc778<\/h2>\n\n\n\n

Flutter\ub85c Android, iOS, macOS, Windows \uc571\uc744 \uac1c\ubc1c\ud558\ub824\uba74 \uae30\ubcf8 \uac1c\ubc1c \ub3c4\uad6c\ub4e4\uc774 \ud544\uc694\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n

    \n
  1. Mac \uc6b4\uc601\uccb4\uc81c<\/strong>: macOS 11 \uc774\uc0c1 \uad8c\uc7a5 (\ud604\uc7ac Apple Silicon M1~M4 \uae30\uc900 \uc644\ubcbd \uc9c0\uc6d0)<\/li>\n\n\n\n
  2. Xcode<\/strong>: iOS \ubc0f macOS \uc571 \ube4c\ub4dc\uc6a9 (Mac App Store\uc5d0\uc11c \ubb34\ub8cc \ub2e4\uc6b4\ub85c\ub4dc)<\/li>\n\n\n\n
  3. Android Studio<\/strong>: Android SDK \ubc0f \uc5d0\ubbac\ub808\uc774\ud130 \uc124\uc815\uc6a9<\/li>\n\n\n\n
  4. Visual Studio Code<\/strong>: \uc8fc\ub825 \ucf54\ub4dc \ud3b8\uc9d1\uae30<\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n

    2. \uac00\uc7a5 \uc26c\uc6b4 \uc124\uce58 \ubc29\ubc95: VS Code \ud50c\ub7ec\uadf8\uc778\ubd80\ud130 \uc124\uce58\ud558\uae30 (\ucd94\ucc9c!)<\/h2>\n\n\n\n

    \ud130\ubbf8\ub110\uc5d0\uc11c \uba85\ub839\uc5b4 \uc785\ub825\ud558\uace0 \ud658\uacbd\ubcc0\uc218(PATH)\ub97c \uc124\uc815\ud558\ub294 \uac8c \ubcf5\uc7a1\ud558\uac8c \ub290\uaef4\uc9c4\ub2e4\uba74, VS Code\uc5d0\uc11c \ud655\uc7a5 \ud504\ub85c\uadf8\ub7a8(\ud50c\ub7ec\uadf8\uc778)\uc744 \uba3c\uc800 \uc124\uce58\ud558\uace0 \uc790\ub3d9\uc73c\ub85c SDK\ub97c \ub2e4\uc6b4\ubc1b\ub294 \ubc29\ubc95<\/strong>\uc774 \uac00\uc7a5 \uc27d\uace0 \ud3b8\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

    flowchart LR\n    A[\"1. VS Code \uc2e4\ud589\"] --> B[\"2. 'Flutter' \ud655\uc7a5 \uc124\uce58\"]\n    B --> C[\"3. \uc0c8 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131\"]\n    C --> D[\"4. 'Download SDK' \uc790\ub3d9 \uc124\uce58\"]\n    D --> E[\"5. \uac1c\ubc1c \uc900\ube44 \ub05d!\"]\n    linkStyle default stroke-width:3px,stroke:#333333<\/pre>
    <\/div><\/div>\n\n\n\n
    <\/p>\n\n\n\n
    [\ub2e8\uacc4 1] VS Code\uc5d0\uc11c Flutter \ud655\uc7a5 \ud504\ub85c\uadf8\ub7a8 \uc124\uce58<\/h3>\n\n\n\n
      \n
    1. VS Code<\/strong>\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n
    2. \uc88c\uce21 \uba54\ub274\uc5d0\uc11c \ud655\uc7a5(Extensions)<\/strong> \uc544\uc774\ucf58(Cmd + Shift + X<\/code>)\uc744 \ub204\ub985\ub2c8\ub2e4.<\/li>\n\n\n\n
    3. \uac80\uc0c9\ucc3d\uc5d0 **Flutter<\/code>**\ub97c \uac80\uc0c9\ud55c \ub4a4 [Install]<\/strong> \ubc84\ud2bc\uc744 \ub204\ub985\ub2c8\ub2e4.
      (Dart \uc5b8\uc5b4 \ud50c\ub7ec\uadf8\uc778\ub3c4 \uc790\ub3d9\uc73c\ub85c \ud568\uaed8 \uc124\uce58\ub429\ub2c8\ub2e4.)<\/em><\/li>\n<\/ol>\n\n\n\n
      [\ub2e8\uacc4 2] VS Code \uc548\ub0b4\ucc3d\uc73c\ub85c Flutter SDK \uc790\ub3d9 \ub2e4\uc6b4\ub85c\ub4dc<\/h3>\n\n\n\n
        \n
      1. VS Code\uc5d0\uc11c \ub2e8\ucd95\ud0a4 Cmd + Shift + P<\/code>\ub97c \ub204\ub985\ub2c8\ub2e4.<\/li>\n\n\n\n
      2. \uac80\uc0c9\ucc3d\uc5d0 **Flutter: New Project<\/code>**\ub97c \uc785\ub825\ud558\uace0 \uc5d4\ud130\ub97c \uce69\ub2c8\ub2e4.<\/li>\n\n\n\n
      3. \ucef4\ud4e8\ud130\uc5d0 Flutter SDK\uac00 \uc5c6\uc73c\uba74 \uc6b0\uce21 \ud558\ub2e8\uc5d0 “Flutter SDK\ub97c \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. [Download SDK] \ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?”<\/strong> \ub77c\ub294 \ud31d\uc5c5 \uc54c\ub9bc\uc774 \ub739\ub2c8\ub2e4.<\/li>\n\n\n\n
      4. [Download SDK]<\/strong> \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uace0 \uc6d0\ud558\ub294 \ud3f4\ub354(\uc608: ~\/development<\/code> \ub610\ub294 \ubcf8\uc778 \ud648 \ud3f4\ub354)\ub97c \uc9c0\uc815\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n
      5. VS Code\uac00 \uc54c\uc544\uc11c \ucd5c\uc2e0 Flutter SDK\ub97c \ub2e4\uc6b4\ub85c\ub4dc\ud558\uace0, \uc555\ucd95\uc744 \ud480\uace0 \uacbd\ub85c \uc5f0\uacb0\uae4c\uc9c0 \uc790\ub3d9\uc73c\ub85c \uc644\ub8cc\ud574 \uc90d\ub2c8\ub2e4!<\/li>\n<\/ol>\n\n\n\n
        \n\n\n\n
        3. (\uc120\ud0dd) \uc804\ud1b5\uc801\uc778 \ud130\ubbf8\ub110 \uc218\ub3d9 \uc124\uce58 \ubc29\uc2dd<\/h2>\n\n\n\n
        \ub9cc\uc57d \ud130\ubbf8\ub110\uc5d0\uc11c \uc9c1\uc811 \uc81c\uc5b4\ud558\uac70\ub098 Homebrew\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uc120\ud638\ud558\uc2e0\ub2e4\uba74 \uc544\ub798 \ubc29\uc2dd\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n
        # \ubc29\ubc95 A: Homebrew\ub85c \ud55c \uc904 \uc124\uce58 (\uac00\uc7a5 \uae54\ub054\ud568)\nbrew install --cask flutter\n\n# \ubc29\ubc95 B: Git \uc800\uc7a5\uc18c\uc5d0\uc11c \uc9c1\uc811 \ub2e4\uc6b4\ub85c\ub4dc\nmkdir -p ~\/development && cd ~\/development\ngit clone https:\/\/github.com\/flutter\/flutter.git -b stable\necho 'export PATH=\"$PATH:$HOME\/development\/flutter\/bin\"' >> ~\/.zshrc\nsource ~\/.zshrc<\/pre>\n\n\n\n
        \n\n\n\n
        4. Flutter Doctor\ub85c \uac1c\ubc1c \ud658\uacbd \uc0c1\ud0dc \uc810\uac80\ud558\uae30<\/h2>\n\n\n\n
        VS Code \ud50c\ub7ec\uadf8\uc778\uacfc SDK\uac00 \uc900\ube44\ub418\uc5c8\uc73c\uba74, \ud639\uc2dc \ud544\uc694\ud55c \ucd94\uac00 \ub3c4\uad6c(iOS\/Android \ube4c\ub4dc\uc6a9)\uac00 \uc788\ub294\uc9c0 \ud655\uc778\ud574 \ubd05\ub2c8\ub2e4.
        VS Code \ud130\ubbf8\ub110(Ctrl + ~<\/code>)\uc5d0\uc11c \uc544\ub798 \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n
        flutter doctor<\/pre>\n\n\n\n
        \uc2e4\ud589\ud558\uba74 \uc544\ub798\ucc98\ub7fc \uccb4\ud06c\ub9ac\uc2a4\ud2b8\uac00 \ub098\uc635\ub2c8\ub2e4:<\/p>\n\n\n\n
        [\u2713] Flutter (Channel stable, 3.x.x, on macOS ...)\n[!] Android toolchain - develop for Android devices\n    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses\n[!] Xcode - develop for iOS and macOS\n    ! Xcode installation is incomplete...\n[\u2713] Chrome - develop for the web\n[!] Android Studio (not installed or missing plugins)\n[\u2713] VS Code (version 1.x)\n[\u2713] Connected device\n[\u2713] Network resources<\/pre>\n\n\n\n
        \ub290\ub08c\ud45c(!)\uac00 \ub730 \ub54c \ud574\uacb0 \ubc29\ubc95<\/h3>\n\n\n\n
        \u2460 Android \ub77c\uc774\uc120\uc2a4 \ub3d9\uc758 \uc624\ub958<\/h4>\n\n\n\n
        flutter doctor --android-licenses\n# \ub098\ud0c0\ub098\ub294 \ubaa8\ub4e0 \uc9c8\ubb38\uc5d0 'y' \uc785\ub825 \ud6c4 Enter<\/pre>\n\n\n\n
        \u2461 Xcode \uad00\ub828 \uc124\uc815 (iOS\/Mac \ube4c\ub4dc\uc6a9)<\/h4>\n\n\n\n
        App Store\uc5d0\uc11c Xcode \uc124\uce58 \ud6c4 \ud130\ubbf8\ub110\uc5d0\uc11c \ub2e4\uc74c \uba85\ub839\uc5b4 \uc2e4\ud589:<\/p>\n\n\n\n
        sudo xcode-select --switch \/Applications\/Xcode.app\/Contents\/Developer\nsudo xcodebuild -runFirstLaunch<\/pre>\n\n\n\n
        \u2462 CocoaPods \uc124\uce58 (iOS \ub77c\uc774\ube0c\ub7ec\ub9ac \uad00\ub9ac\uc790)<\/h4>\n\n\n\n
        sudo gem install cocoapods\n# \ub610\ub294 Homebrew \uc0ac\uc6a9 \uc2dc\nbrew install cocoapods<\/pre>\n\n\n\n
        \ubaa8\ub4e0 \ud544\uc218 \ud56d\ubaa9\uc5d0 [\u2713]<\/code> \ucd08\ub85d\uc0c9 \uccb4\ud06c\uac00 \ub728\uba74 \uc900\ube44 \uc644\ub8cc\uc785\ub2c8\ub2e4!<\/p>\n\n\n\n
        \n\n\n\n
        5. \ucd94\uac00\ub85c \uc124\uce58\ud558\uba74 \uc88b\uc740 \uc720\uc6a9\ud55c VS Code \ud655\uc7a5 & \uc124\uc815<\/h2>\n\n\n\n
        5.1 \uc0dd\uc0b0\uc131 \ucd94\ucc9c \ud50c\ub7ec\uadf8\uc778 (Extensions)<\/h3>\n\n\n\n
        VS Code \uc88c\uce21\uc758 \ud655\uc7a5 \uc544\uc774\ucf58(Cmd + Shift + X<\/code>)\uc5d0\uc11c \ucd94\uac00\ub85c \uc124\uce58\ud558\uba74 \uac1c\ubc1c\uc774 \ub9e4\uc6b0 \ud3b8\ub9ac\ud574\uc9d1\ub2c8\ub2e4:<\/p>\n\n\n\n
        \ud655\uc7a5 \ud504\ub85c\uadf8\ub7a8 \uba85<\/th>\ucd94\ucc9c \uc774\uc720 \ubc0f \uc5ed\ud560<\/th><\/tr><\/thead>
        Flutter<\/strong><\/td>Dart \ud655\uc7a5\uc744 \ud3ec\ud568\ud558\uba70, \ub514\ubc84\uae45, \ucf54\ub4dc \uc644\uc131, \uc704\uc82f \ud56b \ub9ac\ub85c\ub4dc(Hot Reload) \uc81c\uacf5 (\ud544\uc218!)<\/td><\/tr>
        Dart<\/strong><\/td>Dart \uc5b8\uc5b4 \ubb38\ubc95 \uac80\uc0ac, \ucf54\ub4dc \ud3ec\ub9f7\ud305, \ub9ac\ud329\ud1a0\ub9c1 \uc9c0\uc6d0 (Flutter \uc124\uce58 \uc2dc \uc790\ub3d9 \ud3ec\ud568)<\/td><\/tr>
        Flutter Riverpod Snippets<\/strong><\/td>Riverpod \uc0c1\ud0dc\uad00\ub9ac\uc6a9 boilerplate \ucf54\ub4dc\ub97c \ube60\ub974\uac8c \uc0dd\uc131 (stless<\/code>, consumer<\/code> \ub4f1)<\/td><\/tr>
        Awesome Flutter Snippets<\/strong><\/td>\uc790\uc8fc \uc4f0\ub294 \uc704\uc82f \ud15c\ud50c\ub9bf \uc790\ub3d9\uc644\uc131 \ub2e8\ucd95\uc5b4 \uc81c\uacf5<\/td><\/tr>
        Error Lens<\/strong><\/td>\ucf54\ub4dc \uc5d0\ub7ec\ub098 \uacbd\uace0\ub97c \uc904 \ubc88\ud638 \uc606\uc5d0 \uc778\ub77c\uc778\uc73c\ub85c \ubc14\ub85c \ubcf4\uc5ec\uc8fc\uc5b4 \ube60\ub978 \ub514\ubc84\uae45 \uac00\ub2a5<\/td><\/tr>
        Material Icon Theme<\/strong><\/td>\ud3f4\ub354\uc640 \ud30c\uc77c \uc544\uc774\ucf58\uc744 \uc608\uc058\uac8c \uc815\ub9ac\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 \ud30c\uc545 \uc6a9\uc774<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
        \n\n\n\n
        4.3 \uc0dd\uc0b0\uc131\uc744 200% \uc62c\ub824\uc8fc\ub294 VS Code \uc124\uc815 (settings.json<\/code>)<\/h3>\n\n\n\n
        \ucf54\ub4dc \uc800\uc7a5 \uc2dc \uc790\ub3d9\uc73c\ub85c \ud615\uc2dd\uc744 \uc815\ub9ac\ud574\uc8fc\uace0, Flutter \uac1c\ubc1c\uc5d0 \ucd5c\uc801\ud654\ub41c \uc124\uc815\uc744 \uc801\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
          \n
        1. Cmd + Shift + P<\/code> \ub97c \ub204\ub974\uace0 Preferences: Open User Settings (JSON)<\/code> \uc744 \uac80\uc0c9\ud574 \uc5fd\ub2c8\ub2e4.<\/li>\n\n\n\n
        2. \uc544\ub798 \ub0b4\uc6a9\uc744 \ucd94\uac00\/\ubcd1\ud569\ud569\ub2c8\ub2e4:<\/li>\n<\/ol>\n\n\n\n
          {\n  \/\/ 1. \uc800\uc7a5 \uc2dc \uc790\ub3d9 \ud3ec\ub9f7\ud305 \ubc0f \uc784\ud3ec\ud2b8 \uc815\ub9ac\n  \"editor.formatOnSave\": true,\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll\": \"explicit\",\n    \"source.organizeImports\": \"explicit\"\n  },\n\n  \/\/ 2. Dart \/ Flutter \uc804\uc6a9 \uc124\uc815\n  \"[dart]\": {\n    \"editor.formatOnSave\": true,\n    \"editor.formatOnType\": true,\n    \"editor.rulers\": [80],\n    \"editor.selectionHighlight\": false,\n    \"editor.suggest.snippetsPreventQuickSuggestions\": false,\n    \"editor.suggestSelection\": \"first\",\n    \"editor.tabCompletion\": \"onlySnippets\",\n    \"editor.wordBasedSuggestions\": \"off\"\n  },\n\n  \/\/ 3. \ud50c\ub7ec\ud130 \uc704\uc82f \uac00\uc774\ub4dc \ub77c\uc778 \ud45c\uc2dc (\ud2b8\ub9ac \uad6c\uc870 \ud55c\ub208\uc5d0 \ubcf4\uae30)\n  \"dart.previewFlutterUiGuides\": true,\n  \n  \/\/ 4. \uc704\uc82f \ub05d\uc5d0 \uc27c\ud45c(Trailing Comma) \uc801\uadf9 \ud65c\uc6a9 \uad8c\uc7a5\n  \"dart.lineLength\": 80,\n  \n  \/\/ 5. \ud56b \ub9ac\ub85c\ub4dc \uc124\uc815 (\ud30c\uc77c \uc800\uc7a5 \uc2dc \uc989\uc2dc \ud654\uba74 \ubc18\uc601)\n  \"flutter.hotReloadOnSave\": \"always\"\n}<\/pre>\n\n\n\n
          \n\n\n\n
          6. \uccab \ubc88\uc9f8 Flutter \ud504\ub85c\uc81d\ud2b8 \uc2e4\ud589 \ud14c\uc2a4\ud2b8<\/h2>\n\n\n\n
          \ubaa8\ub4e0 \uc124\uc815\uc774 \ub05d\ub0ac\uc73c\ub2c8, \uc81c\ub300\ub85c \ub3d9\uc791\ud558\ub294\uc9c0 \uae30\ubcf8 \uc0d8\ud50c \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \uc2e4\ud589\ud574 \ubd05\ub2c8\ub2e4.<\/p>\n\n\n\n
          6.1 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\n\n\n\n
          # \uc6d0\ud558\ub294 \uc791\uc5c5 \ud3f4\ub354\ub85c \uc774\ub3d9 \ud6c4\ncd ~\/AndroidStudioProjects\n\n# \uc0c8 \ud50c\ub7ec\ud130 \uc571 \uc0dd\uc131 (\uc870\uc9c1 \ub3c4\uba54\uc778 \uc9c0\uc815)\nflutter create --org com.dingdong dingdong_test\ncd dingdong_test\n\n# VS Code\ub85c \uc5f4\uae30\ncode .<\/pre>\n\n\n\n
          \n\n\n\n
          6.2 \uc2e4\ud589 \ubc0f \ud56b \ub9ac\ub85c\ub4dc(Hot Reload) \uccb4\ud5d8<\/h3>\n\n\n\n
            \n
          1. \ub514\ubc14\uc774\uc2a4 \uc120\ud0dd<\/strong>: VS Code \uc6b0\uce21 \ud558\ub2e8 \uc0c1\ud0dc\ubc14\uc5d0\uc11c \ud0c0\uac9f \uae30\uae30\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4.
            (\uc608: macOS (darwin)<\/code>, iPhone 15 Simulator<\/code>, \ub610\ub294 Chrome<\/code>)<\/em><\/li>\n\n\n\n
          2. \uc2e4\ud589<\/strong>: \ud0a4\ubcf4\ub4dc F5<\/code> \ud0a4\ub97c \ub204\ub974\uac70\ub098, \uc0c1\ub2e8 \uba54\ub274\uc5d0\uc11c Run -> Start Debugging<\/code> \ud074\ub9ad.<\/li>\n\n\n\n
          3. \ud56b \ub9ac\ub85c\ub4dc \ud14c\uc2a4\ud2b8<\/strong>:\n