최근에 개발을 공부하면서 ValueObject라는 녀석을 배웠다. 잘만 활용하면 코드를 무척이나 깔끔하게 다듬을 수 있을 것 같아서, 기록으로 남겨두려고 한다. ㅤ Identifier 라는 String을 담는 객체가 있다고 해보자. 여기에서 Idnetifier에는 한글, 영어, 띄어쓰기만 들어갈 수 있다는 규칙이 있다고 가정하자. 만약에 뷰모델에서 가진 함수 중에서 뷰에서 input을 받아와 Identifier 객체를 만들어주는 함수가 있다고 해보자. 그러면 뷰모델은 아래처럼 input 값이 유효한지 검사하고, 유효한 경우에 Identifier 객체를 생성해주어야 한다. ViewModel { func saveIdentifier(input: String) { let pattern = "^[가-힣a-zA-Z..
ㅤ 지금까지는 이미지를 네트워크에서 받아올 때에 FutureBuilder를 통해 에셋이미지를 로드하고, 이를 그려주는 방식으로 적용하고 있었다. 아무래도 Image 위젯 바깥에서 FutureBuilder로 이미지 에셋을 확인하고, 이를 Image 위젯으로 넣어주는 방법이다보니, 이미지와 관련된 로직이 Image 위젯 내에서 딱 처리가 된다는 느낌이 없어서 코드가 지저분하다고 느꼈었다. ㅤ FutureBuilder( // imageFuture가 불러와질 때 까지 아래의 위젯들을 조건에 맞게 보여주기 future: widget.imageFuture, builder: (context, snapshot) { // 데이터를 불러온 경우 if (snapshot.hasData) { return Image(snapsh..
ㅤ 이번에는 또 기묘한 UI를 만났다. ㅤ Flutter의 AppBar는 색상이 반투명한 글래스모피즘처럼 적용되어서, 아래로 스크롤을 올리니 자동으로 색이 반영되는 UI가 기본으로 있었다. 아래 GIF를 확인해보면, 상단 AppBar의 색이 움찔움찔 변경되는 것을 확인할 수 있다. ㅤ 나의 경우에는 바로 아래에 있는 캘린더도 AppBar 쪽에 붙어있기 때문에, 색이 끊겨보여서 이를 제거해주고 싶었다. 그러나, ‘flutter remove appbar background color changed on scroll’ 같은 검색어로 검색했는데, 해결 방법이 잘 나오지 않더라. ㅤ 설마 없겠어? 라고 생각을 하면서 AppBar 위젯의 어트리뷰트를 하나하나 찬찬히 뒤져보면서 해결 방법을 찾았다. AppBar( b..
ㅤ 오늘도 간단한 문제로 3시간을 날렸다. 이전 글에서 SwiftUI의 FullscreenCover 방식의 화면전환을 사용하려면 fullscreenDialog를 사용하면 된다고 했었는데, 여기와 관련된 문제가 발생했다. ㅤ 아래와 같은 구조로 되어있고, 화살표처럼 화면 전환을 만들고자 했다. ㅤ 여기에서, fullscreen dialog로 넘어간 2번째 줄에서는 push로 페이지를 전환한 다음에는 뒤로 pop을 할 수 없는 구조이기에 pushReplacement 같은 함수를 사용해 전환하려고 고려하고 있었다. ㅤ 그러나, fullscreenDialog 첫 페이지에서 pushReplacement 함수를 호출하니, bottomSheet 이 있는 뷰로 가버리는 문제가 있었다! 아마 추측하건데, fullscre..
ㅤ 아래와 같은 화면 전환 기능을 구현하고 싶었다. SwiftUI 에서는 아래 기능을 Fullscreen Cover 라고 부른다. 오른쪽 왼쪽으로 화면이 전환되는 Navigation과 달리 수직으로 올라오는 애니메이션이 특징이며, 모달과 달리 머리를 잡고 아래로 스크롤해도 전환이 취소가 되지 않는다. 주로 일시적인 데이터 입력이나 흐름을 벗어나서 유저가 확 집중을 해야하는 부분에서 이러한 방식을 사용한다. ㅤ ㅤ 뭔가 Navigator.push() 처럼 Navigator 하위에 함수가 있을 것이라고 생각했는데, 찾아보니 없었다. 그래서 아예 모달을 불러오는showBottomModalSheet() 함수처럼 아예 별개의 함수로 있을 거라고 생각해서 구글링을 해봤다. 그런데 띠용? Navigator.push ..
올해 초에 애플 개발자 아카데미 동문회를 갔다가 운이 좋게도 시디즈의 신제품 하이엔드 의자인 T90을 직접 사용하면서 체험해볼 수 있는 기회를 얻었다! 🥹🥹 올해는 설날부터 이런 고급진 의자에 앉아볼 기회도 생기고, 한 해가 잘 풀리려나 싶다 ㅎㅎ 나는 어릴때부터 앉은 자세가 바르지 않아 척추 측만이 있어서 허리가 쉽게 피로해지는 편이다. 이 때문에 개인적으로 허리 건강에 평소에도 신경을 쓰고있어서 PT를 받으며 운동할 때에도 ‘허리 보강운동을 더 했으면 좋겠어요’ 같은 말을 트레이너에게 요청하기도 하고, 주변 친구들에게도 척추수술 1,700만원을 외치며 친구들의 앉은 자세를 고쳐주기도 했다. 여전히 컴퓨터를 전공하면서 책상에 앉아 키보드를 두드리면서 허리에 피로감이 느껴질 때가 많고 크로스핏을 하면서 ..
ㅤ 피그마에서 디자인을 하면서, 처음에는 이런 모양의 그래프를 그리고 싶었다. ㅤ 근데, 생각보다 이걸 만드는게 잘 안보이더라. line에서 곡선을 사용해서 만들려고 하니 뭔가 계속 울퉁불퉁한 원이 되어버리고, path를 사용해서 그리자니 더 이상하고. 흠… ㅤ 뭔가 방법이 있을 것 같아서 찾아봤더니, 실제로 있더라! 아래같은 방법으로 진행하면 되는거였다. 나는 몰랐지.. 이리 쉬운건지 ㅋㅋㅋ 작년에도 똑같은 디자인을 했던 적이 있었는데, 한 번 찾아보고 할 걸 그랬다. 작년에는 path 가지고 울퉁불퉁하게 대충 원 따라 만들었던 것 같은데,, ㅤ ellipse 원을 그려준다. ㅤ 오른쪽에 있는 arc를 당겨 원하는 각도를 만들어준다. ㅤ 가운데 ratio를 당겨서 원하는 폭을 만들어준다. ㅤ 각도를 원..
오늘도 쌩고생을 했다. 매주 쌩고생거리가 계속 등장하는 것 같다. ㅜㅜ 심지어 오늘은 다트 문법에 당했다. ㅤ List 뒤에 원소를 추가하고 싶을 때는 append가 아닌 add 함수를 사용해야 한다. 블로그 글을 쓰기 위해서 가져왔는데, 이제야 함수의 차이점이 보인다. ㅤ append 쪽 설명을 읽어보면 “Insert element at the end of the [Iterable]” 이라고 되어있다. 나는 요걸 보고 철썩같이 믿고 썼는데, 아무리 디버깅을 해도 해결이 안돼서 한숨만 푹푹 쉬고 있었지… 근데 요게 문제였을 줄은 몰랐다… 파이어베이스에 복잡하게 쿼리를 날리고 결과를 조인해야 하는 기능이라 중간에 뭐가 잘못되었는지 디버거 켜놓고 값 계속 확인하면서 찾아나섰는데, 제일 마지막에 결과 합쳐서 ..