꾸밈없는 :: 꾸밈없는

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

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

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

오픽 UR 성적이 나왔다면 어떻게 해야할까

UR 등급일 때는 고객센터 문의하면 재시험을 칠 수 있다 오늘 일주일 전 응시했던 오픽 결과가 나왔다. 무난하게 목표했던 성적이 나오겠거니 했는데 UR 등급을 보고 매우 당황했다. 설마 최하 성적인가 하고 아니면 너무 잘봤나 하고 오픽 등급을 검색했는데 등급표에도 없었다. 알고보니 UR 등급은 시험 당일 알 수 없는 기계적인 문제(녹음불량 등)로 인하여 정상 채점이 불가한 경우, 혹은 시험 규정 위반일 경우에 나온다고 한다. 고객센터에 문의해보니 1:1 문의에 남겨놓으면 자세히 안내해준다고 하셔서 1:1 문의에 남겨두었다. 오픽 고객센터에서 전화가 왔는데 정확한 원인은 알 수 없지만 시험 규정 위반은 아니니 재 시험을 치게 해주신다고 하셨다. 나는 이틀 뒤에 오픽 시험을 하나 더 신청해놓은 상태라 해당 ..

[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 하지만 나의 경우와 맞지 않은 방법이였고, 로그를 찬찬히 읽어보니 서버사이드 렌더링과정에서 생긴 코드 에러가 문제였다. 코드..

[ReactJS] Module이란 무엇일까?

프론트엔드 개발 올인원 패키지 with React Online. Webpack 강의 내용을 기반으로 정리한 내용입니다. Module이란 Module은 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져있는 형태를 의미함 1) 한 파일에 쓰여진 코드를 여러 파일로 관리할 수 있으며 2) 다른 모듈로부터 특정 기능을 가져오거나, 다른 모듈이 특정 기능을 참조할 수 있게 함 모듈화를 하면 코드 재사용성이 증가하며, 모듈을 기준으로 코드 내용을 구조적으로 확인가능하기 때문에 코드의 관리가 편해진다. 모듈화를 위해서는 키워드, 모듈 시스템, 모듈의 기준이 필요하다. Module의 표준 1. CommonJS (node.js) 2. ESM Module의 키워드 1. 내보내기 - 내보낼 값을 객체 안에 넣고 객체를 통..

[Flutter] 플러터 웹 사이트 반응형으로 생성하기

기존에 만들었던 웹사이트는 반응형 웹을 위한 설정이 적용되어있지 않기 때문에 웹 화면을 조절했을 때 아래와 같이 overflow가 발생하거나 웹사이트의 UI가 유지되지 않는다. 1) responsive builder 반응형 웹 사이트를 구축하기 위해 responsive builder 패키지를 사용한다. responsive_builder: ^0.1.2 웹을 실행하는데 사용되는 디바이스에 맞는 페이지를 설정하면 디바이스에 맞는 반응형 웹을 생성해준다. 디바이스 크기를 일일히 설정해줘야할 필요를 줄여주는 패키지라고 생각한다. watch, mobile, tablet, desktop void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @o..

ABOUT ME

꾸밈없는 꾸밈없는

인기글

최근 게시글

티스토리툴바