YumeHANA YUME'S DEV

어느정도 앱을 만들고 출시 전 앱 아이콘을 만들고자 한다.임시로 앱 아이콘 디자인을 한 후 아이콘을 적용 앱의 경우에는 여러 모바일 환경이 존재하므로 사이즈 별로 아이콘을 정해줘야하는데아래 사이트에서 각각 사이즈에 맞는 아이콘을 만들어 준다.https://www.appicon.co App Icon Generator www.appicon.coUseage간단하게 아이콘 디자인을 하고,사용할 기종을 선택하여 생성을 누르면 모바일 환경 사이즈별로 아이콘을 생성해준다. 여기서 android와 Assets.xcassets두개의 폴더가 생성이 되는데이 폴더 그대로 옮겨 덮어쓰기를 하면 된다. 저장 위치android -> app -> src -> main -> resios -> runner -> Assets.xcas..

값을 선택하는 스크롤이 있는 영역에서 특정 값을 파라미터로 보냈을때 해당 값으로 자동으로 스크롤이 되도록 처리ListView Scrollhttps://yumedev.tistory.com/27 [ Flutter ] Horizontal Scroll ListView, Global KeyOnBoarding에서 초기 설정을 처리하기 위해서요일과 금액을 세팅해야 화면을 넘어가게 처리 그 과정에서 요일 선택에서 datePicker를 사용할까 하다가 요일만 필요하기에 새로운 방법을 고민하다가Syumedev.tistory.com이전에 만들었던 스크롤을 다시 사용하다보니 값 전달을 할때 스크롤이 그대로 유지 되는 경우가 발생값이 1일때와 10 이상의 값이 들어왔을때 스크롤이 안되어 있어서 들어온 값을 기준으로 스크롤이 되..

Text를 사용하다 보면 문구 중 일부만 따로 style을 추가적으로 넣고 싶은 경우가 있다이때 Text.rich를 사용하면 전체 style뿐만 아니라 개별로도 style을 적용을 쉽게 처리할 수 있다.Text Rich Text.rich안에 TextSpan을 활용하여 영역을 나눠준다.이때 모든 Text에는 일괄적으로 동일한 style을 주기 위해TextSpan안에 TextSpan을 넣어서 개별로 관리를 할 수 있도록 처리 TextSpan의 style을 적용하면 TextSpan안의 항목들은 모두 동일한 style이 적용된다.이후 TextSpan 안의 TextSpan에 추가적으로 개별적인 Style을 줄 수있다. 전체 TextStyle에 fontSize와 color를 주었고, 그 안의 custom이 필요한 ..

QR인증을 할때 모바일로 QR을 찍으면 해당 결과를 클라이언트에 보내줘야한다.이때 socket방식과 sse방식 그리고 event bus 방식이 있다. socket방식은 클라이언트와 서버 양방향 통신을 하여 서로 데이터를 주고 받을 수 있다.sse는 클라이언트와 서버간의 단방향 통신만을 하며 한 곳에서만 데이터를 줄 수 있다.event bus의 경우에는 특정 기능이 실행이 되었을때 데이터를 전달할 수 있다. QR인증 방식은 이 중 하나를 선택해서 모바일로 QR을 인증할 때 클라이언트에 데이터를 보내주면 된다. SSE를 활용하여 기능을 구현해보고자 한다.SSE EmitterJava에서는 sseEmitter를 활용하여 간단하게 sse를 구성할 수 있다. 간단하게 테스트를 하기위해 controller에서만 작업..

Google의 오픈 소스인 바코드 생성 로직을 활용 gitHub에서 zxing기능에 추가적인 설명이 있으며, QR코드 말고도 다른 바코드를 생성할 수 있는 것 같다 https://github.com/zxing/zxing GitHub - zxing/zxing: ZXing ("Zebra Crossing") barcode scanning library for Java, AndroidZXing ("Zebra Crossing") barcode scanning library for Java, Android - zxing/zxinggithub.com Implementzxing을 사용하기 위해 build.gradle에 의존성을 추가 implementation group: 'com.google.zxing', n..

제한시간을 두기 위해 타이머 기능을 구현Timer Component 컴포넌트로 만들어서 다른곳에서도 재사용 할 수 있도록 세팅 제한시간을 둘 값을 prop로 전달, 타이머가 종료 되었을 경우 특정 함수가 실행 되도록 설정memo를 사용한 이유는 react가 재렌더링이 될 경우 Timer 컴포넌트도 재렌더링 되는 경우를 막고자 prop의 값이 변경될때만 재렌더링이 되도록 처리 memo : prop 값이 변경이 되어야 재렌더링을 한다. MINUTES_IN_MS 는 initTime * 1000을 해서 initTime에 제한 시간 초를 보내어서 분으로 처리되게 설정만약 3분이 제한이라면 initTime에 180을 보내면 3분으로 설정이된다. 이후 useEffect() 를 활용하여 시간이 변경될때마다 보여주는 분..

Bottom Modal을 사용할 때 안에 textField를 누르면 키보드가 생성되면서 modal이 가려지는 문제가 발생https://pub.dev/packages/keyboard_avoider keyboard_avoider | Flutter packageA lightweight alternative to the Scaffold widget for avoiding the on-screen software keyboard. Automatically scrolls obscured TextField child widgets into view on focus.pub.dev keyboard_avioder를 사용하면 키보드가 열릴때 알아서 해당 widget을 맞춰 올려준다. Dependenciesyaml 파일에 k..

버튼을 누르면 페이지 이동을 하기 위해 naviagation을 사용 Setupnatvigation을 사용하기 위해 react-navigation과 stack 사용npm install @react-navigation/nativenpm install @react-navigation/stack Useageapp.tsx 파일에서 네비게이션을 설정 NavigationContiner르 페이지를 이동할 영역을 잡아주며Stack.Navigator를 사용하여 어느 페이지로 이동할것인지 경로를 잡아준다. Stat.Navigator initalRouteName="Home"으로 설정하여 초기 화면은 Home으로 나오도록 하며,Home에서 버튼을 누르면 QR 스캔을 하는 컴포넌트로 이동하도록 구현 처음에 Stack.Navig..