Choe's In coding...

작년 4월에 입사하여 Flutter를 개발한지 1년이 되어 가고있다.

이 회사에서 배운것이 너무나도 많고 또 빠르게 성장했다고 생각한다.
하지만 배우기만 하면 뭐하겠는가...

그래서 지난 취준하면서 만든 내 앱을 마이그레이션 해보려고한다.

최근 며칠 업무적으로 여유가 생겨 Todo 앱 코드를 살펴보았다.

아주아주 대충 만들어진 코드 뿐들이였고 당장 뜯어 고치고 싶다는 생각밖에 안들었다.

기간은 넉넉하게 6월까지다.

기능 개선
1. 상태관리 변경(get -> Riverpod)
2. 기능 로직 개선
3. 데이터 모델링

기능 추가

1. 앱 알림
2. 구글 파이어베이스연동
3. 구글 캘린더 연동

4. 앱 테마 개선

5. 기타 기능 추가..

우선 이 정도로 잡고

나머지 사항들에 대해선 개발하면서 추가할 생각이다.

또 해당 프로젝트에서 작업한느것보단

신규 프로젝트를 생성하여 하는것이 관리하기 수월할것같다.

이번에는 dart 문법중 enum에 대해 알아보자

enum이란..?

한 변수안에 여러 가지 옵션을 제공하는 것이다.

예시

서버와 통신을 한다고 가정을 해보자

통신의 결과가 성공, 실패, 대기 라고 가정을 한다면

결과에 따라 다르게 수행할 로직이 있을것이다.

if(result== '성공')
{
	print("성공")
}

위 코드가 정상이지만

if(result== '성고') // 오타
{
	print("성공")
}

위 처럼 오타를 낸다면 당연히 오류가 날것이다.

위 같은 오타를 방지하기 위해 사용된다고 보면 된다.

예시 코드를 보자

enum ResultOption{
  success,
  fail,
  wait,
}
void main(){
  final result = ResultOption.success;
  if(result == ResultOption.success){
    print('성공');
  }
  else{
    print('실패');
  }
}

위 처럼 ResultOption을 통해

여러가지 옵션을 미리 지정함으로써

단순 오타로 인한 코드 오류를 방지할 수 있다.

어제 맥 os 업데이트와 함께

Xcode 업데이트를 진행했는데..

이상하게 플러터 프로젝트 IOS 빌드가 실패했다.

flutter upgrade를 해주었지만 실패

flutter clean 또한 실패..

몇분간 삽질 끝에

구글에서 해결법을 찾았다.

원인은

빌드 타겟을 잡지 못하여 발생되는 것으로 보여진다.

해결법은

타겟을 수동으로 지정해주면 해결완료이다.

프로젝트/ios/Profile 파일에서

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
  end
end

이 코드를

post_install do |installer|
  installer.generated_projects.each do |project|
    project.targets.each do |target|
        target.build_configurations.each do |config|
            config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.0'
         end
    end
end
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
  end
end

위 코드로 변경해준뒤 다시 빌드하면 성공적으로 될것이다.

출처

https://stackoverflow.com/questions/75894992/missing-file-libarclite-iphoneos-a-in-xcode-14-3-after-update-flutter-and-xcod

ios에서 플러터를 처음 구동시키면 상당히 버벅이는것을 볼 수 있다.

구형기기라면 더더욱 그렇다.

발생가능한 액션들(페이지 이동 등) 모두 수 차례 반복하다 보면

점점 부드러워지는것을 볼 수가 있다.

간단한 이유는

flutter은 Skia를 사용하는데

Skia는 openGL에 최적화가 되어있다고 한다.

따라서 openGL을 사용하는 안드로이드에서는 비교적 부드럽고

IOS에서는 초반에 버벅인다.

그럼 해결방법이 무엇이냐..

앱을 실행하여 Skia 케쉬 데이터를 기록하는것이다.

flutter run --cache-sksl

위 명령어를 통해 실행시켜주고

앱에서 발생가능한 모든 액션들을 5~10차례 발생시켜준뒤

Shift + M을 누르면 flutter_01.sksl.json이 저장된것을 확인 가능하다.

그럼 이 데이터를 포함시켜 빌드해보자

-bundle-sksl-path=데이터 경로

위 명령어를 빌드 명령어 뒤에 붙혀주면 된다.

지난번 앱 배포를 정상적으로 성공한뒤

배포 자동화에도 욕심이 생겨 진행해봤다.

기본적으로는 fastlane 공식 문서를 보며 따라했다.

https://docs.fastlane.tools/

친절하게 나와있다. 따라하면 되고
따라하다 막히거나 오류가 있다면
인터넷에 치면 많이 나온다.

내가 진행하면서 막혔던 부분이나. 해결 팁을 알려주겠다.

1.  AOS

먼저 안드로이드는 IOS에 비해 큰 어려움이 없었다.

한가지 팁을 주자면

Key.json, app-release.abb, pubspec.yami 와 같이 파일의 경로를 작성해야할때는

상대경로가 아닌 경로복사를 이용하는게 좋다.

나도 이걸로 자꾸 오류가 떠서 조금 당황했다...

platform :android do
  desc "Runs all the tests"
  lane :increase_version do
    yaml_file_path = "/Users/..../pubspec.yaml"
    data = YAML.load_file(yaml_file_path)
    version = data["version"]
    version_number = data["version"].split(".")[0].to_i
    new_version_number = version_number + 1
    new_version = "#{new_version_number}.0.0+#{new_version_number}"
    data["version"] = new_version
    File.open(yaml_file_path, 'w') { |f| YAML.dump(data, f) }
    end

  desc "Deploy a new version to the Google Play"
  lane :deploy do
    gradle(task: "clean assembleRelease")
    increase_version
    sh"flutter build appbundle"
    upload_to_play_store(aab: "/Users/.../build/app/outputs/bundle/release/app-release.aab")
  end
end

increase_version

 - pubspec.yami에 있는 버전을 1 증가한다.

주의할점이 있다면 이걸 실행할때마다 1 증가되오니

테스트로 돌렸던 버전 증가치를 배포전 낮춰주자

deploy

 - grandle 이부분은 배포전 디렉토리를 깔끔하게 정리해준다.

   따라서 해당 명령어는 꼭 deploy시작 바로 첫번째 줄에 써주는것이 좋다.

 - sh"flutter build appbundle"은 말그래로 배포에 필요한 .abb 파일을 빌드해준다.

- uplode_to_play_store(..)은 해당 경로에 있는 .abb 파일을 업로드 시켜준다.

2.  IOS

IOS가 좀 더 복잡하고 할게 많았는데

다행히 성공했다.

1. .env 파일은 ios/fastlane/  경로에 넣어줬다.

2. cocoapods, build_app, screeenshot 오류를 겪었다.

cocoapods의 경우

실행 마다 업테이트 명령어를 넣어 해결해 주었으며

build_app의 경우

처럼 xcargs 명령어를 넣어줬다.

screeenshot의 경우는

사이즈가 안맞는다 자꾸 오류가 뜨길래 그냥 스킵해줬다.

3. version 오류

increase version을 했는데 자꾸만 안되어서 강제로 지정해줬다..

위 처럼 버전을 지정해주는 명령어를 했는데 안된다면 아래 명령어를 터미널에서 실행해보자

fastlane run increment_version_number version_number:2.1.0

이렇게 해주면 된다.

오랜만에 디자인 레이아웃 하나 따라하고있는데

사진과 같이 사선으로 나눠진 컨테이너를 만들어야 했다.

한번도 해보지 못한 디자인이면서

흔한 디자인이라 뭔가 놓치고 싶지않은 디테일이였다.

이번 시간에는 CustomClipper를 이용해 컨테이너를 잘라볼것이다.

방법만 이해하면 상당히 쉽다.

ClipPath(
    clipper: CustomRectClipper(),
    child: 
        Container(
          height = 300,
          width = 300,
          child: Column(
        ),
    ),
  ),

기본 구조이다.

사용할 컨테이너를 ClipPath로 감싸주고

cliper를 지정해주면된다.

class CustomRectClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path()
      ..lineTo(0.0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, 20)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

 시작과 각 꼭지점이 있다.

시작점 -> lineTo(0.0, size.height) -> lineTo(size.width, size.height) -> 

lineTo(size.width, 20) 이렇게 이동한다.

좀더 풀어서 말하면

(x축, y축)이다.

시작점(0,0)

↓

(0,size.height)

↓

(size.width, size.height)

↓

(size.width, 20)

마지막 3 -> 시작점은 안그려줘도 되는것 같다.

그렇다면 윗 부분 컨테이너는 어떻게 할까?

시작점(0,0)

↓

(0,size.height-20)

↓

(size.width, size.height)

↓

(size.width, 0)

사선의 정도는 20이라고 했다.

본인 디자인에 맞게 조정하면 된다.

곡선을 그리는 법도 있지만...

아직 난 안필요하기에 Skip~