게으른J 의 테크로그

[Android/Coroutine] Debounce로 검색 기능 문제 해결하기 / 검색 딜레이 주기

gangmini — Tue, 20 Aug 2024 22:24:45 +0900

문제상황

'이디야' 를 검색하고 싶다고 가정할때, 이 -> 이디 -> 이디야 이런식으로 사용자가 키보드에 검색어를 입력하게 된다.

이때 결과적으론 가장 마지막에 '이디야' 에 대한 검색 결과가 화면에 표시되어야 하는데 '이디' 에 대한 검색 결과만 표시되는 경우가 있다.

특히 이런 문제는 키보드 입력을 매우 빠르게 했을 때 자주 발생한다.

원인

우선 원인을 찾기 위해 여러가지 가정을 해보고 실험을 해보았다.

1) EditText에 문자열이 제대로 입력되는가? => 문자열은 잘 입력되고 Watcher에도 잘 잡힘

2) cancelable 때문에 네트워크 요청이 취소되는가? => cancelable은 동일한 요청 url 에 대해서만 요청을 취소하는 것이기 때문에 이 문제와 관련없다는 결론

현재 나는 Retrofit 통신 라이브러리를 사용하고 있는데 라이브러리에서 자체적으로 엄청 빠른 시간 안에 연속적으로 API 호출이 발생하는 경우 요청을 취소하거나 다 처리하지 못하는 것이다.

해결방법

사실 이 문제를 해결하고 나면 검색 기능에 딜레이를 주어 실제 입력이 모두 끝났을 때만 검색 API 가 요청되는 기능을 구현해 효율성을 높이는 작업을 진행해보려고 했다. 그런데 원인을 분석해보니 이 2가지 문제를 한번에 해결할 수 있겠다는 생각이 들었다.

다시말해, 사용자가 빠르게 '이디야' 를 입력한다면 사실 '이' 나 '이디' 에 대한 검색 결과는 필요가 없다.

'일정시간' 안에 지속적으로 사용자 입력이 들어오지 않는 경우, 검색어 입력을 모두 마쳤다고 생각하고 마지막으로 들어온 검색어에 대해서만 검색을 진행하는 것 이다.

처음에는 이 기능을 구현하기 위해 타이머..? 같은걸 사용해야 하나 싶었다. EditText에 입력이 들어오기 시작하면 타이머를 재기 시작하고 일정 시간 안에 새로운 입력이 들어오면 넘어가고 그렇지 않으면 검색 API 요청을 해당 검색어로 보내는 것이다.

그러다가 코루틴 Flow에서 Debounce 라는 것을 지원한다는 것을 알게 되었다.

Debounce의 개념적 의미는 연속적으로 발생한 이벤트를 하나로 처리하는 방식 이고

코루틴 Flow 내부에서 debounce 라는 함수를 통해 일정 시간 동안 입력값이 없는 경우에만 Flow가 방출되는 방식으로 동작한다.

1. debounce를 사용하기 위해서는 우선 Flow 를 사용해야 하는데, 이전에는 EditText를 통해 입력받은 데이터를 그냥 var 변수에 저장했다면 이제는 MutableStateFlow (변경 가능한 StateFlow) 에 저장하고 관리하고 있다.

2. 그리고 나는 0.3 초를 기준으로 잡고 0.3초 동안 새로운 검색어가 입력되지 않는 경우, 가장 마지막에 입력된 검색어를 사용해 검색 API 요청을 보내기로 했다. (만약, 0.3초 안에 다른 입력어가 입력되는 경우에는 코루틴이 자체적으로 취소된다.)

3. 0.3초 동안 입력이 없는 경우에만 MutableStateFlow 값이 방출되면서 viewmodel.initList() 가 실행된다.

방출되는 값이 가장 마지막값이여야 하기 때문에 collectLastest 를 써야 하는 것 아닌가 생각할 수도 있지만 나는 사실 collect를 통해 방출되는 값을 사용하지 않기 때문에 크게 의미가 없다.

몇 달 전 검색 기능을 구현 초기에, 무한스크롤 기능을 구현하기 위해서 새롭게 입력되는 키워드 값을 그때그때 뷰모델에 선언한 LiveData(현재는 StateFlow) 변수에 저장하고 관리해서 재사용하고자 했었다. 그래서 검색 요청을 하는 함수인 initList() 함수도 매개변수로 키워드 값을 전달하는 것이 아니라 이 LiveData(현재는 StateFlow) 를 통해 키워드값을 받아오고 usecase 함수 호출시 매개변수로 넘겨주는 방식으로 구현했었다.

binding.EditTextSearchBar.addTextChangedListener {
            viewmodel._keyword.value = it.toString()
            
            // 새로운 입력값 생길때마다 새로운 코루틴 생성
            lifecycleScope.launch { 
                viewmodel._keyword
                    .debounce(300) // 0.3초 동안 입력값이 없는 경우만 방출
                    .collect {
                        viewmodel.initList()
                    }
            }
        }

Debounce를 적용하기 전에는 모든 입력값에 대한 검색 결과를 전달받았고 심지어 실제 검색하고 싶었던 '이디야' 에 대한 검색 결과는 나오지도 않았다.

Debounce를 적용하고 나니 엄청 빠르게 '이디야' 검색어를 입력했을 때, 딱 '이디야' 에 대한 검색어만 잘 나오는 것을 확인할 수 있었다.

Debounce를 적용한 모습

이렇게 Debounce 기능 구현 덕분에 사용자가 검색 키워드를 입력할 때마다 API를 호출하는 대신, 사용자가 입력을 멈춘 후 일정 시간 동안 추가 입력이 없을 때에만 API를 호출하도록 할 수 있도록 해 지나치게 빠른 연속 호출을 줄이고 오류 해결과 성능 개선까지 성공할 수 있었다.

** 나처럼 Flow에서 제공해주는 debounce를 함수를 사용하지 않고 직접 코루틴을 사용해 구현하게 된다면 다음과 같이 구현할 수 있다.

https://velog.io/@ho-taek/Android-debounce-%EC%BD%94%EB%A3%A8%ED%8B%B4-%EA%B5%AC%ED%98%84

[Android] debounce 코루틴 구현

!빵동여지도 앱을 개발하면서 빵집 검색에 있어서 타이핑이 될 때마다 즉시 서버 통신으로 받아오게끔 로직을 짰는데 이 부분에서 서버에 큰 부하를 주게 된다는 점을 알려주시며 debounce를 추천

velog.io

[Android/세미나실] 2024 Google I/O 참가 후기 및 정리

gangmini — Thu, 15 Aug 2024 19:13:19 +0900

연구실 생활을 할 때 교수님을 따라 컨퍼런스 발표나 참관 등을 해본 경험은 있지만 스스로 적극적으로 나서서 참가해본 적은 없었다.

Google I/O는 안드로이드 개발자로서 더 폭넓은 지식을 알아가고 싶고 성장하고 싶다는 생각에 처음으로 내돈내산 내발로 참여해보는 안드로이드 관련 대외 컨퍼런스, 세미나 행사였고 그래서 더 의미가 있었다.

컨퍼런스는 인천 송도에서 열렸는데 뭔가 "멋있다~" 라는 생각이 들었지만 막상 가보니 '드릅게 먼 곳에서 하는구나' 라는 생각이....

혹시 너무 어렵고 막 지목해서 질문하고(학교냐고ㅋㅋㅋ) 그럴까봐 걱정했는데 후기를 찾아보니 진짜 그냥 듣고 오는거고, 강의도 30분 내외로 짧게 이루어지기 때문에 어떻게 보면 오히려 가볍게 느껴질 수도 있다는 이야기가 있었다.

미리 안드로이드 섹션 강의 리스트를 확인해보니 역시나 요즘 대세인 Compose와 관련된 내용들로 가득했다.

아직 Compose를 제대로 알지 못하는 나였기에 기본적인 개념은 떼고 가야 인천 송도까지 간 보람이 있겠다고 생각해서 유튜브 강의로 기본 컴포넌트에 대한 실습을 따라해보며 공부해갔다. 그래서인지 다행히 어느정도는 알아들을 수 있었다.

바로 앞에 오크우드 타워(포스코)와 쉐라톤 호텔이..! 이전에 가족들과 종종 호캉스하던 곳(TMI)

다른 페스타(?)도 진행중이라 Google 페스타가 진행되는 구역으로 찾아가야 하는데 구역 찾기가 어렵다....

안내 종이나 팻말 좀 넉넉히 배치해줬으면....

기념품으로는 구글 티셔츠를 주는데 난 좀 늦게 갔더니 증정 티셔츠가 2XL 밖에 안 남았다. (이럴거면 미리 설문조사 왜 한겨..)

스탭들은 등에도 프린팅이 있어서 탐났다ㅋㅋ

내가 듣고 싶은 섹션, 강의에 맞게 강의실을 이동하면서 듣는 자유로운 분위기이다.

한 5시간동안 5개의 강연을 듣고 왔는데 기억에 남고 나도 이해할 수 있었던 강의 위주로 간단하게 정리해보려고 한다.

Compose 성능 끌어올리기

가장 마음에 드는 강의였다. 연사님의 강의력이 군더더기나 쓸데없는 농담 없이 딱 핵심 내용만 30분 안에 깔끔하게 말씀해주셔서 전달력이 가장 좋았다.

1. 컴포즈 버전 올리기

컴포즈 버전을 올리면 더 나은 성능의 랜더링 엔진을 업그레이드 될 수 있기 때문이다. 가장 간단하면서도 중요한 시도라는 점이 웃겼다.

2. 불필요한 Recomposition 줄이기

컴포즈는 Composition -> layout -> drawing 이렇게 총 3단계에서 걸쳐 화면 UI를 그린다.

코드를 작성하면 컴포넌트를 트리 구조로 구성하고 연산하는 작업이 Composition / 이를 layout 형태로 배치하는 것이 layout /

layout을 실제 UI 화면에 그리는 것을 drawing 이라고 알고 있다.

XML 과 비교했을 때 Compose의 장점 중 하나가 Composition 과정에서 컴포넌트 요소들을 한 번씩만 방문해 연산량과 속도가 더

개선된다는 점이라고 알고 있다. 그래서 이 Composition 과정이 성능을 좌우하는 요소라고 단번에 와닿았다.

그렇다면 UI에 변화가 생길때 저 3단계가 다시 실행될 것이다. 하지만 이때 Compose 컴포넌트를 적절히 잘 작성하거나 함수로 분리하면 딱 변화가 생긴 부분만 Recomposition이 일어나고 그렇지 않은 부분은 재연산을 하지 않음으로서 성능을 개선할 수 있는 것이다.

그렇다면 이 Recomposition이 언제 일어나는지를 이해해야 하고 skippable 과 restartable 상태에 대해 알아야 하는데

skippable은 파라미터 값이 변경되지 않았다면 Recomposition이 가능한 상태이고 restartable는 Recomposition을 다시 요청할 수 있는 상태이다. 컴파일러에 의해 입력걊이나 상태가 변하면 그 지점이 restartable 지점이 되면서 하위 컴포넌트들이 전부 Recomposition 된다.

위 코드에서 상태 변화는 favorite 에 대해서만 일어났는데 가장 가까운 restartable 지점이 TestListScreen 컴포져블 함수이기 때문에 Recomposition 범위가 저렇게 잡힌다.

반면에 이 코드는 가장 가까운 restartable 지점이 Button 이기 때문에 Recomposition가 대폭 줄어든다.

restartable 지점이 기본적으로 Compose 함수가 호출되는 지점이기 때문에 저렇게 Button 이라는 Compose 함수를 하위 컴포넌트로 적절히 잘 사용해줌으로서 가장 가까운 Recomposition 지점을 조정할 수 있다.

그렇다면 skippable 과 restartable 지점이 어딘지 확인할 수 있다면 그걸 활용해서 컴포즈 함수를 잘 활용해 Recomposition 줄이고 성능을 높일 수 있다는 결론이다.

어떤게 Stable 이고 어떤게 Unstable 인지 정리해주셨다

그렇다면 skippable 과 restartable 지점이 어딘지 어떻게 확인할 수 있고, 또 그렇게 규정되는 기준은 무엇일까?

우선 이는 Compiler에 의해 결정되는 것이기 때문에 Compose Compiler Reports 를 확인해보면 알 수 있다.

그리고 위 자료처럼 stable 한 부분은 skip이 가능하고 unstable한 부분은 restart 될 수 있다고 이해했다.

Report 분석을 통해 적절하게 컴포즈 함수를 작성할 수도 있겠지만 개발자가 명시적으로 @stable 과 @Immutable 어노테이션을 지정해 컴포넌트를 Stable 가능하고 이는 즉 Skippable 가능한 형태로 만들 수도 있다.

@Immutable은 항상 불변임을 보장하도록 컴파일러와 약속하는 것이다. 즉, 변경 되어도 불변을 약속 했기에 UI 가 안 바뀌는 등 문제 발생 가능성 있고 @Immutabl이 명시된 곳의 모든 프로퍼티가 변경 불가능한 val 로 정의되어야 한다.

그래서 차라리 @Immutable보다는 좀 느슨한 약속인 @stable 을 사용하는게 낫다고 한다. Recomposition 일어날 수 있는 지점이더라도 입력값, 파라미터 등이 동일하면 skip 해준다.

하지만 이는 컴파일러가 자동으로 처리해줘야 할 일을 개발자가 인위적으로 조정하는 것이다. 물론 컴파일러가 신은 아니지만 아무튼 자주 해서는 안 될 일이기 때문에 성능 상의 문제가 발생했을 때만 적절히 사용하는게 좋다.

~~클린코드에 과도하게 빠져 반복을 절대 용납하지 못하고 재사용성에 미쳐버려서는 안 된다는 말이 생각난다ㅋㅋ~~

3. 벤치마킹 툴을 사용해 이미 개발된 코드에서 어떤 성능 문제가 있는지 확인하기

개발자가 이렇게 코드 작성, 함수 분리를 통해 성능을 개선할 수도 있지만 섣부르고 과도한 변경은 독이 될 수 있다.

그렇기 때문에 꼭 필요한 성능 이슈를 탐색하고 찾아내는 것이 중요한데 MacroBenchMark 라는 툴을 사용해 어떤 부분에서 성능 이슈가 발생하는지 체크할 수 있는 방법을 알려주셨다.

예를 들어 화면 로딩 시간에 대한 성능을 확인하기 위해 테스트 반복 횟수 등을 지정해주면 평균 로딩 시간 등을 알려주고 특정 수치보다 시간이 길면 이부분에서 성능 이슈가 발생할 수 있다는 것을 파악할 수 있다.

CodeLab에서 따라해볼 수 있으니 그거 참고해서 해보면 좋을듯

(아마 네모 박스 부분이 좀 중요한 수치이고, 양수가 크면 로딩 속도가 오래걸리는거고 P99 로 갈수록 고성능에 대한 측정 결과이기 때문에 P99까지 최적화가 되면 완전 성능 굿~ 이라고 해석하면 됐던 것 같다...ㅎ)

Gemini in Android Studio

요즘 핫한 생성형 AI, 그중에서도 Google에서 밀고 있는 Gemini(~~잼민이~~) 에 관심이 가서 들어봤다.

연사님이 조~금만 더 스피치 연습을 해서 오셨더라면 좀 더 몰입되었을 것 같은데 아무튼 내용 자체로 흥미로웠다.

내가 취한 내용은 별건 아니고...

Gemini가 안드로이드 디바이스에서 사용하기에 최적화 되어있는 모델인데 모바일 개발은 최적화, 경량화가 중요하기 때문에 이부분이 아주 맘에 들었다
현재 LoRA 모델 사용하고 있는데 fine tuning 을 통해 충분히 모델 성능도 개선할 수 있다
인터넷 연결 없이 사용 가능 / 개인 정보 민감한 콘텐츠 다루는 경우 좋은 선택 / 백엔드 인프라도 필요 없음

그리고 안드로이드 스튜디오에서 Gemini를 설치해 다음과 같은 것들을 해볼 수 있다는 것이었다.

다양한 톤으로 메세지 응답 / 음성 녹음 요약 / 키보드 문자 메세지에 대한 스마트 답변 생성 (현재 사용되고 있는 서비스)
추천 키워드 생성 (음식점 검색시 ~)
테스트 시나리오 작성
Code Description 작성

테스트 시나리오(코드) 작성 부분은 찐으로 꼭 사용해보고 싶었다. 아직 테스트 코드 작성 무경험자인 내가 쉽게 입문할 수 있도록 도움을 받을 수 있을 것 같고, 현재 출시된 '어비로' 앱이 어느정도 규모와 복잡도 있는 서비스이기 때문에 나 혼자 모든 테스트 코드를 다 작성하기 보다는 이런 AI의 힘을 빌리면 더 효율적일 것 같았다.

Code Description 도 실무에서는 이런 작업이 중요하다고 알고 있는데 아직 나에게는 익숙하지 않은 작업이기에 도움을 받을 수 있을 것 같다고 생각했다.

추천 키워드 같은 기능은 코드 작성에 도움이 되는게 아닌 서비스 기능에 활용할 수 있는 부분인데 '비건 음식점 추천 기능' 등에 활용할 수 있지 않을까 싶었다.

이 강의는 엄청 큰 홀에서 진행됐다!! 홀 앞 뷰는 오크우드(포스코) 빌딩과 쉐라톤 호텔~ 전에 가족들과 종종 묶었던 호텔들ㅎㅎ (TMI)

Compose 에서 함수 분리

DataDog 를 모든 application에서 사용

DataDog 을 너무 좋아하시는 연사님의 무한 DataDog PR 을 듣고 올 수 있었다.

DataDog은 백엔드 개발자인 동기가 종종 사용하는 백엔드용 모니터링, 로그 분석 툴 정도로 알고 있었는데

이걸 모든 Application에 적용할 수 있다길래 안드로이드 환경에서도 적용할 수 있을까 하는 관심이 가서 들어봤다.

1. 다양한 데이터를 수집해 하나의 플랫폼에서 활용 가능

하나의 플랫폼에서 이벤트, 트래픽, 에러, 로그 등 여러 데이터를 분석할 수 있기 때문에 백엔드 개발팀이 쓰는 분석툴, 프론트엔드 개발팀이 쓰는 분석툴, 기획팀이 쓰는 분석툴 이런식으로 여러개 사용할 필요없이 올인원으로 사용 가능하다는 장점이라고 이해했다

2. 로그 저장을 할 때, 불필요한 로그 리소스는 제거를 해줌

로그가 계속 쌓이면 그게 비용과 연결되니까 학실히 장점인 것 같다.

3. 프론트엔드 단 모니터인 RUM 기능도 잘 제공함

사용자의 접속 환경에 상관없이 사용이 가능하다
클라이언트 에러, 페이지 종속성, 로딩 속도, 헤비 유저 등을 확인할 수 있다
아무래도 난 안드로이드(프론트엔드)개발자이기 때문에 이부분에 관심이 갔다

강의를 쭉 듣고 나니 솔깃하는 부분이 있었고, 현재진행중인 '어비로' 프로젝트에 적용해볼 수 있지 않을까 싶었다.

현재는 기획자분께서 이벤트 로그를 수집해 분석하기 위해 Amplitude(앰플리튜드)를 사용중인데 더 좋은 툴이 있다면 내가 먼저 제안해보는 것도 좋겠다 싶었다.

그러다가 이 블로그 글을 읽고 재고해보게 되었다ㅋㅋㅋㅋ

https://steady-study.super.site/datadog-rum

운영환경 Datadog RUM 2개월 사용 후기

에러 모니터링, 이벤트 추적, 분석 모두 Datadog으로 하려고 했던 시도는 실패였다.

steady-study.super.site

블로그의 내용은 결론적으로 DataDog 만으로 올인원 하기는 좀 힘들었고 이벤트 분석은 Amplitude, 프론트엔드 에러 모니터링은 Sentry 가 훨씬 낫다는 이야기다.

난 프론트엔드 개발자이기 때문에 유저 에러 모니터링이 중요한데 RUM은 안 잡히는 에러도 많다고 한다.

DataDog은 역시 백엔드 개발자가 디버깅용으로 사용하기에는 좋은 것 같다.

또 비용 문제도 있는데 수익이 완전 0₩ 인 사이드 프로젝트 팀에는 적용하기 쉽지 않은 것 같다.

P.S. 원래 컨퍼런스라는게 약간 만남의 장, 친목 이런 목적도 있기 때문에 혹시나~ 다른 개발자들과 친해져볼 수 있을까? 하는 기대도 내심 있었지만 사실 그런 분위기도 그럴 힘도 없었기에 얌전히 발표만 듣고 왔다ㅋㅋ

또 당연히 나는 지식을 나누는 기쁨을 아는 사람이기에 언젠가는 나도 저기 서서 발표 해보고 싶다는 생각도 들었다.

[Android/세미나실] 안드로이드를 더 잘하기 위한 자료 모음집

gangmini — Mon, 12 Aug 2024 21:38:02 +0900

서류 지원서나 면접 질문에서 종종 물어보는 질문이 있다.

'(안드로이드)개발을 잘하기 위해서 무슨 노력을 해봤나요?/ 어디까지 해봤나요?'

처음에는 '팀을 꾸려서 프로젝트를 해봤다, 오랜 시간 기능 개발/버그해결을 위해 고민해봤다.' 라고 대답했지만 이런 이야기는 너무 흔해빠졌다고 생각했다. 그리고 실제로 안드로이드 개발자로서 성장하기 위해 뭔가 깊게 생각하고 노력한 적은 없다는 생각이 들었다.

그래서 뭘 할 수 있을까....에 대해 생각해보았다.

그러다 작년에 올리브영 채용을 준비하면서 기술블로그를 알차게 활용했던 것이 생각났다.

올리브영이 아니더라도 꽤 많은 회사에서 기술블로그를 운영하고 있고 실제 실무진들이 꾸려나가는 블로그인 만큼 좋은 글이 많다는 생각이 들었다.

그 외에도 동기를 통해 알게된 데보션 블로그, 최근에 호기심 반 성장욕구 반으로 참석하게 된 구글 I/O 컨퍼런스 등 다양한 안드로이드 이야기들을 접할 수 있는 곳이 많다고 생각하게 되었다.

프로젝트를 하거나 기술 이론 공부를 하는 것 뿐만 아니라 이렇게 여러 경로를 통해 동향을 파악하고 다양한 활용 사례들을 살펴보는 것또한 개발자로서의 시야를 넓혀주고 성장할 수 있게 해줄 것이라고 생각했다.

혼자서 공부하게 되면 '코루틴', '컴포즈' 이렇게 잘 알려진 큰 기술들의 이론만 공부하느라 머리도 아프고 뭔가 하나를 공부하는데 시간도 오래걸렸는데 'Compose 기반의 UI 테스트 코드 작성법 : WebView 테스트 코드' 이라는 제목의 글을 휙~ 읽고 나면 더 구체적이고 다양한 주제, 상황에 대한 내용들을 공부할 수 있어서 좋은 것 같다.

꼭 글의 내용을 100% 완벽하게 숙지하고 이해하는 것을 목표로 하지는 않는다.

다양한 상황과 그 상황을 어떻게 해결하는지에 대한 아이디어를 얻어가는 것만으로도 나는 성장했다고 느낀다.

그래서 일주일에 적어도 1개 이상의 자료를 읽는 것이 내가 생각해낸 '안드로이드 개발을 더 잘하기 위한 나만의 방법' 이다.

그!래!서!

이 포스트에 참고하면 좋은 자료들을 아카이빙할 생각이다.

기술블로그 링크, 포스트 링크, 포럼 등등 여기에 자료를 업로드하고 시간날때 마음에 드는 주제를 하나씩 공부해서 '안드로이드/세미나실' 에 올려보려고 한다.

[데보션]

https://devocean.sk.com/tech

데보션 (DEVOCEAN) 기술 블로그 & 커뮤니티

데보션 (DEVOCEAN) 기술 블로그 , 개발자 커뮤니티이자 내/외부 소통과 성장 플랫폼

devocean.sk.com

[올리브영 기술블로그]

https://oliveyoung.tech/

올리브영 테크블로그

올리브영 테크블로그입니다. 올리브영 엔지니어들의 활동과 디지털 사업본부의 다양한 경험과 문화를 공유합니다.

oliveyoung.tech

[강남언니 기술블로그]

https://blog.gangnamunni.com/blog/android/

강남언니 공식 블로그

Android #ViewPager#ViewPager2#Android

blog.gangnamunni.com

[뱅크샐러드 기술블로그]

https://blog.banksalad.com/tech/

뱅크샐러드 공식 블로그 | 기술 블로그

뱅크샐러드 공식 기술 블로그입니다. 뱅크샐러드의 기술, 문화, 행사 등 최신 소식과 함께 뱅크샐러드가 겪은 다양한 경험을 공유합니다.

blog.banksalad.com

[당근마켓 기술블로그]

https://medium.com/daangn/tagged/android

Android – 당근 테크 블로그 – Medium

Read writing about Android in 당근 테크 블로그. 당근은 동네 이웃 간의 연결을 도와 따뜻하고 활발한 교류가 있는 지역 사회를 꿈꾸고 있어요.

medium.com

[토스 기술블로그]

https://toss.tech/tech

토스 기술 블로그, 토스 테크

토스의 개발과 디자인에 대한 이야기를 다룹니다.

toss.tech

[2024 Google I/O 발표자료]

https://danielkim88.notion.site/I-O-Extended-Incheon-2024-56c512b101364504876923213728cb16

I/O Extended Incheon 2024 발표 자료 | Notion

안녕하세요! GDG Incheon / GDG Songdo 입니다.

danielkim88.notion.site

[크몽로그]

https://kmong.com/article/1751--%EB%B9%84%EC%A0%84%EA%B3%B5%EC%9E%90-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%8F%84-%EA%B0%80%EB%8A%A5%ED%95%9C-%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EC%95%B1-%EA%B0%9C%EB%B0%9C%EC%9D%80

[패스트캠퍼스 듣고 싶은 강좌]

https://fastcampus.co.kr/search?keyword=%EC%BD%94%ED%8B%80%EB%A6%B0%20%ED%94%8C%EB%A1%9C%EC%9A%B0

[IT 뉴스 볼 수 있는 곳]

https://maily.so/blackcon/posts/7287d00e

아이폰에서 '삼성페이'가능 / 영화 제작의 판도를 바꿀 AI / 현기차, '베터리 관리 시스템'

구독자 님이 잠든 사이에 있었던 핫 한 이슈들을 모아보았는데요. 어떤 일들이 있었는지 보기 좋게 정리해서 공유드립니다.

maily.so

[프로그래머스 - Django]
https://career.programmers.co.kr/posts/tag/Django

Django - 테크 피드

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

career.programmers.co.kr

[Git / Command] 내가 보려고 만든 Git 명령어 모음집

gangmini — Wed, 31 Jul 2024 13:48:49 +0900

3일만 안 써도 까먹는 깃 명령어.... ~~진짜 빡대가리..~~

정리해두고 그때그때 보면서 써야지!!

브랜치 변경

git checkout 변경할브랜치

브랜치 생성 및 전환

git checkout -b 생성할브랜치이름

브랜치 삭제

Local 브랜치 삭제

git branch -d 로컬브랜치이름

Remote 브랜치 삭제

git push origin --delete 원격브랜치이름

Merge

현재 브랜치가 dev 인데 main 브랜치의 내용을 dev에 반영하고 싶을때

# 현재 브랜치는 dev
git merge main

Local에서 작업 후 add - commit - push 루틴

1. 
git add . 혹은 git add 파일명

2. 
git commit -m "커밋메세지"

3. 
git push origin(원격저장소 이름) 브랜치명

Remote 내용을 Local 로 pull 땡기기 (가져오기)

git pull origin 땡겨올브랜치

Local에서 작업한 내용 처음으로 원격저장소에 올리기

1. 깃 초기화

git init

// git config --global user.email "keung903@naver.com"
// git config --global user.name "honor-sky"

2. Local에서 작업한 내용 모두 add 해주고 commit 해주기 -> local 의 origin 이라는 곳으로 올라감

만약 모든 파일을 한번에 올릴게 아니라 파일별로 조금씩 올리고 싶다면 add 다음에 . 가 아니라 파일이나 폴더명을 써주고 commit 해주면 된다.

git add .

git commit -m "first commit"

3. 원격 저장소 만들기 ( ** 주의할 점!!)

깃허브 페이지에 들어가서 원격저장소를 만들어준다.

그리고 요즘은 원격저장소에 연결하기 위해서는 대부분 인증 토큰이 필요하다.

깃헙 계정의 setting (repository setting 아니고 전체 설정) 에 들어가서 developers -> personal access tokens -> classic token 에서 토큰을 만들어준다.

그리고 반드시 토큰은 어딘가에 저장해줘야 한다. (잊어버리면 제거하고 다시 만들면 됨)

이때 반드시 repo 부분을 다 체크해줘야지 403 에러가 안 나고 정상적으로 연결될 것이다.

4. Local의 origin 의 내용 본격적으로 remote 저장소에 추가하기

git remote add origin https://github.com/honor-sky/BitCoinWebSocket.git

이 명령어를 치고 나면, 깃허브 userName 과 password 를 입력하는 명령이 뜨는데

이때 userName은 userName 을 그대로 치면 되지만

password에는 위 3번에서 만들어준 토큰을 입력해준다.

5. 원격저장소의 브랜치를 main 으로 설정
(만약 main이 아닌 다른 저장소에 저장하고 싶은거라면 다른 브랜치명 써주면 됨)

git branch -M main

6. origin의 내용을 remote의 main 브랜치로 push 해주기
(만약 main이 아닌 다른 저장소에 저장하고 싶은거라면 다른 브랜치명 써주면 됨)

git push origin +main

~~원격저장소 Repository를 Local로가져오기~~

~~Local에 연결된 원격저장소 연결 끊기~~

~~upstream 설정하기~~

[Git / Git Flow] Git Flow 수립 도전기!

gangmini — Thu, 18 Jul 2024 03:55:59 +0900

Git Flow 란?

버전 관리와 개발자 간의 분업을 위해 일종의 규칙과 프로세스에 맞춰 git을 사용하는 것
상황에 맞게 브랜치를 만들고 머지
기본적인 틀이 있지만 팀바팀!

기본적으로 git flow에서 사용되는 브랜치는 main / dev / feature / hotfix 로 이루어져 있다. 브랜치 별로 각 역할과 의미가 있지만 팀마다 조금씩 다르게 규칙을 정의해 운영하기도 한다.

현재 진행 중인 사이드 프로젝트 '어비로' 가 구글 출시 심사 과정에 있고, 본격적인 운영에 앞서 Git Flow를 적용하는 것이 좋다는 말을 들었다. 그래서 같은 팀의 ios 개발자이신 성훈님의 가르침과 여러가지 사항들을 고려해 ‘어비로’ 만의 git flow 를 구축해 운영해보려고 한다.

✔️ Main

최종 배포 버전 브랜치 / 운영 브랜치
모든 개발이 완료되고, 최종 배포를 할 경우 이곳으로 merge 한다 (배포를 위해 모이는 곳)
만약 심사과정 혹은 배포 이후 오류/버그/피드백가 발견된 경우, hotfix 브랜치에서 처리한다
(추후 : 실제 플레이스토어에 출시하기 위한 배포를 main 브랜치에서 자동화 하고자 한다)

✔️ Dev

최종 개발 버전 브랜치
새로운 개발이 시작되었을때, Dev 브랜치에서 각 기능별로 Feature 브랜치들을 파서 개발을 시작한다.
Feature브랜치에서 개발이 완료되면 이곳으로 merge 한다 (개발이 완료되면 모이는 곳)
(추후 : 실제 출시용 배포 전 내부 테스트를 위한 배포를 Dev 브랜치에서 자동화 하고자 한다)

✔️ Feature

개발 중인 각 기능들을 각각의 feature 브랜치로 만들어 개발
예를 들어 ‘사진 업로드 기능’ 이 추가되었을 경우, ‘가게 등록 사진 업로드’ 와 ‘후기 등록 사진 업로드’ 이렇게 크게 2가지 기능으로 나뉠 수 있고 각각 Feature/image_resgister 와 Feature/image_review 이렇게 브랜치를 나눠 각각 개발할 수 있다
(개발자가 여러명인 경우, 각자 맡은 기능 개발을 브랜치로 따로 만들어 개발하면 관리가 쉽다)

✔️ Hotfix

내부 테스트 과정에서, 혹은 배포 후 발생하는 오류 / 버그 / 피드백을 빠르게 처리하기 위한 브랜치이다

✔️ Release

배포를 위한 브랜치이다. main 에서 처리해도 되지만 이렇게 버전별 릴리즈 브랜치를 만들어 dev에서 모아진 최종 개발 결과물을 배포한다. Ex) release/release-1.0.0
릴리즈용이기 때문에 해당 릴리즈가 끝나면 해당 브랜치는 삭제된다
~~이렇게 하게 되면 CI/CD 구축이 힘들수도 있지 않을까 싶다~~
- CI/CD 구축이라는 것이 특정 브랜치에 배포하고자 하는 결과물이 merge 되면 자동으로 배포가 되는 자동화를 구축하는 것인데, 이렇게 매번 다른 브랜치를 생성해 사용하게 되면 구축이 어렵지 않을까?

과거의 내가 Git을 사용하던 방식

이것도 사실 매번 냅다 main만 사용하다가 좀 없어보여서

릴리즈 버전별로 브랜치 만들어 개발하고 배포할때마다 main 에 merge 하려고 시도했던 흔적…ㅎㅎ

현재 (Git Flow 적용!)

내가 그동안 뭘 한건지 모르겠지만,,,,,, 새마음 새뜻으로 시작하기 위해 현재 브랜치들을 정리해주었다….

1.0.0 브랜치 제거
1.1.0 브랜치 → dev 로 변경
1. 가장 최신 코드들이 반영되어 있는 브랜치이므로 이걸 dev로 변경해주었다.
dev 를 main 으로 merge
1. 현재 dev의 코드로 aab 파일을 만들어 프로덕션 배포한 상태이기 때문에 dev 내용을 main 으로 merge 시켜 상태를 맞춰 주었다

나의 경우, release 브랜치는 따로 운영하지 않고, main 브랜치를 release 브랜치처럼 사용하려고 한다.

그리고 어비로 official Repository를 fork 해서 upstream 방식으로 운영하고 있는데

fork 한 내 저장소를 → origin 이라고 부르고

official Repository를 → upstream 이라고 부르겠다.

추후에 origin의 main에 배포하면 내부테스트용 앱이 배포되고, upstream의 main에 배포하면 실제 출시용 앱이 배포되도록 CI/CD를 구축해보는 것도 나의 목표이다. (바뀔 수도 있음)

HotFix 만들어 보기

지금 앱을 출시하기 위해 프로덕션에 올려 14일간 테스트중인데, 급하게 수정할 사항이 생겼다

안드로이드 API 수준 올리기(target SDK 를 34 = API 수준 14) (구글 요청)
‘가게 등록 - 가게 검색’ 기능에서 발생하는 버그 수정

앱을 배포했는데 발생하는 문제이기 때문에 hotfix를 실습하기 딱 좋다고 생각했다.

1. main 브랜치에서 hotfix 만들어주기 & 작업하기

1-1. hotfix는 main 브랜치에서 처리하는 것으로 정했기 때문에 여기서 브랜치를 만들어준다

1-2. local 에서 먼저 브랜치를 만들어 주고, 이걸 원격저장소로 push 해줬다

2. 작업 완료된 hotfix 브랜치를 main 과 dev로 merge 하기 위해 PR 올리기

2-1. 나는 hotfix의 내용이 빠르게 배포 버전에 반영될 수 있도록 하는 것이 중요하다고 생각했다.

그래서 아래 처럼 main에 PR을 진행했다.

2-2. 그리고 dev 브랜치 또한 버그가 수정된 main의 상태와 맞춰줘야 하는데

원격 저장소에서 dev로 merge 해주거나 상황에 따라 PR을 올려 진행해주었다.

3. 로컬에서 브랜치별로 fetch-pull 해줘서 원격의 내용을 반영

이제 원격의 main 과 dev 는 hotfix를 통해 버그를 수정한 내용까지 모두 반영되어 있을 것이다.
a 또는 b의 절차를 걸치게 되면, 원격저장소에서 계속 PR을 올렸기 때문에 로컬에는 버그 수정 사항이 반영 되어 있지 않다.

또한 협업 상황에서는 내가 아니더라도 다른 누군가가 hotfixt 작업을 할 수도 있다.

그런 경우 나는 내 로컬의 main 과 dev에서 fetch-pull 수행해줘야 버그 수정 사항을 반영을 내 로컬 저장소에도 반영할 수 있다

git fetch

git checkout dev # 로컬에서 dev 브랜치로 전환
git pull

git checkout main # 로컬에서 main 브랜치로 전환
git pull

git flow 수립 첫 도전 & hotfix 만들어보기 끝~~

+) 데보션에 올라온 글 중에 Git Flow를 야구에 비유해 쉽고 재미있게 설명하는 글이 있어서 공유해본다!

https://devocean.sk.com//blog/techBoardDetail.do?ID=166708

야구로 쉽게 이해해 보는 Git Flow 전략 이야기

devocean.sk.com

[참고자료]

Git 뉴비를 위한 기초 사용법 - 버전 관리

[git] 효율적인 협업을 위한 Git-Flow 이해하기 (사용하는 branch 와 repository 구성)

우린 Git-flow를 사용하고 있어요 | 우아한형제들 기술블로그

[협업] 협업을 위한 Git Flow 설정하기

(upstream)

[Git] fork한 repository 동기화부터 pull request (PR)를 보내기까지

(merge 방식)

Github Merge 방식 이해하기

[안드로이드/Coroutine] Coroutine 예제를 통해 본격 딥다이브 & Structured concurrency

gangmini — Thu, 18 Jul 2024 03:37:22 +0900

중간 점검 차 계속 이론, 개념 공부만 하는 것이 아니라 직접 몇가지 실습을 통해 코루틴을 익혀보려고 한다.

유튜브에서 ‘새차원, 코틀린 코루틴’ 강의를 참고해 공부하면 공식문서 실습코드들을 따라 쳐보면서 공부할 수 있다.

그런데 이게 코드 예제들을 마주할 때마다 새롭고 띠용?,,, 하는게 많다.

내가 이해한건 A라 똑같이 적용해서 풀면 틀리고 B라는 개념이 또 등장한다.

그래서 예제들을 많이 보면서 더 많이 생각하고 더 많이 배우게 되는 것 같다.

fun main() = runBlocking<Unit>{
	GlobalScope.launch { // 코루틴2 (코루틴1과 다른 생명주기)
	    delay(3000L)
	    println("world!")
   }
    println("hello,") // 코루틴1

}
/* 실행결과 */
// hello,

fun main() = runBlocking<Unit>{
	launch { // 코루틴2 (코루틴1과 같은 생명주기)
	    delay(3000L) //delay()가 없어도 동일한 결과 
	    println("world!")
   }
    println("hello,") // 코루틴1

}
/* 실행결과 */
// hello, 
// world!

우선 위 예제를 통해 코루틴에서 중요하게 생각하는 Structured concurrency에 대해 이야기 해보려고 한다.

Structured concurrency을 잘 지켜 코루틴을 짜면 더 효율적이고 이쁜 코드 개발이 가능해서 중요하게 생각하는 것 같다.

Structured concurrency (구조화된 동시성)

위에서 첫번째 코드는 runBlcoking 블록 내부에서 또 다른 새로운 코루틴 scope인 GlobalScope를 생성해 사용하고 있다.

즉, runBlocking 도 parent Scope 이고, GlobalScope도 parent Scope 이므로 따로국밥으로 각자의 라이프사이클을 가지고 운영된다는 것이다. 그래서 GlobalScope에서 3000L 대기하는 동안 runBlocking이 끝나면서 실행 자체가 종료되어버리고, “World! ”는 출력되지 못한 것 이다.

반면에 두번째 코드는 runBlcoking 내부에서 launch 되고 있다. ( = this.launch)

이는 runBlcoking과 같은 코루틴 Scope 안에서 코루틴을 생성해 동작하는 것이기 때문에 runBlcoking 블록 안에 모든 내용이 수행될때까지 종료되지 않는다.

이렇게 같은 스코프 내에서 코루틴을 생성하도록 구조화해주면,

코루틴 수행이 정상적으로 보장받을 수 있고, 코루틴 간에 병렬처리에도 좋다는 것이 Structured concurrency 이다.

처음 내가 이 코드를 실습해볼때, 코틀린 파일만 실행하는 법을 몰라서 그냥 앱 단위에서 코드를 실행했다.

한마디로 화면까지 만들어서 액티비티 안에 코드를 적어 실행했다는 것….

그런데 아래와 같은 코드를 작성하게 되면 원래는 “hello,” 만 나와야 한다고 이해했는데 이렇게 모두 출력되는 것이었다….!

???????

같은 Scope 아니니까 main()가 끝나면 println("world!") 도 실행이 안 되어야 하는 것 아닌가…? 이걸로 한참을 고민했다.

// Acticvity onCreate() 에서 실행
class ToolBar : AppCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
    		main()
    }

    fun main() = runBlocking<Unit>{
    	GlobalScope.launch { 
        	delay(3000L)
	    	println("world!")
        }
    	println("hello,") 
    }
}

/* 실행결과 */
// hello, 
// world!

이유는 바로 앱에서 실행했기 때문이었다.

그냥 코틀린 코드에서 main() 함수를 run 하게 되면 main() 가 끝나면 실행 자체가 종료된다. 하지만 앱에서는 main()도 그냥 일종의 하나의 함수일뿐…!! 이 함수가 종료된다고 앱이 종료되는 것은 아니다!!! 그렇기 때문에 GlobalScope 이 여전히 살아있을 수 있는 것이고 “World!” 까지 출력되는 것이다.

// Acticvity onCreate() 에서 실행
class ToolBar : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
		
        var count = 0
        binding.btn1.setOnClickListener {
            count++
            binding.btn1.text = "${count}"
        }

        binding.blockBtn.setOnClickListener {
        	main()
                Log.d("CorutineTest", "main 끝")
        }
     }
	
     fun main()= runBlocking{
        delay(10000000L)
       	Log.d("CorutineTest", "hello,")
     }
}

/* 실행결과 */
// ANR 에러 발생

Dispatcher를 사용해 코루틴을 생성하는 방법에도 크게 2가지가 있다는 것을 알게 되었다.

1. CoroutineScope(Dispatchers.IO)

// Acticvity onCreate() 에서 실행
class ToolBar : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
		
        var count = 0
        binding.btn1.setOnClickListener {
            count++
            binding.btn1.text = "${count}"
        }

        binding.blockBtn.setOnClickListener {
            main()
            Log.d("CorutineTest", "main 끝")
        }
     }
}

fun main() = runBlocking<Unit>{  // main 스레드
     CoroutineScope(Dispatchers.IO).launch { // IO 스레드에서 실행되므로 main과 별개
            delay(3000L)
            println("world!")
            Log.d("CorutineTest", "world!")
    }
   
    Log.d("CorutineTest", "hello,")

}

/* 실행결과 */
// hello, 
// main 끝
// world!

이렇게 CoroutineScope(Dispatchers.IO) 하게 되면 아예 다른 IO Scope에서 코루틴이 생성되면서 main() 함수는 먼저 종료된다. 메인스레드를 runBlocking 했던 것도 끝나기 때문에 UI와 상호작용할 수 있다. 그리고 아예 다른 Scope에 생성 되었던 delay(3000L) 가 지난 후 world! 가 출력된다.

즉, 서로 다른 범위, 다른 생명주기를 갖기 때문에 구조적 동시성을 제공하지도 않는다.

2. launch(Dispatchers.IO)

// Acticvity onCreate() 에서 실행
class ToolBar : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
		
        var count = 0
        binding.btn1.setOnClickListener {
            count++
            binding.btn1.text = "${count}"
        }

        binding.blockBtn.setOnClickListener {
            main()
            Log.d("CorutineTest", "main 끝")
        }
     }
}


fun main() = runBlocking<Unit>{  // main 스레드
	  launch(Dispatchers.IO) { // 다른 스레드에서 실행되지만 main 막힘
        delay(3000L)
        Log.d("CorutineTest", "world!")
    }
    Log.d("CorutineTest", "hello,")

}

/* 실행결과 */
// hello, 
// world!
// main 끝

반면에 runBlocking의 내부에서 아예 새로운 Scope를 만드는 것이 아닌 바로 launch(Dispatchers.IO) 를 하게 될 경우, 메인스레드에서 수행되는 runBlocking 블록의 Scope 생명주기를 따르게 된다.

물론 디스패처를 IO로 설정했기 때문에, IO 스레드에서 코루틴이 생성되어 수행된다. 하지만 생명주기 자체는 즉, runBlocking을 따르기 때문에 IO 스레드에서 생성된 코루틴이 모두 수행되기 전까지 runBlocking 은 끝나지 않는다. (자신의 자식 코루틴을 관리하는 셈) 그래서 delay(3000L)동안 메인스레드를 고스란히 blocking 하면서 UI 입력도 차단되게 된다.

[안드로이드/Coroutine] Coroutine Dispatcher

gangmini — Thu, 18 Jul 2024 03:16:55 +0900

Coroutine Dispatcher

처음엔 이 디스패쳐가 그냥 스레드 종류를 정해주는 역할을 한다고만 생각했다.

하지만 그 이름의 뜻을 살펴보면 Dispatch = ‘보내다’ 라는 뜻이다.

그래서 생성된 코루틴을 어떤 스레드로 보낼지를 정해주는 것이 바로 Coroutine Dispatcher 이다.

디스패처는 자신이 사용할 수 있는 스레드풀에 스레드를 생성해 관리하고, 상황에 맞춰 코루틴을 분배해 스레드에 전달한다.

기본적으로 제공하고 있는 디스패처는 다음과 같다.

✔️ Dispatchers.Main

mian 스레드를 관리하는 디스패처이다 main 스레드는 한 개만 생성된다고 알고있다. 따라서 해당 스레드를 blocking 해서 사용하게 되면 ANR 에러가 발생할 수 있기 때문에 사용시 유의해야한다.
coroutine-android 라이브러리를 추가해야 사용 가능하다

✔️ Dispatchers.IO

디스크 또는 네트워크 I/O 작업을 실행하는데 좋은 디스패처

✔️ Dispatchers.Default

CPU를 많이 사용하는 작업
연산량이 많은 작업, 정렬 작업, JSON 파싱 작업에 좋다

기본으로 제공하는 디스패처 외에 직접 디스패처를 만들어 사용할 수도 있다.

디스패처가 스레드풀을 관리하고 그 스레드풀 안에서 1개 이상의 스레드가 생성된다고 했는데 멀티/싱글 2가지 종류의 스레드를 생성하는 디스패처를 만들어볼 수 있다.

1. 여러개의 스레드를 관리하는 멀티스레드풀

val dispatcher = newFixedThreadPoolContext(3, "ThreadPool")

2. 스레드를 하나만 관리하는 단일스레드(풀)

val dispatcher = newSingleThreadContext("SingleThread")

[Kotlin 문법] apply / run / with / let / also 확장함수

gangmini — Mon, 1 Jul 2024 02:39:00 +0900

확장함수란?

상속없이 클래스를 확장하는 것
객체.확장함수 형태
해당 클래스/객체에서 사용할 함수를 만들 수 있음 -> 실제 클래스에 이런 함수가 추가되는 것 X

class Person {
    val age = 29
    val name = "똘이"
}

예를 들어 위와 같은 형태의 클래스는 age, name 두개의 프로퍼티로만 이루어졌고, 따로 함수는 가지고 있지 않다.

// 내가 만든 확장함수
fun Person.inCrease() {
    println("$age")
}

fun main() {

    val person = Person()
    person.inCrease() 
    
}

그런데 이렇게 내가 Person 이라는 클래스에 대해 inCrease() 라는 확장함수 를 만들어 마치 실제 Person 클래스의 함수처럼 사용 가능하다. 하지만 실제로 Person 클래스에 이 함수가 생긴 것은 아니다.

fun main() {

    val person = Person()
 
    // run 확장함수
    person.run {
    	age = 29
    }

}

오늘 학습하게 될 run / let / apply / also / with 확장함수들은 이미 kotlin 에서 지원하고 있는 확장함수이고, 각자 고유한 특징을 가지고 있기 때문에 여기에 맞게 사용할 수 있는 것이다.

위 예제에서는 실제 Person 클래스에 run() 이라는 함수는 없지만 kotlin 에 의해 자동으로 run 이라는 확장함수를 사용할 수 있게 된 것! (확장함수로 선언된 부분은 없지만 내부적으로 사용할 수 있게끔 처리되는 것 같다...!)

run / let / apply / also / with

나는 이 함수들의 차이를 이해하기 위해서는 아래 2가지에 집중해보았다.

수신객체 → 어떤 객체를 받는가?
반환값 → 무엇을 반환하는가? (받았던 객체를 그대로 반환하는가? 아님 다릉 return 값이 있는가?)

apply run / with let also

람다식 내부에서 하는 일	자신의 프로퍼티 셋팅	수신객체에 대해 특정한 동작	수신객체에 대해 특정한 동작	자신의 프로퍼티 셋팅, 수신객체에 대해 특정한 동작
수신객체 접근하는 법	this	this	it	it
return 값	자기자신	Block의 마지막	Block의 마지막	자기자신

** this : 수신객체를 람다의 수신객체로 전달하기 때문

** it : 수신객체를 람다의 파라미터로 전달하기 때문

예제 학습을 위해 데이터 클래스를 하나 만들어준다.

// 예시 클래스 1
data class Person(
    var name: String = "",
    var age: Int = 0,
    var temperature: Float = 36.5f
)

// 예시 클래스 2
data class Person(
    var name: String = "",
    var age: Int = 0,
    var temperature: Float = 36.5f
) {
    fun isSick(): Boolean = temperature > 37.5f
}

apply

‘수신’ 이라는 것을 쉽게 말해서 ‘받는다’ 라는 뜻이다. 즉, T 타입의 객체를 apply 함수가 받고, 다시 이 T 타입의 객체를 람다 함수가 받는다는 의미이다.
같은 객체를 받기 때문에 람다에 수신 객체는 굳이 명시해주지 않아도 된다. (하고 싶다면 this → 이렇게)

val person = Person().apply {  // this -> 
    name = "DevCho" // this.name = "DevCho"
    age = 29
    temperature = 36.2f
}

내부 프로퍼티를 변경할 때 사용한다. 그리고 반환 타입을 보면 T 즉, 받았던 객체를 다시 반환한다. Person() 객체를 받아서 인자들을 변경시키고 다시 Person() 객체를 반환해주기 때문이다.

run

run이 T 타입의 객체를 받고, 람다식도 T타입의 객체를 받는다. 동일한 객체를 받기 때문에 역시나 람다식에는 수신객체를 명시할 필요는 없다.

val person = Person(name = "Devcho", age = 29, temperature = 36.5f)

val isPersonSick = person.run { // this -> 
       temperature = 37.2f
       
       temperature // return값 (return은 생략)
  }

이번에는 반환값이 수신객체와 동일한 T 가 아니라 R 이다. 즉, 다른 값을 반환 한다는 의미이고, run은 Block 의 가장 마지막 줄을 반환한다.
자동으로 자기자신(수신객체)가 반환되던 apply와는 달리 run 은 무엇을 반환할지 개발자가 지정해줘야 한다. 만약 자기 자신을 반환하고 싶다면 this 를 반환하면 된다
return 은 생략한다. 어차피 block 의 맨마지막 줄을 명시적으로 반환하기 때문이다.

with

 val person = Person(name = "Devcho", age = 29, temperature = 36.5f)
    val isPersonSick = with(person) {
        temperature = 38.0f
        temperature // return 값
    }

run 과 완전히 동일하게 동작한다고 한다. 차이점은 run은 객체.run() 이런식으로 확장함수 로 사용하지만 with는 수신객체를 파라미터 사용해 with(객체) 이런식으로 사용한다. 실제로 run 이 더 깔끔하게 사용하기 좋기 때문에 with는 잘 안 쓴다고 한다

이제 슬슬 수신객체가 무엇인지, 반환값이 어떻게 다른지 감이 잡힌다.

계속해서 let 과 also 를 살펴보자.

let

 val person = Person(name = "Devcho", age = 29, temperature = 36.5f)
 
 val isPersonSick = person.let { it -> 
        it.temperature = 38.0f
        temperature // return 값
    }

수신객체를 받아 람다식에서 사용하고, 반환값으로는 Block의 마지막줄을 반환하게 된다. 즉, run이나 with와 거의 유사하게 사용된다. 수신객체를 람다식에서 접근할 때, this가 아닌 it을 사용한다는 차이가 있다

하지만 실제로 개발할 때 let은 조금 다르게 사용되곤 한다.

null 체크를 해서 null 이 아닐 경우에 let block을 실행하는 것이다.
null 체크에 사용되는 ? 연산자를 함께 사용해주면 된다.

 val person = Person(name = "Devcho", age = 29, temperature = 36.5f)
 
 val isPersonSick = person?.let { it -> // person이 null 이 아닌 경우 실행
        it.temperature = 38.0f
        
        isSick() // return 값
    }

그렇다면 null 인 경우에 실행을 하고 싶다며 어떻게 사용할까?

바로 run 을 block을 실행하면 된다.

 val person = Person(name = "Devcho", age = 29, temperature = 36.5f)
 
 
 val isPersonSick = person?.let { // person이 null 이 아닌 경우 실행
        it.temperature = 38.0f
        
        isSick() // return 값
        
    } ?: run {
		    // person이 null인 경우 실행
    
    }

나도 자연스럽게 이런 방식을 사용하게 되었는데, 실무에서도 let 과 run 을 사용해 nullable 객체에 대해 서로 다른 실행문을 동작시키는 방식을 운영한다고 한다.

also (상당히 짜즈ㅇ....)

apply처럼 수신객체를 받아 프로퍼티 셋팅을 해주고 추가적으로 객체 자신에 대한 작업을 수행할 수도 있다. 그 다음 수신객체 자신을 반환한다.
- also 의 반환 값은 자기자신이다.
- 수신객체의 프로퍼티를 변경하게 되면 return 값도 프로퍼티가 변경된 수신객체가 반환
- 객체를 자체를 다시 생성해 할당하는 경우에는 반환값에 영향 X
람다식에서 수신객체를 사용하기 위해서는 it을 사용한다.

var number = 3;

fun getAndIncreaseNumber1() = number.also {
    number++
}

var person = Person("Devcho", 29, 36.2f);

fun getAndIncreaseNumber2() = person.also { 
    // 수신객체 프로퍼티 직접 변경(반환할 수신객체에도 영향을 미침
    person.age = it.age + 1
}

fun getAndIncreaseNumber3() = person.also {
    // 새로운 객체를 생성 -> 반환할 수신객체는 원래의 person
    // 이후에 새로운 Person 객체가 person에 셋팅
    person = person.copy(age = it.age + 1)
}

fun main() {
    println("first number ${getAndIncreaseNumber1()}")  // 3
    println("second number ${getAndIncreaseNumber1()}") // 4
    
    println("first number ${getAndIncreaseNumber2()}")  // 30
    println("second number ${getAndIncreaseNumber2()}") // 31
    
    println("first number ${getAndIncreaseNumber3()}")  // 29
    println("second number ${getAndIncreaseNumber3()}") // 30
}

[최고의 출처]

https://kotlinworld.com/255#범위 지정 함수(Scope function)란%3F-1

[안드로이드/Coroutine] Coroutine(코루틴)이란?

gangmini — Sun, 3 Mar 2024 03:06:32 +0900

코루틴(Coroutine)이란?

프로세스 = 실행중인 프로그램, 실행 코드가 메모리에 올라가면 프로세스가 시작된다
- 여러개의 프로그램을 사용중이라면 프로세스도 여러개
스레드 = 하나의 프로세스 안에 존재하는 여러개의 실행 단위이다
- 스레드가 꼴랑 하나밖에 없단면 프로그램은 너무 힘들 것이다. 그래서 CPU가 여러개인 것도 이런 부분을 커버해주기 위해서 여러개의 스레드를 만들어 여러 수행을 동시에 진행하는 것을 도와주는 것이다
코루틴 = 스레드 안에 존재하는 작업 단위 (스레드의 스레드, 경량 스레드 라고 부르기도 한다)

안드로에드에서 가장 중요한 스레드는 메인 스레드 로 UI 를 그려주고 사용자가 화면과 상호작용할 수 있도록 해주는 스레드이다. 그런데 이 메인 스레드가 너무 바쁘면 메인 스레드가 블로킹 되고 상호작용을 못하게 되면서 앱이 강제 종료되는 ANR 에러가 발생한다.

그래서 무거운 작업은 다른 스레드를 만들어 수행해줘야 한다. 이렇게 여러 스레드를 만들어 관리해주기 위해 다양한 방법이 존재한다.

Thread 를 만들고 관리하는 방법

1. Thread 클래스를 상속받아 사용

스레드, 핸들러 개념까지 엮어서 가장 기초적으로 배우는 방법인 것 같다.
Thread() 를 상속받아 클래스를 만들고, run() 메서드를 오버라이딩 해 그 안에 수행 할 내용을 적어주면 된다.
이렇게 생성된 스레드가 많은 메모리를 차지하면서 재사용이 어려운 단점이 있다. 또한 스레드를 개발자가 직접 관리해야 하기 때문에 메모리 누수의 가능성이 올라간다. (관리라고 하는 것은 스레드를 생성, 삭제, 재사용 이런것들을 말하는 것이다)

fun main() {
    val exampleThread = ExampleThread()

    exampleThread.start()
}

class ExampleThread : Thread() {
  override fun run() {
    println("[${Thread.currentThread().name}] New Thread Running")
  }
}

2. Executor 프레임워크를 사용하는 방법

개발자가 스레드를 관리해야 한다는 책임과 부담을 낮춰주고, 재사용성을 높여준다.
Executor 프레임워크가 스레드의 집합체인 ‘스레드 풀’ 을 만들고 작업을 제출하면 스레드 풀의 스레드 중 하나에 작업을 할당한다고 한다. 즉, 알아서 스레드 풀에 여유있는 스레드에 작업을 할당하고, 스레드를 재사용하나 보다.

fun main() {
  // ExecutorService 생성
  val executorService: ExecutorService = Executors.newFixedThreadPool(4)

  // 작업 제출
  executorService.submit {
    println("[${Thread.currentThread().name}] 새로운 작업1 시작")
  }

  // 작업 제출
  executorService.submit {
    println("[${Thread.currentThread().name}] 새로운 작업2 시작")
  }

  // ExecutorService 종료
  executorService.shutdown()
}

/*
출력
[pool-1-thread-1] 새로운 작업1 시작
[pool-1-thread-2] 새로운 작업2 시작
*/

3. Rx 라이브러리를 사용하는 방식

솔직히 Rx, RxJava 이런것들을 몰라서 잘 모르겠다

위 3가지 방법 모두 메인 스레드 외의 다른 스레드들을 만들어 작업을 수행하는 방식이다.

그런데 이렇게 스레드를 여러개 만들어 내는것, 그리고 여러 스레드가 전환되면서 여러 작업이 이것저것 수행되는 것(하나의 스레드만 계속 수행되는게 아니라, 여러 스레드가 빠른속도로 번갈아 가면서 수행되기 때문에 우리가 여러 작업을 동시에 처리하는 것 같은 효과를 얻을 수 있는 것이다) 은 매우 비용이 많이 든다.

또한 A 스레드에서 작업 수행 중 B 스레드의 수행 결과를 기다려야 하는 경우, 기다리는 동안 A스레드는 꼼짝없이 blocking 되어있는 상황에 처한다.

그래서 나온 기술이 코루틴 이다!!

코루틴은 매번 새로운 스레드를 만드는 것이 아니라 스레드 안에 여러개의 작업 단위(=코루틴)를 만들어 사용한다.

그래서 아래 그림처럼 작업1을 수행하는 코루틴1이 스레드1에서 실행되고, 중간에 작업2의 결과를 기다리는 동안 또다른 작업단위인 코루틴3이 스레드1에서 실행될 수 있다.

여기서 코루틴1은 작업2를 기다리는 동안 자신의 작업을 일시중단 하고 코루틴3에게 스레드를 양보한다.

또한 ‘조세영의 Kotlin World’를 통해 공부하면서 새롭게 알게 된 사실이 있다…!

난 코루틴을 사용하기 위해 항상 라이브러리를 추가해서 사용해왔다.

하지만 코루틴은 코틀린 언어에 기본적으로 내장되어 있는 기능이다. 따라서 별도의 라이브러리 설정 없이도 사용 가능하지만 그것은 저수준 API 라는 것이다. 그리고 UI 가 있는 앱의 경우 Main 스레드가 중요하다고 했는데 이 Main 스레드를 코루틴에서 사용하기 위해 필요한 라이브러리도 따로 있었다.

// 고수준 코루틴을 사용하기 위한 라이브러리
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3'

// 코루틴에서 Main 스레드를 사용하기 위한 라이브러리
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3'

[안드로이드/BottomSheet] Persistent Bottom Sheet 외부 화면 클릭 기능 구현

gangmini — Wed, 28 Feb 2024 01:49:32 +0900

위 사진과 같은 화면을 개발하기 위해 Persistent Bottom Sheet 를 개발하게 되었다.

사용자의 액션에 따라 바텀시트를 펼치고 닫고 하는 동작이 중요한데 약간 까다로운? 다소 복잡한 요구사항을 만족시켜야 해서 구현하는데에 고민을 좀 했었다.

✔️ 기능 요구사항

바텀시트가 열린 상태에서 외부를 클릭하면 바텀시트가 Hidden
바텀시트가 열린 상태에서 외부를 드래그하면 바텀시트는 유지되고 드래그만 가능

바텀 시트 외부를 클릭하게 되면 바텀시트 자체가 숨겨져야 하는데 단순 클릭이 아닌 외부 화면을 드래그 하는 경우에는 바텀시트는 가만히 있고 그냥 맵 화면 탐색과 같은 기능을 제공해야 했다.

✔️ 문제상황

바텀시트 외부 즉, 네이버 지도가 표시될 map_fragment를 사용자가 단순 터치를 했는지, 드래그를 했는지 구분해야 함
뷰바인딩을 통해 map_fragment에 터치 리스너 달아주었지만 전혀 감지/ 동작 하지 않음 => 어떤 액션 이벤트가 들어왔는지를 감지조차 못함

첫번째, 사용자가 외부화면을 단순히 '클릭' 한것인지 혹은 '드래그' 한 것인지를 구분해야 한다. 어렵긴 하지만 사용자 이벤트에 따라 클릭인지 드래그인지를 검사하는 로직에 대해 찾아보면 될 것 같았다.

두번째, 첫번째 문제를 해결하기 위해서는 일단 사용자의 이벤트를 감지하는 것이 중요하다. 그래야 이게 클릭인지 드래그인지 구분을 하지..그래서 일반적으로 사용할 법한 터치 이벤트를 감지하는 터치리스너를 맵 화면에 달아주고 OnTouch 메서드를 오버라이딩 하며 MotionEvent를 받아오려고 했으나 전혀 해당 함수가 호출되지 않는 문제가 발생했다.

binding.mapFragment.setOnTouchListener(object : View.OnTouchListener {
            override fun onTouch(p0: View?, p1: MotionEvent?): Boolean {
                Log.d("mapFragment","onTouch")
                return true
            }

  })

<FramLayout
            android:id="@+id/map_fragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clickable= "true"
            android:focusable= "true"
            android:onClick="@{() -> viewmodel.onClickContainer()}">
    </FramLayout>

(데이터바인딩 방식을 사용해 map 화면에 직접 클릭 메서드를 작성해주었는데 이또한 아무 반응이 없었다....ㅜ)

원인/해결 방법

이 문제를 해결하기 위해서는 Touch Event의 내부적인 호출 경로를 알고 있어야 했다.

내가 어떤 뷰 컴포넌트를 터치했을 때 그 컴포넌트에 바로 터치 이벤트가 들어오는게 아니다.

액티비티부터 시작해서 그 자식뷰로 전달 -> 전달 -> 하면서 이벤트가 전달되면서 최종적으로 가장 상위의 자식뷰까지 이벤트가 전이된다.

만약 자식뷰로 이벤트를 전달하지 않고 해당 뷰에 대해 터치이벤트를 처리해주고 싶다면 onInterceptTouchEvent() 메서드를 오버라이딩하여 true를 반환하게 만들도 onTouchEvent() 메서드 안에 원하는 동작을 처리해주면 된다.

(* Fragment에서는 dispatchTouchEvent() 나 onInterceptTouchEvent() 같은 메서드를 오버라이딩 할 수가 없다.)

이 내부 동작원리를 기반으로 내 코드에서의 이벤트 전달 경로는 아래와 같다.

Home Activity → Map Fragment → FramLayout(뷰그룹)(id : map_fragment) → 네이버맵 객체(?)

FramLayout 위에 누군가 있다?

위에서 xml 코드를 보면 FramLayout 은 자식뷰를 가지고 있지 않다. 그래서 나는 FramLayout에 터치리스너를 달아 이벤트를 받으려고 했지만 FramLayout은 맵을 표시하게 될 도화지이고, 실제 그 위에 올라가는 맵 객체가 존재하게 되면서 최종적으로 맵 객체로 이벤트가 들어오게 되는 것이다.

(맵 객체에 터치 리스너를 달고 이벤트 전달 로그를 찍어본 결과 -> 최종적으로 맵 객체로 이벤트가 전달)

그렇다면 무조건 FramLayout의 onInterceptTouchEvent() 가 true를 반환하게 해서 이벤트를 처리하는게 답일까?

NO!! 좀 더 복잡한 고민을 해줘야 한다....

무조건 true를 반환하게 되면 맵을 드래그해서 탐색하거나 마커를 클릭해서 바텀시트를 올라오게 하거나, 혹은 바텀시트의 내용만 바꿔주는 작업을 할 수 없게 된다. 이런 작업들은 맵 객체까지 이벤트가 전달되어야 동작할 수 있는데 FramLayout에서 가로채버리기 때문이다 ㅠㅠ

1. 먼저 FramLayout의 onInterceptTouchEvnet() 코드에서 1차적으로 이 이벤트가 어떤 동작에 속하는지 체크해줘야 한다. 하지만 FramLayout의 경우에는 안드로이드에서 기본적으로 제공하고 있는 레이아웃 클래스이기 때문에 onInterceptTouchEvnet() 같은 내부 코드를 바꿀기는 어렵다. 따라서 FramLayout 를 implements 해서 Custom FramLayout을 만들고 여기서 onInterceptTouchEvent() 메서드를 오버라이딩 하면 된다.

만약 바텀시트가 up되어 있는 상태에서 터치 이벤트가 들어오게 된다면 일단 viewmodel._isShowBottomSheetTab.value = false 로 바꿔준다.

이벤트는 맵객체로 전달 되도록 false를 반환한다.

class CustomFragmentContainerView : FrameLayout {

    private lateinit var bottomSheetBehavior: BottomSheetBehavior<*>
    private lateinit var viewmodel: MapViewModel

    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)

    private val TOUCH_THRESHOLD = 10
    private var startX = 0f
    private var startY = 0f

    private var preSelectedMarker : MarkerOfMap? = null

    fun setViewModel(viewmodel: MapViewModel) {
        this.viewmodel = viewmodel // 바텀시트 조작해줘야 하므로 바텀시트 BottomSheetBehavior를 이 커스텀 레아아웃 클래스에 셋팅해놔야 함
    }

    fun setBottomSheetBehavior(behavior: BottomSheetBehavior<*>) {
        this.bottomSheetBehavior = behavior // 바텀시트 조작해줘야 하므로 바텀시트 BottomSheetBehavior를 이 커스텀 레아아웃 클래스에 셋팅해놔야 함
    }

    override fun onInterceptTouchEvent(ev: MotionEvent?): Boolean {
        // 터치 이벤트를 소비하여 ViewPager2로 전달하지 않음
        // 외부 영역을 클릭한 경우 바텀시트를 숨김

        when (ev!!.getAction()) {
            MotionEvent.ACTION_DOWN -> {
                // 화면에 손가락이 닿을 때 호출
                startX = ev!!.x
                startY = ev.y
            }
            MotionEvent.ACTION_MOVE -> {
                // 손가락이 화면에 닿은채로 움직일때 호출 (단순 터치를 할때도 호출 되기 때문에 이 이벤트로 뭔가를 판별하긴 어려움)
            }

            MotionEvent.ACTION_UP -> {
                // 화면에서 손가락이 떨어졌을 때 호출

                val endX = ev!!.getX()
                val endY = ev.getY()

                val distance = Math.sqrt(
                    ((endX - startX) * (endX - startX) + (endY - startY) * (endY - startY)).toDouble()
                ).toFloat()

                // 손가락이 화면이 닿았을 때 위치와 떨어질때 위치를 비교해 일정 이상 차이나면 단순 터치가 아닌 드래그로 간주
                if (distance < TOUCH_THRESHOLD) {
                    if (bottomSheetBehavior.state != BottomSheetBehavior.STATE_HIDDEN) { // 바텀시트가 up 되어 있다면
                        // 바텀시트를 숨기기 위한 플래그 설정
                        viewmodel._isShowBottomSheetTab.value = false
                        performClick()



                    }
                }
        }
        /* 만약 맵 탐색하는 드래그 동작이거나 바텀시트가 up 되어 있지 않는 상태에서 마커를 클릭한 경우에는
         * false를 반환하여 동작이 네이버맵으로 흘러가도록 해야 함
         */
    }
        return false
    }


}

2. 빈화면 터치가 아닌 다른 마커를 터치한 경우

위에서 viewmodel._isShowBottomSheetTab.value = false 로 바꿔주었지만 바텀시트를 숨기기 위해 빈 화면을 클릭한 것이 아닌 다른 마커를 선택하기 위한 터치일 수 있다. 이 경우 바텀시트는 그대로 두고 바텀시트의 내용만 바꿔줘야 하기 때문에 선택한 마커 데이터에 변화가 생겼을 경우 다시 viewmodel._isShowBottomSheetTab.value = true 로 바꿔준다.

  viewmodel.selectedMarker.observe(this, androidx.lifecycle.Observer {
            // 검색바 텍스트 설정
            if(it == null){
                binding.searchbarTextView.text = "어디로 이동할까요?"
                binding.searchbarTextView.setTextColor(ContextCompat.getColor(requireContext(), R.color.Gray3))
            }
            else {
                Log.d("selectedMarker", "마커가 선택되었습니다")
                viewmodel.getRestaurantSummary()
                // 바텀시트 UP
                viewmodel._isShowBottomSheetTab.value = true
                persistenetBottomSheet.state = STATE_COLLAPSED
                viewmodel._BottomSheetStep1.value = true
                viewmodel._BottomSheetState.value = 1

            }
        })

바텀시트 up 상태에서 다른 마커를 선택한 경우

3. 빈화면을 터치해 바텀시트를 숨겨야 하는 경우

마지막으로 이벤트를 받게 될 맵객체에 클릭 리스너를 달아 최종적으로 viewmodel._isShowBottomSheetTab.value 결과에 따라바텀시트를 숨겨준다.

 override fun onMapReady(naverMap: NaverMap) {

        naver_map = naverMap

        naver_map!!.setOnMapClickListener { pointF, latLng ->
            Log.d("NaverMap","NaverMap으로 터치 이벤트 전달")
            if(viewmodel.isShowBottomSheetTab.value == true) { //다른 마커 클릭

            } else {
                val bottomSheet = binding.bottomSheetLayout
                val persistenetBottomSheet = BottomSheetBehavior.from(bottomSheet)
                val density = resources.displayMetrics.density
                persistenetBottomSheet.peekHeight = (150 * density).toInt()
                persistenetBottomSheet.state = BottomSheetBehavior.STATE_HIDDEN

                viewmodel._selectedMarker.value = null
                viewmodel._BottomSheetStep1.value = true
                viewmodel._BottomSheetState.value = 0

            }

        }
}

✔️ 결과 화면

** 코드 업로드 요청 받아서 올림 **

[fragment_map.xml]

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="viewmodel"
            type="com.aviro.android.presentation.home.ui.map.MapViewModel" />
    </data>

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/bottom_sheet_coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <LinearLayout
        android:id="@+id/searchBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="54dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="16dp"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:elevation="10dp"
        android:orientation="horizontal"
        android:background="@drawable/base_roundsquare_white_10"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/filteringScrollView"
        app:visibilityChanged="@{(viewmodel.bottomSheetState == 0 || viewmodel.bottomSheetState == 1)}">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_search"
            android:layout_gravity="center_vertical"
            android:elevation="10dp"
            android:orientation="vertical">
        </LinearLayout>
        <TextView
            android:id="@+id/searchbarTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="21dp"
            android:layout_marginStart="7dp"
            android:fontFamily="@font/pretendard_medium"
            android:textSize="18dp"/>
    </LinearLayout>

    <!-- 화면 크기를 지정해주지 않으면 버벅거리는 문제 발생 -->
    <com.aviro.android.presentation.home.ui.map.CustomFragmentContainerView
        android:id="@+id/map_fragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:focusable= "true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </com.aviro.android.presentation.home.ui.map.CustomFragmentContainerView>

    <!-- 필터링 -->
  <HorizontalScrollView
          android:id="@+id/filteringScrollView"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginStart="16dp"
          android:layout_marginTop="10dp"
          android:layout_marginEnd="16dp"
          android:scrollbars="none"
          app:visibilityChanged="@{(viewmodel.bottomSheetState == 0 || viewmodel.bottomSheetState == 1)}"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/searchBar">

    <LinearLayout
        android:id="@+id/filteringContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <Button
            android:id="@+id/filter_cancel_btn"
            android:layout_width="36dp"
            android:layout_height="36dp"
            android:paddingBottom="15dp"
            android:elevation="10dp"
            android:background="@drawable/ic_filter_cancel"
            app:visibilityChanged="@{viewmodel.categoryFilter[0] || viewmodel.categoryFilter[1] || viewmodel.categoryFilter[2] || viewmodel.categoryFilter[3]}"/>


        <LinearLayout
            android:id="@+id/filter_dish"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="6dp"
            android:elevation="10dp"
            android:orientation="horizontal"
            android:padding="9dp"
            app:bgCategoryFilter="@{viewmodel.categoryFilter[0]}" />

        <LinearLayout
            android:id="@+id/filter_cafe"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="6dp"
            android:duplicateParentState="true"
            android:elevation="10dp"
            android:orientation="horizontal"
            android:padding="9dp"
            app:bgCategoryFilter="@{viewmodel.categoryFilter[1]}" />
        <LinearLayout
            android:id="@+id/filter_bakery"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="6dp"
            android:padding="10dp"
            android:elevation="10dp"
            android:orientation="horizontal"
            app:bgCategoryFilter="@{viewmodel.categoryFilter[2]}"/>
        <LinearLayout
            android:id="@+id/filter_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="6dp"
            android:padding="10dp"
            android:elevation="10dp"
            android:orientation="horizontal"
            app:bgCategoryFilter="@{viewmodel.categoryFilter[3]}"/>
    </LinearLayout>
</HorizontalScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>



        <FrameLayout
            android:id="@+id/conteudo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_insetEdge="bottom"
            app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"/>
        <!--app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"-->


        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/favorites_floatingButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="21dp"
            android:layout_marginBottom="80dp"
            android:elevation="10dp"
            android:padding="12dp"
            android:onClick = "@{() -> viewmodel.onClickFavorite()}"
            android:src="@{viewmodel.isFavorite}"
            android:theme="@style/Theme.AVIRO"
            app:rippleColor="@android:color/transparent"
            app:backgroundTint="@color/Gray7"
            app:fabCustomSize="48dp"
            app:fabSize="mini"
            app:dynamicTint="@{viewmodel.isFavorite}"
            app:layout_behavior="com.google.android.material.floatingactionbutton.FloatingActionButton$Behavior"
            app:layout_anchor="@+id/conteudo"
            app:layout_anchorGravity="right|bottom"
            app:visibilityChanged="@{(viewmodel.bottomSheetState == 0 || viewmodel.bottomSheetState == 1)}">
        </com.google.android.material.floatingactionbutton.FloatingActionButton>


        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/location_floatingButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="21dp"
            android:layout_marginBottom="20dp"
            android:elevation="10dp"
            android:padding="12dp"
            android:src="@drawable/ic_floating_location_default"
            android:theme="@style/Theme.Material3.DayNight"
            app:backgroundTint="@color/Gray7"
            app:fabCustomSize="48dp"
            app:fabSize="mini"
            app:tint="@color/Gray1"
            app:layout_behavior="com.google.android.material.floatingactionbutton.FloatingActionButton$Behavior"
            app:layout_anchor="@+id/conteudo"
            app:layout_anchorGravity="right|bottom"
            app:visibilityChanged="@{(viewmodel.bottomSheetState == 0 || viewmodel.bottomSheetState == 1)}">
        </com.google.android.material.floatingactionbutton.FloatingActionButton>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/action_down_floatingButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="21dp"
            android:layout_marginTop="51dp"
            android:layout_gravity="start"
            android:elevation="10dp"
            android:padding="12dp"
            android:src="@drawable/ic_arrow_down"
            android:theme="@style/Theme.Material3.DayNight"
            app:layout_behavior="com.google.android.material.floatingactionbutton.FloatingActionButton$Behavior"
            app:backgroundTint="@color/Gray7"
            app:fabCustomSize="48dp"
            app:fabSize="mini"
            app:tint="@color/Gray1"
            app:visibilityChanged="@{(viewmodel.bottomSheetState == 2)}">
        </com.google.android.material.floatingactionbutton.FloatingActionButton>


        <LinearLayout
            android:id="@+id/bottom_sheet_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:behavior_hideable="true"
            app:behavior_draggable="false"
            app:behavior_peekHeight="160dp"
            app:behavior_halfExpandedRatio="0.75"
            app:layout_insetEdge="bottom"
            app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
            <!-- app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"-->
            <include
                android:id="@+id/bottom_sheet"
                layout="@layout/fragment_bottomsheet_step1"/>
        </LinearLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

[fragment_bottomsheet_step1.xml]

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <import type="androidx.core.content.ContextCompat"/>
        <variable
            name="mapViewmodel"
            type="com.aviro.android.presentation.home.ui.map.MapViewModel" />
        <variable
            name="bottomViewmodel"
            type="com.aviro.android.presentation.bottomsheet.BottomSheetViewModel" />
    </data>

    <LinearLayout
        android:id="@+id/summary_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@drawable/base_top_roundsquare_white_20">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/base_top_roundsquare_white_20">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:background="@drawable/bar_bottomsheet"
            android:layout_marginStart="169dp"
            android:orientation="horizontal"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:visibilityChanged="@{!(mapViewmodel.bottomSheetState == 3)}">
        </LinearLayout>
            <!--app:visibilityChanged="@{!(mapViewmodel.bottomSheetState == 3)}"-->

        <LinearLayout
            android:id="@+id/restaurantInfo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="30dp"
            android:layout_marginEnd="78dp"
            android:orientation="horizontal"
            app:visibilityChanged="@{!(mapViewmodel.bottomSheetState == 3)}"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">
            <!--app:visibilityChanged="@{!(mapViewmodel.bottomSheetState == 3)}"-->

            <LinearLayout
                android:id="@+id/veganTypeIcon"
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:orientation="horizontal"
                app:bgVeganType2="@{mapViewmodel.selectedMarker}"
                app:visibilityChanged="@{!(mapViewmodel.bottomSheetState == 3)}"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:layout_marginBottom="40dp"
                android:orientation="vertical">

                <!--바텀시트 2단계에서 표시될 비건 타입-->
                <TextView
                    android:id="@+id/typeTextView_step2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingTop="4dp"
                    android:textSize="15dp"
                    app:veganTypeColor="@{mapViewmodel.selectedMarker.veganTypeColor}"
                    app:visibilityChanged="@{(mapViewmodel.bottomSheetState == 2)}"/>
                <!--app:veganTypeColor="@{mapViewmodel.selectedMarker.veganTypeColor}"-->
                <!--app:visibilityChanged="@{(mapViewmodel.bottomSheetState == 2)}"-->
                <TextView
                    android:id="@+id/nameTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:maxLines="1"
                    android:ellipsize="end"
                    android:textSize="20dp"
                    android:textStyle="bold"
                    android:textColor="@color/Gray0"
                    android:text="@{mapViewmodel.restaurantSummary.title}"/>
                <!--app:visibilityChanged="@{(mapViewmodel.bottomSheetState == 1 || mapViewmodel.bottomSheetState == 2)}"-->
                    <!-- android:layout_weight="0.7"-->
                <!-- 바텀시트 1단계에서 표시될 카테고리, 비건타입 -->
                <TextView
                    android:id="@+id/typeTextView_step1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingTop="4dp"
                    android:textSize="17dp"
                    android:fontFamily="@font/pretendard_semibold"
                    app:veganTypeColor="@{mapViewmodel.selectedMarker.veganTypeColor}"
                    app:visibilityChanged="@{(mapViewmodel.bottomSheetState == 1)}"/>
                <!--app:visibilityChanged="@{(mapViewmodel.bottomSheetState == 1)}"-->
           <!-- app:veganTypeColor="@{mapViewmodel.selectedMarker.veganTypeColor}"-->

                <LinearLayout
                    android:id="@+id/restaurantLoc"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="7dp"
                    android:orientation="horizontal"
                    app:visibilityChanged="@{(mapViewmodel.bottomSheetState == 1)}"
                    app:layout_constraintTop_toBottomOf="@id/restaurantInfo">
                    <!--app:visibilityChanged="@{(mapViewmodel.bottomSheetState == 1)}"-->

                    <TextView
                        android:id="@+id/locTxtView"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:maxLines="1"
                        android:ellipsize="end"
                        android:textSize="15dp"
                        android:fontFamily="@font/pretendard_regular"
                        android:text="@{mapViewmodel.restaurantSummary.address}" />
                </LinearLayout>

            <!-- 바텀시트 1단계에서 보여지는 거리 및 후기수 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="7dp"
                android:orientation="horizontal"
                app:visibilityChanged="@{(mapViewmodel.bottomSheetState == 1)}">
                <!--app:visibilityChanged="@{(mapViewmodel.bottomSheetState == 1)}"-->
                <!--거리정보-->
                <LinearLayout
                    android:id="@+id/distanceIcon"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:orientation="horizontal"
                    android:background="@drawable/ic_bottomsheet_loc">
                </LinearLayout>
                <TextView
                    android:id="@+id/distanceTextView_step1"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginStart="4dp"
                    android:textSize="15dp"
                    android:fontFamily="@font/pretendard_regular"/>

                <!--후기정보-->
                <LinearLayout
                    android:id="@+id/numOfReviewIcon"
                    android:layout_width="20dp"
                    android:layout_height="match_parent"
                    android:layout_marginStart="10dp"
                    android:background="@drawable/ic_bottomsheet_review"
                    android:orientation="horizontal"></LinearLayout>
                <TextView
                    android:id="@+id/numOfReviewTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginStart="4dp"
                    android:textSize="15dp"
                    android:fontFamily="@font/pretendard_regular"
                    android:text="@{String.valueOf(mapViewmodel.restaurantSummary.commentCount) + '개'}" />
            </LinearLayout>


            <!-- 바텀시트 2단계시 보여지는 거리 및 카테고리 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="7dp"
                android:orientation="horizontal"
                app:visibilityChanged="@{(mapViewmodel.bottomSheetState == 2)}">
                <!--app:visibilityChanged="@{(mapViewmodel.bottomSheetState == 2)}"-->

                <TextView
                    android:id="@+id/distanceTextView_step2"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:fontFamily="@font/pretendard_regular"
                    android:textSize="15dp"/>

                <TextView
                    android:id="@+id/categoryTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginStart="4dp"
                    android:textSize="15dp"
                    android:fontFamily="@font/pretendard_regular"
                    android:text="@{mapViewmodel.restaurantSummary.category}" />

            </LinearLayout>


            </LinearLayout>
        </LinearLayout>


        <LinearLayout
            android:id="@+id/etcBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:layout_marginEnd="20dp"
            android:orientation="vertical"
            app:visibilityChanged="@{!(mapViewmodel.bottomSheetState == 3)}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent">
            <!-- app:visibilityChanged="@{!(mapViewmodel.bottomSheetState == 3)}"-->

            <LinearLayout
                android:id="@+id/likeBtn"
                android:layout_width="38dp"
                android:layout_height="38dp"
                android:padding="8dp"
                android:orientation="horizontal"
                android:onClick="@{() -> bottomViewmodel.updateBookmark()}">
                <LinearLayout
                    android:id="@+id/likeBtnSrc"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:orientation="horizontal"
                    app:setBottomSheetLikeBtn="@{bottomViewmodel.isLike}">
                </LinearLayout>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/shareBtn"
                android:layout_width="38dp"
                android:layout_height="38dp"
                android:padding="8dp"
                android:orientation="horizontal">
                <LinearLayout
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:orientation="horizontal"
                    android:background="@drawable/ic_share">
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
        </androidx.constraintlayout.widget.ConstraintLayout>


        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="30dp"
            android:layout_gravity="center_vertical"
            android:background="@color/Gray7"
            app:visibilityChanged="@{(mapViewmodel.bottomSheetState == 3)}"
            app:layout_constraintTop_toBottomOf="@+id/summary_layout">

            <Button
                android:id="@+id/backBtn"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_gravity="start"
                android:background="@drawable/ic_arrow_down"
                android:orientation="horizontal"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{mapViewmodel.restaurantSummary.title}"
                android:layout_gravity="center"
                android:fontFamily="@font/pretendard_semibold"
                android:textColor="@color/Gray0"
                android:textSize="18dp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />
        </androidx.appcompat.widget.Toolbar>


       <include
            android:id="@+id/fragment_bottomsheet_step2"
            layout="@layout/fragment_bottomsheet_step2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="visible"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/restaurantLoc">
        </include>


    </LinearLayout>


</layout>