[Let's TIL✍️] 코딩 18 : 4 Week _ 모바일 청첩장 (2)

 

01. <모바일 청첩장> 방명록 남기는 기능 만들기 (POST)

​

POST(남기는 것) = 코드에게 줘서, 저장하는 것이다.

​

1) VScode로 가서 새로운 주소 만들기

@app.route('/write')

- 이는 달라고만 할 수 있는, 요청 주소가 된다.

@app.route('/write', methods = ["POST"])
def write() :

return ''

- 이렇게 만들어서 뒤에 메서드를 추가하고

write 함수를 만들고 (def) return에는

일단 빈 문자열을 넣어주었다.

​

- 이제 이 안에 들어갈 것은

이름, 그리고 내용을 받아서

Database에 저장하는 코드가 필요하다.

 

그러므로, MongoDB 설정을 해야한다

​

 

 

2) Flask 안에서 몽고 DB를 사용하기 위해 패키지 설치가 필요

TIP🤖  패키지 설치

기존에 사용하던 mongodb 라이브러리 외에 flask에서 몽고DB를 유용하게 사용할 수 있는 패키지를 설치해서 사용

 

터미널을 열어 pip install flask-pymongo 설치

- 설치가 완료되면 코드로 돌아와서 입력

from flask_pymongo import PyMongo

 

== flask_pymongo 아래에 있는 PyMongo 가져오는 코드

TIP🤖  패키지 못찾는 에러 해결하기

에러가 나는 경우, 방금 설치해서 인지가 안되는 것이므로 다시 클릭해서 인지시켜주는 것이다.

​

3) pymongo를 가져왔으니 주소 연결을 해보자

app.config["MONGO_URI"] = "mongodb://localhost:27017/local"

- 이때 맨뒤의 /local이 Database이다. 내가 이 Flask를 이용하면서 몽고DB에 이 database를 사용하겠다는 의미

​

4) 변수(mongo) 만들어서 사용하기

- 이렇게 변수를 만들어 놓으면 이 변수를 이용하여 몽고DB를 연동해서 활용이 가능하다. (컬렉션 사용 등)

​

---------------여기 까지는 database에 저장하기 위한 과정이었다.

​

이제 필요한 것은 입력을 받는 과정!

 

1) flask 뒤에 몇 개를 더 가져와보자

from flask import Flask, render_template, request, redirect

​

-request : 말 그대로 요청으로, 웹사이트를 이용하는 사용자로부터 어떤 요청을 받을 때, 그 요청에 대한 정보를 가지고 있는 변수

이 변수를 통해 받은 값을 우리가 잘 처리한 다음,

- redirect : 이동시키는 것, 우리가 바로 페이지를 보여주지 않고, 글을 쓰고 나면 페이지를 다시 보여주는 것이다.
return redirect('/')

여기에서 작동하게 될 것이다.

​

​

2) Html 코드 행4 에 작성하기

​

2-1) h2 태그를 사용해서 제목 만들기

<h2>방명록 남기기</h2>

 

2-2) 처음 써보는 form 태그 등등..

<form>
<input type = "text" name = "name">
<textarea rows ="3" name ="content"></textarea>
</form>

 

2-3) button 만들기

<button type ="submit">남기기</button>

​

2-4) 이제 form 안에다가 method와 action 작성

<form metohd="POST" action="/write">

​

---

코드 이해

​

form은 html에서 백엔드 (서버)로 data를 전송할 때 사용하는 태그

- 어떤 방식(method)으로 전달 == POST
- 어디에 전달 (action) == 주소 (/write)

 

​input text 는 검색할 때 쓰는 태그 (input type = "text" )

- name = "name" 이름을 입력할 수 있는 창

​

 textarea 는 내용(여러 줄)을 넣는 태그

- rows ="3" 는 3줄짜리

​

button 태그 : type 을 제출 (button type ="submit)

- 보통 form 태그와 같이 사용되는 type이다
- form안에 있는 내용들을 제출하는 기능을 제공한다

 

 

​

3) app.py에서 실행 후 브라우저로 가서 확인하기

확실히 디자인이 필요하다.

또한 redirect는 되는데 저장은 안된다. 이를 저장하는 것도 필요하다.

​

​

---

디자인 입히기 + 저장하는 코드 작성

​

1) data를 저장하는 코드 작성하기

- mongodb를 사용해서 data 저장할 것

​

1-1) 이때 POST를 이용해서 data를 먼저 전달받아야 한다

name = request.form.get('name')

- request가 사용자로부터 전달된 data
- 그안에 form이라는 변수가 있고
- 이 form안에서 꺼내오기(get)
>> name 꺼내기

 

​

1-2) content도 같은 방식으로 꺼내온다

content = request.form.get('content')

​

1-3) mongodb에 저장하기

mongo.db['wedding'].insert_one()

mongo.db 하고 원래는 컬렉션 이름을 쓰는데 현재 지정한 컬렉션이 없으므로 새로 만들어준다.

- 이제 insert_one이라는 함수를 사용하는데, name과 content를 받아서 insert_one에다가 넣으면 된다

 

: 이때 JSON이라는 딕셔너리 형태로 넣기

{ "name" : name,
"content" : content
}

 

이는 POST로 전달된 이 요청 안에 name과 content 값을 변수로 받아서

그 값을 mongo.db wedding collection 안에 추가하는 것이 된다.

​

 

이를 통해 추가가 다 되면 /루트 홈

return redirect('/')

으로 보내는 코드가 완성된 것!

 

1-4) data가 정상적으로 들어오는지 확인

- 프로그램을 재실행 한 다음, 브라우저로 가서 입력
- 몽고 db compass를 열어서 확인
- 몽고 db 커넥션 눌러주기
- 브라우저에 입력한 값이 새로운 컬렉션으로 local에 저장

 

​

그런데 오류 발생 (#Method Not Allowed)

오류가 났을 때는 다른 걸 보는것보다, 개발자도구를 보면 더 빨리 알 수 있다 아주 꿀팁

그런데

브라우저 껐다켜니까 해결되어버렸다 (중간에 method 오타 있어서 html에서 수정)

​

2) 쓰기 부분의 디자인 구성 (html)

 

 

2-1) html에 form 부분에 class를 지정해준다

 

 

= 그러면 그 밑에 태그들에 class를 하위 클래스로 지정하기 쉽기 때문이다

 

2-2) css로 가서, style을 지정해준다

 

 

 

- input 태그에

width : 100%;
border : 0;
background : #fff;
border-radius : 5px;
padding : 5px 10px;

가로를 길게 / 테두리 없애기 / 배경은 흰색 / 테두리 둥글게 / 내부 여백 지정

> 그대로 복붙해서 태그명만 변경(textarea) 했다. 

​

.guestbook textarea {
width : 100%;
border : 0;
background : #fff;
border-radius : 5px;
padding : 5px 10px;
}

 

​

- button 만들기

색 변경은 마우스를 올려놓고 색깔을 클릭하면 알아서 만들어진다. (rgb 함수)

2-3) index(html)로 가서, class 추가하기

TIP🤖 이때 class의 구분은 띄어쓰기를 통해서 하면 된다.

<div class="row guestbook-row">

​

2-4) css로 가서 변경하기

 

 

- 전체 배경 색상 변경

.guestbook-row {
background : rgb(174, 207, 143);
}

 

- 버튼 크기 변경

.guestbook button {
border : 0;
background : rgb(24, 149, 207);
border-radius : 5px;
padding : 10px;
}

 

- 버튼 텍스트 색 변경

.guestbook button {
border : 0;
background : rgb(24, 149, 207);
border-radius : 5px;
padding : 10px;
color : #fff;
}

 

- 폰트 두껍게

font-weight: bold;

 

- input, textarea에 margin 주기

​

​

2-5) 이름과 내용 구분하기 위해 속성값 추가 (html)

- input과 textarea 태그의 placeholder 라는 속성값을 추가

 

 

이제 저장하고 완성본을 브라우저에서 확인!

​

​

---

 

02. <모바일 청첩장> 방명록 목록 만들기 (GET)

​

방명록을 남긴 부분을 볼 수 있게 만들어보자!

그러려면 몽고 DB에서 가져와야 한다. 

​

1) mongodb에서 가지고 오는 코드 작성하기

guestbooks = mongo.db['wedding'].find()

앞에는 변수명(guestbooks), 우리가 아까 만든 컬렉션 wedding에서 가져오는(find) 것이다.

​

2) diff를 전달한것처럼, 똑같이 전달하기

return render_template('index.html', diff=diff, guestbooks=guestbooks)

​

3) 이제 index.html로 넘어와서 보여주는 코드 작성

그런데 여기서도 cursor라는 여러 개의 값이 나오는데,

반복문을 배운 JS도 아니고 Python도 아닌 html에서 어떻게 값을 하나씩 출력할 수 있을까?

 

방법 : python 프로그램에서 제공을 해주는 (해석) 방법 이용

: 이 html도 python 프로그램이 열어서 제공을 해주는 것이기 때문에 가능하다. 

​

{% for gb in guestbooks %}
{{ gb.name }}
{% endfor %}

for in 안에 변수(gb)가 들어가고,
{{ }} 중괄호 두개 이옹해서 값을 출력하고
endfor 를 통해서 태그 닫는 것처럼 닫아준다.

 

 

TIP🤖 templates 코드 안에서 반복문 사용하는 방법

HTML 파일에서 for 문을 쓸 때는 {%for %}와 {% endfor %}를 꼭 쌍으로 함께 입력해야 한다.

​

 

4) 이제 table 태그를 이용해서 방명록처럼 보이게끔 해보자 (form 아래에 작성)

<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

 

​

이렇게 기본 뼈대를 만들고 내용 채우기!

 

 

4-1) 이때 tr 단위에서 반복을 해주어야 하므로 반복문의 위치 변경

중간 출력값은 지우고, tr 위 아래에 넣기

 

= 방명록이 있는 수 만큼

계속 반복해서 tr 태그가 만들어진다.

​

 

 

4-2) 이름과 내용 안에 출력값 태그 넣기

 

이렇게 백엔드 코드를 작성하면,

태그와 같이 반복문을 사용할 수 있게 해준다.

 

>> 페이지에 우리 data를 보여주는게 편리해진다.

 

 

5) css에서 방명록 남기는 부분 꾸미기

​

5-1) table 꾸미기

​

5-2) 각 행별로 꾸미기

​

6) 실제 enter가 enter로 동작하게 만드는 속성값 넣기 (html)

​

6-1) td 중에 내용을 보여주는 태그에 class 부여

 

6-2) styles.css로 넘어와서

공백을 어떤 형태로 처리할 지 : pre (입력한 문자 그대로)

 

재실행 후 브라우저에 가보면 잘 작동된다.

방명록 넣기

 

​

​

​

---

​

​

오늘의 소감 ✍️

처음 청첩장 만드는 과정 자체는 재밌었는데, 과제를 하려니 갑자기 머릿속이 새하얘진다....

차근차근 배웠지만 백지에서 시작하는 건 아직 쉽지 않은 것 같다.

그래도 이전보다 아는 것도 많아지고, 그제의 나보다는 더 나은 사람이 되었다.

​