vscode8 [Flutter on Mac] 플러터 스플래쉬 이미지 적용하기 - 23.07.06 평소에 앱을 실행시키면 처음 로딩할 때 나오는 이미지가 있는데, 그 이미지를 splash 이미지라고 한다. 스플래쉬 이미지를 적용시키는 방법은 다음과 같다. 1. 플러터 스플래쉬(flutter_native_splash) 패키지 설치 flutter pub add flutter_native_splash 위 명령어를 터미널에 입력하여 flutter_native_splash 패키지를 설치한다. 2. 프로젝트의 루트 폴더에 flutter_native_splash.yaml 파일 생성 프로젝트의 루트 폴더는 pubspec.yaml 파일이 존재하는 위치이다. 이곳에 flutter_native_splash.yaml 파일을 생성하고 다음 코드를 입력하여 저장하였다. flutter_native_splash: # This p.. 2023. 7. 6. [React on Mac] 맥에서 리액트 시작하기 (23.06.29) 간단한 서브 프로젝트를 진행하면서 웹은 리액트로, 앱은 플러터로 제작해보기로 하였다. 둘 다 처음이라 유튜브 튜토리얼을 따라해보면서 과정을 기록한다. 지금까지 웹 서비스를 만들때 장고나 스프링부트 백엔드를 사용하였지만 프론트엔드는 HTML, CSS, Javascript 세가지로 구현해왔다. (코딩 1년차..) 이 세가지로 서비스를 구현하는 것에 익숙해진 나머지 React, Vue.js 등의 프레임워크?는 왜 사용하는지 의문이 있었는데 튜토리얼 강사분이 강좌를 시작하며 그 이유를 언급해주셨다. https://www.youtube.com/watch?v=aYwSrzeyUOk&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 리액트는 Single-Page Application을 만드는 기술.. 2023. 7. 4. [Flutter on mac] 플러터 카카오 로그인 연동 과정 - 23.07.03 플러터 프로젝트에서 카카오 로그인 기능을 연동시키는 과정을 간단하게 기록한다. 참고한 링크는 다음과 같다. https://vlee.kr/4986 1. 카카오 개발자 사이트에서 어플리케이션 등록하기 카카오 개발자 사이트 로그인 새 어플리케이션 등록하기 안드로이드 플랫폼 먼저 등록 키 해시 값 생성하기 위한 명령어 입력 -> 키 해시 생성됨. keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64 ios 플랫폼도 번들 ID는 android 패키지명과 같이 입력하여 등록하였음 2. Kakao.. 2023. 7. 3. [Flutter on Mac] 로그인 페이지 + 파이어베이스 구글 로그인 구현 과정 정리 - 23.07.02 1. 로그인 페이지를 구성하는 데 참고한 영상 https://www.youtube.com/watch?v=Dh-cTQJgM-Q 초기 세팅으로부터 화면 구성하는 것만 살짝 참고함 2. VSCode에서 Firebase 구글 로그인 시 구현할 때 참고한 링크 (1) 로그인 관련 위젯과 화면 구성에 구글로그인 코드 엮는 거 참고 https://engschool.tistory.com/156 https://firebase.google.com/docs/auth/flutter/federated-auth?hl=ko#android_1 [ 최신 docs 코드 ] 제휴 ID 및 소셜 로그인 | Firebase 문서 Google I/O 2022에서 Firebase의 새로운 기능을 확인하세요. 자세히 알아보기 의견 보내기 제휴 I.. 2023. 7. 2. [Flutter on mac] VSCode에서 Dart 코드 작성시 엔터칠 때 자동완성 방지하는 방법 - 23.07.02 플러터 작업 중에 코드 작성 시 깔끔하게 작성하기 위해 엔터를 칠때마다 자동완성이 되어서 흐름이 끊기는 현상이 자꾸 발생해서 챗지피티를 통해 얻은 해결 과정이다. Visual Studio Code를 열고, 상단 메뉴에서 "Code" > "Preferences" > "Settings"를 선택합니다. (또는, 단축키 Cmd+, (Mac) 또는 Ctrl+, (Windows/Linux)를 사용할 수 있습니다.) 설정 탭에서, 검색 창에 "acceptSuggestionOnEnter"를 입력합니다. "Editor: Accept Suggestion On Enter" 옵션을 찾아서, 이를 "off"로 설정합니다. 이렇게 하면 엔터키를 눌렀을 때 자동 완성이 발생하지 않습니다. 변경 사항을 저장하고 설정 창을 닫습니다... 2023. 7. 2. [Flutter on Mac] VSCode Flutter project 생성하기 새로 시작할 프로젝트의 기획 및 디자인 틀을 구성하고 나서, 이제 플러터 프로젝트를 생성해야했다. 예전에 윈도우 노트북으로 플러터 프로젝트를 vscode로 시작할 때, 안드로이드 스튜디오에서 가상 에뮬레이터를 설치하는 데에 에러가 나서 귀찮았던 기억이 있는데 맥에서는 XCode를 설치하면 별다른 추가 설치 없이 아이폰 에뮬레이터가 실행되는 것을 보고 역시 맥이 좋군! 이라는 생각이 들었다. VSCode에서 플러터 프로젝트를 새로 생성하는 과정을 참고한 링크들은 다음과 같다. [ 프로젝트 생성 관련 ] https://www.whatwant.com/entry/VSCode-Flutter-Create-Project [ 아이폰 에뮬레이터 실행 ] https://donggyu9410.medium.com/flutte.. 2023. 7. 2. [Flutter on Mac] 플러터 설치과정 정리 3탄(23.06.28) - VSCode세팅 이번엔 VSCode에서 Flutter Extension을 설치하면서 플러터 작업에 효율적인 몇가지 익스텐션과 Settings.json 파일을 수정해보았다. 1. Flutter 익스텐션 설치 플러터 익스텐션을 설치하면 자동으로 다트 익스텐션까지 같이 설치된다고 한다. 2. Error Lens 설치 에러렌즈는 코드를 작성시 문법적으로 틀린 부분이나 경고를 위한 부분에 렌즈를 비추는 것처럼 알려주는 기능을 한다. 괄호를 빼먹거나 세미콜론을 빼먹거나 하는 자잘한 실수들, const 같은 데이터 타입이 안맞는 경우 등 여러모로 도움이 되는 기능이어서 설치했다. 3. Pubspec Assist 설치 Pubspec.yaml 파일에 필요한 플러터 패키지 입력시에 보다 더 편하게 패키지를 설치할 수 있도록 해주는 기능이.. 2023. 6. 29. [Flutter on Mac] Apple Silicon M2 Pro 플러터 설치과정 정리 1탄(23.06.28) 1년 정도 개발자로서 몇가지 프로젝트를 하다보니 그 과정들을 기록하는 것에 대한 필요성을 느꼈다. 나를 어필할 수단으로도 사용이 가능하고, 개발하다보면 반복적으로 구글링하게되는 문제들이 있었기 때문이다. 웹 작업만 해오다가 이제 앱 제작을 해보고자 마음을 먹었고, 플러터의 수요가 높아지고 있다는 추세에 더불어 크로스 플랫폼을 지향하기 때문에 이번 프로젝트를 진행하면서 플러터로 작업하던 과정 중에 기억하면 좋을 사항들을 기록하려한다. 우선 맥북에서 플러터를 설치하는 과정이다. 안드로이드 스튜디오와 VSCode로 작업하는 두 가지 방법이 만연한 것 같은데 본인은 여러 익스텐션이 많은 VSCode를 좋아하기 때문에 해당 IDE를 기준으로 작업하기로 결정했다. 개발 기기는 23년도 맥북 14 Pro ( M2 P.. 2023. 6. 28. 이전 1 다음
