꾸밈없는 :: 꾸밈없는

[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..

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

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

[NextJS] npm run build 시 code ELIFECYCLE 에러 해결 방법

code ELIFECYCLE npm ERR! errno 1 npm run build 빌드 과정에서 ELIFECYCLE 코드 에러가 발생했다. ELIFECYCLE 코드로 구글링 해본 결과 많은 분들이 1)로 문제를 해결하고 있었다. 1) npm cache clean --force 캐시를 강제로 삭제 2) rm -rf ./node_modules 3) rm -rf ./package-lock.json 4) npm install https://stackoverflow.com/questions/42308879/how-to-solve-npm-error-npm-err-code-elifecycle 하지만 나의 경우와 맞지 않은 방법이였고, 로그를 찬찬히 읽어보니 서버사이드 렌더링과정에서 생긴 코드 에러가 문제였다. 코드..

[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의 적용을 없애고 수직으로 ..

[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 ..

flutter 차트 패키지 (syncfusion_flutter_charts)

flutter 에서 활용할 수 있는 차트 패키지(chart package) pub.dev/packages/syncfusion_flutter_charts syncfusion_flutter_charts | Flutter Package Syncfusion Flutter Charts is a data visualization library written natively in Dart for creating beautiful and high-performance cartesian and circular charts. pub.dev document help.syncfusion.com/flutter/cartesian-charts/chart-types Syncfusion Cartesian Chart types Char..

[FLUTTER/Firebase] Firestore 연동 데이터 추가 및 관리 코드

Java script로 쓰여있는 Firestore 연동 코드들을 Flutter dart 언어로 작성했다. https://firebase.google.com/docs/firestore/manage-data/add-data Cloud Firestore에 데이터 추가 | Firebase 다음과 같은 몇 가지 방법으로 Cloud Firestore에 데이터를 쓸 수 있습니다. 문서 식별자를 명시적으로 지정하여 컬렉션 내의 문서 데이터를 설정합니다. 컬렉션에 새 문서를 추가합니다. 이 경우 Cloud Firestore에서 자동으로 문서 식별자를 생성합니다. 자동으로 생성된 식별자로 빈 문서를 만들고 나중에 데이터를 할당합니다. 이 가이드에서는 Cloud Firestore에서 개별 문서를 설정, 추가, 업데이트하는 ..

ABOUT ME

꾸밈없는 꾸밈없는

인기글

최근 게시글

티스토리툴바