개발 일지✨

Google Cloud Platform(GCP)를 이용해 Google App Engine 배포하기

미니 프로젝트에서 Google App Engine으로 배포를 하였는데 이 과정에 대해서 정리해두려고 작성해보았다. 처음 다뤄보는 것인데 이 GCP App Engine 방법은 AWS의 Elastic Beanstalk과 동일하다고 한다. 진행하면서 Google Cloud App Engine 문서도 같이 참고하면서 보면 좋을 것 같다. App Engine 문서 | Google Cloud Google 인프라에서 웹 애플리케이션을 빌드하고 호스팅할 수 있습니다. cloud.google.com 프로젝트 생성 먼저 Google Cloud Platform 으로 들어가서 프로젝트를 하나 생성해준다. 프로젝트를 생성한 후 해당 프로젝트를 선택하고 왼쪽 메뉴에서 App Engine을 선택한다. 만약에 보이지 않는다면 메뉴 ..

로컬서버(local), 개발서버(dev), 스테이지서버(stg), 운영서버(prod)란?

출처 로컬서버(local), 개발서버(DEV), 스테이지서버(STG), 운영서버(PROD)란? 프로젝트를 수행하는데 있어서 서버는 여러 개를 구동을 한다. 그 중에서도, 로컬서버(local), 개발서버(DEV), 스테이지서버(STG), 운영서버(PROD)에 대해 글을 작성한다. 로컬 서버(Local Server) 로컬 서 yongku.tistory.com 프로젝트를 수행할 때 서버를 여러 개를 구동한다. 그 중에서도 로컬서버, 개발서버, 스테이지서버, 운영서버에 대해서 헷갈리는 점들을 기억하기 위해서 위의 블로그 글을 가져왔다. 로컬 서버(Local Server) 로컬 서버는 개발자들이 처음으로 실행시키는 서버라고 할 수 있다. 흔히 말하는 http://localhost:~ 으로 접속하여 우리가 개발하는..

앱개발 4주차 과제

구현해야할 기능과 가이드 1. LikePage 에 찜 데이터 모두 보여주기 LikePage 를 숙제로 구현 완료했다면, 찜 구현을 통해 저장한 찜 데이터 목록을 가져올 수 있다. firebase_db.ref('/tip').once('value').then((snapshot) => { console.log("파이어베이스에서 데이터 가져왔습니다!!") let tip = snapshot.val(); }) 파이어베이스에서 데이터를 가져올 때 이런식으로 가져왔었다. 이제 찜한 데이터를 LikePage 에서 보여려고 한다면 /tip 부분이 /like 가 되어야 한다. 그리고 /like/userUniqueId 가 되어야 한다. 사용자마다 다르기 때문에! 2. 찜한 데이터가 없을 때 조회하려는 에러 처리 데이터가 없는..

앱개발 4주차

개요 서버를 만드는 일은 쉬운일이 아니다. 이 서버를 대신 만들어 놓고 데이터 생성, 조회, 삭제/수정 등 기능을 제공해주는 서비스들이 있다. 이를 서버리스 라고 부른다! 서버에서 주는 데이터 형식은 JSON으로 되어 있다. 앱 화면에서 전달받은 데이터를 준비하는 시점은 앱 화면이 그려진 다음에 서버측에서 제공해주는 API를 이용해 필요한 데이터를 준비한다. 👉 useEffect 날씨 API 날씨데이터를 제공해주는 openweathermap api를 사용해보자. API를 통해 날씨 데이터를 가져올 때 필요한 것 현재 위치(좌표) 데이터 위치 데이터를 이용해 현재 위치 날씨 데이터 가져오기 앱 위치 정보 권한 설정 (expo-location) 🛠 expo-location 공식 문서 Expo에서 현재 위치 ..

앱개발 3주차 과제

- 2주차에 만들었던 AboutPage 를 MainPage 에 연결시키고, AboutPage 에는 인스타나 블로그 주소 혹은 아무 주소를 하단 버튼에 연결시켜주자. - 꿀팁 찜 페이지(LikePage) 화면을 만들어주자. - 아직은 기존의 데이터와 연결시키는 것이 아니라, 기본 데이터를 가지고 화면을 그려보자. 가이드 메인에 TouchableOpacity 버튼을 두고 navigate 를 연결시켜서 이동시켜주자 Stack.Screen 에 AboutPage.js 를 연결시켜야 한다. AboutPage 상단바는 흰색이다. 메인 페이지에 위치해있던 꿀팁 찜 카테고리에 꿀팁 찜 페이지를 연결시켜주자. 찜 목록에 있는 카드도 컴포넌트(LikeCard)로 분리해서 만들자. → 찜 삭제 버튼 추가 LikeCard 에서..

앱개발 3주차

복습 👉 내가 작성한 코드 import React from "react"; import { StyleSheet, Text, View, Image, TouchableOpacity, SafeAreaView, } from "react-native"; export default function DetailPage() { const tip = { idx: 9, category: "재테크", title: "렌탈 서비스 금액 비교해보기", image: "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png", desc: "요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌..

앱개발 2주차 과제

기존에 만들었던 나만의 꿀팁 페이지는 MainPage.js 로 따로 빼서 Pages 폴더에 각 페이지들을 분리해서 렌더링할 수 있도록 준비한다. 그러면 App.js 에서 렌더링 하고자 하는 페이지를 pages 에서 골라서 import 해와서 렌더링 할 수 있다. 구현 import React from "react"; import { StyleSheet, Text, View, Image, TouchableOpacity, SafeAreaView, } from "react-native"; export default function AboutPage() { return ( HI! 스파르타코딩 앱개발 반에 오신 것을 환영합니다 많은 내용을 간결하게 담아내려 노력했습니다! 꼭 완주 하셔서 꼭 여러분것으로 만들어가시길..

앱개발 2주차

Expo 시작 설치 Expo 설치 전 설치되어 있어야 하는 것: Node & NPM 필수! +) yarn Expo 를 이용하기 위한 명령어 도구를 설치해준다. npm install -g expo-cli 컴퓨터에 Expo 를 설치해주었다면 개발한 앱을 바로 확인할수 있는 클라이언트 앱 Expo 를 핸드폰에도 받아둔다. 핸드폰에도 설치가 되었다면 Expo 계정을 만들어주자. (가입 링크) 이제 계정도 만들어주었다면 로컬에 Expo 계정을 세팅해보자! 이것도 터미널/cmd 창에서 입력해주면 된다. expo login ... expo 이메일(또는 아이디), 패스워드 입력란이 차례로 나오고, 차례대로 입력하면 로그인 성공! 생성 로그인까지 해주었다면 expo 명령어를 입력해보자. expo 시작하기 프로젝트 폴더에..

3주차 퀴즈 핑하면 퐁하기!

3주차 내용을 기반으로 핑을 입력하면 퐁하고 alert 를 띄우도록 만들어보자. mock api 만들기 : ~~번 포트로 API 요청을 보내기 위해 버튼 만들기 fetch 나 axios 로 "http://localhost:5001/ping" 으로 get 요청하기 버튼 눌러서 확인하기 db.json { "ping": { "answer": "pong" } } App.js import React from "react"; import axios from "axios"; function App() { const callSomethingAxios = () => { axios({ method: "get", url: "http://localhost:5001/ping", }).then((response) => { let..

리액트 2주차 과제

기능 1주차에서 만들었던 TIL 리스트를 TIL을 추가하는 /write 화면과 TIL 리스트가 보여지는 메인화면으로 나누어서 구현해보자. 이 때 /write 추가하기를 누르면 / 에도 추가되도록 리덕스로 붙여넣는다. / 에서 추가를 누르면 /write 으로 이동되도록 만든다. 구현 index.js에서 BrowserRouter 를 불러와서 App 컴포넌트를 감싸준다. import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); App.js에서 경로에 따라 보여질 화면을 라우팅 처리해준다. import { Routes, Route }..

리액트 심화 2주차

Hook 16.8 버전부터 새로 추가된 기능으로, 함수형 컴포넌트에서도 상태값을 관리하거나 그 밖의 여러 리액트 기능을 사용할 수 있게 하기 위해 만들어졌다. 규칙 1. 오직 함수형 컴포넌트에서만 쓸 수 있다. 👉 정확히는 React Function 내에서만! (리액트 함수는 리액트의 규칙을 따르는 함수 정도로 생각) 2. 컴포넌트의 최상위에서만 호출할 수 있다. 👉 반복문, 중첩문 내에서는 호출할 수 없다. 반복문, 중첩문 내에서 훅을 호춯하게 될 경우, 컴포넌트가 렌더링할 때 훅의 실행순서를 늘 동일하게 보장해줄수 없기 때문이다. (= 여기서 말하는 최상위는 return 되기 이전을 말한다. 물론, 반복문/중첩문도 포함되지X ) function App() { // 최상위 위치 const [text, ..

앱개발 1주차

앱 개발을 하려면 안드로이드는 Java & Kotlin 이라는 기술로 개발이 가능하고, iOS는 Swift 라는 기술로 개발이 가능하다. 안드로이드, iOS 각각 개발하는 것 👉 네이티브 앱 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 것 👉 하이브리드 앱 네이티브 앱과 하이브리드 앱의 장점을 모아둔 것 👉 크로스 플랫폼 앱 리액트 네이티브(React-Native) 페이스북에서 만들고 지원하고 있으며, UI를 만드는데 특화되어 있는 리액트 라이브러리/프레임워크 기반으로 앱을 제작하는 기술이다. 리액트 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발이 가능하다. 필수 프로그램 안드로이드 앱을 배포하기 위해 필요한 안드로이드 스튜디오 iOS 앱을 마켓에 배포하기 위해 필요한..