프로그래밍/front end 프론트 엔드16 react native로 todo app 만들기 1. project 생성 2. git 연결 - 상단 바 색상 변경 - 가로세로 폭이 휴대폰폭만큼 있고 추가 margin을 줄 경우 import Dimensions 해주고 const { height, width } = Dimensions.get("window"); 후에 style에서 width : width - 25 등으로 적용 - 사각형 넣을 때 모서리 둥글게 borderTopLeftRadius: 10, borderTopRightRadius: 10 - 그림자 넣기 iOS : shadowRadius: 5, shadowColor : "rgb(50, 50, 50)", shadowOpacity: 0.5, shadowOffset: { height: -1, width: 0 } Android: elevation : .. 2021. 7. 13. 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. Vue/Firebase 이용해서 홈페이지 만들기 (5) - Firebase 프로젝트 생성 및 연결하기 오늘의 목표 Firebase 프로젝트를 생성하고 내가 작업하고 있는 vue 프로젝트와 연결해보자. #1. firebase 프로젝트 중 web 어플리케이션 생성 #2. vscode에서 firebase-tools 설치 #3. firebase login #4. firebase init #1. firebase 프로젝트 중 web 어플리케이션 생성 - 기존에 앱을 만들때 만든 프로젝트에 android, ios만 연결해주었고 이제 web을 추가로 생성해보자. #2. vscode에서 firebase-tools 설치 - vscode를 열고 아래의 명령어를 실행해서 firebase-tools를 설치하자. sudo npm install -g firebase-tools (mac 기준이고 windows 사용자라면 앞에 sud.. 2020. 10. 20. Vue/Firebase 이용해서 홈페이지 만들기 (4) - Component 만들기 오늘의 목표 앞서 복잡한 App.vue 파일의 코드들을 여러개의 Component로 나누고 보다 가독성이 좋은 코드로 변경해보자. #1. Component용 vue 파일 생성하기 #2. Component를 가져다 사용하기 (import, components에 추가, 해당 component 사용하기) #1. Component용 vue 파일 생성하기 - 아래의 기존 소스에서 title 부분을 별도의 vue 파일을 생성하고 옮겨보자. - components 폴더에 title.vue 파일 생성 후 위 코드를 옮기자. 여기서 주의해야 할 것은, 하나의 component는 하나의 태그로 구성돼야 하고, 반드시 template으로 감싸줘야 한다. #2. Component를 가져다 사용하기 (import, compon.. 2020. 10. 13. Vue/Firebase 이용해서 홈페이지 만들기 (3) - Navigation drawers 만들기 오늘의 목표 Navigation drawers에 대해 알아보고 내 홈페이지에 추가해보자. #1. Navigation drawers란? - 앱에서 좌측 상단에 나오는 버튼을 이용하여 홈페이지의 곳곳을 이동할 수 있게 도와주는 역할을 한다. - 아래의 사이트로 접속하여 Navigation drawers에 대한 예제코드를 살펴보면 도움이 될 것이다. Navigation drawer component The navigation drawer component contains internal navigation links for an application and can be permanently on-scre... vuetifyjs.com - 위 사이트에 나온 예제의 소스를 참고하여 작성한 것이니 직접 타이핑하거나.. 2020. 10. 13. Vue/Firebase 이용해서 홈페이지 만들기 (2) - Vuetify 추가, app bar/footer 만들기 오늘의 목표 Vuetify css framework 추가한 후 기본적인 홈페이지 틀에 대해 익혀보자. #1. Vuetify 추가하기 #2. app bar, footer 셋팅하기 #1. Vuetify 추가하기 - 프로젝트가 있는 폴더에서 터미널을 열어 vue add vuetify 명령어를 실행시키자. 옵션은 아래와 같이 선택하였다. - 다시 서버를 띄우고 (npm run serve) 로컬서버에 접속해보았다. - 이제 Vuetify에서 미리 구현된 버튼, 앱바, 툴바, 네비게이션 등의 여러 기능을 가져다 쓸 수 있게 되었다. #2. app bar, footer 셋팅하기 - app bar 추가하기 : vuetify에서 v-app-bar-nav-icon은 좌측 상단의 네비게이션을 위한 아이콘이다. 아래와 같이 .. 2020. 10. 13. Vue/Firebase 이용해서 홈페이지 만들기 (1) - 개발환경셋팅, Vue프로젝트 생성 오늘의 목표 Vue 사용을 위한 개발환경 셋팅 후 첫 Vue 프로젝트를 만들어 서버를 띄우고 접속해보자. #1. 개발환경 셋팅 (npm, vue cli, vscode) #2. vue 프로젝트 생성 #1. 개발환경 셋팅 (npm, vue cli, vscode) - npm 설치 (google 에서 node.js 검색 후 나오는 홈페이지에서 설치파일을 받아 설치하자.) - vue cli 설치 : npm install -g @vue/cli - vscode : google에서 vscode 검색 후 나오는 홈페이지에서 다운로드 받고 설치하자 (실제 개발에 필요한 에디터) * 유용하게 쓰이는 extension : vuetify(vue 라이브러리), ESLint(자동 문법체크), vetur(소스에 색상 표시) #2. .. 2020. 10. 7. 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. reactJS 로 영화목록 웹사이트 만들어보기 (1) - React 기초 #만들어 볼 것 : 영화 리스트, 추천, 별점 등의 정보가 있는 웹사이트 - api : yts api (영화와 관련된 정보 가져다 쓸 수 있는 API) - 리액트를 써서 자바스크립트로 변환해주는 웹팩 (리액트 코드를 브라우저가 이해할 수 있게 변경해주는)을 사용 예정 - 웹팩 이용해서 최근 자바스크립트를 브라우저가 이해할 수 있게 변경해줘야 함 #시작 1. create-react-app 설치 : npm install create-react-app 2. 프로젝트 생성 : create_react_app movie_app 3. movie_app 폴더로 이동 : cd movie_app 4. 서버 띄우기 : yarn start 5. vscode에서 movie_app 열기 6. 소스코드를 한 번 변경해보자. 리액트.. 2020. 1. 2. 이전 1 다음
