프로젝트 세팅 sparta → projects → mars 폴더에서 시작! 폴더 구조 만들기 mars 폴더 마우스 우클릭하여 Directory(경로) 클릭하여 static라는 새 Directory를 만들어주고, 같은 방법으로 templates Directory도 만들어 준다. mars 폴더 마우스 우클릭하여 python 파일 만들기를 선택 후 app.py도 만들어준다. 패키지 설치 좌측 상단 파일을 누르고 설정 python 인터프리터 선택 후 + 클릭 패키지를 검색해서 설치하면 된다. 뼈대 준비하기 app.py 아래 코드 입력하기 더보기 from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/..

Flask 기초 기본 폴더구조 - 항상 이렇게 세팅하고 시작하자! Flask 서버를 만들 때, 항상, 프로젝트 폴더 안에, ㄴstatic 폴더 (이미지, css파일을 넣어둔다) ㄴtemplates 폴더 (html 파일을 넣어둔다) ㄴapp.py 파일 이렇게 세 개를 만들어두고 시작하고 이제 각 폴더의 역할을 알아보자! (꼭 참고!! venv는 실제로는 보이지만, 안 보인다~라고 생각하자!) HTML 파일 불러오기 templates 폴더의 역할을 알아보자! HTML 파일을 담아두고, 불러오는 역할을 한다. 간단한 index.html 파일을 templates 안에 만들어보자. ..

HTML과 mongoDB까지 연동해서 서버를 만들어보자! 한 대의 컴퓨터에 서버도 만들고, 요청도 하는 작업! (클라이언트 = 서버) 이것을 바로 "로컬 개발환경"이라고 하고 그림으로 보면, 아래 그림 참조. 그렇지만 mongoDB Atlas라는 클라우드 서비스를 이용하니, 아래와 같다! 자 그리고 코드 관리를 위해 강의를 시작하면서 처음 만들었던 스파르타 폴더에 projects 폴더를 만들고 그 안에 아래와 같이 다섯 개의 폴더를 만들고 시작하자. prac: flask 연습 코드를 작성한다. mar: 화성 땅 공동구매 관련 코드를 작성한다. movie: 스파르타 피디아 관련 코드를 작성한다. homework: 팬명록 관련 코드를 작성한다. bucket: 버킷리스트 관련 코드를 작성한다. Flask 패키..

어바웃 화면 페이지화 시키고 버튼 추가하기! 지난번 숙제로 만든 AboutPage.js를 아직 우린 스택 내비게이터에 연결하지 않았다. 따라서 여러분이 직접! 스택내비게이터에 AboutPage.js를 달아보자! 하단 메인 페이지의 상단에 다음과 같은 버튼을 만들어서 누르면 AboutPage로 가게끔 해주자! 추가적으로 외부 링크 걸기까지 배웠으니, 인스타나 블로그 주소 혹은 아무 주소를 AboutPage 하단 버튼에 연결해주기! 메인에 TouchableOpacity 버튼을 두고 navigate를 연결시키면 이동이 가능하다. Stack.screen에 AboutPage.js를 연결시켜야 한다. 소개 페이지 상태바의 디테일함을 주목하자! StackNavigator.js(숙제1) 더보기 import React ..

Share 디테일 페이지까지 이동해서 도달했다. 그런데 결과를 친구한테 결과를 공유해주고, 앱 다운로드 주소까지 전달해준다면 만든 앱을 홍보하는 도움이 되겠지? 설치할 라이브러리 없이, react-native에서 기본적으로 제공해주는 공유 기능을 사용한다. import { Share } from "react-native"; 그리고 다음과 같은 공유 버튼을 디테일 페이지 하단에 생성하고 기능을 만들어보자! share 함수를 만들고 거기에 react-native가 기본적으로 제공해주는 Share 함수를 사용하여 간단히 공유를 할 수 있다. DetailPage.js에 아래와 같이 코드를 넣어 주자! 더보기 import React,{useState,useEffect} from 'react'; import { S..

내비게이션이란? 앱에 페이지 개념을 입혀주고, 웹 사이트를 이용하듯, 앱에서 만든 컴포넌트들을 페이 지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리이다. 물론 이것 또한 쉽게 페이징을 도와주는 외부 라이브러리를 가져다가 사용한다. react-navigation 공식문서: https://reactnavigation.org/ React Navigation | React Navigation Routing and navigation for your React Native apps reactnavigation.org 결국 이 라이브러리도 Expo에서 지원하고 있는 도구로써, 앱을 만들기 위해 사용 중인 Expo와 궁합이 아주 잘 맞는다. 앱 내의 페이지 구성 및 이동까지 직접 적용해볼 텐데 이 ..

Expo에서 제공해주는 앱다운 앱 기능들 알아보자! Expo SDK. 일명 Expo에서 제공해주는 앱 기능 도구들을 개발할 때 여기서 확인할 수 있다. 링크: https://docs.expo.dev/versions/v38.0.0/ 필요한 기능들이 있는지 목록을 쭉 보고, 원하는 기능을 선택해서 적용하면 끝! 앱 상태 바(Status Bar) 앱이 앱에 따라 모바일 맨 위 상태 바가 변하는 앱이 있다. 배터리가 충분한지, 몇 시인지 매일 보는 것처럼 이 부분도 처리를 할 수 있다. 그럼 라이브러리 설치를 해보자. vscode에서 터미널 우측 버튼 중에 분할이란 버튼이 있다. 터미널 왼편은 서버를 켜고 끄고를 담당하고(expo start) 터미널 우측은 필요한 라이브러리들을 설치할 때 명령어를 치는 장소로 ..

리액트 네이티브는 리액트(React.js) 라이브러리 기반으로 만들어진 프레임워크이다. 그렇기 때문에 기본적인 구조는 리액트를 닮아 있다. 대표적인 네 가지가 있다. 컴포넌트(Component) : 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분! 상태(State) : 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 그냥 사용할 데이터! 속성(Props) : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달! useEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳! 컴포넌트(Component) 컴포넌트는 UI의 요소, 요소를 재사용 가능한 부분으로 조각내서 운영하는 기법이다. 리액트 기반으로 만들어진 페이스북 웹사이트는..