[스파르타코딩클럽] 웹개발 종합반 4주차 [21.09.27 - 21.10.03]

드디어 프론트엔드와 백엔드를 연결하는 작업을 해본다.

컴퓨터 한 대를 가지고 서버를 만들고, 또 브라우저를 통해 서버에 요청도 해본다. 이것을 로컬 개발환경이라고 한다.

 

프레임워크란 미리 만들어져 있는 편한 코드의 모음이다.

서버에서 프레임워크를 사용하는 이유는 직접 길고 어려운 코드 만들지 않고도 미리 만들어져있는 코드 모음을 통해서 간편하게 서버를 구동할 수 있기 때문이다.

이번 4주차 수업은 프레임워크 중  flask 패키지를 사용하여 진행했다.

서버 파일을 만들 때 파일명은 자유롭게 지을 수 있으나, 통상적으로 flask 서버의 파일명은 app.py라고 짓는다.

우리가 만든 서버가 잘 구동하는지 확인 할 때 크롬에 http://localhost:5000 주소로 접속해서 확인하면 된다. 여기서 주소 각각의 의미는 다음과 같다.

localhost(내가만든 서버)  :  5000(port 즉 문의 의미) : 여기서 포트 번호를 붙이는 것은 앞서 서버 파일명을 짓는 것 처럼 자유이지만, 통상적으로 쓰는 번호를 쓰는 것이 좋다. 즉 대부분 이미 정해져있다는 것이다.

 

앞서 1-3주차 수업 동안 길고 어려운 html의 코드를 작성하는 일은 괴로움의 연속이었다. 그래서 미리 만들어진 여러 패키지를 이용해서 코드를 만들었고 flask 프레임워크 또한 나의 괴로움을 없애줄 역할을 할 것이다.

flask 프레임워크를 사용할 때는 정해진 규칙을 따라줘야 한다. 앞서 다른 패키지들을 사용할 때처럼 폴더의 구성이나 이름과 같은 것들 통상적으로 쓰이는 구조로 사용해야 한다. 

flask 프레임워크의 구조

폴더 중 templates가 중요한데 이 폴더는 html 파일들을 담아두고 불러오는 역할을 한다. 

 

flask 프레임워크

render_templates라는 flask 프레임워크 함수를 이용해서 html 파일을 갖다 붙이기만 하면 바로 브라우저에 보여지게 된다. 이제 길고 긴 html 코드를 직접 입력할 필요는 전혀 없다! 이것이 바로 flask 프레임워크의 위력인 것이다.

 

여기서 잠깐!

왼쪽 이미지의 app.py 파일을 run 해서 localhost:5000 주소로 브라우저에 접속하는 것과 오른쪽 이미지의 크롬 버튼을 통해 브라우저에 접속하는 차이는 무엇일까?

왼쪽은 서버에 요청을 해서 html 파일을 브라우저에 보여주는 것이고, 오른쪽은 그냥 내 컴퓨터 안에 html 파일을 열어보는 것이라고 생각하면 된다. 그렇기 때문에 서버를 만들었을 경우에는 무조건 서버를 거쳐서(요청해서) 브라우저에 접속해야 한다.

 

은행에 창구가 있는 것 처럼 API 라는 창구를 통해서 서버도 클라이언트의 요청을 받는다. API 에는 여러가지 종류가 있지만, 이 수업에서 사용하는 방식은 크게 GET 과 POST 두 가지이다.

 

GET 은 통상적으로 데이터 조회를  요청할 때 (조회 read) 사용한다.

POST 는 통상적으로 데이터를 바꿀 때 (생성create 변경update 삭제delete) 사용한다.

 

클라이언트가 서버에 GET 요청을 할 때는 Ajax를 이용해서 콜을 한다. 

클라이언트의 get 요청

 

 

GET 요청이 들어온 서버의 상황은 다음과 같다.

get 요청이 들어온 서버의 API

앞선 이미지들의 과정을 정리하면 클라이언트가 콘솔창에서 ajax 콜을 해서 GET 요청을 하고 서버가 API 를 통해 클라이언트로부터 받은 GET 요청을 처리를 해서 response 를 주고 다시 클라이언트는 콘솔 로그를 찍어서 확인하고 이 과정의 반복을 의미한다.

 

클라이언트의 POST 요청과 클라의 요청이 들어온 서버의 상황은 앞서 GET 의 방식과 같다.

여기서 만약 클라이언트가 ajax 콜로 요청을 할 때 데이터 타이틀의 이름을 서버의 이름과 달리 입력하면 에러가 나오기 때문에 반드시 동일한 이름을 입력해서 요청을 해야 한다. 

이름 불일치
이름 일치

 

 

API를 만들고 사용하기 전에 4개의 순서대로 진행한다.

1. 클라이언트와 서버 연결 확인

2. 서버 만들기

3. 클라이언트 만들기

4. 완성하기

 

책 리뷰 페이지

이 페이지를 통해서 리뷰를 저장하여 db로 만드는 API를 만들고 사용해 보려고 한다.

 

POST [책 리뷰 데이터 저장]

우선 1. 클라이언트와 서버 연결 확인  은 브라우저가 문제없이 실행되었기 때문에 넘어가고 2. 서버 만들기 는 다음과 같이 진행하면 된다.

북 리뷰 POST API 만들기

만들고자 하는 정보들을 넣어서  API 를 만들면 된다. 여기서 우리는 리뷰 데이터를 저장할 것이기 때문에 이전 3주차에서 배웠던 insert 코드를 불러와서 dict 를 만들어서 넣어주는 작업을 하면  된다.

 

insert 저장 코드 예시

doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

 

이제 서버에서 할 일은 끝났기 때문에 다음 3. 클라이언트 만들기 작업을 진행해야 한다.

클라이언트 ajax 콜해서 서버에 POST 요청

클라이언트에서는 아까 서버에서 받고자하는 db 인 제목 저자 리뷰의 값을 가져와서  Ajax 콜을 통해 보내주는 작업을 진행하면 된다. 

 

마지막으로 4. 완성하기 즉 브라우저를 통해 확인하는 과정을 거치면 완료이다.

 

위의 이미지를 따라 제목, 저자, 리뷰를 입력하고 리뷰작성하기를 클릭했을 때 저장완료라는 alert 가 뜨고, robo 3t 에 입력한 데이터가 잘 들어가 있으면 완성이다.

 

GET [책 리뷰 보여주기]

다시 리마인드해서 위의 post API 요청하고 만들기에서 진행했던 과정과 똑같이 진행해주면 된다.

 

1. 클라이언트와 서버 연결 확인

2. 서버 만들기

3. 클라이언트 만들기

4. 완성하기

 

1. 클라이언트와 서버 연결 확인 은 앞서 했던 과정과 마찬가지로 브라우저가 문제없이 실행되었기 때문에 넘어가고 2. 서버 만들기 는 다음과 같이 진행하면 된다.

북 리뷰 GET API 만들기

만들고자 하는 정보들을 넣어서  API 를 만들면 된다. 여기서 우리는 리뷰 데이터 모두를 불러 올 것이기 때문에 이전 3주차에서 배웠던 find 코드를 가져올 것이다.

 

find 여러개 찾기 코드 예시

same_ages = list(db.users.find({'age':21},{'_id':False}))

 

이제 서버가 수행할 일은 끝났고 3. 클라이언트 만들기 를 진행해야 한다.

* 클라이언트가 가져갈 데이터가 없기 때문에 url 에 넣을 데이터는 없고 response 에서 'all_reviews' 값만 가져오고 콘솔 로그로 확인해보면 위의 오른쪽 이미지와 같이 잘 찍히고 있는 모습을 볼 수 있다.

 

 

* for 문을 통해서 원하는 정보를 찍어주는 것이다. 항상 중간 중간 콘솔 로그 확인하는 것을 잊지말자!

 

for 문 : for (let i = 0; i < 변수.length; i ++){}

 

* 이제 let temp_html = `` 을 통해서 붙여주자! body 에 박스들을 잘 찾아서 확인하며 진행하면 될 것이다. 마지막으로 브라우져에 나오게 할 박스를 찾아서 $('#reviews-box').append(temp_html) 붙여주면 끝!!

 

4. 완성하기 브라우져 하단에 리뷰가 붙은 것을 이미지 순서대로(좌>우) 확인 해서 문제가 없으면 완성이다!

 

 

두 번째 프로젝트인 나홀로 메모장을 진행 해 보았다.

앞서 책 리뷰를 실습하면서 파악했지만, 모든 프로젝트 시작 전에는 반드시 API 설계가 가장 선행 되어야 한다는 것이다.

왜냐하면 개발자가 제공하는 서비스가 어떤 기능이 필요하고 어떤 순서로 구연을 할 것인지 미리 계획하는 것이 중요하기 때문이다.

나홀로 메모장의 경우는 어떤 기능이 필요한지 API  를 설계해 보면 크게 두가지의 기능이 필요한데  우선 첫 번째로 포스팅 박스 안에 아티클 url 과 간단한 코멘트를 서버로 보내주고 서버에서 받은 데이터를 저장하는 것과 두 번째 기능은 브라우져 하단에 전반적인 영화에 대한 내용이 나와있는 카드박스가 나오게하는 기능이 필요하다. 이 카드박스에는 총 다섯 가지의 정보가 있어야하는데 '제목, 설명, URL, 이미지URL, 코멘트' 가 있어야 한다. 이후 서버에서는 앞서 언급한 다섯 가지의 정보를 모두 db 에 저장해야 한다.

 

API 를 설계하여 프로젝트가 시작하기 전에 따로 조각 기능을 통해 테스트를 하는 것이 안전하고 편리할 것이다. 나홀로 메모장 하단에 박스와 같이 url 데이터를 통해 정보를 가져올 경우에는 meta tag 를 이용해서 크롤링하는 것이 효율적이다.

meta tag 는 위의 이미지와 같은 방법으로 찾으면 된다. 콘솔창에 <head></head> 안에서 찾을 수 있다.

meta tag 이용의 예시

위의 이미지는 meta tag 의 예시이고 각각의 명칭은 og:image / og:title / og:description 라고 하고 이것들을 잘 이용해서 크롤링을 하면 우리가 원하는 깔끔한 이미지로 브라우져에 띄울 수 있을 것이다.

 

크롤링은 전 주에 배웠던 bs4 의 코드를 이용해서 하면 된다.

 

import requests
from bs4 import BeautifulSoup

url = 'https://movie.naver.com/movie/bi/mi/basic.nhn?code=171539'

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url,headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

 

크롬 콘솔창에 나와있는 meta tag 의 순서와 파이썬에 나와있는 코드의 순서가 다르기 때문에 bs4 의 새로운 사용 방법으로 위 이미지와 같이 meta tag 를 복사해 오면 원하는 데이터를 얻을 수 있다.

 

나홀로메모장 또한 위에 북 리뷰와 같은 방법으로  POST 부터 진행면 다음과 같다.

> 일단 1) 포스팅API, 리스팅API 두가지를 만들어 볼텐데 아래의 순서대로 진행하면 된다.

1. 클라이언트와 서버 연결 확인

2. 서버 만들기

3. 클라이언트 만들기

4. 완성하기

 

POST [나홀로메모장 메모하기]

브라우져 상 포스팅박스 

 

우선 처음 할 일은 위에 이미지 속 빨간 박스 안에 아티클 URL 과 간단한 코멘트라는 db 가 생성될 것이기 때문에  POST 요청으로 받을 준비를 해야한다.

1. 클라이언트와 서버 연결 확인 이후 2. 서버 만들기 를 진행해서 POST API 에 들어갈 데이터를 구축한다. 이때 우리는 아까 받은 아티클url 과 코멘트 db를 받아야 하기 때문에 저번 3주차에 배웠던 insert 코드를 가지고 와서 딕셔너리르 만들어서 API 를 만든다. 서버의 할 일 이 끝나고 이제 3. 클라이언트 만들기 를 진행해 줄건데 아티클 url 과 코멘트 데이터를 받고난 후 저장완료라는 alert 를 뛰어줄 것이기 때문에 Ajax 콜을 통해서 보내주는 작업을 하면 된다. 여기서 아티클 url 과 코멘트에 맞는 id 값을 <body></body>에서 잘 찾아서 함수에 넣어줘야 한다. 만약 id 값이 없을 시 직접 id 값을 생성하는 것도 방법이다.

 

http://localhost:5000 페이지에 기사저장 박스 클릭 후 저장완료 alert 가 나오면 일단 서버와 클라이언트 모두가 잘 돌아가고 있는 것이고, 마지막으로 4. 완성하기 robo 3t 에 입력한 데이터가 잘 들어왔는지 확인하면 post 부분은 완성이다.

 

GET [나홀로메모장 보여주기]

1. 클라이언트와 서버 연결 확인

2. 서버 만들기

3. 클라이언트 만들기

4. 완성하기

 

계속해서 서버와 클라이언트의 핑퐁에 익숙해지기 위해서 4단계의 순서를 앞에 붙이고 일지 작성을 하고 있다. 앞서 진행한 post 데이터 만들기와 마찬가지로 진행해주면된다. 

1. 클라이언트와 서버 연결 확인 은 이미 앞서 post 데이터를 만들면서 이미 확인했기 때문에 넘어가고 바로 2. 서버 만들기 를 진행한다. get 에서는 클라이언트로 부터 받을 데이터가 따로 없고 모든 기사를 보여줄 것이기 때문에 db 코드에서 find 코드를 불러와서 모든 기사 데이터를 조회하고, articles 키 값으로 모든 기사의 정보를 보내준다.(좌측이미지 참고) 이제 API 는 다 만들었고, GET API 에 사용할 

3. 클라이언트 만들기 를 바로 진행한다. 메모를 작성하기 위해서 서버에게 줘야하는 정보는 없다. 조건없이 모든 메모를 올 것이기 때문에 앞서 진행한 북 리뷰에서와 같이 진행해주면 될 것이다. /memo에 GET 방식으로 메모 정보 요청하고 articles로 메모 정보 받고, makeCard 함수를 이용해서 카드 HTML 붙이면 끝이다.

 

마지막으로 4. 완성하기 를 하기 전 새로 붙는 박스들만 브라우져에 띄우기 위해서, 원래 있던 카드 박스들을 다 없애주고(위 이미지 좌측처럼) 브라우져 확인(우측 이미지) 하면 나홀로메모장 완성이다.

 

이번 4주차 미션들은 나에게는 엄청난 고난의 연속이었다. 우선 바뀐 하드웨어 적응과(7살먹은 나의 gram을 보내주고 첫 맥북 air를 맞이했다.) 너무 어려운 서버와 클라이언트의 핑퐁.... 하아 무튼 2회독 하고 앞으로 몇 회독 더 필요할 듯 하다. 우선 숙제도 어찌저찌 마치기는 했는데..

 

나 개발자 될 수 있을까....? ㅠ.ㅠ 일단 열심히는 할께 태현아 제발 버텨줘!!!!!!!!