구름 IDE로
html, css, js 파일 생성
Flask를 이용하여 서버 구동, html, css, js 파일 연결
Firebase realtime 데이터베이스
사용하는 방법을 설명하고자 한다.
📍Groomide 시작하기
구름 IDE는 웹 기반 클라우드 통합 개발 환경으로 다양한 프로그램 언어와 개발 소프트웨어를 지원한다.
구름 IDE: https://ide.goorm.io/
먼저, 사이트에 접속해 회원가입을 한다.
회원가입 후 로그인을 하게 되면 다음과 같은 화면을 볼 수 있다.
오른쪽 상단의 새 컨테이너 버튼을 눌러 컨테이너 생성을 먼저 해준다.
필요한 정보들을 체크한 뒤 오른쪽 하단의 생성하기 버튼을 누르면 된다. 작성자는 웹페이지의 뼈대를 먼저 만들고자 HTML/CSS/JS를 선택했다.
생성하기를 누르면 새로운 컨테이너가 생긴다.
새로운 파일을 생성하고 싶다면 위쪽의 [파일]탭을 눌러 새 파일을 만들거나 오른쪽 마우스 클릭으로 새 파일을 만든 뒤 확장자명을 원하는 형식으로 작성하면 된다.
왼쪽에서 html파일과 css파일이 생성된 것을 확인할 수 있다.
📍Groomide로 Flask
다음은 구름에서 Flask를 사용하는 방법이다.
앞에서 만든 컨테이너 외에 추가로 컨테이너가 필요하다.
새 컨테이너 버튼을 누른다음 이번에는 소프트웨어 스택을 Flask로 설정한다.
컨테이너를 실행 시킨 뒤 먼저 해 줘야 하는 것은 포트를 설정하는 것이다. [프로젝트] 탭에서 실행URL과 포트를 클릭하면
다음으로 해야하는 것은 flask 프로젝트의 구조를 만드는 것이다.
flask의 구조는 다음과 같다.
정리하면 다음과 같다.
정리가 끝나면 URL을 실행하기 위한 연결을 한다.
<application.py> 파일에서
port=int(sys.argv[1])위 부분을 삭제하고
아래의 코드를 추가한다.
debug=True
다음 화면 오른쪽 상단에 위치한 실행버튼을 눌러 실행시키거나 아래의 명령어로 실행가능하다.
python3 application.py
아래와 같이 구동되는 것을 확인할 수 있고 해당 링크로 접속하면 된다.
서버가 구동되는 것을 확인한 후 html 파일을 연결해준다.
파일에서 기존의 코드에서 render_template을 추가하고 파일을 연결한다.
from flask import Flask, render_template
import sys
application = Flask(__name__)
@application.route("/")
def hello():
return render_template("index.html")
css 파일과 js 파일을 html파일에 연결하는 방법은 다음과 같다.
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<script src="{{ url_for('static', filename='index.js') }}" defer></script>
</head>📍FireBase Realtime Database
다음은 데이터베이스로 firebase realtime database를 사용하는 방법이다.
먼저, 구름 IDE의 터미널 창에서 다음을 입력하여 pyrebase를 설치한다.
pip3 install pyrebase --use-feature=2020-resolver
다음으로 실시간 데이터베이스 사용을 위해 authentication 폴더를 만든다.
그럼 이제 파이어베이스 사이트로 가서 실시간 데이터베이스 프로젝트를 생성한다.
파이어베이스: https://firebase.google.com/?hl=ko
시작버튼을 누르면 프로젝트 만들기 버튼이 보인다.
프로젝트 이름을 작성하고
이후 나오는 페이지에서 필요한 체크버튼에서 모두 체크를 해주면
실시간 데이터베이스를 사용할 것이므로 왼쪽 빌드 탭에서 Realtime Database를 찾으면 된다.
설정이 끝나면 프로젝트의 첫 화면으로 돌아가서 앱등록을 한다.
위와 같은 모양의 버튼을 눌러 웹의 경우 앱등록을 한다.
그럼 다음과 같은 코드를 얻을 수 있고
{
"apiKey": " ",
"authDomain": " ",
"databaseURL": " ",
"projectId": " ",
"storageBucket": " ",
"messagingSenderId": " ",
"appId": " ",
"measurementId": " "
}데이터베이스를 연결한 파일 구조는 이렇게 된다.
마지막으로 덧붙이자면 구름 IDE의 장점은 따로 PC에 개발환경을 설정할 필요없이 어디서든 구름에만 접속하면 작업을 할 수 있다는 점인 것 같다.
다만, css 반영 속도가 느리거나 깨지는 경우가 꽤나 자주 있었다는 점을 참고하면 좋을 것 같다.
https://help.goorm.io/ko/goormide/01.introduction
구름 IDE 사용과 관련해 보다 자세한 가이드라인은 위 사이트에서 확인할 수 있다.
