꾸밈없는 :: 꾸밈없는

[Flutter] 플러터 버튼 종류 (TextButton / OutlinedButton / ElevatedButton / Icon button)

flutter에서 주로 쓰이는 버튼은 FlatButton, RaisedButton, OutlineButton인데 TextButton, ElevatedButton, OutlinedButton으로 각각 변화되었다. theme 또한 TextButtonTheme, ElevatedButtonTheme, OutlinedButtonTheme으로 바뀌었다. style은 textcolor property 요소를 이용해 글꼴 색상을 지정했던 것과 달리 stylefrom property 내에서 color들을 지정한다. primary , onsurface color가 parameter인 것을 보니 material design적인 요소가 많이 반영되었다는 생각이 들었다. * 버튼 상태별로 버튼 스타일을 지정하고 싶다면? htt..

[Next.js] kakao 인앱 user-agent 감지

1. 문제상황 카카오톡으로 전송된 링크를 인 앱으로 열었을 때 기능이 제대로 동작하지 않은 경우가 있다. 구글 로그인 기능도 마찬가지! 2. 해결방법 강제로 사이트를 외부 브라우저로 열도록 하는 방법도 있지만 안정적인 방법을 찾지 못했다. 사용자가 혼란스러울 경우를 대비해, 카카오톡 인앱 브라우저일 경우 사용자가 구글 로그인을 시도한다면 alert로 안내문구를 띄우기로 했다. 3. 해결 과정 _ 카카오톡 브라우저에 대한 user-agent 감지 - 카카오톡 인앱에는 userAgent에 KAKAOTALK 문구가 포함되어있다. Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0 KAKAOTALK - useEffect에서 navigator 객체를 통..

[Flutter] 플러터 2.0 버튼 hover, pressed, focused, disable, overlay 상태(state) 변화 개발

기존에는 state 별 버튼의 컬러를 parameter로 지정하고 state를 조건문으로 지정해줘야했다. 하지만 flutter 2.0에서는 style 요소 내에서 버튼의 상태(state)에 맞는 시각적 요소를 지정할 수 있게 되었다. material design이 정의한 버튼의 상태(state)와 state별로 버튼 시각적 요소 지정, overlay 색상을 수정하는 방법을 정리해보려고 한다. 1. material design에서 지정하고 있는 버튼의 상태 - enabled : 상호작용 가능한 버튼 상태 - pressed : 사용자가 탭 했을 때 - hover : 사용자가 마우스 커서를 상호작용 가능한 버튼 위에 올려두었을 때 - focus : 사용자가 키보드나 음성과 같은 입력 방법을 사용하여 강조표시한..

[HTML/CSS] CSS의 수평 수직 정렬구조 (float / flex)

flutter에서는 수직을 column 위젯으로, 수평을 row 위젯으로 정의해 레이아웃을 만들었다. css에서는 flutter와 달리 float, display 등 레이아웃을 위한 다양한 방법이 있었는데 그 중 display property! 대부분의 요소들이 수직으로 display되는 block 구조이고 inline, inline-block처럼 수평으로 display되는 구조도 있다. 하지만 block 구조는 계속해서 수직으로 쌓이고 inline은 수평으로 쌓여서 내가 원할 때 줄바꿈을 어떻게 해야할지, 다른 방법은 있는지 고민이 많았다. 그래서 정리해보았다! float 속성을 이용한 수평 정렬 - clear property float을 이용해 수평구조를 만든 후 float의 적용을 없애고 수직으로 ..

[Firebase] firebase의 google-login과 flutter web 연동방법 및 에러정리 ( idpiframe_initialization_failed / CONFIGURATION_NOT_FOUND/ 구글로그인이 안될 경우)

firebase의 google-login과 flutter web을 연동하는 방법 1) firebase 웹 앱 프로젝트 생성 - Firebase SDK 추가 안드로이드 앱에서는 google-service.json 파일을 넣는데 web에서는 아래의 코드를 프로젝트의 web - index.html의 태그 하단에 붙여넣는다. -firebase CLI 설치 android studio terminal에서 자동설치 스크립트를 이용해 Firebase CLI를 설치했다. curl -sL https://firebase.tools | bash - Firebase SDK 추가 나는 당장 배포할 생각은 없었기 때문에 CLI 설치 후에 구글에 로그인하고 프로젝트 시작하는 것만 했다. 2) firebase와 flutter 웹 연동..

진행하는 프로젝트가 막혔을 때 어떻게 생각해야할까

진행하는 프로젝트가 막혔다고 생각했을 때 이런 장애물이 있네 망했다 엎고 새로운거 하자! 가 아니라 이런 장애물이 있는데 어떻게 해결하면 좋을까 ? 가 좋은 사고방식이다. 상황적인 문제 때문에 창업 아이템의 타겟과 방향성을 바꾸게 되었고, 어떻게 하면 내 자식같은 아이템으로 피봇팅할 수 있을까 고민을 많이 했다. 기존의 아이템은 국내에서 가망이 없다고 생각해 새로운 아이디어를 기획했는데 아이템 자체에 대한 매우 부정적인 피드백을 받게 되었다. 기업가 정신 교육을 통해 실패를 발판으로 피봇팅을 해야한다고 배우긴 했는데 실제 그런 상황에 처하니 너무 막막했다. 처음 겪어보는 상황에 어떻게 생각하고 행동해야하는지 감이 잡히지 않았다. 혼자 고민을 하다 조언을 얻기 위해 창업을 경험하신 교수님을 찾아뵈었다. 교..

[Flutter] Material Design Components - layout (app bar / navigation)

최근 좀 더 컨텐츠에 집중할 수 있는 디자인이 트렌드이기 때문에 창의적인 디자인과 개발가능한 디자인 사이를 고민해야한다. 그 중 개발 친화적인 디자인의 표본이라고 생각하는 design system인 material design 요소들과 flutter 코드를 정리해보려 한다. 더 자세하고 다양한 design 적인 요소들을 보기 위해서는 아래의 링크에 들어가서 항목을 찾으면 된다. material.io/components/app-bars-bottom Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build ..

[Firebase] SHA 1 인증서 지문 등록 방법

1) cmd에서 keytool을 사용한다. [mac] keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore [window] keytool -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore - 비밀번호를 등록하지 않았을 경우 엔터키를 누른다. - 원라인 커맨드로 입력한다. 2) gradle's signing report를 사용한다. ./gradlew signingReport - 첫 번째 명령어를 썼더니 keytool에서 certificate chain length:0라는 결과가 나왔다. SHA 인증서도 만들어보고 1번이 가능하게 별의..

ABOUT ME

꾸밈없는 꾸밈없는

인기글

최근 게시글

티스토리툴바