분류 전체보기
-
[Flutter] 토스페이먼츠를 활용해 주문·결제 프로세스 적용해보기 feat. 승인 프로세스 + 주문 #3Flutter/project 2024. 2. 22. 01:06
이전 글에서 계속 이어집니다. 링크를 남겨둘테니 필요하시면 참고해주세요. [Flutter] 토스페이먼츠 결제모듈을 도입하다 #1 설계 결제 시스템을 도입할때, 모든 PG사를 하나하나 연결하는 것은 생각만해도 머리가 아픕니다. 이럴때 결제 플랫폼을 사용하면 여러 PG사와 간편결제 등 한번의 연동으로 쉽게 도입이 가능하죠. 연 nomal-dev.tistory.com [Flutter] 토스페이먼츠를 활용해 주문 · 결제 프로세스 적용해보기 feat. 인증 프로세스 #2 토스페이먼츠의 장점은 직접 UI를 제작하고 API를 통해 연동하는 방법뿐만아니라 Widget과 결제에 필요한 메서드를 제공해 비교적 수월하게 연동이 가능합니다. 물론 직접 UI를 제작하면 UI/UX 디자 nomal-dev.tistory.com ..
-
[Flutter] 토스페이먼츠를 활용해 주문·결제 프로세스 적용해보기 feat. 인증 프로세스 #2Flutter/project 2024. 2. 21. 18:43
토스페이먼츠의 장점은 직접 UI를 제작하고 API를 통해 연동하는 방법뿐만아니라 Widget과 결제에 필요한 메서드를 제공해 비교적 수월하게 연동이 가능합니다. 물론 직접 UI를 제작하면 UI/UX 디자이너분이 굉장히 좋아하시겠지만(?) 결제 동의 약관이나 카드사 연동을 일일이 해야하므로 공수가 상당히 많이 들게됩니다. 이번 시간부터는 결제위젯을 사용해 실제 주문·결제 프로세스를 도입한 경험을 정리해보겠습니다. [Flutter] 토스페이먼츠 결제모듈을 도입하다 #1 설계 결제 시스템을 도입할때, 모든 PG사를 하나하나 연결하는 것은 생각만해도 머리가 아픕니다. 이럴때 결제 플랫폼을 사용하면 여러 PG사와 간편결제 등 한번의 연동으로 쉽게 도입이 가능하죠. 연 nomal-dev.tistory.com 이전..
-
[Flutter] 토스페이먼츠 결제모듈을 도입하다 #1 설계Flutter/project 2024. 2. 21. 15:47
결제 시스템을 도입할때, 모든 PG사를 하나하나 연결하는 것은 생각만해도 머리가 아픕니다. 이럴때 결제 플랫폼을 사용하면 여러 PG사와 간편결제 등 한번의 연동으로 쉽게 도입이 가능하죠. 연동 자체는 어렵지 않을 수 있으나 주문, 재고, 포인트, 쿠폰 등을 관리하는 것은 자체 서비스와 관련 있고, 또 금전적인 이슈가 발생할 수 있는 부분이니 문제 대처방법이 중요합니다. 오늘은 대중적인 결제플랫폼의 토스페이먼츠를 활용해 주문·결제 프로세스를 구축 시, 클라이언트에서 주의해야하는 부분에대해 이야기해보겠습니다. 해당 글은 연동을 위한 사전 설정(client key 발급 등)은 따로 다루지않습니다. ✓ 주문과 결제의 분리 토스페이먼츠는 토스페이먼츠 측의 요구사항에따라 클라이언트와 서버의 역할을 명확하게 나눠서..
-
[Flutter] 클라이언트의 이미지 처리 전략 두가지 feat. AWS amplify, re-sizingFlutter/project 2024. 2. 20. 05:43
이미지는 복잡한 정보를 간단하고 직관적으로 전달하며 시각적 몰입이 텍스트와 미디어에 비해 좋다는 장점이 있습니다. 또한 터치인터페이스로 작동되는 모바일에서는 이미지를 적극적으로 사용하고 있죠. 하지만 이미지는 텍스트보다 용량이 커서 전송이 상대적으로 오래걸리기때문에 좋은 사용자 경험을 위해 이미지 최적화는 필수적으로 진행되어야합니다. 이번에는 제가 이미지 최적화를 했던 방법에 대해 정리해보도록 하겠습니다. ✓ 이미지 저장을 위해 S3를 사용하는 이유 보통 서버의 메인 데이터베이스로 MySql과 같은 관계형 데이터베이스(RDB)를 사용하기때문에 모든 데이터를 이곳에 저장해야한다고 생각할 수 있습니다. 하지만 이미지 저장에 대해 구글링을 해보면 대부분 외부 서버, 그중에서도 클라우드에 저장할 것을 권장..
-
[Flutter] API 요청 횟수를 줄여 네트워크 대역폭을 절약해보자! feat. 배민 북마크 버그Flutter/project 2024. 2. 14. 07:18
크로스플랫폼 앱개발을 혼자하면서 제일 힘들었던 부분은 '성능 개선'이었습니다. 개발 할때 구현이 중요한 것처럼 성능 개선에 대한 욕구도 개발자가 가져야할 덕목이라고 생각했기때문이었죠. 백엔드 개발자와의 소통을 통해 통신 타이밍 등의 개선을 하는 것은 그리 어려운 것은 아니였습니다. 다만 클라이언트 내부적으로 이뤄지는 개선작업들은 오로지 저의 판단에 의해서 진행되는 것이기때문에 문제인 것을 인지하는 것 조차 쉽지않았습니다. 그렇기때문에 가장 와닿는, 혹은 비교적 근본적인 문제에 집중하다보니 api 요청 횟수를 최소화 하는 작업에 대해 많이 고민했었습니다. 이번에는 이러한 고민의 흔적을 정리해보는 시간을 가져보겠습니다. 해당 글은 '미리'앱의 한 기능을 주제로 작성되었습니다. '미리'에 관해 궁금하시다면 ..
-
[Flutter] 무한스크롤 성능 최적화를 해보자 feat. Lazy Loading, Throttle #3Flutter/project 2024. 2. 13. 23:57
*이 글의 페이지네이션 로직은 코드팩토리님의 강의 내용을 응용하여 제작되었습니다. 이전 글에서 계속 이어집니다. 필요하시면 무한스크롤 1편, 2편을 참고해주세요 모바일 환경에서 무한스크롤을 사용하는 이유가 뭘까? feat. cursor based pagination #1 유저에게 보여줘야할 데이터 목록이 많은 경우, 한번에 모든 데이터를 보여주는 것은 DB 조회비용도 많이 들 뿐더러서버 및 클라이언트에 부하를 일으켜 성능저하로 이어집니다. 그렇기때문에 nomal-dev.tistory.com [Flutter] 무한 스크롤 구현해보기 feat. cursor based pagination #2 *이 글의 페이지네이션 로직은 코드팩토리님의 강의 내용을 응용하여 제작되었습니다. 모바일 환경에서 무한스크롤을 사용하..
-
모바일 환경에서 무한스크롤을 사용하는 이유가 뭘까? feat. cursor based pagination #1Flutter/study 2024. 2. 12. 12:03
유저에게 보여줘야할 데이터 목록이 많은 경우, 한번에 모든 데이터를 보여주는 것은 DB 조회비용도 많이 들 뿐더러서버 및 클라이언트에 부하를 일으켜 성능저하로 이어집니다. 그렇기때문에 대량의 데이터를 처리하는 대다수의 어플리케이션은 유저에게 많은 데이터를 리스트형태로 보여줄때, 필수적으로 pagination이라는 기법을 사용합니다. 이번에는 페이지네이션이 무엇인지, 그리고 실제로 제가 도입한 과정들을 정리하는 시간을 가져보겠습니다. ✓ Pagination이란? "목록화된 많은 데이터를 부분적(페이지 단위)으로 나눠서 불러오는 기술" 유튜브에는 엄청나게 많은 영상이 있습니다. 만약 유저가 유튜브 앱 또는 웹사이트를 열었을 때, 한 번에 모든 영상을 불러오려고 하면 어떤 일들이 벌어질까요? 서버입장에서 생..
-
[Flutter] 무한 스크롤 구현해보기 feat. cursor based pagination #2Flutter/project 2024. 2. 9. 17:26
*이 글의 페이지네이션 로직은 코드팩토리님의 강의 내용을 응용하여 제작되었습니다. 모바일 환경에서 무한스크롤을 사용하는 이유가 뭘까? feat. cursor based pagination #1 유저에게 보여줘야할 데이터 목록이 많은 경우, 한번에 모든 데이터를 보여주는 것은 DB 조회비용도 많이 들 뿐더러서버 및 클라이언트에 부하를 일으켜 성능저하로 이어집니다. 그렇기때문에 nomal-dev.tistory.com 무한 스크롤은 앱 개발시, 대용량 데이터를 불러올때 무조건 사용되는 로직입니다. 이전 글에서 페이지 기반 페이지네이션과 비교하며 무한 스크롤을 사용하는 이유와 무한 스크롤을 구현할때 백엔드에서 사용되는 커서기반 페이지네이션에 대해서도 알아봤습니다. 이번에는 실제로 flutter를 이용해서 클라이..