본문 바로가기
반응형

Tip10

Flutter[플러터] / Stream이란 무엇일까? (뜻, 사용법, 스트림, 어싱크, 비동기, async*, yield*, 이벤트, 데이터, 지속적) Stream classhttps://youtu.be/nQBpOIHE4eE 앱을 만들다 보면 이런 상황이 생기지 않던가?사용자가 버튼을 누르면 결과가 나와야 하는데 서버에서 데이터를 받아오는데 시간이 걸리는 상황, 심지어 센서나 마이크, 위치 정보처럼 계속 변하는 데이터를 받아 와야 하는 상황..이럴 때 어떻게 데이터를 받아와야 할까? 당연하게도 데이터를 '한 번에' 받는 것이 아니라 '지속적으로, 계속 받아야'할 것이다.그럴 때 필요하고 사용할 수 있는 것이 바로 Stream이다.Stream은 비동기 이벤트의 연속된 흐름을 처리하기 위한 핵심 개념 중 하나이다.사용자 입력, 네트워크 응답, 실시간 데이터 업데이트 등 다양한 비동기 작업에 Stream을 활용할 수 있다.먼저 스트림의 타입을 봐보자.스트림의.. 2025. 7. 11.
Flutter[플러터] / IgnorePointer 를 사용하여 터치 이벤트 무시하기 (이그노어포인트, 없애기, 입력, 비활성화, 제한, 터치, 탭, 드래그 방지) IgnorePointer (Flutter Widget of the Week) IgnorePointer class히트 테스트 중에는 보이지 않는 위젯입니다.ignoring 이 true 이면 이 위젯(및 하위 트리)은 적중 테스트에서 보이지 않습니다. 레이아웃 중에도 공간을 사용하고 평소처럼 자식 위젯을 그립니다. RenderBox.hitTest 에서 false를 반환하기 때문에 위치 이벤트의 대상이 될 수 없습니다.https://youtu.be/qV9pqHWxYgI공식 문서 코드 갑자기 앱의 UI가 바뀌는 동작이 진행되면 사용자는 사용하고 싶지 않은 무언가(버튼류)를 건드릴 수 있게 될 것이다. 다들 그러한 경험이 한 번씩은 있지 않은가? 갑자기 나타난 버튼을 잘못 눌러서 원하지 않은 동작이 실행되는 상황 말이다. 이렇듯 실수로 UI를 변경하는 일은 상당히 빈번하게 발생하며 골치 .. 2025. 7. 3.
Flutter[플러터] / JSDoc처럼 변수, 클래스, 메서드에 문서 주석 달기 (툴팁, Documentation tool, Doc comments, md, 마크다운) 우리가 여러 위젯들을 사용할 때 무조건 한 번씩 보는 게 있다. 바로 그 위젯에 대한 툴팁, 문서 팝업이다. 주로 그 코드에 마우스를 올리거나 Android Studio에서는 Ctrl + Q, VSCode에서는 Ctrl + K로 확인 가능한 팝업 창인데이 문서툴(Documentation tool)을 우리는 꼭 확인해야지만 위젯을 쉽고 완벽하게 사용할 수 있다.당연한 거지만 그 위젯의 타입과 파라미터, 설명과 함께 종종 예제 코드도 포함되어 있기 때문으로 그것을 보고 코드를 작성하면 처음 써본 위젯이라도 편하게 쓸 수 있다.그렇다면 이 위젯을 이 문서툴만 확인한 것이 아니라 직접 이 위젯이 정의되어 있는 파일(Go to Definition)로 들어가 본 적이 있는가?Android Studio에서는 Ctrl.. 2025. 6. 30.
Flutter[플러터] / Image 를 사용하여 이미지 넣기 (사진, 네트워크, 인터넷 이미지, 파일, 로딩, 로더, 코틀린, 네이티브, image_picker, 이미지 가져오기) Image (Flutter Widget of the Week) Image class이미지를 표시하는 위젯입니다.https://youtu.be/7oIAs-0G4mw공식 문서 코드 앱을 제작할 때에 필수불가결하게 있어야 하는 요소가 있는데 뭐니 뭐니 해도 바로 Image, 즉 사진이다. 앱에 이 사진이 어떤 종류 든 간에 일단 들어가야 보는 맛이 난다. 없는 앱이 있다면 진짜 간소한 기능만 가지고 있는 앱이거나 사진이 필요 없을 정도로 기본에 충실하게 디자인을 완벽하게 해 놓은 앱일 것이다. Flutter 를 배우게 되면 가장 먼저 배우는 위젯 중에 하나가 Image 위젯인데 한번 거기서 조금만 더 심도 있게 Image 위젯에 대하여 알아보겠다.하위 속성속성명타입기본값설명imageImageProvider–표시할 이미지의 소스를 정의함widthdouble?null이미지의.. 2025. 6. 22.
Flutter[플러터] / 다트 패드 임베딩 하기 (dartPad Embedding) 블로그에 다트 패드 삽입 (dart pad) 오늘은 한번 블로그에 다트 패드 삽입하는 방법을 알아볼 것이다. 바로 알아보도록 하자.1. 아이디 발급받기 일단 가장 먼저 다트 패드에 넣을 코드를 작성해야 한다.이제 그 코드를 github gist 에 올리면 된다.https://gist.github.com/ Discover gistsGitHub Gist: instantly share code, notes, and snippets.gist.github.com여기 들어가 준다. 그럼 이제 이런 화면이 나올 건데 여서 Filenname including extension 이 부분이 누가 봐도 알 수 있듯이 제목이다만 유의할 점은 우리가 dartpad 에 넣는 것이기 때문에 dart 여야 한다.확장자 .dart 를 붙여주도록 하자. 그런 후 바디에 코드를 .. 2025. 4. 20.
Flutter[플러터] / Live Templates 만들고 사용하기 (라이브 탬플릿, 자동 완성) Intellij IDEA 에서는 Live Templates 라는 편리 기능을 지원하고 있다.오늘 한번 사용해보자.Live Templates 들어가기 일단 File 에서 Settings 로 넘어가 준다. 그 후 Editor 안에 Live Templates 이라고 있는데 여기에 들어가 준다.그리고 사진처럼 Flutter 탭을 선택하고 열 것이다. 탭을 열면 이렇게 나올 텐데 자주 사용하는 stless 나 stful 도 보이는 모습이다.그리고 사진 속에서 지금 위에 3개가 파란색으로 되어 있는데 저 3개가 내가 새로 추가한 거다. 한번 추가해 보자. 사진 속 순서대로 Flutter 를 선택한 후 위의 + 버튼을 누르고 Live Template 를 선택한다. 그럼 위와 같이 라고 하나 만들어졌을 것이다. 지금.. 2025. 3. 27.
Flutter[플러터] / shared_preferences 은 어떻게 데이터를 저장하는 것일까? 우리가 앱 개발을 할 때 꼭 하나쯤은 사용하는 것이 있는데 그것이 바로 shared_preferences 이다.아마 다들 이 셰어드 프리페런스가 앱에다가 데이터를 저장한다는 것은 알고 있을 텐데 정확히 어떻게, 어디에 저장하는지는 잘 모를 것이다. 이번 포스팅에서는 그것에 대해 알아보자. 자 일단은 맨 처음, pubspec.yaml 파일부터 봐보자.너무 당연한 것이긴 하다만 shared_preferences를 사용하고 싶다면 pubspec.yaml 파일에다가 Pub get 을 해줘야 한다.그다음은 이제 사용하는 것인데 간단하게 iniState를 사용하여 데이터를 저장하는 코드만 적어보겠다.@overridevoid initState() { super.initState(); WidgetsBinding.i.. 2024. 11. 19.
Flutter[플러터] / 코드 자동 완성이 안될 때 해결 방법 (Restart Dart Analysis server)(안드로이드 스튜디오)(IntelliJ) 안드로이드 스튜디오에서 코드를 치다가 어디 갔다 왔는데 갑자기 자동 완성이 안되거나 색깔이 이상해지고 색이 다 하얀색으로 통일되는 등의 경험을 다들 한 번쯤은 해봤을 거라고 생각한다.(심지어 Alt + Enter 나 Ctrl + Spcae도 안 먹는다) 이럴 때 우리는 그냥 일단 기분이 굉장히 나빠지고 프로젝트를 다시 껐다 킬 생각에 정신이 까마득한 곳으로 날아가곤 한다.그렇다면 이런 문제가 왜 생기는 것일까? 사실 이 문제의 원인은 안드로이드 스튜디오 같은 IDE에서 Dart Analysis 서버를 불러오지 못해 생기는 문제이다.Dart Analysis는 코드 자동 완성, 오류 감지, 린트 검사, 중복 코드 경고등 우리가 코드를 작성할 때 필수불가결한 존재인데이런 오류가 떴을 때 대게 난 Main Me.. 2024. 10. 17.
Flutter[플러터] / Hot Reload와 Hot Restart 의 차이점 우리가 앱을 디버깅할 때 한 번쯤은 겪는 상황이 있다. 바로 Ctrl + S 한 다음에 에뮬레이터에서 동작이 잘 되는지 테스트해보려고 했는데 아예 클릭조차 되지 않는 상황 말이다. 이런 문제가 보통 발생하는 원인은 지금 테스트해보려고 하는 그 코드가 외부 코드, 예를 들어 컨트롤러 같은 외부 코드와 연결되어 있는 코드(글로벌 상태)라서 그렇다.우리는 이런 문제가 발생했을 때 대게 그냥 다시 flutter run을 하거나 안드로이드 스튜디오라면 시작버튼을 다시 누를 것이다. 그럼 왜 외부 코드와 연결된 위젯은 Ctrl + S 같은 걸로 상태가 업데이트되지 않는 것일까?그 이유는 Ctrl + S가 하는 동작은 Hot Reload이기 때문이다. 그렇다면 Hot reload라는 것은 무엇일까? 먼저 Hot .. 2024. 10. 12.
Flutter[플러터] / Flutter Performance 에서 새롭게 바뀐 Flutter Inspector 사용법 (Flutter DevTools) 안드로이드 스튜디오에서 최근 플러터 플러그인 버전부터 DevTools와 관련되어서 업데이트가 진행되었다.업데이트 내용을 살펴보면 원래 우리가 쓰던 기존의 Flutter Performance는 삭제가 되고 새롭게 Flutter DevTools에 병합이 되었다. 오늘은 원래 Flutter Performance에 있던 기능이 어디로 병합됐는지 알아보고 사용해 볼 것이다. https://plugins.jetbrains.com/plugin/9212-flutter Flutter - IntelliJ IDEs Plugin | MarketplaceSupport for developing Flutter applications. Flutter gives developers an easy and productive way t.. 2024. 10. 11.
반응형