오늘도 디벅잉

🧭 Flutter MediaQuery.of(context).viewPadding.bottom 아이폰 X 이후로 등장한 하단 노치는 높이 값이 34입니다. 플러터에서는 MediaQuery.fo(context).viewPadding.bottom으로 34라는 값을 얻을 수 있습니다. 안드로이드이거나 IOS이더라고 하단 노치가 없다면 위의 값은 0이 됩니다. 하단 노치에 대한 대응으로 SafeArea로 감쌀 수도 있고, 해당 값을 확인해서 따로 여백을 둘 수도 있습니다. https://medium.com/flutter-community/a-flutter-guide-to-visual-overlap-padding-viewpadding-and-viewinsets-a63e214be6e8 A Flutter guide t..

🧭 GetxController 상태관리를 위해 Getx 라이브러리를 사용하게 된다면 GetxController를 상속한 컨트롤러를 활용하게 됩니다. 서비스할 앱의 각 페이지와 컨트롤러를 1:1 대응으로 사용하는 것이 가장 간단한 방법이라고 할 수 있습니다. 컨트롤러 간 데이터 전달 다만 여러 페이지에 공통적으로 반영되어야 할 상태가 있는 경우 컨트롤러 간에 데이터 전달이 필요합니다. 가장 간편한 방법으로는 하나의 컨트롤러를 여러 페이지에서 걸쳐서 사용하는 것입니다. 또다른 방법은 공유할 상태를 파라미터로 전달하고 전달받은 페이지의 컨트롤러에서는 전달해준 페이지의 컨트롤러를 찾아서 상태를 변경하는 것입니다. (전달해준 페이지의 컨트롤러를 유지한다는 조건 하에 가능)

🧭 Flutter Get.bottomSheet Getx 라이브러리를 사용하면 bottom sheet를 쉽게 구현할 수 있습니다. Get.bottomSheet를 사용하면 됩니다. 다만 일반 페이지가 아니기 때문에 controller를 바인딩하고 싶은 경우 고민이 생깁니다. 이때는 bottom sheet를 사용하는 페이지에 같이 바인딩을 하는 방법을 사용할 수 있습니다. lazyPut으로 bottom sheet에 필요한 controller를 등록해두고, bottom sheet가 빌드 될 때 Get.find로 해당 컨트롤러를 찾아서 사용하면 됩니다. TRANSLATE with x English Arabic Hebrew Polish Bulgarian Hindi Portuguese Catalan Hmong Daw..

🧭 디자인 아이콘 사이즈 기준 20dp, 24dp, 40dp, 48dp를 권장하고 있습니다. 아이콘 터치 영역은 이에 더해 상하좌우 10dp의 영역을 포함하는 것이 좋습니다. (아이콘 사이즈가 24dp by 24dp일 경우, 터치 인식 영역은 48dp by 48dp) https://m3.material.io/styles/icons/applying-icons Material Design Icons can be used to represent common actions. Material Symbols are a set of variable icon fonts created at seven weights across three different styles. m3.material.io 플러터 primary 속..

🕹️ 개발자로 새로운 커리어를 시작하고 첫 프로젝트를 종료하였습니다. (그전까지 UI, 네트워크 통신 구현, Clean Architecture 등 조각조각의 개념들을 익혔습니다.) 완료가 아닌 종료라고 표현한 것은 정규 출시되는 프로젝트가 아닌 토이였기 때문입니다. 같은 시기에 입사한 동료 분과 같이 플러터 개발을 담당했습니다. 우리 프로젝트에 적합한 프로젝트 구조를 결정하지 못한 채로 프로젝트를 시작하는 바람에 진행하면 할수록 서로의 코드가 각자의 길로 빠져버리고 말았습니다. 부트캠프에서 실전 프로젝트 진행시 NestJS를 선택했던 주목적이 프로젝트 구조를 통일성 있게 가져가서 협업을 효율적으로 하는 것이었는데, 실제 상황과 맞닥뜨리니 그런 생각이 더 와닿게 되었습니다. 한편 일정 초반부에는 코드의 짜..

🧭 OVERFLOWED BY x.x PIXELS 플러터로 개발중에 화면을 초과하는 에러를 종종 마주하게 됩니다. 오늘은 2번이나 해당 경우를 마주했기 때문에 TIL로 기록해 둡니다. SafeArea 첫번째 경우는 SafeArea로 Scaffold 전체를 감싸지 않고, Scaffold 내 body만 SafeArea로 감싸서 하단 네브바가 overflow 하는 에러가 발생했습니다. SafeArea를 사용하는 경우 당장 차일드 위젯이 하나 뿐이더라도 최상단에서 감싸도록 해야 겠습니다. overflowed by 1.0 pixel 두번째로 divider 위젯의 두께로 인해 1 pixel을 초과하였습니다. 에러가 발생한 곳은 네모 박스 안에서 텍스트 위젯과 디바이더, 그리고 텍스트 위젯까지 총 3개의 위젯이 컬럼 ..

🧭 Container vs SizedBox 단순 whitespace를 위해서는 상대적으로 무거운 Container 보다 SizedBox를 사용하는 것이 효율적입니다. (whitespace는 화면 구성 요소 사이의 여백을 말함, 무겁다는 것은 기능을 많이 포함하고 있다는 것) 또한 SizedBox는 const 생성자를 사용할 수 있다는 것은 덤입니다. ClipRRect 이미지 주변을 둥글게 깎기 위해서는 이미지를 ClipRRect로 감싸고, borderRadius 프로퍼티에 원하는 만큼의 반지름을 설정합니다. behavior: HitTestBehavior.opaque GestureDetector 내부에서 패딩을 가진 위젯의 경우, 패딩 부위를 클릭하면 인식을 하지 않습니다. 이때, behavior 프로퍼티..

🧭 late modifier Dart 언어에는 late modifier가 있습니다. 변수를 정의만 해두고, 초기화는 뒤로 미룰 수 있습니다. 변수가 non-nullable이지만, 사용 전에 초기화를 확신할 때 사용하게 됩니다. 변수의 사용빈도수는 적은 반면 초기화하는데 비용이 많이 드는 경우 사용하기 좋습니다. constraints Flutter에서 레이아웃을 짜기 위해 constraints를 고려하게 됩니다. constraints란 단순하게 4개의 double 값을 말합니다. min-width, max-width, min-height, max-height 입니다. Constraints go down. Sizes go up. Parent sets position. Shimmer '반짝임'이라는 뜻을 가진..

🧭 Elastic Beanstalk AWS의 Elastic Beanstalk (이하 'EB') 서비스를 활용하면 서버 배포에 드는 노력을 줄일 수 있습니다. 1. EB를 노드, 도커 등 원하는 환경으로 세팅합니다. 2. AWS의 CodePipeline을 통해 GitHub 브랜치와 EB를 연결해 줍니다. 3. 깃헙 변경사항을 자동으로 반영해 줍니다. EB CLI를 통해 관리하는 방법도 있습니다. EB CLI 설정 중 eb init 관련하여 'Cannot setup CodeCommit because there is no Source Control setup, ...' 에러 발생시 아래 블로그를 참고합니다. https://junlab.tistory.com/189 aws - 배포중 eb init 에러 (Cann..

🧭 CRLF vs LF 윈도우 운영체제에서 작업하다보니 CRLF 관련해서 성가신 일이 생겼습니다. 프리티어는 LF 기준으로 맞춰줍니다. 반면 깃에는 autocrlf라고 로컬에서는 CRLF가 되고, 푸시할 때는 LF로 자동 변경하는 기능이 있습니다. 코드를 수정하지 않아도 정렬 한번만 하고 나면 CRLF -> LF 변경이 일어나기 때문에 파일에 변경을 가한 것으로 기록이 되는 점이 굉장히 성가셨습니다. 아래와 같이 autocrlf를 끄게 되면 lf로 계속 작업을 할 수 있습니다. $ git config --global core.autocrlf false WebStorm, VS Code 내에서도 관련 설정을 찾아보고 crlf로 되어 있는 부분을 lf로 변경해야 합니다. https://intellij-supp..