들어가며

웹개발 2회차를 돌리면서 가장 재밌었던 것. 역시 내 사이트 만들기였던 거 같다... 그리고 느낀 거. 할 줄 아는 것에 한계가 있어서 사이트 상상도에도 한계가 있다. 흠... 당연히 여기에 뭔가를 더 추가하면 좋겠다 하는 생각은 들지만 웹개발 종합반을 들으면서 배운 파이썬과 자바스크립트만으로는 한계가 있었다. 6시간가량의 수업으로 당연히 뛰어난 코드천재가 되기는 힘들겠으나. 사실 내가 비범하지 않음을 받아들이는 과정은 한번씩 거쳐야 하는 관문 같다. 뭔가를 처음 시도해볼 때마다 사실 내가 이걸 엄청 잘하게 되는 건 아닐까? 이게 내 '적성'이 아닐까? 생각하지만 이건 정말 날로 먹겠다는 심보고 뭐든지 노력한 만큼 시간이 쌓여야 결과가 돌아온다. 어쨌든, 웹개발 종합반에서는 당연하게도 주어진 숙제가 있었는데 사이트 작성부터 발행까지의 단계가 매주 숙제였다. 결과물부터 보자.

만든 것

1. Mitski Fan Board (미츠키 팬명록)

1) 타이틀 이미지 삽입

2) 웹폰트 설정

3) api 이용하여 현재 온도 삽입

4) 부트스트랩을 이용하여 포스트박스 구현

5) flask 이용하여 api 만들기, html로 클라이언트 만들기

6) 입력값을 포스팅, DB Cloud에 저장

7) DB Cloud에 저장되어 있는 정보 리스트를 불러와 차례대로 보여주기

8) AWS 서버 구매, flask 서버 실행 도메인 연결, og 태그까지 완성

2. Space Voyage 999 (우주 항해 999) (1회차와 달리 추가된 기능 밑줄 표시)

1) 타이틀 이미지 삽입 

2) 본문 내에서 타이틀과 본문 분리, 서로 이미지 달리 삽입

3) 3가지 종류의 웹폰트 사용, 하나로 통일하는 것이 아니라 각 기능과 스타일에 맞게 변화를 줌

4) api 이용하여 현재 온도 삽입

5) 부트스트랩을 이용하여 포스트박스 구현

6) Jquery 사용하여 포스트박스 hide와 show 구현

7) flask 이용하여 api 만들기, html로 클라이언트 만들기

8) 입력값을 포스팅, DB Cloud에 저장

9) DB Cloud에 저장되어 있는 정보 리스트를 불러와 차례대로 보여주기

10) AWS 서버 구매, flask 서버 실행 도메인 연결, og 태그까지 완성

1회차에서는 수업에서 만들라고 한 대로 팬명록을 만들었고, 2회차에서는 팬명록 페이지를 굳이 재차 만들 필요가 없었기에 우주 여행 컨셉으로 사이트를 만들었다. 다운로드 받은 폰트를 사용하고 싶었으나 아마 경로를 지정하는 것에 내가 익숙하지 않았는지(@font-face 시도해봄) 기능이 구현되지 않았고 다른 개발자 친구들에게 물어봐서 해결하려고 한다. 일단 웹폰트로 지정해두었다(사실은 타이틀의 폰트를 픽셀 아트 폰트로 하고 싶었다). 여행 컨셉이기 때문에 출발지와 도착지를 input값으로 받으려고 했는데 다들 편지 쓰듯이 누구가 누구에게. 이런 식으로 쓰고 있다. 딱히 틀린 기능 같지 않아서 프롬-투를 굳이 다른 것으로 바꾸지는 않았다. 

처음에 구현하고 싶었던 기능 중 하지 못한 것은 다음과 같다.

1) 항해 컨셉에 맞게 출발지와 도착지의 값을 받아 항해 소요 시간 띄우기(항공 정보 api를 이용해 소요되는 시간의 1/2를 하고 싶었는데(왜냐면 우주 여행이니까 당연히 현 속도보다는 빨리 가야겠지) 검색해보니 공공 api는 있었으나 내가 아직 사용할 줄 모르는 기능이었다... 그리고 comment는 사실 항해 시작 전의 감상을 적으라고 둔 것.

2) 현재 기온이 아니라 사용자의 위치 값을 받아와 현재 있는 도시와 시간 띄우기(내가 접속하면 New York / MM.DD.YYYY 00:00 EDT으로 뜰 것).

3) 2를 함께 DB에 넣고 카드에 함께 띄우기.

4) 사진의 프로필 픽을 업로드하거나, 몇 개의 아이콘 중에 선택하여 함께 업로드할 수 있게 하기.

5) 그리고 최근에 입력한 항해권은 아래로 붙을 게 아니라 위로 붙어야 할 게 아닐까?

웹개발 종합반은 이렇게 마무리가 되었고 위에 쓴 것처럼 아직 구현하지 못한 기능도 많아 아쉬움도 많다. 사전스터디 조원들과 자바 문법 공부에 들어가기로 해서 현재까지는 이 정도까지만 마무리할 예정이지만, 내가 원하는 대로 만든 사이트인 만큼 나중에 위의 기능들을 꼭 추가로 구현해보고 싶다. 다음엔 자바 문법 개발일지로 만나요!

들어가며

웹개발 종합반이 1주차씩 진행되긴 하지만 사실상 수업은 한 시간~한 시간 반 정도여서 총 5주로 구성된 수업을 한 번 듣는 데에는 일주일가량 소요되었다. 하지만 코드를 그대로 따라 치는 것과 내가 무엇을 하고 있는지 아는 건 다르다... 코드를 따라 치는 것 자체에는 (오탈자가 안 나게 할) 정도의 집중력이 필요하지만 내가 무슨 짓을 하고 있는지는 알아야 하니까???? 게다가 알고리즘에 대한 이해 정도는 있어도 코드 자체를 처음 돌려보는 상황에서 1회차땐 내가 무엇을 하고 있는지 아리송하기도 했다. 그렇다고 2회차때는 완벽하게 모든 것을 숙지하고 코딩천재가 되었느냐? 당연히 아니지... 그래도 2회차에는 비교적 코드의 구조를 논리적으로 이해하게 되었다. 

배운 것

1. Flask를 이용해서 API를 만들기

API는 은행 창구와 같다고 한다. 클라이언트(고객)는 API(은행창구)에 가서 GET(조회)을 요청하거나, POST(생성, 변경, 삭제)를 요청한다. 우리는 flask 패키지를 이용해서 서버를 만들었다. flask 서버를 만들 때는 항상 프로젝트 폴더 안에 'static'과 'templates' 폴더, 'app.py' 파일을 만들어두고, 'templates' 폴더 안에 'index.html'을 넣어둔다. 그러면 flask를 이용해 index를 다음과 같은 코드로 연결할 수 있다.

from flask import Flask, render_template
app = Flask(__name__)

## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.

@app.route('/')
def home():
   return render_template('index.html')

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

2. '영화 볼 결심'의 API를 만들고 클라이언트에 연결하기

결과물부터 볼까?

내가 저장한 영화 카드들이 이렇게 뜬다. Record a Movie를 누르면 뜨는 post-box 안에 date를 이용해서 영화개봉일 입력창까지 '보이게' 하는 것은 성공했으나 왜인지 date와 관련된 코드를 추가하니 영화 카드 추가 기능 자체가 실현되지 않았다. 이 얘기는 잠시 후에 다시..

2-1. 포스팅하기(POST)

네이버 영화 페이지에서 가져온 정보: 영화 이미지, 제목, 설명(beautiful soup 이용하여 크롤링)

내가 보내는 정보: 영화 url, 별점, 코멘트

순서는 이렇게 된다.

flask를 이용해서 서버 만들기(url, star, comment 정보 저장하기(post-box)) - 영화 이미지, 제목, 설명은 beautifulsoup을 이용해 url에서 크롤링하기 - 클라이언트 만들기(url, star, comment 정보 보내주기) - DB에 영화 이미지, 제목, 설명, 별점, 코멘트가 입력.

2-2. 보여주기(GET)

서버 만들기(주문 정보를 담아 정의한 이름에 DB의 리스트를 내려주기) - 클라이언트 만들기(응답을 받아 for문으로 돌면서 카드를 붙이기)

이 과정을 거치고 '영화 볼 결심' 사이트를 완성했다. 

구현한 기능은 다음과 같다.

1. Record a Movie를 누르면 Post-box를 띄우고, Post-box 내의 close 버튼을 누르면 포스트 박스를 닫는다. 

2. Post-box에 영화 URL(네이버 영화 페이지를 이용했다), 나의 별점, 코멘트를 입력한다.

3. 2를 거치면 카드가 하나씩 붙는데, 그 카드는 다음과 같이 구성되어 있다. :내가 입력한 URL에서 크롤링해온 영화 이미지, 타이틀, 설명, 그리고 내가 입력한 별점과 코멘트.

내가 더 추가하고 싶은 기능:

1. 영화개봉일('영화 볼 결심'이기 때문에 개봉예정작을 넣는 게 중요하다)을 추가하기.

2. 체크박스를 넣어 본 영화는 체크하고, 카드에 변화를 줘 본 영화임을 표시하기.

남는 시간에 이 기능들을 추가하고 싶은데 현재 전반적인 코드 작성법을 배우느라 짬이 안 나고 있다...

사실상 '영화 볼 결심' 사이트를 완성하며 웹개발 종합반의 내 프로젝트는 끝났고,

5주차 포스트는 매주차 강의 내용을 이용해서 숙제로 만든 사이트를 올려보려고 한다.

사실상 숙제가 제일 재미있었다. 왜냐면 직접 발행도 하고 친구들이 와서 댓글도 남겨줬기 때문에 UI 이미지나 디자인에 제일 큰 신경을 썼기 때문.... ㅋㅋㅋㅋ 그럼 다음 회차에서 보아요

들어가며

드디어! 내가 코딩에 처음 관심을 갖게 된 계기였던 파이썬을 배웠다. (파이썬에 대해 알던 것: 직관적이구나. 모르던 것: 띄어쓰기 하나에도 영향을 받는다고? 갈수록 정말 도서편집 같아지는군...) 지난 주차들에서는 사이트의 뼈대를 만들고서는 그 위에 피부를 씌웠고, 동작을 추가했다. 그리고 정보를 요청할 수 있게 되었다. 그럼 이번주에서는? 가져온 정보를 어딘가에 저장하고, 내보일 수 있어야 한다는 뜻이다. 마치 사람의 뇌 같다.

시작 전에

지난주차에 API를 이용해 ajax GET 방식으로 API에서 정보를 불러오기를 배웠는데 이 기능을 이용해 '영화 볼 결심'에 학원에서 제공하는 API 영화 정보를 카드에 넣었다. 아래의 이미지를 보면 예전에 임의대로 단순히 '입력'해둔 카드가 아니라, API에서 가져온 정보값들이 붙어 있는 것을 볼 수 있다. 즉 내가 영화를 '직접' 기록해서 데이터베이스에 넣고, 그 기록한 정보를 데이터베이스로부터 불러온 것이 아니다. 웹개발 종합반은 방금 설명한 기술을 완성하는 게 목적이었다.

배운 것

1. 파이썬 기초

파이썬의 기초 문법인 변수와 기본연산, 자료형, 함수, 조건문, 반복문을 배웠다. 1) 변수는 말 그대로 어떤 변수에 값을 입력해주는 것이고, 이 이름은 자유롭게 지을 수 있다. 2) 자료형이란 문자 혹은 숫자(true 혹은 false가 들어갈 수도 있다), 리스트, 딕셔너리, 딕셔너리+리스트에 값을 넣는 것이다. 3) 함수란 말 그대로 함수를 정의(def)하여 그 답을 반환(return)하는 것이다. 4) 조건문이란 if와 else를 이용해 알고리즘을 실현한다. 5) 반복문이란 말 그대로 '반복'하면서 리스트에 있는 값을 하나하나 꺼내 쓰는 형식이다. 딕셔너리에 있는 값을 반복문으로 돌리면 딕셔너리의 모든 값이 찍히고, 여기에 조건문을 사용하면 원하는 값만을 출력할 수 있다.

이런 것들을 배우고 파이썬을 설치했다. (가장 좋은 시간. 설치하는 시간.)

2. 웹스크래핑(크롤링) 기초

requests, bs4라는 패키지를 설치하여 크롤링을 해보기로 했다. 웹에서 크롤링하고 싶은 정보가 있을 때 그 부분에 마우스 오른쪽 커서를 누른 후 검사 - copy - copy selector를 하는 방식으로 진행했다.

import requests
from bs4 import BeautifulSoup

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')

# alphabet의 copy selector 값이 다음과 같이 나왔다.

alphabet = soup.select('#old_content > table > tbody > tr')

# alphabet(tr들)의 반복문을 돌리기
for abc in alphabet:
    # abc 안에 a가 있으면,
    a_tag = abc.select_one('td.title > div > a')
    if a_tag is not None:
        # a의 text를 찍어본다.
        print (a_tag.text)

3. DB 클라우드 서비스 가입 및 내 DB 만들기

먼저 DB 사용법을 보자면, 아래와 같다.

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

내가 듣는 수업에서는 mongoDB를 사용했다. 주어진 영화 api를 DB에 저장했고, 그 DB를 이용해 값을 불러냈다.

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
client = MongoClient('내DB주소')
db = client.dbsparta

# URL을 읽어서 HTML를 받아오고,
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('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')

# select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')

# movies (tr들) 의 반복문을 돌리기
for movie in movies:
    # movie 안에 a 가 있으면,
    a_tag = movie.select_one('td.title > div > a')
    if a_tag is not None:
        rank = movie.select_one('td:nth-child(1) > img')['alt'] # img 태그의 alt 속성값을 가져오기
        title = a_tag.text                                      # a 태그 사이의 텍스트를 가져오기
        star = movie.select_one('td.point').text                # td 태그 사이의 텍스트를 가져오기
        doc = {
            'rank': rank,
            'title': title,
            'star': star
        }
        db.movies.insert_one(doc)

이 주차에서부터는 html 문서와 python 파일을 왔다갔다 하면서 코드를 입력해줘야 했기 때문에 헷갈렸던 기억이 난다. 그래도 특히 bs4를 이용하면서 원하는 값을 긁어오는, 즉 크롤링 하는 기능이 재미있었다. 

들어가며

그래도 한번 들은 수업이라고 코드를 입력하는 속도가 빨라졌다. 오류를 잡아내는 속도 또한 그렇게 된 듯하다. 웹개발 종합반 2주차에서는 Javascript로 서버에 데이터를 요청하고 받는 코드를 구현해보았다. jQuery(html을 제어)와 Ajax(데이터를 요청하고 수령)를 이용해서 '영화 볼 결심'에 기능을 추가했다. 

배운 것

1. jQuery 사용법 배우기

1-1.

자주 사용되는 jQuery들을 연습했다. css는 class로 지칭하지만 jQuery는 id로 지칭한다는 차이점이 있다. 예를 들어 name의 id가 'myname'이라면, 이런 식으로 값을 가져오는 것이 가능하다. 예: $('#myname').val(); 

이런 식으로 값을 입력해야 하는 모래색 배경의 박스인 '#post-box'를 보여주고, 숨겨주는 기능을 추가했다. Record a Movie 버튼에 '#post-box' 의 show 기능을, Close 버튼에 hide 기능을 달았다. '#post-box'가 닫히면 아래에 달린 카드들이 저절로 위로 올라온다.

1-2.

연습문제로 jQuery와 Javascript가 결합된 문제를 풀었다.

1) 버튼을 눌렀을 때 입력한 글자로 alert를 띄우기. 입력값이 없다면 경고문구 띄우기.

let, if, alert 사용

2) 이메일을 입력했을 때 이메일의 도메인을 alert로 띄우고, 이메일의 형식이 아니라면('@'가 포함되어 있지 않다면) 경고문고 띄우기.

let, if, includes, split, alert 사용

3) 이름을 입력하면 리스트의 아래에 붙게 하기. '지우기' 버튼을 클릭하면 이름들을 모두 삭제하기.

let, temp_html, append, empty 사용

2. 서버와 클라이언트 통신 이해하기

2-1. GET 방식(데이터 조회)

클라이언트가 API를 이용하여 서버에게 데이터를 요청한다. 여기에는 타입이 몇 가지 있는데, GET과 POST가 그것이다. 이번 주차에서는 GET을 이용해 데이터 조회를 요청하는 방법을 배웠다.

2-2.

ajax를 연습하면서 open API를 이용, 실시간 미세먼지값/서울시 따릉이 대여 가능수 값/이미지를 요청하는 방식으로 총 3가지의 연습문제를 풀었다.

웹개발 종합반 2주차는 이렇게 끝. 기능을 구현해보고 바로 다음으로 넘어가는 주차였기 때문에 기록으로 남아 있는 것은 많이 없으나, 입력값에 id를 주고, function을 구현하고, 더 나아가 ajax로 결과를 받아온다는 개념에 대해 배웠다.