본문 바로가기

전체 글134

[Flutter] pub.dev 유용한 패키지 목록 유용한 패키지들 정리 (계속 추가해나갈 예정) 유용한 패키지 공유하자 #1. photo_view #1. photo_view - 사진 확대할 때 유용하게 쓰임 - Flutter를위한 간단한 확대 / 축소 가능한 이미지 / 콘텐츠 위젯. - PhotoView를 사용하면 핀치, 회전 및 드래그와 같은 사용자 제스처로 이미지를 확대 / 축소하고 이동할 수 있습니다. - 또한 컨테이너, 텍스트 또는 SVG와 같은 이미지 대신 모든 위젯을 표시 할 수 있습니다. - 사용하기 매우 간단하지만 PhotoView는 옵션과 컨트롤러를 통해 매우 사용자 정의 할 수 있습니다. 2021. 6. 26.
리눅스(CentOS, Ubuntu) 환경에서 루트 권한주는 방법 일반 사용자에 root 권한을 부여하는 방법에 대해 알아보자. 터미널 환경에서 $ 로 시작하면 일반유저이고, # 로 시작하면 관리자 이다. 우리는 $ -> # 로 변경하는 방법에 대해 알아볼 것이다. #1. 사용자 계정 추가하기 #2. sudo vim /etc/sudoers 사용자 추가 #3. sudo vim /etc/passwd 사용자 추가 #4. sudo vim /etc/group 사용자 추가 ubuntu 계정에 root 권한을 부여하는 과정을 기록할 것이다. #1. 사용자 계정 추가하기 - root 권한을 부여할 사용자 계정 추가하기 sudo adduser 사용자계정명 #2. sudo vim /etc/sudoers 사용자 추가 - 이제 관리자 권한 변경을 위한 파일로 접근해보자. sudo vim /.. 2021. 6. 12.
Flutter 문제해결 : Http 통신을 Dio 통신으로 바꾸었을 때의 차이점 Flutter에서 서버에 요청을 날려 json 형식의 데이터로 받아오는데 Http와 Dio 두 가지 통신방법에 따른 차이를 알아보자. 알고 보면 별거 아닌데 모르고 보면 몇 날 며칠을 고생할 수 있는..........나는 실제로 그랬음....... Http로 되어 있는 소스를 Dio 로 변경하려는데 json 데이터 encode, decode는 기존에 많이 쓰는 소스를 가져다 쓰던 편이라 별 생각없이 썼었는데, 그러다보니... 이번 Dio 변경시 많은 시행착오를 겪게 되었다. 나중을 위해 정리해 두겠다. 바로 실습 캡쳐화면을 보겠다. Http로 요청을 날렸을 때와 Dio로 요청을 날렸을 때 json 데이터는 어떤 차이가 있을까? 1. 우선 Http로 리턴받은 데이터의 형식은 아래와 같다. [{"id":"2.. 2021. 6. 12.
VSCode를 이용하여 SSH 접속하기 VSCode를 이용하여 리눅스 서버에 접속하고 직접 파일에 접속해 코딩하는 방법에 대해 알아보자. 어제 AWS Cloud에 가입하고 새로운 인스턴스를 생성하였다. 우분투 OS여서 터미널을 이용한 접속 및 코딩을 vim을 이용하여 해야했기에 다소 불편한 점이 있었는데 VSCode를 이용한 코딩이 가능하다고 해서 설치부터 사용 방법까지 정리해 보고자 한다. #1. Remote Development 설치하기 #2. SSH 연결 설정하기 #3. SSH 연결 및 파일 탐색하기 #1. Remote Development 설치하기 - VSCode > Extensions > Remote Development 검색 및 Install #2. SSH 연결 설정하기 - (Mac) fn + F1 / (Windows) F1 버튼을.. 2021. 6. 12.
AWS 클라우드 개인서버 무료 사용하기 (feat. AWS 프리티어) Docker를 이용해 nginx, php, mariadb 이미지를 만들고 컨테이너를 로컬에서 띄우는 스터디 실습을 해보았다. 이제 로컬이 아닌 클라우드 서버에 띄워보고자 한다. 아마존에서 운영하는 AWS 프리티어 서비스를 이용할 것이고 1년 무료로 사용이 가능하다고 한다. 이제 사이트로 이동해 가입을 먼저 해보자. 클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services 제조 AWS를 활용한 Siemens의 에너지, 의료 서비스, 제조 분야 혁신 Siemens가 AWS를 사용하여 어떻게 문화를 바꾸고 혁신을 장려하며 비즈니스 성과를 창출했는지 알아보세요. 자세히 알아보기 업종 aws.amazon.com 우측 상단 AWS 계정 생성 클릭 이메일 주소, 암호/확인, AWS 계정이름 입.. 2021. 6. 12.
[Flutter] Docker, php, mariaDB를 이용한 서버구성 및 CRUD 구현 - (2) 이전 시간까지 docker, nginx 등에 대해 간단히 알아보았고 php, mariaDB를 이용해 백엔드를 구성하고 Flutter와 연동해보자. Flutter에서 백엔드 DB의 데이터를 불러와 보여주고 기본적인 CRUD 동작을 실습해보자. 이번 시간에는 실제 Flutter 소스를 구현하고 데이터를 DB와 연동하는 부분을 구현해보도록 하겠다. #1. Flutter 화면 구성 #2. php API 파일 구성 #3. 동작 테스트 #1. Flutter 화면 구성 Flutter 프로젝트를 하나 생성해주자. 기존 docker 폴더와 같은 위치에 생성해보겠다. 나는 현재 docker 폴더를 flutter_api_example 하위에 위치하도록 만들었었다. flutter 프로젝트도 생성시 flutter_api_exa.. 2021. 6. 11.
[Flutter] Docker, php, mariaDB를 이용한 서버구성 및 CRUD 구현 - (1) 이전 시간까지 docker, nginx 등에 대해 간단히 알아보았고 php, mariaDB를 이용해 백엔드를 구성하고 Flutter와 연동해보자. Flutter에서 백엔드 DB의 데이터를 불러와 보여주고 기본적인 CRUD 동작을 실습해보자. 그 중 docker 환경설정 및 DB 테이블 생성하는 것까지 진행해보겠다. (다음 편은 flutter와 실제 연동) #1. docker 설치 및 환경설정(docker-compose.yaml, php.ini, nginx.conf 등의 파일 구성) #2. DB 테이블 구성 (student 테이블) #0. 시작 전 최종 구현 화면 설명 - mariaDB에 있는 mydb의 student 테이블에는 id, name, age 3개의 컬럼을 가진 데이터가 있다. 해당 데이터를 C.. 2021. 6. 5.
Docker, nginx, php, mariaDB를 이용한 백엔드 구현 - (2) 웹서버 띄워보기, 명령어 수행 - Nginx 최신버전 이미지를 컨테이너로 실행 - -d 옵션을 주는 경우 Nginx 웹서버가 백그라운드로 실행되며 명령 실행이 종료되어도 웹서버가 계속 실행 중이다. - -p 옵션을 주는 경우 1234:80 으로 한다면 Host OS의 1234번 port를 Guest OS의 80번 port로 연결하라는 것 - --name 옵션을 주는 경우 그 뒤에 붙은 nginx-container 컨테이너 이름으로 생성하는 옵션 - 서버 실행됨을 확인 - 서버가 잘 올라간 것을 확인할 수 있다. - 아래 명령어를 실행해보자. 명령어는 컨테이너의 터미널 창으로 들어가는 것 // nginx-container 컨테이너에 bash를 실행해 터미널 형식으로 접속 % docker exec -it n.. 2021. 6. 2.
Docker, nginx, php, mariaDB를 이용한 백엔드 구현 - (1) 백엔드 구현에 필요한 환경들을 구축하고 내가 개발한 Flutter앱과 연동하는 게시글을 작성해보겠다. 첫 번째로 Docker 설치부터 알아보겠다. docker 설치하기 도커는 셋팅하는 것이 상당히 쉽다고 한다. 도커에 대해 깊이 알려면 공부해야 할 것들이 굉장히 많은데 가장 많이 쓰이지만 간단하게 도커를 이용해 백엔드 환경을 구축하는 방법에 대해 알아보고자 한다. 단, 이 게시글에는 도커에 대한 개념, 지식이 없이 바로 설치/실습으로 간단히 들어가기 때문에 개념에 대해서는 공식 문서나 다른 게시글을 확인하시길 바란다. 나는 이번에 하게 된 스터디에서 매우 훌륭한 강사님께서 직접 지도를 해 주시기에 소중한 가르침을 기록으로 남겨둬야 겠다는 생각이 든다. 늘 Flutter로 앱 화면을 구성하고 Firebas.. 2021. 5. 28.
Flutter 문제해결 : Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema flutter doctor 의 결과 중 android sdk 를 찾지 못했을 때 해결 방법에 대해 알아보자. (feat) Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema 터미널에서 flutter doctor 명령어를 수행했더니 Android toolchain에 문제가 있나보다. 해결방법 : 환경변수 설정을 추가해줘야 한다. // 터미널(mac) 또는 cmd(windows)에서 아래 명령어 입력 flutter config --android-sdk /Users/${Users}/Library/Android/sdk 설치가 되었다면 flutter doctor 실행해보자. 자 명령어를 입력해보자.. 2021. 5. 27.
FVM를 이용한 Flutter 버전 걱정 없이 사용하기 Flutter 2.0이 나온지 2개월이 넘어 가는 시점이다. 나는 아직 Flutter 1.22.6 버전에 머물러 있다. 업데이트 하기가 겁난다랄까... 그런 도중 FVM 이라는 것을 알게되어 내용을 정리하고자 한다. FVM ? Flutter Version Management 플러터의 버전을 관리해주는 것인데, 내 피씨에 여러개의 프로젝트들이 있다면 FVM을 이용해 각 프로젝트마다 다른 Flutter version을 사용할 수 있게 도와준다. 기본 환경 설정은 별거 없다. https://github.com/leoafarias/fvm leoafarias/fvm Flutter Version Management: A simple CLI to manage Flutter SDK versions. - leoafari.. 2021. 5. 24.
Android studio에서 내 아이폰이 감지되지 않는다면? 아래 설정을 터미널에서 수행하고 IDE를 재시작하니 아이폰이 감지되었다. export PATH=$HOME/Library/Android/sdk/platform-tools:$PATH Android studio restart 자, 그래도 되지 않는다면!!!??? iPhone 재부팅 하고 다시 연결해보자! 나는 이렇게 해결 되었다 ^^^^ 2021. 5. 21.
Flutter iOS 푸시 알림(FCM) 이거 보고 바로 설정하자. Flutter 앱개발자를 위한 iOS 푸시 알림 설정하는 방법에 대해 알아보자 Apple Developer 사이트에서 APNs 등록을 위한 Certificate 및 Key 생성하는 방법에 대해 나온다. #1. Apple Developer 사이트 내 App등록/Certificate 생성(CSR 필요) #2. Firebase 프로젝트 설정 (APN 인증키, APN 인증서 업로드) #3. XCode 설정 추가 iOS의 경우 APNs 라는 서비스가 별도로 있다. 만일 Firebase에서 푸시를 날리게 되면 안드로이드의 경우 앱에서 바로 알림이 오지만 iOS의 경우엔 APNs 를 거쳐서 앱으로 알림이 전달되게 된다. 때문에 APNs 를 중간다리로 연결시켜주는 작업이 필요하며 아래의 방법대로 잘만 따라온다면 어려울.. 2021. 5. 11.
머신러닝 개요 머신러닝머신러닝은 데이터와 알고리즘을 기반으로 추론하는 프로그램으로 정의할 수 있다.소프트웨어는 입력이 들어오면 정해진 출력값만 출력해낼 수 있는 결정론적 소프트웨어이다.머신러닝의 발전과 함께 결정론적 소프트웨어가 상용화 되고 있는데,쉬운 예로 얼굴 인식 자동잠금해제, 음석비서, 영화사이트 영화추천 기능 등이 있다.이 것은 입력값이 늘 같은 것이 아니라 머신러닝을 통해 학습해온 데이터를 통해 출력값을 도출해내고 있다. 머신러닝의 추론은 어떤 데이터를 사용하느냐, 어떤 알고리즘을 사용하느냐에 따라 달라질 수 있다. 머신러닝 프로젝트는 크게 문제정의, 데이터 획득, 모델 구현, 검증, 테스트 단계로 진행된다. 문제 정의프로젝트의 목표를 정의하고 그에 따른 계획을 세우는 단계이다. 어떤 데이터를 수집해서 어떤.. 2021. 4. 1.
5분만에 Flutter 앱에 Admob 광고 달기 Flutter 앱 안에 애드몹 광고 달기 admob_flutter 패키지를 이용해 배너광고, 전면광고, 보상형광고 등 앱에 달 수 있는 광고를 달아보자. #1. admob_flutter 패키지 pubspec.yaml 파일에 추가 #2. 애드몹 앱, 광고단위 만들기 #3. Android, iOS 기기별 환경설정 #4. 광고별로 내 앱에 적용하기 #1. admob_flutter 패키지 pubspec.yaml 파일에 추가 - 사용할 패키지를 pub.dev 페이지에 이동해 버전을 확인해주자. 나는 1.0.1 버전으로 추가해주었다. - 프로젝트 내의 pubspec.yaml 파일에 패키지 버전을 포함해 추가한 후 pub get을 실행시키자. #2. 애드몹 앱, 광고단위 만들기 - 애드몹 페이지로 이동하고 로그인하자.. 2021. 3. 30.
Release 버전(.apk)에서 구글 로그인이 되지 않을 때 대처법 Debug 모드에서 테스트할 땐 잘 되던 구글 로그인이 Release를 위해 apk 설치파일로 변환 후 테스트기기에 설치하고 구글 로그인을 했을 때 이상하게 로그인이 되지 않는 현상이 발생했다. 사실 아직도 원천적인 원인을 알아내진 못했으나... 왜냐하면, 여러 앱들을 구글스토어에 배포해보았지만 이런 경우는 처음이었기 때문... 여튼, 본론으로 돌아가서 디버그 모드에서 빌드할 때 잘 되던 구글 로그인이! 스토어 배포를 위해 릴리즈 apk 로 떨궜을 때,(flutter build apk 명령어) 해당 설치파일을 안드로이드 폰에서 설치하고 실행하니 구글 로그인이 전혀 동작하지 않았다. 구글링을 해본 결과 해결책은 아래와 같으니 나와 같이 삽질했던 사람이라면 부디 도움을 얻고 가시길 바란다. 원인 : key... 2021. 3. 25.
3분만에 Flutter 구글/앱스토어 업로드용 앱 아이콘 만들기 아주아주 간단하고 심플하게 스토어에 올릴 앱 아이콘 만들기 따라하면 3분만에 앱 아이콘을 변경할 수 있다. #1. web_hi_res_512.png 대표아이콘 생성하기 #2. flutter_launcher_icons 패키지 추가하기 #3. 단숨에 아이콘 생성하기 #1. web_hi_res_512.png 대표아이콘 생성하기 - App icon 을 생성해주는 아래의 링크로 이동하자. Android Asset Studio - Launcher icon generator romannurik.github.io - 이미지 선택해서 추가하기 - 이미지가 정상적으로 로드된 것을 확인하자. - 우측 상단 다운로드 버튼을 클릭해 아이콘 set 을 저장하자. - 다운로드 받으면 ic_launcher.zip 파일로 받아질 것이.. 2021. 3. 16.
Flutter iOS 애플 로그인 기능(Sign in with apple) 구현하기 오늘의 목표 앱 로그인시 Apple 로그인 기능 구현하기 #1. Firebase Authentication > Apple sign in 활성화하기 #2. Firebase hosting 시작하기 > URL 기억해두기 #3. Flutter 에서 Apple with sign in 코드 작성하기 (낱낱이 파헤쳐보자) iOS앱은 로그인화면에 구글/페이스북/트위터 등 다른 SNS로그인 버튼이 있는데 애플로그인을 추가하지 않으면 앱스토어에 앱을 등록할 수 없다는 정책이 있기 때문에 이번 기회를 계기로 애플 로그인 기능을 추가해보고자 한다. 차근차근 하나하나 따라해보자. #1. Firebase Authentication > Apple sign in 활성화하기 Firebase의 Authentication 플랫폼은 로그인.. 2021. 3. 9.
매우 간단하게 Firebase Hosting 시작하기 Firebase를 이용하면 무료로 Hosting 이 가능하다. 본인의 웹페이지를 만들고 싶거나, 개인정보 처리방침 등의 static한 페이지를 만들거나, 앱에서 애플 로그인을 구현할 때 등 많은 상황에서 호스팅 기능이 필요하다. 아래의 방법대로 아주 간단하게 Firebase 의 hosting 기능을 사용해 보도록 하자. 우선 Firebase 콘솔로 이동하여 Hosting 메뉴를 클릭하자. https://firebase.google.com Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 프로젝트가 없다면 이 참에 하나 생성하자. 프로젝트 생성을 하고 들어가면 왼쪽 메뉴 중 Hostin.. 2021. 3. 9.
아에르 마스크 kf94 강력 추천 KF94 아에르 스탠다드 베이직 마스크 코로나19 사태로 작년부터 올해까지도 여전히 실내외에서 마스크를 필수로 착용해야만 합니다. 장시간 사용해도 귀가 아프지 않고 편안하며 얼굴 전체적으로 덮어주어 실용적인 면에서도 압도적으로 추천할 만한 마스크가 있어 소개 드립니다. 브랜드K 인증완료 (리빙파트 1위 대한민국 국가대표 브랜드 아에르) 사람이 숨쉬는 곳 아에르를 소개해 드립니다. 장시간 사용해도 귀가 아프지 않습니다. 얼굴을 감싸주는 널찍한 디자인을 하고 있는 아에르 마스크 색상도 4가지로 구성되어 스타일에 맞게 선택하면 됩니다. 블랙, 화이트, 베이지, 그레이 아에르는 고성능 필터 원단을 직접 만듭니다. 공기청정기 필터와 산업용 마스크를 이미 공급하고 있는 브랜드이며 분야별 전문가들이 함께 만든 프리미.. 2021. 2. 3.
더예한복 추천 목록 ! 여아한복 계량한복 보고가세요 갓성비 트렌트가 반영된 더예한복의 인기 한복들을 소개해 드립니다. 수많은 한복 업체를 찾아서 비교하고 많은 고민과 탐색 끝에 고른 제 딸의 한복 업체에 대해 정리하였으니 상품평이나 상세정보를 유심히 살펴보신 후에 구매 결정 하는 데에 도움이 되셨으면 좋겠습니다. 딸 아이를 위해 한복을 보고 있는데 수 많은 한복들이 있지만 더예한복이 상당히 고급스럽고, 여성여성한 느낌도 들어서 다른 곳과 다르게 디자인 대비 가격이 좋고 후기도 좋아서 이 곳에서 구매를 하기로 결정했습니다. 사이트에 가서 충분히 고민 해보시고 상품평 등을 보면 디테일한 사진까지 잘 나와 있으니 한복으로 이쁘게 잘 맞춰보세요~ 더예한복 여아용 348 나래색동 한복세트 평점 : ★★★★★ 가격 : 35,100원 [[상세 정보 및 후기 보기 ]].. 2021. 2. 3.
Flutter 앱에서 Firebase 사용 하기 (iOS 편) Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼 Firebase 에서 제공하는 수많은 기능을 통해 사용자의 데이터를 저장하고 분석하며 비즈니스를 성장시킬 수 있다? 잘 이해가 안간다면 우선 뭐든 만들어보고 무엇을 의미했던건지 역추적해보도록 하자. 해당 게시글에서 Firebase 프로젝트를 생성하는 방법에 대해 알아볼 것이다. #1. 구글 로그인 및 Firebase 프로젝트 생성 #2. Flutter 앱 만들기 (Android Studio 기준) #3. Firebase - iOS 플랫폼 추가하기 #1. 구글 로그인 및 Firebase 프로젝트 생성 - Firebase 프로젝트를 생성하기 위해선 일단 본인의 구글 계정으로 로그인이 필요하다. 자.. 2021. 1. 31.
Flutter 앱에서 Firebase 사용 하기 (Android 편) Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼 Firebase 에서 제공하는 수많은 기능을 통해 사용자의 데이터를 저장하고 분석하며 비즈니스를 성장시킬 수 있다? 잘 이해가 안간다면 우선 뭐든 만들어보고 무엇을 의미했던건지 역추적해보도록 하자. 해당 게시글에서 Firebase 프로젝트를 생성하는 방법에 대해 알아볼 것이다. #1. 구글 로그인 및 Firebase 프로젝트 생성 #2. Flutter 앱 만들기 (Android Studio 기준) #3. Firebase - Android 플랫폼 추가하기 #1. 구글 로그인 및 Firebase 프로젝트 생성 - Firebase 프로젝트를 생성하기 위해선 일단 본인의 구글 계정으로 로그인이 필요하.. 2021. 1. 25.
CLLANGEDU화상영어 개발~출시~배포~홍보 트러블슈팅 모음 2020.12.28- 앱의 기능이 아직 제대로 동작하지 않는 것들이 많고.. 구글플레이스토어에 출시한 1.0.0버전을 설치하고 구글/카카오 로그인을 해보지만... 제대로 동작도 하지 않는다. 슬프다.- 구글로그인 이슈는 다행히도 해결되었다. 해결방법 : Firebase > 안드로이드앱에 구글 콘솔에서 얻을 수 있는 앱 배포용 키를 복사해서 넣으니 제대로 동작한다. - 구글콘솔의 앱 서명값을 (배포하게 되면 새로운 앱서명이 되기 때문에) 카카오 측에는 키해시값으로 추가해줘야 카카오 로그인이 정상작동하게 된다. 이를 위해 아래의 명령어로 앱서명값을 키해시로 변경한 후 카카오개발자 측 키해시값 입력란에 추가해주자. 앱서명값 -> 키해시 변경 명령어 : echo SHA-1값(앱서명키) | xxd -r -p | .. 2020. 12. 28.
Vue/Firebase 이용해서 홈페이지 만들기 (11) axios 이용해서 storage에 파일 업/다운로드 하기 오늘의 목표 axios 이용해서 storage에 파일을 업/다운로드 하는 법을 알아보자. #1. axios 설치 및 테스트코드 작성 #2. CORS 정책을 위한 google cloud sdk 설치 및 설정 #1. axios 설치 및 테스트코드 작성 - axios 사용법 . 설치 : yarn add axios . 사용 : import axios from 'axios' - write와 read 버튼 만들어서 제대로 동작하는지 테스트 read write #2. CORS 정책을 위한 google cloud sdk 설치 및 설정 - CORS오류 발생할 것임 : localhost와 실제 도메인이 달라서 오류가 남. . 해결법 : CORS 설정해줘야 함 (google cloud SDK 설치돼야 함 : https://.. 2020. 10. 26.
Vue/Firebase 이용해서 홈페이지 만들기 (10) 게시글 페이징 처리하기 (total count 관리, watch) 오늘의 목표 게시판의 페이징 처리가 되도록 게시글의 total count를 관리하고 페이징 개수별로 처리되도록 해보자. #1. total count 관리를 위한 functions 만들기 (increment / decrement) #2. 페이징 처리를 위한 v-data-table 옵션 셋팅 #3. head, last 이용해서 첫번째, 마지막 게시물 정보 가져오기 #4. startAfter, endBefore 이용해서 전/후 페이지 이동하기 #1. total count 관리를 위한 functions 만들기 (increment / decrement) - 페이징 처리를 하기 위해선 게시글의 총 개수 (total count)가 별도로 관리돼야 한다. 이를 위해 게시글이 생성되거나 삭제될 때 총 개수를 제어하는 f.. 2020. 10. 25.
Vue/Firebase 이용해서 홈페이지 만들기 (9) - Firebase 게시판 실시간 조회로 변경하기 오늘의 목표 게시판을 실시간으로 조회하도록 변경하자. (정적 -> 동적) #1. 기존의 read는 사용하지 않으므로 삭제 #2. subscribe (onSnapshot 구독) / unsubscribe (구독해지) #1. 기존의 read는 사용하지 않으므로 삭제 - 기존의 read는 버튼을 눌러야만 데이터를 가져와서 뿌려주는 방식으로 실시간으로 알아서 읽히도록 (다음에서 좋아요/싫어요 실시간으로 바뀌는 것처럼) read 메소드는 과감히 삭제하자 #2. subscribe (onSnapshot 구독) / unsubscribe (구독해지) - subscribe : 화면이 렌더링되기 전 (created 메소드) firestore의 게시판을 구독하자. (onSnapshot) created () { this.subs.. 2020. 10. 25.
Vue/Firebase 이용해서 홈페이지 만들기 (8) - Firebase 게시판 만들기 (CRUD) 오늘의 목표 Firebase firestore에 게시판 내용을 저장(Create)/조회(Read)/수정(Update)/삭제(Delete) 해보자. #1. Board 페이지 라우터 설정하기 (메뉴에서 눌렀을 때 이동할 수 있도록) #2. 글쓰기를 위한 다이얼로그 띄우기 #3. 버튼 클릭시 Firestore에 동작하도록 구현하기 #4. ㅁㅁㅁ #1. Board 페이지 라우터 설정하기 (메뉴에서 눌렀을 때 이동할 수 있도록) - router/index.js 에 board 경로를 추가하자 - 메뉴에 추가된것 확인 #2. 글쓰기를 위한 다이얼로그 띄우기 - 먼저 저장기능을 해보도록 글쓰기를 누르면 다이얼로그가 뜨고 title과 content를 입력 후 저장누르면 firestore에 저장되도록 구현해보자. boar.. 2020. 10. 25.
Vue/Firebase 이용해서 홈페이지 만들기 (7) - Firebase 관리자 권한 넣기 오늘의 목표 Firebase 내 functions를 사용자만 쓸 수 있도록 설정해보자. #1. 관리자 설정하기 #1. 관리자 설정하기 - functions 환경 설정를 위한 참고문서 : Firebase > docs > Cloud Functions > Write functions > Environment configuration - config 설정해주기 : $ firebase functions:config:set 블라블라(이메일, db_url설정 해줌) - 제대로 설정 되었는지 확인 : $ firebase functions:config:get - 실 사용은 functions.config().admin 의 키를 이용해서 사용한다. 아래는 dbURL과 사용자 저장시 level 설정해줄 때 관리자 이메일인지 .. 2020. 10. 25.
Vue/Firebase 이용해서 홈페이지 만들기 (6) - Firebase Realtime Database Read and Write 오늘의 목표 Firebase Realtime Database에 데이터를 쓰고 읽는 방법을 알아보자. (Read는 on과 once 두 가지 방식이 있다.) #1. firebase 전역에서 쓸 수 있도록 설정하기 #2. Read and Write #1. firebase 전역에서 쓸 수 있도록 설정하기 - firebase.js 파일 생성 후 main.js에 import - firebase를 전역에서 사용하기 위해 firebase.js에 아래의 코드 생성 - config 파일은 firebase 프로젝트에 웹앱 추가하면 관련 snippet을 얻을 수 있다. 이후 프로젝트 최상단에 firebaseConfig.js 파일을 만들고 아래와 같이 설정해주자. (아래 * 표시는 각자 만든 firebase project의 웹.. 2020. 10. 21.

티스토리툴바