[이재우] FLASK를 이용하여 회원가입 웹 페이지 만들기

# FLASK
`FLAKS`를 통해서 간단한 회원가입 웹 페이지를 만들어보자. 회원가입 페이지를 만드는 다양한 글들이 존재하지만, 내가 이해한 방식과 나의 철학을 담아서 만들어보려고 한다. 먼저 간단하게 `FLASK`는 꼭 필요한 기능들을 담고 있기 때문에, 마이크로 프레임워크라고 불리기도 한다. 따라서 특별한 도구나 라이브러리 같은것이 필요 없고, 그냥 `FLASK`모듈을 가져오기만 하면 된다.

# 회원가입 웹 페이지
웹페이지의 보여지는 기초를 구성하기위해 `Bootstrap`이라는 [웹사이트](https://getbootstrap.com/)를 사용하였다.

간단히 소개를 하면, 다양하고 간단한 웹 페이지 구성요소들의 예시를 보여주기 때문에 파이썬 외에 아무것도 모르는 나같은 사람이 그저 복붙만 하면 근사한 웹 페이지를 구성할 수 있다. 여기서 우리가 사용할 것은 **checkout**이라는 예시이다. 한 눈에 봐도 우리가 항상 보던 그 회원가입 페이지와 크게 다름이 없다고 생각이 들것이다.

따라서 `Bootstrap`에서 **Example** 소스코드를 다운받게 되면, 다음과 같이 모든 예시의 소스 코드가 담겨져 있다.

지금까지 `Bootstrap`에서 회원가입 웹 페이지를 예쁘게 꾸밀 하나의 템플릿을 정하고 다운받아서 보여지는 웹페이지의 기본을 구성하였다. 이제 본격적으로 `FLASK`를 사용해보자.

# Module
지금부터 모든 작업은 VScode에서 진행이 될 것이다. 회원가입 페이지를 간단히 설명을 하면, 위와 같은 회원가입 페이지에서 개인정보를 입력하면 그 입력한 정보를 데이터 베이스에 담아서 저장을 한다. 따라서 회원가입 페이지를 만들어서, 사용자가 개인정보를 입력하도록 하고, 입력받은 정보들을 다른 데이터베이스에 저장하여 보관하도록 해보자.

코딩을 시작하기 전에, 우선 아래의 두개의 라이브러리를 설치를 해줘야 한다. 나는 이미 설치가 되어 있지만, 설치가 되지 않았다면 얼른 설치를 하기를 바란다.
```py
# 모듈 설치
pip install flask
pip install Flask-SQLAlchemy
pip install flask-migrate
```
먼저 `Sign_in.py`라는 파이썬 파일을 만들어 주었다. 그런 다음 다음과 같이 필요한 라이브러리들을 Import 하였다.

```py
import os # 경로
from flask import Flask, render_template, request, redirect # Flask
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
```

# Code
이제 필요한 모듈을 설치하여, 불러오기 까지 모두 완료 되었다. 그럼 본격적으로 코드작업을 시작해보기로 하자.

## App
```py
# init
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite3'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
```
위는 `Flask`를 사용하기 위한 초기설정이다, 너무 깊이 생각하지 말고 아! 이렇게 시작하는구나 이해하면 좋을듯 하다. 왜 이렇게 시작해야해요? 라고 물으면 사실 나도 대답하기 어렵다. 사람들이 이렇게 쓰고 그저 나는 따라했을 뿐이다. 그래도 여기서 봐야할 부분은 다음과 같다.

* `app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite3'` : 연결할 데이터베이스는 `db.sqlite3`이다. 마찬가지로, `db.sqlite3`가 존재하면 그것에 연결하고 없으면 새로 생성한다.

하지만, 우리는 데이터 베이스를 만들지 않았기 때문에 빈 데이터베이스 파일이 생성될 것이다.

## DB
```py
# DB 초기설정
db = SQLAlchemy(app)

# Table 정의
class Users(db.Model):
__tablename__ = 'Users'
id = db.Column(db.Integer, primary_key=True)
firstname = db.Column(db.String, nullable=False)
lastname = db.Column(db.String, nullable=False)
username = db.Column(db.String, nullable=False)
password = db.Column(db.String, nullable=False)
email = db.Column(db.String)
address = db.Column(db.String, nullable=False)
adresss2 = db.Column(db.String)
country = db.Column(db.String, nullable=False)
state = db.Column(db.String, nullable=False)
zip = db.Column(db.String, nullable=False)

def __repr__(self):
return "< Name {} --- ID {} >".format(self.lastname, self.username)

# DB init
with app.test_request_context():
db.create_all()
```
Flask에서는 따로 SQL query를 사용하지 않고, 위와 같은 `class`를 정의 하여 테이블을 생성할 수 있다.

* `class Users(db.Model):` : User 테이블을 만들겠다.
* `__tablename__ = 'Users'` : 테이블의 이름의 기본값은 모두 소문자인데, 다음과 같이 `User`라고 지정을 해주면 대문자도 테이블이름으로 사용이 가능하다.
* `id = db.Column(db.Integer, primary_key=True)` : 테이블의 특성 중 기본키를 `id`로 설정하고, **INT** 형 데이터를 받을 것이다.
* `firstname = db.Column(db.String, nullable=False)` : 테이블의 `firstname` 특성을 만들것이며, 문자형 데이터를 받을 것이고, 데이터의 값이 비어있으면 안된다.
* `def __repr__(self):` : 테이블에서 데이터를 꺼내왔을 때, 보여지는 표기법을 나타낸다.
* `db.create_all()` : 실제로 데이터 베이스를 생성하고, User 테이블을 만들도록 한다.

이와 같이 SQL query 문법이 아닌, Python 문법을 통하여 query를 실행 할 수 있다. 이를 ORM이라고 부를수 있다.
위와 같이 작성하고 파이썬 파일을 실행하게 되면, 다음과 같이 `db.sqlite3`에서 테이블이 만들어져 있는것을 확인 할 수 있다.

## HTML, CSS
이제 어플리케이션을 설정하고 연결된 데이터베이스 까지 연결하였다. 이번에 우리가 할 작업은, 아까 Bootstrap에서 다운 받아온 `checkout` 템플릿에서 3개의 파일이 옮겨주는 것이다. 일단 파이썬 파일과 같은 폴더로 복사를 해오자. 먼저 `index.html`파일을 확인해보면, 엄청 되게 많이 쓰여 있는데, 위의 `checkout` 예시 사진을 보고 적당하게 바꿔주자. 위의 예시 사진을 보고 *여기를 고치면 이곳에 반영되겠구나*를 생각하면서 알맞게 수정해야 한다. 내가 수정한 방식은 맨 아래에 소스코드로 제공하겠다. 수정을 하였다면, 현재 폴더에 `templates`를 생성하고, `index.html`파일을 넣어두자. 그리고 `static` 폴더를 생성하고, `form-validation.js`와 `form-validation.css` 파일을 넣어두자. 여기서 css파일과 js파일에 대해서 궁금할 수 있는데, 간단한게 좀 더 예쁘게 꾸밀수 있도록 도와준다고 생각하면 편할듯 하다.

> 지금까지 과정을 종합한 최종 VSCode의 모습이다.

추가적으로 `index.html`에 작업을 해야하는 곳이 있다.
1.

아래에 다음으로 수정하자.

```py

```
`Bootstrap` 예시들을 사용하기 위해서는 위의 코드가 꼭 필요하다.

2.

위와 같이 ``로 수정하자.

3.

마지막으로 ``와 같이 수정하자.

2번과 3번의 과정은 `form-validation.css`파일과 `form-validation.js`파일이 있는곳을 알려주고 그 파일을 가져와라는 뜻이 된다.

## Routes
이제 루트를 설정해줘야 한다. 여기서 말하는 루트는 우리가 URL을 주소창에 입력했을 때 그 결과를 어떤 페이지로 보여줄지 설정해주는 것이다. 예를들어, `/` 루트는 인덱스 루트라고 부를 수 있는데, `https:www.xxxx.com/` 처럼 메인 페이지를 의미한다. 또 `/register`는 마찬가지로 `https:www.xxxx.com/register`를 어떤 웹 페이지로 설정할 것인가 정할 수 있다. 복잡해 보이지만, 우리는 하나의 페이지를 만들것이므로 `/`만 설정하여 우리가 원하는 회원가입 페이지를 볼 수 있도록 설정하자.

```py
# `/`
@app.route('/', methods=["GET", "POST"])
def index():
if request.method == "POST":
firstname = request.form['firstname']
lastname = request.form['lastname']
username = request.form['username']
password = request.form['password']
email = request.form['email']
address = request.form['address']
address2 = request.form['address2']
country = request.form['country']
state = request.form['state']
zip = request.form['zip']

new = Users() # new 클래스
new.firstname = firstname
new.lastname = lastname
new.username = username
new.password = password
new.email = email
new.address = address
new.address2 = address2
new.country = country
new.state = state
new.zip = zip

db.session.add(new)
db.session.commit()

return render_template('index.html')
```
* `@app.route('/', methods=["GET", "POST"])` : `https:xxxx.com/` 메인 페이지를 어떻게 보여줄지 정의 하는곳을 만들었다.
`GET`은 우리가 주로 주소창에 URL을 통해서 요청을 하게 되는것이고, `POST` 입력받은 정보를 요청하는것이다.

* `if request.method == "POST":` : 회원가입 페이지에 입력한 값을 가져와야 하기 때문에, 정보 요청 방법이 `POST`이면 이라는 말은 입력받은 정보가 있으면 이라는 뜻과 비슷하게 된다.

* `firstname = request.form['firstname']` : `form`에 작성된 것중에 name이 firstname인 값을 가져오겠다는 뜻이다. `index.html`을 보게되면, 아래의 사진과 같이 `<form>`의 형식으로 되어있는 곳이 있는데 이곳은 대부분 회원가입을 할 때 우리가 입력하게 되는 칸이라는 것을 알 수 있다. 그러면 거기서 작성한 `form`의 값을 가져오는 방법이, `request.form`이다.
<img width="811" alt="스크린샷 2020-11-27 오후 4 30 23" src="https://user-images.githubusercontent.com/70493869/100422544-dbdc2a00-30cd-11eb-8935-ca3400a48bd6.png">

* `new = Users()` : 테이블에 넣을 새로운 Record를 생성하겠다는 뜻이다.

* `new.firstname = firstname` : 새로운 Record의 firstname은 우리가 form에서 가져온 firstname 값으로 설정한다.

* `db.session.add(new)` : 데이터 베이스에 ADD를 한다.

* `db.session.commit()` : 실제로 저장되기 위해서는 꼭 Commit을 해줘야 한다.

* `return render_template('index.html')` : 보여지는 페이지는 `index.html`을 사용한 페이지이다.

## 실행
최종적으로 우리가 만듬 웹 페이지를 확인해보도록 하자.
```py
if __name__ == '__main__':
app.run(debug=True)
```
해당 파이썬 파일을 실행하게 되면 다음과 같은 결과를 확인할 수 있다.

<img width="913" alt="스크린샷 2020-11-27 오후 4 53 38" src="https://user-images.githubusercontent.com/70493869/100424560-1a271880-30d1-11eb-826f-7c339f8ee6ba.png">

`http://127.0.0.1:5000/`를 주소창에 입력하게 되면 우리가 만든 회원가입 페이지를 볼 수 있다.

<img width="2552" alt="스크린샷 2020-11-27 오후 4 59 32" src="https://user-images.githubusercontent.com/70493869/100425221-22cc1e80-30d2-11eb-8103-dcc465c298b7.png">

> 엉성하지만 그럴듯하지 않나...

<img width="2549" alt="스크린샷 2020-11-28 오후 5 08 27" src="https://user-images.githubusercontent.com/70493869/100497073-5e331f80-319c-11eb-8dd3-7e66f7fad43f.png">
> 위의 사진은 css파일과 js파일이 왜 필요한지 나타내준다.

일단 입력을 해보고 그 값들이 잘 연결된 데이터 베이스에 잘 저장이 되는지 확인 해보도록 하자.

<img width="1347" alt="스크린샷 2020-11-27 오후 5 00 46" src="https://user-images.githubusercontent.com/70493869/100425192-1a73e380-30d2-11eb-9d43-04c2e964b2d6.png">

위와 같이 데이터를 입력하고, 우리가 만든 데이터 베이스를 확인 해보니 정상적으로 값이 잘 저장되어 있음을 알 수 있다.

<img width="1273" alt="스크린샷 2020-11-27 오후 4 59 16" src="https://user-images.githubusercontent.com/70493869/100425074-e4cefa80-30d1-11eb-85a9-328db05b22d8.png">

# 결과
지금까지 `Flask`를 통해서 간단한 회원가입 페이지를 만들어 보았다. 조금은, 미숙하지만 나름? 완성도 있다 생각 할 수 있다. Flask를 통해 웹 페이지를 만들고, 데이터 베이스에 연결해서 사용자가 회원가입을 하기위해 작성한 form의 데이터를 저장하도록 해봤다. 이 글을 쓰면서도 여려가지 많이 부족하다 생각이 들지만, 자꾸 보고 연습하다 보면 어느순간에는 이 과정들을 모두 손이 기억하게 되는 날이 오지 않을까 생각한다!!

# [소스코드](https://github.com/jingwoo4710/blog.git)