분류 전체보기30 [React on Mac] 리액트 작업시 기억해두면 좋을 기초 지식 (1) 노마드코더의 리액트 강좌를 들으면서 기억해둘 기초 지식들을 하나씩 정리해둔다. 1. css파일을 그대로 사용하지 않음 예전에 인스타그램 사이트를 크롤링하면서 알게된 점은 특정 태그들의 class이름들이 무작위적으로 계속 바뀐다는 것이었다. 기존에 알던 html,css,javascript 지식으로는 이게 어떻게 가능하지 싶었고, 네이버 사이트만 봐도 태그들의 class 이름이 괴상하게 되어있었는데 리액트 강좌를 들으면서 이 방법을 사용하는구나 싶었다. 리액트에서는 css 파일형식을 그대로 사용하지 않을 수 있다. 웹 서비스 제작을 하다보면 클래스 이름이 중복되는 상황들이 종종 발생해서 곤란한 경우다 다반사였는데, 리액트에서는 이러한 상황을 피할 수 있게 구성되어있다. 방법은 다음과 같다. App.css 파.. 2023. 7. 4. [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] Firebase 설치 과정 상세기록 - 23.07.02 1. Firebase 사이트 구글 로그인해서 프로젝트 생성 2. 가장 오른쪽 플러터 버튼 누르면, 플러터로 플랫폼 등록 가능 CLI : Command Line Interface => 터미널을 통한 인터페이스 3. Firebase CLI 설치 - 터미널에 다음 실행 curl -sL https://firebase.tools | bash - 패스워드 입력하기 => 본인의 mac 비밀번호를 입력해야함!! - 설치 완료 모습 - 제대로 설치 되었는지 확인하기. 다음 내용 터미널에 치기 firebase login - y 누르면 웹 페이지에서 구글 로그인 창 떠서 로그인 하면 완료 - cli 잘 설치되었는지 확인하는 두번째 방법 firebase projects:list - flutter sdk랑 프로젝트는 이전에 생.. 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 플러터 설치과정 정리 2탄(23.06.28) 맥에 플러터 설치과정 2탄 1탄에서는 Xcode와 Android Studio 설치까지 진행완료하였다. 이번엔 flutter SDK 설치 및 환경변수 설정을 해보려고 한다. 1. Flutter SDK for Apple Silicon 설치 (1) 플러터 사이트 접속 후 os에 맞는 zip 파일 다운 https://docs.flutter.dev/get-started/install/macos macOS install How to install on macOS. docs.flutter.dev 위 사이트에 들어가서 애플 실리콘용 zip 파일을 다운로드 받는다. (M2 Pro) (2) 터미널창에서 development 폴더 만들고 해당 폴더로 이동 cd ~/development를 처음 쳤을때 해당하는 디렉토리가 없다.. 2023. 6. 28. [Flutter on Mac] Apple Silicon M2 Pro 플러터 설치과정 정리 1탄(23.06.28) 1년 정도 개발자로서 몇가지 프로젝트를 하다보니 그 과정들을 기록하는 것에 대한 필요성을 느꼈다. 나를 어필할 수단으로도 사용이 가능하고, 개발하다보면 반복적으로 구글링하게되는 문제들이 있었기 때문이다. 웹 작업만 해오다가 이제 앱 제작을 해보고자 마음을 먹었고, 플러터의 수요가 높아지고 있다는 추세에 더불어 크로스 플랫폼을 지향하기 때문에 이번 프로젝트를 진행하면서 플러터로 작업하던 과정 중에 기억하면 좋을 사항들을 기록하려한다. 우선 맥북에서 플러터를 설치하는 과정이다. 안드로이드 스튜디오와 VSCode로 작업하는 두 가지 방법이 만연한 것 같은데 본인은 여러 익스텐션이 많은 VSCode를 좋아하기 때문에 해당 IDE를 기준으로 작업하기로 결정했다. 개발 기기는 23년도 맥북 14 Pro ( M2 P.. 2023. 6. 28. 이전 1 2 3 다음
