본문 바로가기
Flutter 첫 프로젝트 - my_app 코드 간단 설명 (2/2) *주의 : 이 강의는 비전공자의 이해를 돕기 위한 강의로 실제내용을 각색했음을 알립니다. 맛보기이니 외우려 하지 마시고 천천히 훑어보기만 하세요! 이어서 MaterialApp에 대해 알아보죠. 지난 시간에 Material이 건축양식이라고 말씀드렸죠? MaterialApp은 그 양식에 맞춰 만든 앱이라는 뜻이 됩니다. 이 양식에 따르면 몇 가지 필요로 하는 정보가 있어요. 예를 들면 건물 이름이, 건물 테마, 인테리어죠. MaterialApp의 괄호 안에 title이라고 적혀 있는 게 바로 (건물 이름 = 프로젝트 이름)인데요. 어디 다른데에 노출되는 정보는 아닙니다. 그저 여러분의 앱 이름이 무엇인지 적어놓을 뿐이에요. 그 다음에 theme이라고 적힌 게 바로 (건물 테마 = 앱의 테마)입니다. 앱 전체.. 2022. 4. 29.
Flutter 첫 프로젝트 - my_app 코드 간단 설명 (1/2) *주의 : 이 강의는 비전공자의 이해를 돕기 위한 강의로 실제내용을 각색했음을 알립니다. 맛보기이니 외우려 하지 마시고 천천히 훑어보기만 하세요! 이제 본격적으로 플러터를 뜯어보도록 하죠. 윈도우 사용하시는 분들은 F5, 맥을 사용하시는 분들은 Fn+F5를 눌러서 처음 앱을 실행하고 나면 별거 없습니다. 오른쪽 아래에 있는 파란색 +버튼을 누르면 화면 중앙에 있는 숫자가 1씩 늘어나는 앱입니다. 여러분이 만든 my_app 폴더의 main.dart 파일에 있는 코드를 주석만 지워서 그대로 가져와 볼게요. main.dart에 있는 몇 줄 없는 코드만으로 이 앱이 실행된 거거든요. import 'package:flutter/material.dart'; void main() { runApp(const MyApp.. 2022. 4. 28.
코드 버전 관리를 위한 Git Desktop 설치하기 여러분이 본격적으로 개발을 시작하면 금방 이런 상황이 생깁니다. - 아, 도대체 뭐가 문제인지 모르겠네... 오늘 개발 시작하기 전으로 돌아가고 싶다... - 컴퓨터 정리하다가 잘못해서 이 폴더 삭제하면 어떡하지?? - 친구랑 같이 개발하려면 어떡해야하지?? 이런 상황 해결을 도와줄 멋진 도구가 있습니다. 깃 데스크톱이라는 프로그램인데요. 아이클라우드, 구글드라이브나 엔드라이브같은 원격 저장소에 접속하는 도구라고 생각하시면 됩니다. 여러분이 오늘 어떤 코드를 추가하고 지웠는지 알 수 있죠. 오늘 작성한 코드를 초기화 할 수도 있구요. 누가 어떤 코드를 작성했는지 알 수 있기 때문에 친구와 함께 개발할 수도 있죠. 아래 링크를 눌러 설치를 시작해볼까요? GitHub Desktop Simple collabo.. 2022. 4. 27.
안드로이드 스튜디오 시뮬레이터 실행하는 법 여러분이 Flutter 앱을 개발을 위해서 안드로이드 스튜디오에서 여러분의 컴퓨터에 가상의 안드로이드폰을 하나 실행해야 합니다. 가상의 안드로이드폰은 시뮬레이터 또는 에뮬레이터라고 부릅니다. 여러분의 폰을 직접 컴퓨터에 연결해서 개발할 수도 있어요. 하지만, 휴대폰 수명이 짧아질 수도 있기 때문에 개발은 시뮬레이터에서 하는 게 좋아요. (실제로 제가 사용하던 갤럭시 폰으로 개발을 했다가 배터리가 30분도 못가서 휴대폰을 바꾸게 됐죠...) 안드로이드 스튜디오를 실행하면 아래처럼 나올텐데요. [More Actions > Virtual Device Manager]를 누르세요. 가상 머신 매니저라는 창이에요. 왼쪽 상단에 있는 [Create device] 버튼을 눌러서 개발에 사용할 가상의 안드로이드폰을 만들.. 2022. 4. 26.
Xcode 시뮬레이터 실행하는 법 여러분이 Flutter 앱을 개발을 위해서 Xcode에서 여러분의 컴퓨터에 가상의 아이폰을 하나 실행해야 합니다. 가상의 아이폰은 시뮬레이터라고 부릅니다. 여러분의 아이폰을 직접 컴퓨터에 연결해서 개발할 수도 있어요. 하지만, 애플 개발자 계정으로 20만원 주고 가입해야하고, 휴대폰 수명이 짧아질 수도 있기 때문에 개발은 시뮬레이터에서 하는 게 좋아요. (실제로 제가 사용하던 갤럭시 폰으로 개발을 했다가 배터리가 30분도 못가서 휴대폰을 바꾸게 됐죠...) 아무래도 가상의 휴대폰이다보니 모든 기능을 다 사용할 수는 없어요. - 전화 불가 - 카메라 사용 불가 - GPS 위치 추적 불가 만약 여러분이 나중에 개발하다가 위의 3가지와 관련된 기능을 개발해야 한다면, 테스트용 휴대폰을 구매하시고 컴퓨터에 연결.. 2022. 4. 25.
Flutter 첫 프로젝트 가상 휴대폰으로 실행시키기 여러분 플러터 설치까지 따라하시느라 고생하셨습니다! 이제 함께 플러터 첫 프로젝트를 만들어 볼게요. 순서는 아래와 같습니다. 1. 플러터 프로젝트 만들기 2. 앱을 빌드할 시뮬레이터 실행하기 3. 조작해보고 코드별 의미 알아보기 1. 플러터 프로젝트 만들기 맥을 사용하시는 분들은 터미널 프로그램을 실행해주세요. 윈도우를 사용하시는 분들은 명령 프롬프트를 실행해주세요. 그리고 아래 명령어를 복사 붙여넣기하고 실행시켜주세요. 아래 명령어는 여러분의 플러터 프로젝트를 자동으로 만들어 주는 코드입니다. flutter create my_app 성공적으로 실행됐다면 아래의 코드를 복사 붙여넣기 해주세요. cd는 경로를 이동하는 명령어에요. 방금 만들어진 프로젝트 폴더로 경로를 이동하는 명령어 입니다. my_app이.. 2022. 4. 24.
Flutter 코딩 시간을 10분의 1로 단축시켜 줄 확장 프로그램 Helpful Extension 여러분의 플러터 코딩을 도와줄 조수들을 소개해드릴게요. 여러분이 에러를 찾으러 다니고, 계속 반복되는 코드를 작성하고, 괄호를 찾아 헤매는 그림자 노동을 줄여줄 다섯 친구들입니다. - Bracket Pair Colorizer 2 - Better Comments - Error Lens - Tabnine AI Auto Complete - Flutter Widget Snippets 첫번째는 컬러라이저인데요, 코딩을 하다 보면 괄호가 ((((())))) 이런 식으로 엄청 많이 쌓이게 됩니다. 이 괄호가 도대체 어디서 열렸고, 뭘 닫는건지 헷갈릴 때가 많은데요, 그걸 색깔로 구분할 수 있게 해주는 도구입니다. 검색창에 colorizer라고 검색하시고, Bracket Pair Colorizer2를 설치해주세요. 두.. 2022. 4. 23.
코딩을 위해 Visual Studio Code 설치하기 자, 이제 플러터로 개발을 하기 위한 마지막 준비 단계입니다. 텍스트 편집기로 비쥬얼 스튜디오 코드, 줄여서 VSC를 다운받으면 됩니다. 아래 링크를 누르세요. Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 사이트가 나오면 빨간색으로 표시된 다운로드.. 2022. 4. 22.
안드로이드폰 앱 개발을 위해 Android Studio설치하기 (맥os 버전) 윈도우에서는 아이폰 앱을 개발할 수 없지만, 맥에서는 안드로이드 앱도 개발할 수 있습니다. 안드로이드 스튜디오를 설치하기 전에 먼저 자바를 설치해야 합니다. 안드로이드 스튜디오에서 언어로 자바를 사용하기 때문이죠. 아래 링크를 눌러 자바를 다운로드해봅시다. 1. 자바 설치 https://www.oracle.com/java/technologies/downloads/#java8-mac 스크롤을 내리다보면 Java SE 섹션이 나오고 Java8이 있는 걸 보실 수 있을 거예요. 하단에 macOS 탭을 누르고 Download 버튼을 누르면 자바를 다운로드 받을 수 있습니다. jdk-8u331-macosx-x64.dmg를 누르면 아래 그림처럼 라이센스 동의에 관한 모달이 나오는데, 동의를 체크하고 Download.. 2022. 4. 21.
아이폰 앱 개발을 위해 Xcode 설치하기 macOS에 Xcode 설치는 다른 환경이나 프로그램에 비해 간단합니다. Xcode는 앱 스토어에서 바로 다운로드 받을 수 있습니다. 런치패드나 스포트라이트에 App Store를 검색해보세요. 왼쪽 탭의 검색창에 xcode를 입력하고 엔터를 누르면, 검색 결과로 리스트 왼쪽 상단에 Xcode가 나옵니다. 저는 미리 다운로드되어 있어 업데이트로 나오지만 여러분은 받기 버튼을 누르시면 됩니다. 여러분이 작성한 코드는 설계도이고, 앱으로 만드는 작업을 건물을 짓는다는 의미로 앱을 빌드한다고 표현해요. 여러분이 뭔가 따로 설치하거나, 삭제하지 않았는데 어느날 갑자기 앱이 빌드가 안 된다면 앱 스토어를 켜서 xcode를 검색해보세요. Xcode가 업데이트가 필요해서 그런 경우가 99%입니다. 만약 Xcode 받기.. 2022. 4. 20.
구글에서 사용하는 Flutter 코딩 컨벤션 flutter_lints 알아보기 코딩 컨벤션이란 무엇인가요? 사람들과 함께 협업을 할 때 코딩의 규칙이 없으면 각자가 편한대로 코딩하게 됩니다. 그렇게 방치한 상태로 시간이 많이 흐르게 되면, 나중에 그 코드를 짠 당사자가 없으면 해석하기 어려운 지경에 이르게 되죠. 이런 일을 줄이기 위해 탄생한 게 코딩 컨벤션입니다. 코딩 컨벤션이란 누가 봐도 읽기 쉽고, 관리하기 편하도록 만든 코딩 스타일 규칙입니다. 아무도 사투리를 쓰지 않고, 표준어만 사용한다면 의사소통에 큰 지장이 없겠죠? 플러터에서는 어떤 코딩 컨벤션을 쓰나요? 플러터는 다트라는 언어를 사용합니다. Effective Dart라는 코딩 가이드라인이 있죠. 보통 여기서 제공하는 가이드라인을 회사나 팀에 따라 필요한 부분을 채택하여 사용합니다. 그러다보니 회사나 팀마다 코딩 스타.. 2022. 4. 19.
안드로이드폰 앱 개발을 위해 Android Studio설치하기 (윈도우 버전) 아래 링크를 눌러 안드로이드 스튜디오 설치를 시작해봅시다. Download Android Studio and SDK tools | Android Developers The official IDE for Android app developers. developer.android.com 스크롤을 내려 Download Android Studio 버튼을 누르세요. 약관이 나오면 스크롤을 아래로 끝까지 내려 동의를 체크한 후 다운로드 버튼을 누르시면 됩니다. 다운로드에는 약 1기가바이트가 필요하네요. 다운로드가 완료된 exe파일을 실행해서 설치를 진행해보죠. 어떤 옵션도 건드릴 것 없이 Next > 버튼만 누르다보면 설치가 진행됩니다. 간단하게 설치가 끝났습니다. Finish 버튼을 누르면 안드로이드 스튜디오가 .. 2022. 4. 19.
Flutter DateTime 요일 구하기 개발을 하다보면 날짜 변환 외에 무슨 요일인지 필요할 때가 있다. 해당 기능은 intl이라는 라이브러리를 이용하면 구현할 수 있다. 우선 아래 링크를 눌러 패키지를 확인하고 pubspec.yaml에 추가하자. intl | Dart Package Contains code to deal with internationalized/localized messages, date and number formatting and parsing, bi-directional text, and other internationalization issues. pub.dev 여기까지 했다면 DateFormat이라는 클래스를 이용해서 요일을 구할 수 있다. DateFormat('E', 'ko_KR').format(dateTime) .. 2022. 4. 19.
[에러해결] Flutter - Locale data has not been initialized 달력과 같이 번역 기능이 포함된 라이브러리를 사용하다 보면 아래와 같은 에러를 만날 때가 있다. Locale data has not been initialized 원인 에러 그대로 기본 locale이 초기화되지 않아서 발생했다. 해결방법 main.dart의 main함수에 기본 locale을 초기화하면 된다. 한국어를 기본 언어로 사용한다면 첫번째 파라미터에 'ko_KR'를 쓴다. void main() async { ... // 기본 언어 초기화 initializeDateFormatting('ko_KR', null); runApp( ... } 2022. 4. 18.
통역사 Flutter는 어떤 친구인가요? (앱 개발 방법 3가지) *주의 : 이 강의는 비전공자의 이해를 돕기 위한 강의로 실제내용을 각색했음을 알립니다. 영어로는 Flutter, 한국에서는 플러터라는 발음으로 부르고 있어요. 플러터는 2017년에 구글에서 여러가지 프로그램과 안드로이드 앱, 아이폰 앱을 하나의 언어로 개발하고자 만든 통역사 친구에요. 앱을 개발하는 방법에는 크게 3가지가 있는데, 플러터 개발은 3가지 앱 개발 방법 중 하나라고 생각하시면 됩니다. 하나씩 비교하면서 알아볼게요! 1. Native (네이티브) 지금까지 여러분에게 안드로이드어, 아이폰어라고 말씀드린 언어는 네이티브 언어라고 말해요. 영어 원어민을 네이티브 스피커라고 말하는 것과 같죠. 네이티브 언어를 사용해서 앱을 개발하는 방법을 네이티브 개발이라고 말하고 있어요. 안드로이드폰과 아이폰에서.. 2022. 4. 16.
Flutter window에 설치하는 법 / 윈도우 노트북, 컴퓨터에 설치하는 법 윈도우 노트북, 컴퓨터를 이용하시는 여러분은 아래 링크를 눌러 플러터 설치를 시작해봅시다. 지금부터 순서대로 아래 3가지를 다운받을 겁니다. 안타깝게도 윈도우 컴퓨터는 아이폰 앱을 개발할 때 아이폰과 소통할 수 없어요. 그래서 여러분이 작성한 코드가 아이폰 앱에서 구동되는 모습을 볼 수 없죠. 아이폰 앱을 원활하게 개발하시려면 아이맥 또는 맥북 구매를 권해드립니다. 1. 통역사 플러터 (Flutter) 다운로드 2. 안드로이드폰 앱 개발을 위해 안드로이드 스튜디오 (Android Studio) 다운로드 3. 코딩을 위해 비쥬얼 스튜디오 코드 (Visual Studio Code) 다운로드 1. 통역사 플러터 (Flutter) 다운로드 Windows install How to install on Window.. 2022. 4. 16.
Flutter macOS에 설치하는 법 / 플러터 아이맥, 맥북에 설치하는 법 아이맥, 맥북을 이용하시는 여러분은 아래 링크를 눌러 플러터 설치를 시작해봅시다. 지금부터 순서대로 아래 4가지를 다운받을 겁니다. 1. 통역사 플러터 (Flutter) 다운로드 2. 아이폰 앱 개발을 위해 엑스코드 (XCode) 다운로드 3. 안드로이드폰 앱 개발을 위해 안드로이드 스튜디오 (Android Studio) 다운로드 4. 코딩을 위해 비쥬얼 스튜디오 코드 (Visual Studio Code) 다운로드 1. 통역사 플러터 (Flutter) 다운로드 macOS install How to install on macOS. docs.flutter.dev 설치를 위한 최소 요구 조건은 아래와 같습니다. - 운영체제 : macOS - 여유공간 : 2.8 기가바이트 사이트에 접속하고 스크롤을 아래로 내리.. 2022. 4. 16.
앱이란 무엇인가요? *주의 : 이 강의는 비전공자의 이해를 돕기 위한 강의로 실제내용을 각색했음을 알립니다. 아시다시피 앱은 여러분이 휴대폰으로 사용하시는 카카오톡, 유튜브, 인스타그램 등의 프로그램입니다. 어플리케이션의 줄임말로 어플, 앱으로 불리우고 있죠. 어플리케이션의 뜻은 컴퓨터 응용 프로그램입니다. 휴대폰도 전원 껐다 켜지고 인터넷도 되고 게임도 할 수 있다보니 소형 컴퓨터라고 볼 수 있죠. 혹시 여러분은 안드로이드 앱과 아이폰 앱을 따로 만들어야 한다는 사실을 알고 계셨나요? 그 이유는 안드로이드와 아이폰이 사용하는 언어가 각각 다르기 때문이에요. 예를 들어 안드로이드에서는 휴대폰이 안드로이드어로 소통하게 되어있다면, 아이폰에서는 아이폰어로 소통하게 되어있죠. 그렇기 때문에 안드로이드어를 하는 안드로이드 앱이 아.. 2022. 4. 15.
[에러해결] iOS GoogleService-Info.plist Not found - Firebase, flutter Firebase 애널리틱스를 이용하기 위해 GoogleService-info.plist 파일을 다운로드 받았다. 이 파일을 Runner 폴더에 옮기고 빌드하면 not found 에러를 볼 수 있다. 원인 ios/Runner.xcodeproj/project.pbxproj에서 GoogleService-info.plist의 경로를 추가해줘야 한다. 해결방법 XCode > Runner > Runner 폴더 우클릭 > Add files to "Runner" 위 방법은 자동으로 경로가 추가되어 문제를 해결할 수 있다. 2022. 2. 5.
[에러해결] the constructor being called isn't a const constructor - flutter 원인 const를 잘못된 타이밍에 쓴 것 결론 함수 또는 변수에 const가 잘못 선언되어 있는지 확인하면 된다. 설명 const는 컴파일 타임에 결정되는데, 함수는 컴파일 타임에 결정되지 않기 때문에 에러가 발생한다. 수치, 색상, 텍스트 등 변하지 않는 데이터에 const를 사용하면 된다. const 사용하면 jank도 예방할 수 있다. 2022. 1. 9.

티스토리툴바