본문 바로가기
Node.js와 Bun 차이점 1분 요약 기존의 Node.js에 비해 속도가 대폭 개선됐다며 2023년 9월 8일에 등장한 Bun. 서버사이드 성능개선과 단순화를 위해 개발했다고 하는데요. 속도 외에는 어떤 장단점이 있는지, 과연 실무에 적용해도 되는 레벨인지 고민되죠. 1분만 집중해서 Node.js와 Bun 사이에 어떤 차이점이 있는지 살펴보고 도입 여부를 판단해보세요. 3줄 요약 1. CPU 집약적인 처리는 Node.js가 약간 더 빠르다. 2. JWT 검증, DB 읽기 등 단순처리는 Bun이 2배 정도 빠르다. 3. 실제 비즈니스 로직이 아닌 테스트에서 내린 결론으로 실무에서는 상황이 다를 수 있다. 1. 특징 비교 Node.js Bun 엔진 V8 엔진 Nitro(=JSC, JavacScriptCore) 엔진 용도 구글 크롬 브라우저, .. 2024. 3. 4.
How to make money format flutter 돈 포맷 3자리 콤마 만들기 앱을 개발하다보면 원화 표시를 위해 3자리마다 콤마를 넣어야 하는 일이 자주 있는데요. 예전에는 아래 패키지를 사용했었습니다만. money_formatter | Flutter Package MoneyFormatter is a Flutter extension to formatting various types of currencies according to the characteristics you like, without having to be tied to any localization. pub.dev 원화만 표시할 때에는 소수점도 필요없고 다른 통화들의 심볼도 필요없기 때문에 패키지가 기본적으로 다른 연산을 하는 일을 방지하고자 오로지 원화 표시를 위한 하나의 메소드를 만들었습니다. String mon.. 2022. 7. 4.
How to build Flutter BLoC Pattern Folder Structure 디자인 패턴 폴더 구조 알아보기 BLoC이란? BLoC(Business Logic of Component)는 구글에서 비즈니스 로직을 화면 레이어와 분리하여 개발자가 코드를 더 효율적으로 재사용할 수 있게 하기 위해 만든 디자인 패턴입니다. Flutter 앱개발에서 유지보수를 위해 가장 많이 쓰이는 디자인 패턴이죠. BLoC의 핵심 컨셉 상태관리 라이브러리로 불리우는 Bloc의 핵심 컨셉은 Stream입니다. Stream은 반복가능한 비동기 이벤트들의 정렬인데요. 여러분이 다음 이벤트 정보를 요청하기 전에,다음 이벤트가 준비되면 Stream이 알아서 알려주게끔 되어있습니다. Stream은 이벤트 시퀀스를 받아 제공합니다. 각각의 이벤트는 데이터 이벤트, 에러 이벤트로 이루어져 있습니다. Stream이 모든 이벤트를 송출하면, 하나의 ".. 2022. 6. 28.
Flutter (영업비밀) 앱개발 자주 쓰이는 금주의 위젯 살펴보기 frequently used widgets 3년간 플러터로 인터페이스 화면을 그리다 보니 자주 쓰이는 위젯이 몇 가지 있었습니다. 오늘은 플러터로 앱을 개발할 때 알아두면 좋은 위젯들을 살펴보겠습니다. 1. Listview, ListviewBuilder 2. Row, Column 3. SizedBox 4. Container 5. GestureDetector 6. SafeArea 7. ElevatedButton, OutlinedButton, TextButton, IconButton 8. Text, RichText, TextSpan 9. Flex, Flexible 10. Spacer 11. ClipRRect 12. Image 13. WillPopScope 14. Stack, Positioned 15. Semantic Scaffold 위젯은 앱 디자인.. 2022. 6. 14.
Flutter 개발자를 확인할 수 없기 때문에 ‘iproxy’을(를) 열 수 없습니다. Flutter로 열심히 코딩을 하고 실제 아이폰 기기를 연결해서 개발한 앱을 빌드해보려고 하는데 위와 같은 에러가 나옵니다. 이런 에러가 나오는 이유는 해당 앱이 아이폰에 악영향을 미칠 수 있는 앱인지 알 수 없기 때문에 안전을 위해 OS에서 차단했기 때문인데요. 이 에러를 해결하려면 2가지를 해야 합니다. 1. 애플 개발자 계정을 등록하고 Xcode에 계정 추가하기 2. 확인된 개발자의 앱을 허용하도록 보안 설정하기 1. 애플 개발자 계정을 등록하고 Xcode에 계정 추가하기 Apple Developer Apple 플랫폼에서 개발할 절호의 기회입니다 developer.apple.com 위 링크로 접속해서 계정(영문)을 눌러 로그인 화면에 가서 회원가입 또는 로그인을 진행합니다. 2022년 6월 9일의 .. 2022. 6. 8.
Flutter 실시간 채팅앱 만들기 (feat. dart_amqp Docker RabbitMQ) 오늘은 실시간 채팅앱을 만들어 보겠습니다. 직접 TCP에 연결하거나 웹소켓을 이용하는 것 외에 MQ(메시지 큐)에 연결해서 채팅을 구현해본 건 처음이었습니다. 1. Docker 실행 2. RabbitMQ 컨테이너 실행 3. Flutter에서 MQ 연결 4. MQ에 메시지 보내고 받기 1. Docker 실행 도커는 쉽게 말하면 이미 다른 사람이 만들어 둔 환경을 복사 붙여넣기 한 것처럼 그대로 이용할 수 있는 툴입니다. 이미 누군가 RabbitMQ를 통해 채팅을 할 수 있도록 만들어둔 서버가 있어서 우리는 그걸 그대로 사용할 겁니다. 먼저 Docker를 설치해볼까요? 아래 링크에 접속하면 도커 프로그램을 다운로드할 수 있습니다. Developers - Docker Developer productivity .. 2022. 5. 20.
Flutter 앱 만들기 4단계 : 플러터 코딩 계수기 앱 만들기 오늘은 디자인을 직접 플러터 코드로 옮겨보겠습니다. 여러분 인생에서 코딩을 할거라고 상상이나 해보셨나요? 저에게도 참 두근대는 시간이네요. 오늘의 작업 순서는 아래와 같습니다. 1. 새 플러터 프로젝트 만들기 2. 에뮬레이터(시뮬레이터) 실행하기 3. 디자인을 코드로 옮기기 자, 프로젝트 폴더 만들기부터 시작해볼까요? 1. 새 플러터 프로젝트 만들기 먼저 프로젝트를 만들고 싶은 폴더 위치에서 터미널(윈도우는 명령 프롬프트)를 실행해야 합니다. 저는 바탕화면에 Dev라는 폴더를 만들고 그 안에 모든 프로젝트를 관리하고 있습니다. flutter create는 새로운 플러터 프로젝트를 만드는 명령어입니다. create 옆에 my_app은 프로젝트 이름이죠. flutter create my_app 이 명령어를 .. 2022. 5. 16.
Flutter How to use each button 플러터 상황별 버튼 사용법 버튼을 사용할 때 주의해야할 점은 바로 버튼의 내용이 1줄을 넘어서는 안 된다는 점입니다. 버튼은 사용자로 하여금 행동을 유도하기 위해 사용하는데요. 말은 길게 할 수록 전달력이 떨어지게 됩니다. 짧고 직관적인 멘트를 고안해봅시다. 또 한 가지, 버튼은 많을 수록 인지과부하 때문에 오히려 선택을 못하는 '선택의 역설'을 불러일으키게 됩니다. 한 화면에 너무 많은 버튼이 있는 것은 좋지 않습니다. 예를 들어 여러분이 여러 상급자에게 동시에 업무를 지시받았을 때 도대체 뭐부터 해야할지, 그때 기분이 어떨지를 생각해보시면 됩니다. Flutter에서도 구현할 수 있는 아래 4가지 버튼을 알아보겠습니다. 1. 배경색이 그려진 텍스트 버튼 2. 배경색 없이 외곽선이 그려진 텍스트 버튼 3. 텍스트만 있는 버튼 4... 2022. 5. 15.
Flutter How to add high quality BoxShadow 고퀄리티 그림자 넣는 법 오늘은 디자인 퀄리티를 높여주는 카드 디자인의 그림자 구현 방법에 대해 알아보겠습니다. 과도한 그림자 효과는 앱을 버벅이게 할 수 있으니, 앱 내 콘텐츠가 많지 않은 경우에 사용하면 좋습니다. 직접 예제 코드를 작성해서 보여드리겠습니다. Card 위젯의 이해 플러터 프레임워크가 매터리얼 디자인을 제공하기에 Card위젯으로 카드 디자인을 쉽게 구현할 수 있습니다. Card 위젯을 타고 들어가서 elevation과 shadowColor 프로퍼티가 어떤 위젯으로 변하는지 보겠습니다. Semantics( container: semanticContainer, child: Container( margin: margin ?? cardTheme.margin ?? const EdgeInsets.all(4.0), chil.. 2022. 5. 13.
Flutter 앱 만들기 3단계 : 5분만에 앱 디자인하기 로고부터 디자인을 해볼 건데요. 로고는 키워드만 넣으면 자동으로 만들어주는 곳이 있습니다. 아래 링크를 누르고 들어가서 여러분의 앱 키워드만 검색하면 알맞는 로고들을 추천해줍니다. *상업용으로 사용하기 위해 저작권이 필요하다면 결제가 필요합니다. Online Logo Maker - Make a Logo for Free Discover 10000+ professional grade logo designs now. www.designevo.com 나중에 로고 디자인을 할 줄 아시는 분은 직접 만드셔도 좋고, 크몽에서 로고 제작을 의뢰해도 좋습니다. 개인 프로젝트를 진행하는 동안에는 여기서 무료 로고를 사용해 봅시다. 저는 커피를 몇 잔 마셨는지 세는 앱이기 때문에 아래와 같은 로고를 만들었습니다. 사실 앱에.. 2022. 5. 12.
Flutter How to use Key When, Where, Which key? 언제 어디에 무슨 키를 쓸까? 플러터 개발을 하다보면 StatelessWidget, StatefulWidget에서는 초기화 단계에서 항상 key를 받습니다. 하지만 실제로 그 key를 매개변수로 전달한 적은 많이 없었죠. 이전 강의에서 위젯 그대로 트리 안에서 이동만 하는 경우 다시 빌드하는 일을 방지하기 위해 key를 사용하라고 했었죠? 그외에 또 언제, 어디에, 무슨 key를 사용해야 하는지 알아봅시다. 아래는 key에 대해 설명하는 플러터 팀의 동영상입니다. [자동자막 > 한글] 설정하고 보세요! Key의 종류 Local Keys: 1. ValueKey 2. ObjectKey 3. UniqueKey 4. PageStorageKey Global Keys: 1. GlobalKey() 설명드리면 로컬키는 위젯 scope안에서 사용하는.. 2022. 5. 9.
Flutter How to optimize? 속도 10배 상승시킨 앱 최적화 하는 법 공유 플러터로 앱을 개발하다보면 처음에는 모르지만 점점 앱이 느려지는 jank를 맞이하게 됩니다.(앱이 버벅이는 현상을 jank라고 합니다.) '최적화가 시급하다!!'라고 선언하고 복잡도를 줄이는 작업에만 몰두했었습니다. 하지만 jank를 유발하는 원인은 더 기본적인 계층에 있었죠. 앱 퍼포먼스를 10배 향상시켰던 시행착오를 공유합니다. 직접 해결했던 jank를 유발하는 원인은 아래와 같습니다. 1. 그라데이션 효과 2. 그림자 효과 3. Opacity 위젯 사용 4. Clip를 이용한 위젯 다듬기 5. const 미사용 6. 잘못된 위젯 사용 7. 애니메이션 또는 State 변경시 광범위한 리빌드 하나씩 살펴보죠. 원인1. 그라데이션 효과 그라데이션 효과는 시작점과 중간점, 끝점까지 지정한 컬러가 나오도록 .. 2022. 5. 8.
Flutter 앱 만들기 2단계 : 앱 퀄리티 높아보이는 디자인 준비하기 이번 시간에는 어떻게 하면 디자이너가 만든 앱처럼 예쁘게 만들 수 있는지 알아보는 시간입니다. 앱 디자인 관련 강의는 따로 포스팅하도록 하겠습니다. 여러분의 앱 디자인 퀄리티를 높여줄 몇 가지 요소만 간단하게 짚고 넘어가도록 하죠. 여러분은 곧 플러터로 UI를 만들게 될텐데요. UI는 유저 인터페이스(User Interface)의 약어입니다. 쉽게 말하면 사용자가 앱과 상호작용하는 글, 그림, 버튼 등 화면에 그려진 모든 것을 의미하죠. 그리고 여러분이 자주 들으셨던 UX는 사용자 경험(User eXperience)의 약어입니다. 여러분은 UI와 UX의 차이를 아시나요? 쉽게 말해 UI가 포장도로라면 UX는 비포장도로입니다. 우리는 리스트가 있으면 세로로 스크롤하는 걸 당연하게 여기고 화면을 아래로 스크.. 2022. 5. 7.
Flutter State 생명주기? 코드 뜯어보기 지금까지 StatelessWidget과 StatefulWidget이 어떤 상황에 따라 쓰이는지 알아봤는데요. 오늘은 StatefulWidget이 리빌드 하기 위해 정보를 담는 State에 대해 알아보겠습니다. 아래는 플러터 팀에서 2021년에 소개한 State에 대한 설명 동영상입니다. [자동자막 > 한글] 설정하고 보세요! 영상에서는 State를 제 시간에 특정 지점에서 UI 생성에 필요한 모든 데이터라고 정의하는군요! State의 생명주기는 enum 타입의 4가지로 분류합니다. - created : [State] 객체가 생성될때 입니다. 이 때 [State.initState]가 호출됩니다. - initialized : [State.initState] 메소드가 호출되지만 [State]는 아직 빌드할 준.. 2022. 5. 7.
Flutter InheritedWidget 란? 코드 뜯어보기 (주석 한글 번역) 지난 시간에 StatefulWidget을 통해 상태를 관리하는 것까지 알아봤는데요. 성능을 위해 StatelessWidget을 더 잘게 쪼개서 사용해야 한다는 것도 아셨죠? 그렇다면 불가피하게 위젯 트리의 계층이 깊어질 수 밖에 없는데요. 이때 상위에 있는 State 정보를 매개변수로 자식 위젯으로 계속해서 전달하는 일은 산 꼭대기에서 출발지점까지 한 명씩 줄지어서 돌을 전달하는 것과 같죠. 만약 100명 중 50번째 쯤에서 잘못 서 있던 바람에 돌을 다시 전달해야 한다면...? 생각만 해도 어지럽습니다. 이런 귀찮고 비효율적인 일을 해결해줄 InheritedWidget이 있습니다! 이 위젯의 자식 위젯들은 해당 위젯의 데이터에 바로 접근할 수 있는 기능이 있습니다. 산 꼭대기에서 출발지점까지 돌을 그냥.. 2022. 5. 5.
Flutter Tree 트리 구조 및 화면 렌더링 과정 알아보기 플러터에는 UI 렌더링을 위한 3개의 트리가 있는데요. 왜 3개의 트리를 만들게 됐는지, 각각의 트리는 어떤 역할을 하는지 알아보겠습니다. 요약하면 [위젯 트리 > 엘리먼트 트리 > 렌더 트리] 의 순서로 UI를 렌더링 하네요. 이 포스팅은 Flutter docs의 원문을 참고하여 만들었으니, 너무 요약되어 이해가 안 되는 내용은 포스팅 아래 docs 링크를 눌러 확인해보시길 바랍니다! 2016년 플러터 레이아웃 설명 동영상 Flutter architectural overview A high-level overview of the architecture of Flutter, including the core principles and concepts that form its design. docs.flu.. 2022. 5. 4.
Flutter 앱 만들기 1단계 : 기획하기 이제부터 여러분이 여러분만의 앱을 직접 만들어 보려고 하는데요. 지금 단계에서는 너무 일을 크게 벌이지 않고 코딩에 재미를 들이는 게 중요합니다. 그러기 위해서는 당장 여러분에게 필요한 걸 만드는 게 가장 욕심도 나고 더 잘 만들고 싶은 욕구도 생기죠. 앱으로 사업을 하는 경우가 많다보니 처음부터 완벽해야 한다고 생각하는 분들이 많으신데요, 완벽해서 나쁠 게 없죠. 하지만, 이 세상에 완벽한 건 없습니다. 여러분이 자주 사용하시는 앱이나, 전 세계에서 열광하는 리그 오브 레전드라는 게임에서도 매번 패치를 할 때마다 버그가 생기죠. 그렇게 많은 직원들이 일해도 초기에 발견하지 못 하는게 버그입니다. 계속해서 발전해나간다고 생각하세요. 플러터에서 기본 예제로 제공하는 숫자 증가 기능을 이용해서 여러분들과 함.. 2022. 5. 3.
Flutter StatefulWidget 란? 코드 뜯어보기 (한글 주석 번역) Flutter에 있는 2가지 위젯 중 오늘은 StatefulWidget에 대해 알아보겠습니다. 한 줄로 요약하자면 화면에 계속 변화를 줘야 할 때 쓰는 위젯입니다. 아래 동영상은 2018년에 나온 StatefulWidget을 설명하는 동영상이니 한 번 시청해보시죠. [설정 > 자동번역 > 한국어]로 설정하면 자막을 볼 수 있어요. Widget은 element를 화면에 그리기 위한 청사진입니다. Widget 트리에 1:1 매칭된 Element 트리의 element들이 바로 우리의 휴대폰 화면에 보이는 UI입니다. StatefulWidget을 만드는 건 화면에 변화가 계속 일어나는 UI 설계도를 만드는 작업이라고 생각하시면 됩니다. 앞서 StatelessWidget이라는 변하지 않는 위젯에 대해 알아봤습니다.. 2022. 5. 2.
Flutter Helper Method vs Widgets 헬퍼 메소드와 위젯 중에 뭐가 더 좋을까? 플러터 프레임워크로 앱을 만들다 보면 중복되는 위젯들이 많을 때가 있습니다. 대표적인 예로 '리스트'가 있죠. 리스트의 각 아이템마다 카드 디자인이 적용되어야 하는 경우, 우리는 카드 디자인이 적용된 위젯을 하나 만들고 재사용하는 객체지향 방법을 쓰죠. 이렇게 임의로 만든 위젯을 사용하는 방법은 크게 두 가지가 있습니다. 1. Class 안에 헬퍼 메소드로 위젯을 새로 정의해서 사용하는 방법 2. StatelessWidget 또는 StatefulWidget의 서브클래스를 만들어서 사용하는 방법 첫 번째 방법은 가장 편한 방법이죠. 하지만, 한 파일에 헬퍼 메소드가 많아지면 코드의 가독성이 떨어지니, 헬퍼 메소드로 만든 위젯만을 모아둔 extension 파일을 만들어 따로 관리하기도 합니다. 두 번째 방법.. 2022. 5. 1.
Flutter StatelessWidget 란? 코드 뜯어보기 (주석 한글 번역) Flutter에 있는 2가지 위젯 중 오늘은 StatelessWidget에 대해 알아보겠습니다. 한 줄로 요약하자면 시간이 지나도 변하지 않는 위젯입니다. 아래 동영상은 2018년에 나온 StatelessWidget을 설명하는 동영상이니 한 번 시청해보시죠. [설정 > 자동번역 > 한국어]로 설정하면 자막을 볼 수 있어요. Widget은 element를 화면에 그리기 위한 청사진입니다. Widget 트리에 1:1 매칭된 Element 트리의 element들이 바로 우리의 휴대폰 화면에 보이는 UI입니다. StatelessWidget을 만드는 건 위젯트리에 상태변화가 없는 UI 설계도를 만드는 작업이라고 생각하시면 됩니다. StatelessWidget의 build 메소드는 세 가지 상황에서만 호출됩니다. .. 2022. 4. 30.

티스토리툴바