분류 전체보기
-
Flutter http를 이용한 통신 구현Mobile/Flutter 2022. 6. 6. 21:31
http 또는 https로 API 호출을 하기 위해서는 https://pub.dev/packages/http http | Dart Package A composable, multi-platform, Future-based API for HTTP requests. pub.dev http 패키지가 필요하다. http를 사용하는 방법은 import 'package:http/http.dart' as http; http.get( Uri.parse([URL],), headers: { //헤더값 }, ); 위 처럼 사용할 수 있다. 이외에도 post, put 등의 방식도 사용 할 수 있다. API로 호출을 하여 값을 결과값이 반환될 때에는 Future httpRequest() async { var response =..
-
Timer 사용(setInterval, setTimeout)Mobile/Flutter 2022. 6. 6. 20:48
자바스크립트에서 사용하던 setInterval과 setTimeout과 같은 기능을 Flutter에서 사용하기 위해서는 Timer라는 위젯을 사용해야 한다. 해당 위젯의 기본 사용 방법은 Timer.periodic(const Duration(milliseconds: [시간주기]), (timer) { //주기마다 실행할 내용 }); 위 처럼 Duration을 이용하여 얼마의 시간마다 실행할지를 정하고 콜백 함수 내에 원하는 코드를 작성하면 된다. 일반적으로 타이머를 종료하기 위해서는 timer.cancel(); 을 콜백 안에 작성하면 된다. 만약 종료하는 곳이 콜백 내부가 아니라 다른 곳이라면 class _MyAppState extends State { Timer? _timer = null; @overrid..
-
Flutter 채널에서 Handler 사용 - KotlinMobile/Flutter 2022. 6. 2. 21:26
Flutter 공식 문서를 참조하였습니다. https://flutter-ko.dev/docs/development/platform-integration/platform-channels 플랫폼 별 코드 작성 앱에서 커스텀하게 플랫폼 별 코드를 작성하는 방법을 배워보세요. flutter-ko.dev Flutter에서 채널 메서드를 호출할 때는 기본적으로 Main Thread(UI Thread)를 사용합니다. 하지만 만약 SDK 등 다른 메서드를 호출 하였을 때 해당 메서드가 메인 스레드가 아닌 백그라운드 스레드에서 동작하고 해당 스레드가 끝나거나 동작 중에 메인 스레드의 코드를 순차적으로 호출해야 한다면 이 핸들러를 사용해야 한다고 보인다. 자세한 내용과 사용법은 위 링크에 접속하면 확인이 가능하니 여기서는..
-
KaKao 로그인 구현Mobile/Flutter 2022. 5. 26. 17:15
이 글은 오준석의 생활 코딩의 유튜브 영상을 따라한 것입니다. https://www.youtube.com/watch?v=Ar6RdDf77xQ&ab_channel=%EC%98%A4%EC%A4%80%EC%84%9D%EC%9D%98%EC%83%9D%EC%A1%B4%EC%BD%94%EB%94%A9 위 링크로 들어간다면 해당 영상을 볼 수 있습니다. ※참조 문서 https://developers.kakao.com/docs/latest/ko/getting-started/sdk-flutter Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. Kakao S..
-
Firebase 설정(Firebase CLI) - WindowsMobile/Flutter 2022. 5. 25. 19:35
사전 준비 nodeJS 설치가 안되었다면 아래 링크에서 설치하면 된다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 명령 코드 확인 및 순서는 https://console.firebase.google.com/ 에 있는 프로젝트 설정 > 일반 > 앱 추가에서 Flutter를 눌렀을 때 나오는 순서를 따라간다. 1. 명령 프롬프트(cmd)에서 아래 코드 입력 npm install -g firebase-tools 2. firebase에 로그인 firebase login 3. 설치가 완료되면 아래 코드 입력 dart pub global activate flutterfire_cli 4. acti..
-
Flutter Window에서 시작하기(IntelliJ)Mobile/Flutter 2022. 5. 24. 11:59
Flutter를 윈도우에서 시작하기 위한 방법이다. 1. 아래의 링크에서 원하는 Flutter SDK를 다운로드한다. https://docs.flutter.dev/development/tools/sdk/releases Flutter SDK releases All current Flutter SDK releases, stable, beta, and master. docs.flutter.dev 2. 환경변수 설정 시스템 속성 > 고급 > 환경 변수에서 시스템 또는 사용자 환경변수의 Path에 Flutter SDK의 bin 위치를 추가해준다. ※ 단, 사용자 환경변수에 추가했을 경우에는 현재 로그인한 사용자만 사용이 가능하다. ex) C:\flutterApp\flutter\bin 3. JetBrains Too..
-
React - Router 화면 이동WEB/React 2022. 4. 30. 02:23
화면을 이동하기 위해서는 npm i react-router-dom npm i @types/react-router-dom 위 두 개를 설치해 준다. index.tsx 파일에 를 추가해 준다. ReactDOM.createRoot(document.getElementById('root')!).render( ) 그 후 원하는 App.tsx에 라우터를 추가해 준다. const routes = [ {path: "/Test",component : }, {path: "/sample",component : }, ] return( {routes.map((route : {component : JSX.Element, path : string}, index : number) => ( ))} ) 위와 같이 작성한다면 routes에..
-
Axios 모듈화WEB/React 2022. 4. 30. 01:07
Axios를 모듈화 하여 사용하기 위해서는 axios.create를 사용하여 공통적으로 사용되는 부분을 만들어준다. const customAxios : AxiosInstance = axios.create({ baseURL : `http://localhost:3000`, headers: { 'Content-Type': 'application/json', }, }) 위와 같이 만들게 되면 customAxios로 호출할 때는 localhost:3000으로 호출을 하고 헤더에 content-Type을 application/json으로 보낸다는 말이다. customAxios를 이용하여 post 또는 get 요청을 하기 위해서는 export const requestPostAxios = (url : string, a..