내일배움캠프 1주차 주간 회고

스파르타 코딩클럽 내일배움캠프 합류 후 첫 주 동안 web의 동작 원리를 이해하고, 나만의 web site를 구현해보고, 팀원들과 함께 미니 프로젝트를 진행하면서 많은 것을 배웠다.

html, css, javascript

우선 web의 기본 뼈대인 html을 만들고 css를 통해 꾸며준 다음 js를 통해 html 코드에서 함수를 만들어 특정 코드에 이벤트를 생성하는 방법을 배울 수 있었다.

그리고 jqeury를 import 하고 사용하는 방법과, Ajax 콜을 통해 서버 API에 GET, POST 요청으로 데이터를 주고 받는 방법을 학습했다.

$.ajax({
  type: "GET or POST", //    
  url: "데이터를 주고 받을 url 입력",
  data: {}, // POST 요청 시 함께 줄 데이터 (GET 요청시엔 비움)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 받아온 response를 console.log(response)에서 확인
  }
})

python

파이썬의 여러 패키지(pymongo, requests, bs4, flask,dnsptyhon)를 설치하여 mongoDB에 데이터를 다루는 방법과 웹사이트를 크롤링하고, 로컬 개발 환경을 구축하는 방법 등을 배울 수 있었다.

pymongo를 통한 DB 다루기

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta

# insert / find / update /delete

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

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

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

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

requests와 bs4를 통한 크롤링 하는 방법

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

movies = soup.select('#old_content > table > tbody > tr')
#영화 정보가 담긴 tr들을 .select('selector')로 괄호 안의 셀렉터를 복사해서 넣어준다

for movie in movies:
    a = movie.select_one('td.title > div > a')
    #영화 정보가 담긴 tr 태그인 movies에서 .select_one()으로 a태그의 셀렉터를 괄호 안에 넣어 영화 제목을 가져온다.  
    
    if a is not None:
        title = a.text
        rank = movie.select_one('td:nth-child(1) > img')['alt']
        star = movie.select_one('td.point').text
        print(rank, title, star)

Flask로 API를 만들고 클라이언트에 연결하기

API를 만들었다면 Flask로 클라이언트와 연결 확인 후 서버 -> 클라이언트 순으로 완성해준 다음 정상적으로 서버와 클라이언트가 연결되어 작동하는지 확인한다.

app.py

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

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

index.html

$.ajax({
  type: "GET or POST", //    
  url: "/api",
  data: {}, // POST 요청 시 함께 줄 데이터 (GET 요청시엔 비움)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 받아온 response를 console.log(response)에서 확인
  }
})

AWS

AWS 서버 구매 후 EC2에 접속하기

클라우드 서버를 구축하기 위해 aws에서 서버를 구매 후 EC2에 접속을 해야하는데 다른 컴퓨터에 접속을 하기 위해 프로그램이 필요하다.

그 중 SSH가 다른 프로그램들 보다 상대적으로 보안이 뛰어나 많이 사용한다
(Tip! 이 때 접속할 컴퓨터의 22번 포트가 열려 있어야 한다.)

Window는 ssh가 없으므로 git bash라는 프로그램을 설치하고 이용한다.

💡 자주 사용하는 리눅스 명령어 모음

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것][붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 지우기

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

💡 EC2 한 방에 셋팅하는 명령어

python3 -> python
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

#pip3 -> pip
sudo apt-get update
sudo apt-get install -y python3-pip
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

#port forwarding
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

Flask 서버 실행하기

💡 설치해야 할 패키지

pip install flask
pip install pymongo dnspython

git bash에서 python app.py 명령어로 flask를 실행하고 서버가 실행되면 크롬 브라우저 창에
http://[내EC2IP]:5000/ 를 입력하고 다시 AWS에서 실행중인 인스턴스의 4가지 포트를 추가해야 한다.

→ 80포트: HTTP 접속을 위한 기본포트
→ 5000포트: flask 기본포트
→ 27017포트: MongoDB 접속 포트
→ 22포트: SSH

그리고 포트 번호를 입력하지 않아도 자동으로 접속되기 위해, 80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩(port forwarding)을 적용해주어야 한다.

💡 nohup 설정하기

ssh 접속을 끊고 나서도 서버를 계속 돌리기 위해 git bash에서 nohup 명령어를 실행해주어야 한다.

백그라운드에서 서버 계속 실행하기 -> nohup python app.py &
실행중인 서버 강제 종료하기 -> ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill

여기까지 했다면 도메인을 구입하고 dns 설정에서 내 aws ip를 붙여주면 내가 실행했던 flask서버가 내가 구매한 도메인에서 작동하고 있는 것을 알 수 있다.

👏1주차 소감👏

캠프 1주차 동안 웹사이트를 만드는 전반적인 흐름을 알게되었다.
나만의 웹사이트를 만들 수 있는 힘을 기른 점이 가장 기뻤고, 앞으로 배우게 될
내용들이 기대가 된다. 2주차 에서는 파이썬에 대해 다뤄보도록 하겠다.👊👊👊