본문 바로가기

Front-End

[React] 개요 들어가며필자는 리액트를 공부중인 개발자 1인으로서, 공부하며 알게된 사실을 적어두었고 틀린 내용이 있을 수 있습니다. 지적, 조언 얼마든지 감사히 받아들이겠습니다.React란?메타(전 페이스북)에서 개발한 오픈소스 자바스크립트 라이브러리이다. 여기서 프레임워크가 아닌 라이브러리라는 사실을 이해하자. 간단하게 등장 배경을 설명하면, React는 JQuery, Angular의 시대를 거쳐 다음으로 인기를 얻게 된 프론트엔드 기술로, 이후 Vue, Svelte 등 개선된 기술들이 등장하긴 했지만 React에 비해 압도적인 이점이 없어 여전히 가장 많이 사랑받고 있다. SPA(Single Page Application)를 전제로 사용되며, Dirty Checking(상태 변경 검사)와 Virtual DOM(가상.. 더보기
[Flutter] [Windows] Flutter failed to write to a file at "C:\Users\<사용자명>\StudioProjects\<프로젝트명>\.flutter-plugins". The flutter tool cannot access the file or directory. 오늘은 아주 간단하지만 골때리는 트러블슈팅을 가져왔다. 바로 제목처럼 파일 권한 문제인데, 나같은 경우 Mac에선 괜찮다가 윈도우10에서 발생했다. MacOS나 Linux 라면 바로 chmod를 할텐데, 윈도라서 그것도 못하고... 폴더/파일 속성 들어가서 권한 확인해볼수야 있겠지만 대부분 원인은 거기에 있지 않다. 진짜 원인은 윈도우 디펜더 실시간 감시 때문이다... 실시간 감시를 끄고 flutter clean 그리고 dart pub get 한 후 실행하면 잘 되는 것을 확인할 수 있다... [실시간 감시 끄는법] 설정 - Windows 보안 - 바이러스 및 위협 방지 - 바이러스 및 위협 방지 설정 (설정 관리) - 실시간 보호 (끔으로 설정) 끝~! 더보기
[Flutter] Android Studio Ladybug에서 발생한 JDK Version 오류 회사에서 새로 지급받은 데스크톱에 플러터 세팅을 마치고, (flutter doctor -v까지 이상 없었음) 기존에 작업중이던 앱을 실행했는데 다음과 같은 에러가 발생했다.Execution failed for task ':connectivity_plus:compileDebugJavaWithJavac'. Could not resolve all files for configuration ':connectivity_plus:androidJdkImage'. > Failed to transform core-for-system-modules.jar to match attributes {artifactType=_internal_android_jdk_image, org.gradle.libraryelements=jar,.. 더보기
[UI/UX] 2. 안드로이드 (1) 1. 안드로이드란?구글에서 개발한 오픈소스 운영체제.삼성 갤럭시, A 시리즈, 노트시리즈, 폴드, 구글 픽셀 등에서 이용함. 서체: 로보토단위: DP, SP최소 크기: 48x48내장 네비게이션: 뒤로가기, 홈, 실행중인 앱 버튼을 기본으로 가짐메인 네비게이션: 상단에 위치. iOS와 비슷해져가는 추세보조 메뉴: 햄버거 메뉴(aka. Drawer)을 주로 사용버전: 첫 출시 2009년. 2014년 안드로이드 5.0 (롤리팝) 이후로 1년에 1씩 올라가는 중. 24년 10월 기준 현재 최신버전은 15. 1.1. Material Design구글에서 제공하는 사용자 인터페이스 디자인 가이드.안드로이드에서 사용되는 앱에 기반하지만 웹이나 다른 플랫폼에서도 사용 가능.디자이너에게만 제공하는게 아닌, 개발까지 반영된.. 더보기
[Flutter] GoRouter 사용시 PopScope 적용 안되는 버그 플러터로 안드로이드의 App Link, ios의 Universal Link를 사용해서 링크 접속시 앱을 여는 기능을 구현중인데, 기존에 PopScope를 이용해서 구현해둔 "뒤로가기 두번으로 종료" 기능이 안되는 현상을 발견했다. 분석해본 결과, root 화면에서만 안되는것을 알 수 있었고, 인터넷 검색 결과, 13+ 버전의 GoRouter에서 발생하는 이슈였다. https://github.com/flutter/flutter/issues/140869 [go_router] WillPopScope/PopScope doesn't trigger with back button navigation on root screens · Issue #140869 · flutter/flutteSteps to reproduce.. 더보기
[Flutter] Flutter Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.8.0, expected version is 1.6.0 [주의] 해당 문제는 아직 미해결되었습니다. 해결되는대로 글 수정하겠습니다. 평화롭던 어느날 디버그 모드 빌드중에 이런 경고가 떴다. 코틀린 버전이 안맞아서 생기는 경고,, 딱히 손 안대도 빌드는 됐지만 빨간 글씨가 맘에 걸려 손을 댔다가 재앙이 시작됐다. 1. 인터넷에서 본대로 build.gradle 과 settings.gradle 수정 후 다시 빌드해봐도 계속해서 뜨길래, 지피티 쌤한테 여쭈어보니, 2. gradle-wrapper.properties 에 있는 gradle 버전도 맞춰준 다음 flutter clean./gradlew cleanflutter pub get을 하라신다.. 3. gradle 버전을 코틀린 버전에 맞춰 설정했는데 ./gradlew clean 과정에서 자바가 없다고 설치하라고 하.. 더보기
[Flutter] 소셜 로그인 구현 (카카오톡) 필요한 링크들을 모아두었다.- 카카오 로그인 API 공식 문서https://developers.kakao.com/docs/latest/ko/kakaologin/flutter Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com웹은 빼고 개발 중이었으니 빨간 박스 친 부분만 참고해 구현하였다.  ✓ 패키지 의존성 설치는 쉬우니 스킵. ✓ 커스텀 URL 스킴 설정 방법해당 설정을 해두면 사용자가 Android와 iOS 환경에서 카카오톡으로 로그인 후 서비스 앱으로 돌아오거나, 카카오톡 메시지 버튼 또는 링크로 서비스의 앱을 실행할 수 있다.https://de.. 더보기
[UI/UX] 1. 디자인 공통 요소 (4) 9. 네비게이션사용자가 목적에 이르기까지 페이지 간 자연스러운 이동을 안내하는 시스템.UI 내 사용자의 이동을 돕는 컴포넌트의 종류는 여러가지가 있음.네비게이션 바탭바툴바탭세그먼트 컨트롤드로월 메뉴(햄버거 메뉴)네비게이션 설계가 잘못되면, 엉뚱한 페이지로 연결되거나, 페이지에 들어간 후 돌아갈 수 없어 갇히는 등의 문제가 발생할 수 있음. 예를 들어, 상세 페이지에서 뒤로 가기 버튼은 반드시 있어야 함. 9.1. 네비게이션 바상단에 페이지 이름과 뒤로가기, 액션 버튼 등이 함께 있는 바 형식의 컴포넌트.iOS는 순서대로 구성되어 있음.안드로이드는 순서대로 구성되어 있음. 9.2. 세그먼트 컨트롤상단에 배치되어, 현재 페이지의 하위 리스트들(메뉴들) 간에 빠르게 이동할때 사용되는 컴포넌트.탭끼리는 같은.. 더보기

티스토리툴바