혼자서 어플 만들기(1) 전체 개관 및 Flutter 설치 및 오류 해결, 그리고 VS code 연결 방법
혼자서 어플 만들기에 들어가며
앱개발은 완전히 전문 개발자의 영역으로 알고 있었다.
그런데 인문학도 출신에 마케팅 기획자로서, 법인 대표까지 운영해봤던 경험이 있는 나로서는
홈페이지나 어플에 대한 중요도가 사업 분야에서 굉장히, 거의 제일 중요하게 되었다.
아이디어나 기획이 아무리 좋아도, 웹이나 앱으로 그것을 구현하지 않으면
마치 늘 생각만하고 행동하지 않는 것과 같았다.
그래서 이번에는 직접 홈페이지를 만들거나 앱을 만드는 것을
자세하고 구체적으로 기록하고,
나뿐만 아니라 이것을 보는 사람들도 함께 만들 수 있도록
혼자서 어플 만들기 라는 제목으로
시리즈 포스팅을 해보고자 한다.
먼저 간단한 세팅과 정리를 해보고자 한다.
어플 만들기에 필요한 프로그램 : 플러터 Flutter
Flutter 로 먼저 앱을 만들고자 한다.
Dart 문법을 사용하고 VS code라는 편집기를 사용해서 만들 것이다.
간단히 설명을 하자면,
플러터Flutter 는 프레임워크 Framework고,
프레임워크는 어떤 규칙과 기준대로 만들면 앱이나 웹서비스를 만들어주는 코드 뭉치라고 보면 된다.
또한 다트 Dart 문법을 사용할 것인데, 플러터는 다트라는 언어 문법을 알아야 작성 가능하다.
왜 플러터를 다룰까?
앱개발 방법에는 네이티브 앱 (모바일 기기에서는 안드로이드와 iOs 두 가지로 나뉘어져 있다)과 크로스플랫폼 앱이 있다.
안드로이드는 java/Kotlin 언어, 개발툴은 Android Studio를 활용해서 만들고
iOS는 애플에서 제공하는 iOS SDK를 이용하여,
objective-C/ Swift 언어, Xcode라는 개발툴을 사용여 만든다.
여기서 네이티브앱은 결국 하나의 앱이라 할지라도 Android와 iOS를 각 개발 방법에 따라 개별로 2번 만든다.
성능이 빠르고 최신 기능을 적용할 수 있다는 장점이 있지만, 결국 다른 언어로 두 번 앱을 제약하는 단점이 있다.
하지만 크로스플랫폼 앱은
하나의 프로그래밍 언어와 소스코드로 Android와 iOS를 모두 개발하는 방법이다.
그래서 나는 크로스플랫폼 앱을 사용하여 어플을 만들고자 한다.
왜냐하면, 대략적으로 절반이 안드로이드, 절반이 iOS인데 둘 다 놓치기에는 그 비율이 크기 때문이다.
크로스플랫폼에는 React 와 Flutter가 있다.
React는 JavaScript를 활용하는 것이고, Flutter는 Dart라는 언어를 사용해서 만든다.
자바스크립트는 작년에도 배워서 활용했기 때문에 이번에는 Flutter라는 프레임워크를 사용해서 만들것이다.
Flutter는 구글에서 출시한 프레임워크이며 하나의 언어로 두 플랫폼 모두에서 실행될 수 있기 때문이다.
빨간색 그래프로 보여지는 플러터의 활용가능성이 리액트의 상승 폭보다 훨씬 높다.
초반에는 개발 추세에 따라가는 것이 좋아보인다.
https://d2.naver.com/helloworld/3384599
플러터를 사용해서 네이버 지식IN 어플을 만든 네이버 개발자 공식 홈피다.
참고해보면 내 사업 내 퀄리티 만들려면, 플러터를 사용해도 괜찮을 것이라고 생각한다.
플러터 다운 및 설치
이제부터 플러터를 다운받고 설치할 것이다.
먼저 플러터 다운 받는 곳
https://docs.flutter.dev/release/archive
나는 3.3.2 버전을 다운 받았다.
SRC 폴더 안에 플러터를 깔면,
flutter.bat 라는 실행 파일이 있음을 확인할 수 있다.
경로는 bin 폴더 안에 있다.
환경변수 설정
그리고 환경변수를 잡아야 한다.
컴퓨터의 어느 디렉토리에서도 사용할 수 있도록 만들어줘야 하는 작업니다.
시스템 환경 변수에 들어가서
path라는 변수에서 새로만들기 를 클릭하여
C:\src\flutter\bin 이라고 실행파일이 들어있는 폴더를
path 안에 잡아줘서 어디에서든 들어갈 수 있게 설정해놓는다.
아 그런데
환경변수 설정하고 확인을 눌렀는데도,
지정된 경로를 찾을 수 없다고 나온다. ㅠㅠ
해당 문제가 발생할시는 아래와 같은 방식으로 해결하면 된다.
거의 3시간 가까이 씨름해서 해결이 됐다.
https://gotarun.tistory.com/34
Visual Studio Code (비쥬얼 스튜디오 코드: VS code)
그 다음 개발툴인 MS에서 만든 비쥬얼 스튜디오 코드를 다운받아 설치한다.
그렇게, VS code 비쥬얼 코드를 설치한 후에
Flutter 를 extensions(확장) 버튼을 눌러서 활성화 시킨 후, 설치한 Flutter를 VS Code에서 사용할 수 있게끔
설치(install) 연결을 해준다.
DART 언어 추가
하는김에
DART 도 설치한다. 설치 확인도 필요하다.
dart라고 검색하면, 우측화면에 Disable 과 Uninstall 이 있어서 설치가 되어있음이 확인된다.
이상으로 비쥬얼 스튜디오 코드 설치와
VS Code 안에서 작업을 할 때
어플만드는데 필요한 구성요소인 Flutter와 Dart를 연결시켜주는 작업을 완료했다.