개발
Flutter 츠누봇 [Pull Request] :: [소식] 페이지 API 연동
Flutter 츠누봇 [Pull Request] :: [소식] 페이지 API 연동 https://github.com/cnu-bot/cnubot-client-app/pull/20 [소식] 페이지 API 연동 by CheolheeLee0 · Pull Request #20 · cnu-bot/cnubot-client-app Describe your changes #18 영상으로 확인하기 디자인 변경사항 적용 상단 Logo 상단 Home Button bottom navigation bar svg icon, color NoticeModel 필드 수정 nullable : boardNum, picUrl, period API에 맞추어 필드 추가 백마광장 github.com 1. 요구사항 2. 작업내용 영상으로 확인하기 ..
Flutter 츠누봇 [Pull Request] :: [소식] 페이지 UI 퍼블리싱
Flutter 츠누봇 [Pull Request] :: [소식] 페이지 UI 퍼블리싱 https://github.com/cnu-bot/cnubot-client-app/issues/11 [소식] 페이지 UI 퍼블리싱 · Issue #11 · cnu-bot/cnubot-client-app Feature Description 소식 페이지 퍼블리싱을 진행합니다. 아직 백엔드 API작업이 완료되지 않아서 더미데이터로 작업하셔야할 것 같습니다. UI만 작업하면 됩니다. Todo list 소식 페이지 UI작업 백마광 github.com 1. 요구사항 - 아래 디자인을 바탕으로 UI 개발 - 데이터는 임시로 더미데이터를 생성하여 진행 2. 작업내용 영상으로 확인하기 https://www.youtube.com/shorts..
Flutter 츠누봇 [Pull Request] :: flutter_lints rules 추가
Flutter 츠누봇 [Pull Request] :: flutter_lints rules 추가 https://github.com/cnu-bot/cnubot-client-app/pull/17 feat: flutter_lints rules 추가 by CheolheeLee0 · Pull Request #17 · cnu-bot/cnubot-client-app Describe your changes flutter lints에 여러 옵션이 있어서 필요할 것 같은 부분 추가해두었습니다! linter: rules: avoid_print: true // release모드에서 출력 안되게 변경 prefer_single_quotes: true // single quote 통일 requir github.com 1. 요구사항 ..
Flutter 츠누봇 [Pull Request] :: clean & 3-layered architecture 적용
Flutter 츠누봇 [Pull Request] :: clean & 3-layered architecture 적용 https://github.com/cnu-bot/cnubot-client-app/pull/9 refactor: apply clean & 3-layered architecture by CheolheeLee0 · Pull Request #9 · cnu-bot/cnubot-client-app Describe your changes refactor: apply clean & 3-layered architecture docs: Add Architecture info, freezed command API 연동 테스트 완료했습니다 dioHelper - provider - repository - contr..
Flutter 츠누봇 [Pull Request] :: 의존성 추가, 화면 비율 설정
Flutter 츠누봇 [Pull Request] :: 의존성 추가, 화면 비율 설정 https://github.com/cnu-bot/cnubot-client-app/pull/3 Add dependencies, Add Pull Request Template and Set the reference design size ratio to iPhone 12 mini for easy UI development. ( Description #1 #2 #4 Fixes #1 #2 #4 Type of change New feature (non-breaking change which adds functionality) This change requires a documentation update Checklist: My co..
Tistory 스킨편집 :: 유명 스킨인 hELLO 스킨 편집하기 (사이드바 안보이는 문제 해결하기, 게시글 그리드 형태로 표시하기)
Tistory 스킨편집 :: 유명 스킨인 hELLO 스킨 편집하기 (사이드바 안보이는 문제 해결하기, 게시글 그리드 형태로 표시하기) 배경 https://pronist.dev/5 티스토리 유명 오픈소스 스킨인 hELLO 스킨을 사용하다가 보완해야할 점이 여러 개가 보여서, 스킨 편집 - html 편집을 통해 내 입맛에 맞게 수정하고자 했음. 스크린별로 보이는 화면을 아래 요구사항에 맞춰 사용자 경험을 더 좋게 만들기 위해 html, css를 편집하게 된 과정을 요약하여 공유하려고 한다. 요구사항 1. 웹 화면이 1400px 이하 일때, 사이드바를 가리고 1400px보다 커지면 사이드바를 표시함. 2. 한 화면에 더 많은 게시글을 표시하게 하기 위해 한 줄에 3개의 게시글이 표시되도록함. 3. 상단 네비게..
XCode + AppStore + iOS :: 외부 개발자에게 iOS 앱 개발권한, 배포권한 주는 방법 (Provisioning Profile, private key, .p12 인증서)
배경 최근 iOS 프로젝트에서, 외부 개발자 입장으로 참여하여 Apple Login 추가, AppStore 배포를 할 일이 있었다. 프로젝트 오너가 [AppStore] - [사용자 및 액세스] 에서 나에게 관리자 권한을 주고, Provisioning Profile을 생성해서 제공했음에도 불구하고, 시뮬레이터에서는 앱이 빌드가 돼서 실행되는데, 1. 실기기 빌드 2. TestFlight에 업로드 이 두가지가 안되는 문제가 생겼다. 예전에는 앱 오너로부터 TestFlight 초대가 이메일로 오면 승인하고 Automatically Manage Signing 체크하면 팀이 보였는데, 이번 경우에는 Team이 뜨지 않아서 Provisioning Profile을 만들어서 Import 하여 개발 & 배포 권한을 얻어..
AWS RDS 프리티어 요금 과다 청구 문제 해결 방법 :: Amazon Relational Database Service Provisioned Storage
배경 AWS에 신규 계정을 생성한지 1달 정도 밖에 안됐는데, 지난 달에 4만원 가량의 요금이 나왔다. 그래서 지난 달에 백업 설정이 되어있어서 해제를 했었다. 그런데 이번달에 절반도 지나가지 않았는데, 예상 청구 금액이 12600원인 것을 보면, 백업 설정 문제가 아니였다. AWS Billing에서 청구 상세 내역을 확인해보니 다음과 같았다. Amazon Relational Database Service Provisioned Storage $0.131 per GB-month of provisioned gp2 storage running PostgreSQL ($ 8.15) 원인 의심가는 부분을 찾다가 보니, 스토리지 - 할당된 스토리지 문제였다. AWS RDS의 해당 인스턴스 (PostgreSQL)를 클..
MSA(마이크로) + MA(모놀리식) :: 소프트웨어 아키텍쳐 장단점과 적용
배경 서비스의 규모가 확장되고, 데이터 저장 및 통신을 클라우드를 통해 하는 요즘, 기존의 방식인 모놀리식과 대비되는 MSA가 대두되고 있다. 하지만 소규모 프로젝트나 대부분의 상황에서는 모놀리식 아키텍쳐도 합리적인 선택이 될 수 있다. 요구사항에 맞지 않는 아키텍쳐 선택은 오버 엔지니어링을 발생시켜 불필요한 작업을 초래할 수 있고 개발자들의 생산성을 저해할 수 있으므로 장단점을 파악한 후 충분히 고려하여 결정해야 할 것이다. 모놀리식 아키텍처 (Monolithic Architecture) - 전통적인 방식의 아키텍처이다. - 소프트웨어의 모든 구성요소가 한 프로젝트에 통합 되어 있는 형태이다. - 모든 프로세스가 긴밀하게 결합되고 단일 서비스로 실행된다. 따라서 애플리케이션의 한 프로세스에 대한 수요가..
Node.js + bcrypt :: 회원가입 시 비밀번호 암호화하기 & 로그인 시 비밀번호 검증, 비교하기
배경 회원가입 시 입력한 비밀번호가 그대로 데이터베이스에 저장되면, 데이터베이스 접속 정보가 노출이 되거나 유저 정보 유출 시 보안적으로 위험할 수 있다. 요구사항 1. 회원가입 시 비밀번호 암호화하기 2. 로그인 시 비밀번호 비교하여 로그인 성공하면 jwt 토큰 생성 및 발급하기 해결 Bcrypt는 레인보우 테이블 공격 방지를 위해 솔트(Salt)를 통합한 적응형 함수 중 하나이다. SHA 종류의 암호화는 GPU 연산에 유리한 32비트 논리 및 연산만 사용하기 때문에 GPU 연산을 이용한 공격에 취약하다. 그래서 Bcrypt 설계자는 Blowfish를 이용해 구현해서 이를 방지했다고 한다. 레인보우 테이블 : 해시 함수를 사용하여 변환 가능한 모든 해시 값을 저장시켜 놓은 표 솔트 : 데이터, 비밀번호..
Node.js + TypeScript + nodemailer :: 이메일 인증번호 보내기
배경 이메일 회원가입 시 해당 이메일을 가지고 있는지 파악하기 위해 이메일 인증번호를 보내는 API를 개발해야 했다. 요구사항 1. Node.js 서버에서 Query paramter로 이메일 정보를 받는다. 2. 해당 이메일로 3자리 인증번호를 보낸다. 3. response로 동일한 3자리 인증번호를 응답에 성공하면 code:200과 함께 data에 인증번호를 담아 보낸다.. curl http://localhost:3000/register/authcode?email=wks0968@gmail.com { "code": 200, "msg": "", "data": 263 } 해결 1. https://myaccount.google.com/security 에 접속해서 2단계 인증을 설정하고 앱 비밀번호를 생성한다...
Flutter :: 키보드 위에 버튼 고정시키는 방법 (Alignment.bottomCenter)
https://youtube.com/shorts/u_hzF982xbI?feature=share 배경 초중고 학생들을위한 체력측정 앱 개발 중에, 키보드 위에 확인 버튼위젯을 고정할 일이 생겼는데 이슈들이 발생해서 정리하고자 한다. 요구사항 1. 키보드 바로 위에 '확인' 버튼이 있어야 함 2. 키보드에 입력 데이터가 가려지면 안됨 3. 버튼을 선택할 때 키보드가 없어져야 함 해결방법 double bottomViewInsets = MediaQuery.of(context).viewInsets.bottom; bool keyboardOn = bottomViewInsets != 0;// 키보드 존재 여부 판단 키보드가 올라가면 키보드의 높이만큼 bottomViewInsets이 증가하는 점을 이용해 키보드가 올라왔..
Prisma + PostgreSQL :: 차세대 Node.js, TypeScript ORM 기술
1. Prisma의 의미 Prisma는 차세대 Node.js, TypeScript ORM 기술로서, 미리 정의한 모델인 GraphQL 스키마를 기반으로 DB의 필드, 속성을 자동생성(CREATE TABLE) 해준다. 이해하기 쉬운 데이터 모델 작성, migration 자동화 기능, type safe 및 auto-completion 기능 덕분에 데이터베이스 작업 시 편리하다. 1.1. GraphQL의 의미와 장점 facebook에서 만든 Graph Query Language 로 어플리케이션 쿼리 언어로써, 기존의 REST API의 한계점을 극복하고자 나온 통신 규약이다. Node.js를 이용해, 데이터베이스에 접근하는 나만의 명령어를 만들고 (Query, Mutation, TypeDefs, resolver..
Flutter + Firebase 채팅 기능 시연
1. 채팅 기능 1.1. 채팅 어플 https://www.youtube.com/watch?v=ot5ctOZe2X0&ab_channel=DynamicCoding 1.2. 채팅 백엔드 https://www.youtube.com/watch?v=I6UCPL1svOA&ab_channel=DynamicCoding 1.3. 추가할 기능 채팅 UI 개선 말풍선 크기를 채팅 메시지와 맞게 수정 메시지가 1개 이상인 채팅방만 보이도록 수정 카카오 로그인 uid 사용 대화 상대방 검색 시 부분 문자열로도 검색 가능하도록 수정 2. 카카오 로그인 2.1. pub.dev 라이브러리 https://pub.dev/packages/kakao_flutter_sdk kakao_flutter_sdk | Flutter Package A f..
Flutter Devtools 개념 이해
1. Flutter Devtools 개념 이해 1) Flutter devtools 설치 Flutter devtools 사용 사진 Flutter devtools의 기능 Flutter 앱의 UI 레이아웃과 상태를 검사 Flutter 앱에서 UI 버벅거림 성능 문제를 진단 Flutter 또는 Dart 명령줄 앱의 소스 수준 디버깅 Flutter 또는 Dart 명령줄 앱에서 메모리 문제를 디버그 실행 중인 Flutter 또는 Dart 명령줄 앱에 대한 일반 로그 및 진단 정보 확인 Flutter devtools 설치 (VS code) VS Code 명령 팔레트에서 Dart: Open DevTools 명령 입력 Terminal에서 devtools 설치 flutter pub global activate devtoo..
Flutter :: SharedPreference
Shared Preferences 사용법에 대해서 알아본다. Shared Preferences는 key-value 형태의 데이터를 디스크에 저장해서 사용하는 방법으로 기존의 안드로이드 앱 개발에서도 자주 사용되어 왔다. 로그인이 필요한 앱을 개발할 때 사용자의 ID와 패스워드 등을 기억하는 기능을 구현할 때 이용할 수 있다. 18 : getPref를 통해 key에 따른 value를 반환한다. 22 : key, value를 세팅한다.
Flutter & Firebase :: QuerySnapshot vs DocumentSnapshot
QuerySnapshot collection을 받아온다. DocumentSnapshot QuerySnapshot.docs를 사용하면 collection 안의 documents를 List형태로 받아올 수 있다.
Flutter 2.8 발표
https://medium.com/flutter/announcing-flutter-2-8-31d2cb7e19f5 Announcing Flutter 2.8 A new release of Flutter: and a look back on a year of growth medium.com 요약 며칠 전, 12월 9일에 Flutter 2.8 발표가 있었습니다. 저는 모바일 성능 향상과 WebView 3.0 업데이트 소식이 제일 반가웠는데요. Flutter 2.8에서 크게 변화가 있었던 내용을 5가지로 정리해봤습니다. 1️⃣ 모바일 퍼포먼스 Flutter 2.8로 업그레이드하는 것만으로 앱이 더 빠르게 시작되고 더 적은 메모리를 사용한다고 합니다. 2️⃣ 로그인 위젯 Firebase를 사용하여 인증을 처리하는 로..
Flutter에서 Null Safety를 사용하는 이유
Flutter 2.0 업데이트, null safety 적용 Flutter 2.0 업데이트 이후 dart 언어에 null safety가 적용되었다. null으로 인한 런타임 에러를 방지하여 개발자의 생산성을 높일 수 있다. 유저가 실수로 체크하지 못한곳에서 발생하는 NullPointerException같은 에러를 조기에 방지하고 실제로 돌아가는 어셈블리상에서 null체크를 다시 안하기 때문에 성능적 이득도 있다. 자세히 말하면, null safety는 변수가 null을 허용하는지 구분하기 위한 개념인데 기본적으로 null을 허용하지 않는다. dart 언어는 null safety를 지원하지 않았기 때문에 변수 값이 초기화 되지 않았거나 null 값을 전달하면 컴파일 에러는 발생하지 않고 런타임 과정에서 오류..
Flutter firebase 연동
fbtest0001 기본 crud 동작하는 버튼으로 컨트롤 create // instance 가져오기 FirebaseFirestore firebaseFirestore = FirebaseFirestore.instance; // 데이터 Create firebaseFirestore .collection('books') .doc('flutter2') .set({'page': 411, 'purchase?': false, 'title': '플러터 배우기'}); read // 데이터 Read firebaseFirestore .collection("books") .doc("flutter2") .get() .then((DocumentSnapshot ds) { Map data = ds.data() as Map; title..
Flutter :: StreamBuilder vs FutureBuilder
streambuilder / futurebuilder는 firebase를 연동하며 자주 만날 수 있는 친구들이다. firebase안에 data들이 있는데, 그것들이 변할 때, 정보를 계속적으로 읽는 역할을 한다. Futurebuilder 한 번만 가져온다. StreamBuilder 변화가 발생할 때마다 연속적으로 계속 가져온다 1) CollectionReference로 접근하여 특정 Document 하나의 data 읽기 Future _getProduct() async { try { CollectionReference products = FirebaseFirestore.instance.collection('Products'); await products .doc(arguments.docsName) .get..
Flutter :: GetX 개념 이해
GetX의 의미 GetX는 매우 가볍고 강력한 상태 관리 솔루션이다. GetX가 제공하는 기능 고성능 상태 관리 지능형 종속성 주입 라우트 관리 기능 제공 GetX의 3가지의 기본 원칙 성능 성능과 리소스 소비의 최소화 Streams, ChangeNotifier를 사용하지 않는다. 생산성 쉽고 간결한 구문을 사용한다. 사용하지 않는 리소스는 메모리에서 자동으로 제거해준다. 따라서 개발자가 메모리에서 컨트롤러를 제거하는 것을 신경쓰지 않아도 된다. 조직화 화면, 프레젠테이션 로직, 비즈니스 로직, 종속성 주입, 네비게이션을 완전히 분리할 수 있다. 1. GetX의 라우트 관리 기능 라우트 관리 기능은 GetX에서 가장 강력한 기능이다. GetX를 사용하지 않으면 페이지를 이동하거나 다이얼로그 창을 표시할 ..