본문 바로가기

프로그래밍91

Flutter 구글 지도 (Google maps) 추가하기 Flutter 구글 지도 (Google maps) 추가하기 구글 지도를 추가해 플러터 앱 내에서 사용하는 법을 알아보겠다. 1. pubspec.yaml에 의존성 추가 : google_maps_flutter, http, json_serializable 2. Google Maps API 사용을 위한 Key 발급받아 적용하기 3. AndroidManifest.xml 설정 추가 1. pubspec.yaml에 의존성 추가 : google_maps_flutter, http, json_serializable 2. Google Maps API 사용을 위한 Key 발급받아 적용하기 앱에서 Google지도를 사용하려면, 별도의 Google Cloud Platform 에서 프로젝트를 생성하고 API Key를 발급 받아야 한.. 2020. 8. 27.
Flutter 움직이는 그림(Lottie) 넣기 Flutter 움직이는 그림(Lottie) 넣기 이번에는 Lottie 를 활용한 움직이는 그림 넣는 방법에 대해 알아보겠다. 사용법은 매우매우 간단하다. 동작 원리 1. pubspec.yaml 추가 (lottie) 2. 파일 추가 1. pubspec.yaml 추가 (lottie) dependencies: flutter: sdk: flutter lottie: 2. 파일 추가 ListView( shrinkWrap: true, children: [ // Load a Lottie file from your assets Lottie.asset('assets/LottieLogo1.json'), // Load a Lottie file from a remote url Lottie.network( 'https://raw.. 2020. 8. 27.
Flutter 프로필 사진 등록/변경하기 Flutter 프로필 사진 등록/변경하기 이번에는 내정보의 프로필 사진 등록/변경에 대해 알아보겠다. ImagePicker 위젯을 사용할 것이다. 사용법은 아래와 같다. 동작 원리 0. 화면 구성 1. Profile camera 아이콘 클릭 => 카메라로 찍기 / 갤러리에서 가져오는 모달창 생성 2. 카메라로 찍기 또는 갤러리에서 가져오기 + 변경된 내용 반영하기 0. 화면 구성 @override Widget build(BuildContext context) { return Scaffold( appBar: appBarWidget('Regist Profile'), body: Padding( padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20).. 2020. 8. 27.
Flutter 터치로 사진 확대/축소 시키기 Flutter 터치로 사진 확대/축소 시키기 이번에는 화면 터치를 통해 사진/그림을 확대/축소 시키는 방법에 대해 알아보겠다. Animation 위젯을 응용하여 사용할 것이고 관련 내용을 통해 progress bar 등으로의 활용도 가능하다. 사용법은 매우매우 간단하다. 동작 원리 1. Animation, AnimationController 생성 2. 특정 행동(터치)을 감지하여 행동 발생시 설정한 애니메이션이 동작하도록 수행 1. Animation, AnimationController 생성 Animation _animation; AnimationController _animationController; @override void initState() { // TODO: implement initStat.. 2020. 8. 27.
DS인증 실기 문제풀이 오답노트 (D-1) 통계중심 문제 #1. Antibiotic_70K_patients - 이상치 구현하는 python 코드가 익숙치 않다!!!!!!!!!!!!!! import pandas as pd import numpy as np data = pd.DataFrame(inputs[0]) def count_outlier(x): mean_x = np.mean(x) sd_x = np.std(x) under_three_sigma = mean_x - 3 * sd_x over_three_sigma = mean_x + 3 * sd_x count_3sigma = len(x[x over_three_sigma]) return count_3sigma result = data.apply.. 2020. 8. 22.
Flutter 공유하기, Calendar 기능 사용하기 Flutter로 공유하기 앱을 사용하다보면 카톡이나 다른 앱에 공유하는 기능을 사용할 때가 있다. flutter에서도 컨텐츠를 공유하는 기능을 구현할 수 있다. (안드로이드에서 ACTION_SEND, iOS에서 UIActivityViewController로 불림) 사용법은 매우매우 간단하다. 1. pubspec.yaml 파일에 의존성 추가하기 2. 기능 구현하기 1. pubspec.yaml 파일에 의존성 추가하기 : share 패키지 dependencies: flutter: sdk: flutter share: 2. 기능 구현하기 : flutter 프로젝트로 만든 기본 테스트화면에 TextField와 Button 만 만들었다. class _MyHomePageState extends State { Strin.. 2020. 8. 1.
완전 쉽고 간단한 Flutter 로 카메라 사용하기 어플에서 자주 쓰는 카메라 연동에 대해 알아볼 것이다. Dart 패키지에는 camera 관련 패키지가 있어 라이브러리를 가져와서 사용하면 된다. 아래의 단계별로 테스트를 진행해보겠다. 정말 별거 없고.. image_picker 패키지만 가져다가 조금만 구현하면 되는구나 1. pubspec.yaml 에 의존성 추가하기 (라이브러리 가져와서 사용하겠다는 의미) 2. 카메라로 직접 촬영하던지, 갤러리에서 가져와 쓸 수 있도록 구현하자 1. pubspec.yaml 에 의존성 추가하기 (라이브러리 가져와서 사용하겠다는 의미) image_picker 패키지는 pub.dev에서 99점의 점수를 기록하고 있어서 말해뭐해? 정도의 퀄리티를 자랑한다고 할까나.. 2. 카메라로 직접 촬영하던지, 갤러리에서 가져와 쓸 수 있.. 2020. 7. 31.
5분만에 Flutter 에서 kakao login 버튼 추가하기 * 해당 게시글 최하단에 아래의 2가지 형태의 예제를 구현한 github 링크를 공유해두었으니 참고하실 분들은 도움이 되셨으면 좋겠습니다. - 단순 카카오 로그인 - 카카오 로그인 후 정보저장(Firebase) 및 자동로그인 Flutter에서 소셜 로그인을 할 수 있는 여러 가지 방법이 있는데 그 중 하나가 카카오계정 로그인이다. Flutter에서 간단히 구현을 해볼텐데 방법은 아래와 같다. 1. pub.dev (flutter 패키지 모음) 에서 어떤 라이브러리 사용할 것인지 확인 : kakao_flutter_sdk (카카오 공식) 👉🏻 카카오에서 공식 지원하는 라이브러리를 가져다가 쓸 예정이다. 2. Flutter 에서 pubspec.yaml 의존성 추가하기 👉🏻 kakao_flutter_sdk를 가져.. 2020. 7. 30.
파이썬으로 웹 크롤러 만들기 - (1) 웹스크레핑, 브라우저 동작방식 웹 스크레핑이란 ? 웹 스크레핑은 데이터를 수집하는 작업을 말하며 가장 널리 쓰이는 방법은 프로그램을 만들어 웹 서버에 쿼리를 보내 데이터를 요청하고, 이를 파싱(내가 활용하기 편한 데이터로 변환)해 필요한 정보를 추출하는 작업을 자동으로 하는 것을 말한다. 왜 웹 스크레핑을 써야 할까 ? 오직 브라우저만 사용해 인터넷에 접근하면 수많은 가능성을 놓치고 있는 것이다. 브라우저는 자바스크립트를 실행하고 이미지를 표시하며 객체를 사람이 읽기 편한 형식으로 표시하는데 뛰어나지만, 웹 스크레퍼는 다량의 데이터를 수집하고 처리하는 데 뛰어나다. 모니터의 좁은 창에서 페이지를 하나씩 볼 필요 없이, 데이터베이스에서 수천, 심지어 수백만 페이지를 즉시 볼 수 있다. 데이터 수집을 하기 위해 API가 존재한다고 생각할.. 2020. 7. 24.
Notion을 배워보기로 했다. (협업툴, 노트앱) 앱 공부를 하며 동시에 4가지의 앱을 개발하다보니 디테일한 기록없이는 허둥지둥대고 전문적인 병렬처리가 불가능할거라 생각이 되어 협업툴 중 노션을 배우고 적용해보려고 한다. 기본적으로 회사에선 Jira를 통한 업무관리를 사용해왔고 현재 있는 부서에서는 엑셀로 정리해서 공유하는 등 다소 비효율적인 업무처리 방식을 사용하고 있다. (무언가 누락되어도 발견하지 못하면 계속 오류로 남아 무덤속에 묻히겠지?) 우선, 내가 가장 필요로 하는 것은 Todo list와 일정관리가 필요했다. 기존의 여러 툴 중 슬랙, 노션, 트렐로 중에서 골라보기로 했는데 노션을 고른 이유는 심플하다. 처음 들어갔을 때 너무 심플하고 사용법도 간편한데 의외로 너무많은 기능들이 곳곳에 숨어 있어서 더 고민않고 노션을 선택했다. 그리고 유튜.. 2020. 7. 24.
쉽따공 - 쉽게 따는 공인중개사 앱 회사 직원들이 ADsP 취득이 필요하니 관련 앱을 만들면 사람들이 많이들 쓰겠다 판단이 되어ADsP 퀴즈 앱을 만들었다. 하지만 ADsP 기출문제를 복원하는 업체에 문제를 가져다 쓰겠다 문의를 하니출판사업의 지장이 있을 수 있어 사용을 지양해달라는 답변을 받아 그 앱은결국 사용을 못 하게 되었다.그런데, 처음엔 자기계발의 목적으로 만들었던 퀴즈앱이 잘 생각해보니...퀴즈앱에 넣을 문제들만 있다면 (저작권 이슈가 없는) 다른 자격증 어플로도 활용이 가능하겠다 싶어서공인중개사 퀴즈앱을 만들게 되었다.공인중개사 시험은 큐넷에서 정식으로 시험문제/정답이 업로드 되고 사용이 가능했다.어렵지 않게 구현한 공인중개사 기출문제를 엑셀에 정리하고 넣는게 어떻게 보면 노가다성이었다...하지만 공인중개사 문제풀이 앱은 이미.. 2020. 7. 24.
Flutter trouble shooting - 잘 되던 빌드가 갑자기 안될 때가 있다. 에러문구 D8: Cannot fit requested classes in a single dex file 원인 : 앱 및 앱이 참조하는 라이브러리에서 메서드가 65,536개를 초과하면 앱이 Android 빌드 아키텍처의 제한에 도달했음을 알리는 빌드 오류가 발생합니다. 개발에 실수해서 생긴건 아니고 pjt에 포함된 메소드 개수가 65,536개가 초과되면 발생하는 오류 조치방법 : android/app/build.gradle에 설정 변경해주기 - 쿼리스냅샷을 가져오는데 시간이 걸려 null 오류가 발생하는 경우가 있다. 또는 가져오는동안 값이 바뀌지 않아 최초 초기화값인 0으로 표시되는 경우가 있다. 후자의 경우는 setState를 통해 설정을 바꿔주었는지 확인.. 2020. 7. 5.
Flutter webview widget 이용하기 앱 개발을 하게 되면 개발을 어떤식으로 할지 정해야 할 것이다. 정하는 갈림길에는 네이티브, 하이브리드(웹/앱), 웹뷰 등 크게 3가지로 볼 수 있다. Flutter는 네이티브를 지원(?)한다고 해야하나.. 나도 정확한 개념은 아직 모르지만 우선 웹뷰는 아니다. 웹뷰는 기존의 웹 방식으로 동작하는걸 앱에서 껍데기만 씌워서 껍데기 안에 웹으로 보여지도록 하는 방식이다. 내가 개발 중인 앱 중에 '책 구매하기' 등의 버튼을 클릭하면 인터파크의 책구매 사이트로 이동하도록 구현해야 하는데 이걸 굳이 Dart로 개발하려면 막막한데 웹뷰 라이브러리를 이용하여 나는 껍데기만 만들고 웹뷰로 보여주면 훨씬 수월하게 개발을 할 수가 있다. 아래의 준비과정 및 구현 방법을 통해 Flutter 내에서 웹뷰를 사용할 수 있다... 2020. 6. 27.
Flutter web project 만들어보기 1. web project를 만들기 위해 아래의 설정으로 변경하자. 나는 mac의 terminal에서 아래의 명령어를 실행시켰다. $ flutter channel beta $ flutter upgrade $ flutter config --enable-web 2. android studio를 통해 새로운 flutter project를 생성했다. 이제 기기선택에 보면 web이 보일 것이다. 2020. 6. 22.
모바일 개발 업무 절차 - (1) 프로젝트 착수 나는 이제껏 앱을 만드는 간단한 방법만 배워보았지만 실제로 구글스토어 등의 마켓에 등록을 했을 때 사용자가 증가할 만한 노하우나 성공을 위한 방법에 대해서는 아직 알지 못 한다. 그래서 앞서 성공한 앱 서비스 개발팀의 사례들을 찾아보고 앱 개발 과정에서 어떤 계획을 갖고 시작해야 할지에 대해 정보를 수집해 정리해 보고자 한다. 1. 개발/운영 프로세스 전체는 어떤 식으로 흘러가는가? 프로젝트 착수 : 성공가능성을 예측하고 계획을 수립하는 단계 아이디어 : 구체화 및 계획을 수립해보자. 경쟁 앱에 대한 분석을 통해 성공을 위한 앱의 포지셔닝을 해보자. 목표하는 사용자들의 분석을 하고 생각을 이해해보자. 앱에 대한 수익을 창출하는 방법에 대해 생각해보자. MVP를 정의해보자. UX Design : 앱 시나리.. 2020. 6. 21.
구글스토어 앱 버전업하기 앱을 처음으로 구글스토어에 배포까지 해보았는데 일부 변경사항이 생겨서 버전업이 필요했다. 그런데 내가 여러 번 겪은 상황은.. 구글스토어에 내 apk 파일을 업로드하는데 자꾸 오류가 나는 것이다. 이미 같은 버전이 있으니 버전을 올려서 다시 업로드하라는............. 나와 같은 문제를 겪은 사람이 있다면 아래의 내용을 보고 해결하기 바란다. 문제는 바로, Flutter에서 version 관리 방식때문이었다. 버전코드가 versionCode.toInteger() 등의 표현으로 저장되기 때문에 최초 1.0 에서 1.1로 변경했다고 버전코드가 변경된게 아니었다. 그냥 둘 다 1로 저장되고 있었던 것이다. 자, 소수점 제외한 숫자형으로 저장이 되므로 버전코드는 반드시 1, 2, 3, ... 과 같이 소.. 2020. 6. 18.
Flutter 개발환경 셋팅 - (windows 기준) 1. flutter 설치페이지로 접속해서 Windows 기준의 flutter sdk 를 다운로드 받자. https://flutter.dev/docs/get-started/install/windows Windows install How to install on Windows. flutter.dev 2. c:\dev\sdk\ 폴더 생성해서 그 안에 압축 풀기 사람마다, 상황별로 폴더를 어디에 위치시키고 압축을 풀어라 이야기가 달라서 스스로 판단해서 위치를 정하면 될 것 같다. 폴더를 정하는게 별거 아니긴 하나 중요하게 생각해야 할 이유는 PATH 설정이 필요하기 때문이다. (나는 그냥 압축 풀고 sdk 폴더로 옮김. 다 옮기면 path는 c:\dev\sdk\flutter\... 요렇게 되면 완료) ⭐️ PA.. 2020. 6. 10.
안드로이드 앱 구글스토어에 배포하기 1. 앱 서명하기 keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key 잘 생성되었다. 2. 앱으로부터 keystore 참조하기 배포용 앱을 빌드할 때 참조하기 위해 프로젝트의 android/ 폴더에 key.properties 파일을 생성한 후 다음과 같이 작성한다. storePassword= keyPassword= keyAlias=key storeFile= 3. build.gradle android 상단에 붙여넣기 // start of Gradle 서명 구성 def keystoreProperties = new Properties() def keystorePropertiesFile = rootP.. 2020. 6. 8.
Flutter Firebase auth 사용하기 로그인 또는 회원가입시 email / password로 동작하는 과정을 알아보고자 한다. 입력시 validate과정, flutter와 firebase를 이용해서 firebase authenticate 동작하는 과정이 되겠다. 흐름을 파악하고 이해한 후에 코드를 다시 보자. 1. email / password 입력시 validate되는 과정 (email / password를 제대로 입력했는지 검증) email / password 입력하기 : TextFormField TextFormField와 상응하는 formKey 존재 formKey의 currentState (입력상태랄까?) validate() 메소드로 검증하기 → 비어있진 않은지 등의 내가 체크하고자 넣었던 로직 검증이 완료되면 Sign in 버튼 누르.. 2020. 5. 27.
Flutter로 ToDo앱 클라우드DB로 데이터 관리하기 (feat. Firestore) Firestore는 문서기반 구조로 데이터를 저장하며 기존 SQL 등의 문법 없이도 실시간으로 손쉬운 데이터 CRUD(쓰/읽/업/삭)이 가능하다. 저장단위는 문서(document)이다. 문서는 컬렉션(collection)에 저장되며 문서에는 키-값 형태로 다양한 자료(data) 저장이 가능하다. 자료구조 : Collection > Document > Data (key-value) 1. 컬렉션 생성 : 할일 정보를 저장할 컬렉션을 생성. Firestore화면에서 '컬렉션 시작' 클릭 > '컬렉션 ID'에 'todo' 입력 > 다음 클릭 2. 할일 목록 가져오기 (Query) main.dart에 cloud_firestore.dart import 하기 Todo 클래스 수정 import 'package:flut.. 2020. 5. 23.
Flutter로 ToDo앱 클라우드DB로 연결하기 (feat. Firebase) 지난 번 만든 ToDo 앱은 종료를 하게 되면 데이터가 초기화될 것이다. 다음으로 클라우드DB인 Firebase와 연동하여 데이터를 관리해보자. 1. Firebase 연동하기 (android, iOS) 2. Firestore 설정 1. Firebase 연동하기 - firebase.google.com 구글계정 로그인 후 시작하기 버튼 클릭 - 프로젝트 추가 - 프로젝트 이름 작성 후 계속 버튼 클릭 - Google 애널리틱스 체크해제 후 프로젝트 만들기 클릭 - 생성 완료 - 안드로이드 버튼 클릭 - android > app > build.gradle : applicationId 복사 - 앱 등록 경로에 붙여넣기 후 앱 등록 클릭 - 다음 화면에서 google-services.json 받고 android .. 2020. 5. 23.
Flutter로 ToDo앱 만들기 (feat. GitHub) ToDo 앱에서는 클라우드 DB를 활용하는 앱이다. 할일 추가하기, 할일 완료하기, 할일 삭제하기, 할일 추가/완료/삭제시 클라우드DB인 Firestore에서 데이터 관리 Step1. git repository 만들고 연결 Step2. ToDo앱 기본버전 작성 Step1. git repository 만들고 연결 - flutter app 생성 > 프로젝트 열기 > VCS > Import into Version Control > Create Git Repository - flutter_todo_app 선택 - Git init > Yes 클릭 > (다음캡쳐본 보면 알겠지만) 모든 파일들이 빨간 표시로 보임 - flutter_todo_app 우클릭 > Git > Add (Git에 내 프로젝트들 Add 시키자) .. 2020. 5. 22.
Flutter로 비만도 계산기 만들기 키, 몸무게 2개의 숫자값을 입력받아 비만도를 계산하는 어플 1. 입력 화면 2. 결과 화면 3. 값 검증 및 화면 전환 4. 최종 화면 및 소스 1. 입력 화면 키, 몸무게 입력받는 양식을 Form 위젯으로 wrap해준다. 그리고 submit을 누를 때 키, 몸무게값을 검증하기 위해 form의 상태를 얻기위한 key가 필요하다. 키는 GlobalKey타입으로 선언하고 Form 위젯의 key 프로퍼티로 선언하면 상태를 얻을 수 있다. 키, 몸무게 입력필드는 검증 로직을 작성할 수 있는 TextFormField를 사용한다. form key의 currentState.validate()로 Form 입력값에 대한 검증이 가능하다. (아래 소스는 검증부분 미작성) import 'package:flutter/mat.. 2020. 5. 19.
Flutter 자주 쓰이는 생산성 높여주는 단축키 Flutter로 앱개발을 하다보면 Column, Row, Padding 등의 위젯으로 감싸는 경우가 자주 발생한다. 반대로 감싸고 있던 위젯을 제거해야 하는 경우도 있을 것이다. 내가 작성하고 있는 코드의 탭 위치가 맞지 않는 것 같다. 자동으로 정렬할 순 없을까? 이 때 쉽게 처리해주는 단축키에 대해 정리해보자. 1. 위젯을 다른 위젯으로 감싸거나 감싸져 있는 위젯 제거하기 - 감싸고 싶거나 제거하고 싶은 위젯에 커서를 위치하고 Alt + Enter (mac기준 option + enter)를 누른다. 감싸고 싶다면 Wrap with Widget 으로 가능하며 제거하고 싶은 경우 Remove this widget으로 가능하다. 2. 코드 정렬하기 - 안드로이드스튜디오 : 'Code > Reformat C.. 2020. 5. 17.
Flutter 자주 쓰이는 위젯을 이용한 복잡한 UI 그리기 주요 사용 위젯 - BottomNavigationBar : 하단 탭 구성 - AppBar : 상단 제목줄 구성 - Row, Column : 가로, 세로 레이아웃 구성 - GestureDetector : 클릭 이벤트 만들기 위한 위젯 - Opacity : 투명도 - CarouselSlider : 좌우 슬라이드하는 UI 작성을 위한 라이브러리 - Listview : ListTile과 함께 사용하여 스크롤 가능한 리스트를 만드는 위젯 * ListView 안에 ListView 를 넣어야 하는 경우 physics / shrinkWrap 프로퍼티를 지정해줘야 함 Step 1. 전체 틀 잡기 2. BottomNavigationBar를 이용해 하단 탭 만들기 + AppBar 수정해서 상단부 만들기 3. 메인 화면(Ho.. 2020. 5. 17.
Flutter 버튼 관련 위젯 버튼 위젯은 onPressed 프로퍼티를 꼭 추가하여 클릭했을 때 실행될 함수를 반드시 정해줘야 한다. RaisedButton, FlatButton, IconButton, FloatingActionButton return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Column( children: [ RaisedButton( // 입체감을 가진 버튼 child: Text('RaisedButton', style: TextStyle(color: Colors.blue)), color: Colors.amber, onPressed: () {} // 클릭시 실행할 영역 ), FlatButton( // 평평한 버튼 child: Text('FlatBut.. 2020. 5. 15.
flutter 개발환경 셋팅 - (macOS 기준) 1. flutter 설치페이지에서 flutter sdk 다운로드하기 https://flutter.dev/ 2. development 폴더 생성해서 그 안에 압축 풀기 $ mkdir ~/development $ cd ~/development $ unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.8-stable.zip (나는 그냥 Finder에서 압축 풀고 development 폴더로 옮김) ⭐️ PATH 추가하기!!! - development 폴더에서 PATH 추가하기 (해당 폴더 이외에서는 flutter 먹지 않는다) $ export PATH=`pwd`/flutter/bin:$PATH - 터미널 어느 세션이든 flutter 명령어를 사용하기 위해서는 bash_profi.. 2020. 2. 19.
react native로 timer앱 만들기 (1) - 간단 화면구성, 버튼 추가 terminal > expo init sky-timer components 폴더 만들고 Timer, Button 폴더 만들기 > 각 폴더 안에 index.js 생성 - Button > index.js TouchableOpacity(터치효과), onPressOut (터치후 손 뗄 때 동작), import FontAwesome(expo vector 아이콘 가져다 쓰기) propTypes (이전 상황에서 값 넘어오는 정보들 설정) - Timer > index.js Button 사용하기 위해 import 해주기, StatusBar 색상 변경, 상단에 time, 하단에 button 추가(클릭하고 뗄 때 alert 나오도록 테스트) redux : State Management for React (리액트 상태 관리 .. 2020. 1. 15.
reactJS 로 영화목록 웹사이트 만들어보기 (3) - 네비게이션 추가하기 react-router-dom 설치 : 네비게이션 사용을 위해 필요 src 폴더 안에 components 폴더와 routes 폴더 생성 Movie.js, Movie.css는 components 폴더로 이동 routes 폴더에 Home.js(영화 리스트 보여주는 페이지) 와 About.js 파일 생성 ( app.js 내용을 home.js 로 이동 라우터를 이용하여 url을 보고 어떤 화면을 보여주면 될지 판단하도록 적용해볼 예정 바보같은 오타 오류 : import Route 라고 해야할 것을 import Router 라고 해서 아래와 같은 오류가........ 수정 후 다시.... url에 보면 /#/ 이 붙은 것을 확인할 수 있다. 이제 /#/about 으로 이동해보자 자, 이제 네비게이션을 추가해보자 .. 2020. 1. 5.
reactJS 로 영화목록 웹사이트 만들어보기 (2) - 영화 목록 가져오기 async() : 비동기 방식. await() ~ : ~ 할 때까지 기다려라. [ES6 에서 나온 새로운 개념인가보다] yts에서 영화 정보 가져올 때 팁 : json파일에서 가져오는 데이터를 잘 정리하면 간편하게 사용 가능 1. 단순하지만 접근하기에 복잡한 타입 2. 설정을 해두면 접근이 용이함 자 이제.. 가져온 movies 정보를 state의 movies 에 담아서 출력해볼까? wow 잘 된다! api 를 통해 얻어오는 데이터에 보니 sorting by rating 옵션을 먹일 수 있겠다 (평점 좋은 순으로 보여주기 위해) api 가져오기 위해 Movie.js 를 만들고 propTypes를 설정하는 부분에서 오류났는데 대소문자 구분이 정말 중요한거같다..... 온갖 css 를 먹여서 아래의 화면까지.. 2020. 1. 5.

티스토리툴바