인기글
-
[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 : 사용자가 키보드나 음성과 같은 입력 방법을 사용하여 강조표시한..
-
[Firebase] 파이어베이스 보안규칙 (Firestore Security Rules ) 작성 방법
파이어베이스에서 제공하는 보안규칙은 코드가 간단하며 보안규칙을 위해 인프라를 관리하거나 복잡한 서버측 인증 및 인증 코드를 작성할 필요 없다. 하지만 보안규칙을 적용하지 않으면 파이어베이스는 디폴트로 데이터베이스를 보호해주지 않기 때문에 보안규칙 적용이 꼭 필요하다. 실제로 개발자가 앱을 제작할 때 코드 상에서만 규칙을 적용하고 이를 간과해 데이터가 노출된 사례들이 있다. 그래서 나는 보안규칙 작성에 대한 규칙들을 정리해보았다. 1. 보안규칙 버전 작성 rules_version = '2'; 기존의 rules_version = '1' 은 와일드 카드를 사용할 때 한 개 혹은 두 개 이상의 path를 포함하고 있어야하기 때문에 자유롭게 와일드카드를 사용하기 위해서는 zero path를 허용하는 버전 2를 사..
-
[Material Design] 구글 머테리얼 폰트(Material Font)와 아이콘(Material Icon) 적용
fonts.google.com/icons Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 구글에서 제공하는 머테리얼 디자인(material design)! 구글에서 제공하는 머테리얼 폰트(material font)와 아이콘(icon)을 정리해둔 사이트가 있다는 것을 알게 되었습니다! 검색기능도 있고 웹을 위한 코드도 정리되어있어 매우 편리합니다 :) 구글 프레임워크인 플러터 상에서는 바로 아이콘 이름을 입력하면 됐는데 Web에서는 다른 설정이 필요한거 같아 적용해본 뒤 다시 정리해보아야겠습니다!
-
[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..
-
[ERROR] Could not initialize classorg.codehaus.groovy.runtime.InvokerHelper
keytool을 얻기 위해 ./gradlew signingReport 를 실행했더니 Could not initialize class org.codehaus.groovy.runtime.InvokerHelper 라는 에러가 떴다. 먼저 Gradle이란? Gradle은 그루비를 이용한 빌드 자동화 시스템이며 현재 안드로이드 앱을 만드는데 필요한 안드로이드 스튜디오의 공식 빌드 시스템이기도 하다. Java, C/C++, 파이썬 등과 같은 여러 가지 언어를 지원한다고 한다! (위키백과) 그래들 버전이 자바버전을 지원하지 않아서 생기는 오류라고 한다. 1) 터미널에서 java version을 확인한다.java -version 2) android / gradle / wrapper / gradle-wrapper.pro..
-
[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 웹 연동..
최근 게시글
-
운영체제 서론 및 역사Computer Science 2024.04.10 11:18
개발자 안하니까 개발공부가 재밌고 하고싶은 신기한 마법 새로운 기술들이 우후죽순 쏟아지는 요즘, 기초를 단단하게 쌓고싶은 마음이 들었다. 경성대학교 양희재 교수님의 강의를 보며 운영체제 공부 시작! http://kocw.net/home/search/kemView.do?kemId=978503운영체제란? 1. PC를 구입하면 운영체제가 설치되어 있음- Windows XP, Windows7, Linux , MS-DOS- max OSX , iOSNHTX`XB,→ 운영체제가 없는 컴퓨터는 야생마. 컴퓨터 구조프로세서메인 메모리- ram : 휘발성 / 수백 메가 바이트 - rom : read only memory / 전원이 켜져도 유지됨 / 수십 키로 바이트 하드디스크 (보조기억장치) 가지고 ..
-
검색기능 개선개념 2022.12.08 20:57
테크니컬 SEO 메타 키워드 태그는 검색 엔진에서 제외 웹페이지 속도, 프로토콜 준수, 모바일 최적화 등을 기준으로 점수를 매김 웹 사이트 속도 경쟁 웹 사이트보다 속도가 더 빨라야함 타이틀 태그 가장 중요하고 관련있는 키워드 영문 65자, 한글 32자 내외 각 페이지에 맞는 메타 디스크립션 태그 77자 이내 이미지 정보 alt 검색엔진에 전달 상위 랭킹에 큰 영향을 주는 건 아님 오픈 그래프 캐노니컬 태그 타겟고객이 많이 사용하면서 타경쟁사 웹 페이지는 비교적 적게 사용하는 키워드 https://junheedot.tistory.com/27 SEO를 위한 자가 진단 체크리스트 📜 본문은 서적 '트래픽을 쓸어 담는 검색 엔진 최적화'를 읽고 남기는 요약본입니다. 더 자세한 정보를 얻기 원하신다면 해당 서적..
-
Github 민감한 커밋 히스토리 삭제 (git ignore, git filter-branch)기타 2022.07.14 00:21
개발을 하다보면 git에 올리고 않지 않거나 올리면 안되는 민감한 파일들이 있는데 이 파일들은 .gitignore 설정파일에 추가하면 자동으로 git 버전 관리에서 제외된다. 기존 프로젝트에 git ignore 설정하기 프로젝트를 시작할 때 git ignore을 설정하면 제일 좋지만, 이미 프로젝트가 진행되었을 경우 기존 프로젝트에 .gitignore를 적용하는 방법도 있다. 1) .gitnore 파일에 숨기고자 하는 파일명을 추가한다. 2) 원격 저장소에 있는 파일들을 삭제하고, git ignore이 적용된 로컬 파일을 다시 커밋한다. git rm -r --cached . git add . git commit -m ".gitignore 적용하기" 3) 푸쉬한다. 민감한 정보가 담긴 커밋 내역 삭제하기 ..
-
상반기 데브이벤트 프로젝트 회고 (with UPF)회고 2022.06.25 17:08
0. 데브이벤트 웹 구경하기 https://dev-event.vercel.app/events Dev Event - 개발자 행사는 모두 데브이벤트 웹에서! 개발자를 위한 {웨비나, 컨퍼런스, 해커톤, 네트워킹} 소식을 알려드립니다. dev-event.vercel.app 1. 데브이벤트 프로젝트에 합류 2022년 상반기, 데브이벤트 저장소를 고도화하는 사이드 프로젝트에 웹 프론트엔드 개발 , 서비스 기획자로 참여하게 되었습니다! 개발자로 일한지 7개월, 회사에서 혼자 개발을 하다보니 점점 익숙한 기술, 방식에 안주하려는 제 모습이 보였어요.🤦 2년차 개발자로 뒤쳐지지 않기 위해, 또 새로운 기술을 자유롭게 써서 개발해보고 싶다는 생각으로 사이드 프로젝트를 구하던 중 데브이벤트 프로젝트라는 감사한 기회를 얻게..