꾸밈없는 :: 꾸밈없는

[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 객체를 통..

[Firebase] 파이어베이스 보안규칙 (Firestore Security Rules ) 작성 방법

파이어베이스에서 제공하는 보안규칙은 코드가 간단하며 보안규칙을 위해 인프라를 관리하거나 복잡한 서버측 인증 및 인증 코드를 작성할 필요 없다. 하지만 보안규칙을 적용하지 않으면 파이어베이스는 디폴트로 데이터베이스를 보호해주지 않기 때문에 보안규칙 적용이 꼭 필요하다. 실제로 개발자가 앱을 제작할 때 코드 상에서만 규칙을 적용하고 이를 간과해 데이터가 노출된 사례들이 있다. 그래서 나는 보안규칙 작성에 대한 규칙들을 정리해보았다. 1. 보안규칙 버전 작성 rules_version = '2'; 기존의 rules_version = '1' 은 와일드 카드를 사용할 때 한 개 혹은 두 개 이상의 path를 포함하고 있어야하기 때문에 자유롭게 와일드카드를 사용하기 위해서는 zero path를 허용하는 버전 2를 사..

[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 : 사용자가 키보드나 음성과 같은 입력 방법을 사용하여 강조표시한..

[Material Design] 개발자/ 디자이너가 협업할 때 중요한 Figma 의 주요 기능 (style / component / const

figma 기능을 잘 활용하면 디자이너와 개발자의 협업을 더 효율적으로 할 수 있다. 개발자 디자이너 협업캠프에서 디자이너님께서 알려주신 내용을 바탕으로 협업할 때 사용하기 좋은 figma의 주요기능과 개발단에서의 관점들을 정리해보았다. Material design을 기반으로 하였으며 자세한 내용은 아래링크의 다큐먼트를 참고하면 된다. 개발 코드 예시는 모두 flutter dart이다. material.io/ Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital ..

[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번이 가능하게 별의..

[Mac] Error installing cocoapods: ERROR: Failed to build gem native extension.

코코아팟을 설치하기 위해 sudo gem install cocoapods 명령어를 실행 Error installing cocoapods: ERROR: Failed to build gem native extension. 에러가 뜨면서 설치가 되지 않았다. 1) 많은 사람들이 제안한 솔루션 xcode-select --install 한 후에 sudo gem install cocoapods 실행 xcode-select --install 를 실행했을 때 자동으로 설치가 되어야하는데 현재 소프트웨어 업데이트 서버에서 사용할 수 없기 때문에 해당 소프트웨어를 설치할 수 없습니다 라는 알림창과 함께다운로드가 되지 않음. 2) 이에 대한 해결방법으로 수동으로 command line tools를 다운로드 받음 develo..

[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 웹 연동..

ABOUT ME

꾸밈없는 꾸밈없는

인기글

최근 게시글

티스토리툴바