부업을 주업으로

flutter는 다른 프로그램과 달리 특정 폴더에 이미지를 넣고 해당 경로를 지정해 줘도 이미지가 호출되지 않는다. 사전에 pubspec.yaml 파일에 assets를 등록한 이미지만 호출해서 사용할 수 있다. 간단한 샘플 코드를 통해서 테스트해보도록 하겠다. images 폴더에 이미지 추가 root 경로에 images 폴더를 하나 생성 후 프로젝트에서 사용할 이미지 4개(dog1.jpeg, dog2.jpeg, dog3.jpeg, dog4.jpeg)를 추가해줬다. 이미지 추가 방법은 새로 생성한 images 폴더를 열어서 이미지를 넣어주거나 마우스로 이미지를 선택 후 images 폴더로 드래그해서 넣을 수 있다. assets에 이미지 경로 추가 프로젝트 root 경로에 "pubspec.yaml" 이라는 ..

flutter에서 기본적인 테마를 사용할 경우 위젯, 함수, 이벤트, 상태 등 색상으로 구분이 어렵다. 이럴 경우 코드의 가독성을 크게 떨어트리기 때문에 가독성을 높이기 위해 테마 플러그인을 설치해서 폰트 색상을 변경해 주면 좋다. flutter 기본 프로젝트를 만들면 자동으로 생성되는 간단한 코드를 기준으로 확인해 보겠다. 기본 테마의 폰트 색상 기본으로 생성한 프로젝트의 코드이다. 위젯 부분은 노란색, 위젯의 속성 부분은 보라색 등으로 구분해 줬지만 나머지 폰트는 회색으로 모두 비슷해서 폰트의 색상만으로는 무엇을 의미하는지 확인이 조금 어렵고 코드의 가독성이 떨어진다. One Dark Theme 테마 적용 가장 많이 사용하는 테마인 One Dark Theme을 적용하면 달라진 색상을 확인할 수 있다...

모바일 앱을 보면 상중하로 나뉘어져 있는 경우가 많다. 아무래도 모바일은 화면이 작기 때문에 윈도우에서 처럼 많은 UI를 한 화면에 담을 수가 없어서 상중하로 나누면 작은 화면을 효율적으로 사용할 수 있다. 정해진건 아니지만 보통 상단과 하단은 고정 UI를 넣어서 다른 메뉴로 이동하거나 이벤트를 바로 실행하는 기능을 넣고 중간 부분은 내용을 보여주는 경우가 많은 것 같다. 네이버 모바일 layout flutter의 경우 상중하를 Scaffold 위젯을 사용해서 간편하게 나눌 수 있다. 우선 결과물부터 보면 아래 이미지와 같다. 상단에 appbar를 위치시켰고 중간과 하단에는 배경색을 넣어서 구분만 해놨다. 실제로 앱을 만든다면 중간에는 내용이 들어가고 하단에는 navigation 같은게 들어가면 좋을 것..

flutter 개발에 앞서 개발환경을 세팅해야 한다. 여러가지 과정이 있지만 크게는 개발툴인 안드로이드 스튜디오와 flutter sdk를 설치하면 된다. 개발툴은 Visual Studio Code를 사용해도 되지만 flutter가 구글에서 개발한 프래임워크이기 때문에 호환성이나 향후 업데이트 이슈가 있을 수 있어서 개발툴도 구글의 안드로이드 스튜디오를 설치해서 사용하기로 했다. 개발환경을 세팅하기까지 시간이 상당히 소요되고 과정도 조금 지루하기 때문에 인내를 갖고 진행해보자. 개발환경 세팅 순서 1. flutter sdk 다운로드 2. 압축해제 후 flutter sdk 폴더 위치 변경 3. flutter sdk 위치를 환경변수 path에 설정 4. Android Studio 설치 5. Android St..

모바일 프레임워크 비교 이유 수년간 Visual Studio로 devexpress 컴포넌트를 사용해서 C# 윈도우 개발만 했었다. 하지만 트렌드가 변해서인지 몇년 전부터 회사에서 모바일 개발 요청이 들어오기 시작했다. VS 개발툴을 사용하고 c# 개발을 하다보니 자연스럽게 진입 장벽이 낮게 느껴지는 xamarin을 공부해서 앱을 만들게 되었고 실제 수십개의 메뉴를 만들어서 만족하며 운영중이다. 불편한 부분들이 많이 있었지만 C# 윈도우 개발과 크게 차이가 없어서 편하게 잘 사용하고 있었다. 그러나 점점 개발 난이도가 높은 요청이 들어오는데 xamarin 프레임워크는 시간이 지나도 다른 프레임워크에 비해서 개발환경이 크게 개선되는 부분이 없다고 느껴졌고 xamarin을 사용하는 개발자도 점점 적어지는걸 느..

react native에서 "eas build -p android" 명령어로 build를 하면 "eas.ps1 파일을 로드할 수 없습니다. 파일이 디지털 서명되지 않았습니다." 라는 에러가 발생하면서 build 되지 않는 경우가 있다. 권한문제로 eas 커맨드를 사용할 수 없어서 권한을 추가해주면 된다. 1. Windows PowerShell을 관리자 권한으로 실행한다. 2. "get-help Set-ExecutionPolicy"를 입력한다. 실행 정책에 대한 관련 도움말과 프로그램을 설치한다. 3. "Set-ExecutionPolicy RemoteSigned"를 입력한다. 신뢰하지 않는 스크트립트를 실행하도록 권한을 설정해서 eas 커맨드를 실행할 수 있도록 하면 된다. RemoteSigned 설정이 ..

Xamarin에서 클릭 이벤트가 제공되지 않는 컨트롤에 이벤트를 만들어서 추가할 수 있다. 클릭 이벤트가 존재하지 않는 StackLayout 2개를 만들어서 해당 StackLayout이 클릭될 때 메시지를 출력해 보도록 하겠다. StackLayout에 클릭 이벤트 추가 예제 TapGestureRecognizer tap = new TapGestureRecognizer(); // 탭제스쳐 선언 tap.Tapped += Tap_Tapped; // 탭제스쳐에 탭 이벤트 추가 stack1Layout.GestureRecognizers.Add(tap); // stack1layout에 생성한 제스쳐 추가 stack2Layout.GestureRecognizers.Add(tap); // stack2layout에 생성한 제..

Xamarin 뒤로가기 프로그램 종료 앱에서 뒤로 가기 버튼을 눌러서 프로그램을 종료시키는 경우가 많다. 만약 가장 첫 페이지에서 뒤로 가기 버튼을 눌렀는데 별도로 종료하는 기능을 넣어주지 않으면 앱은 종료된 것처럼 화면에서 사라지는데 실제로 프로그램은 종료되지 않은 상태로 남아있게 된다. 뒤로 가기 버튼을 1초 안에 2번 누르면 종료되도록 예제를 만들어 보려고 한다. 뒤로가기 종료 예제 1. 뒤로가기 버튼을 누를 경우 orverride 된 OnBackPressed() 이벤트 함수로 받을 수 있다. 2. MakeText를 사용해서 "한 번 더 누르면 종료됩니다" 메시지를 출력 3. 그리고 현재 시간을 함수 밖에서 저장(초기화되지 않도록 하기 위함) 4. 다시 뒤로가기 버튼을 누르면 첫 번째 뒤로 가기 했..