kassid_dev.log

웹개발공부 (w.스파르타코딩클럽 / 4주차) 그리고 회고!

Fri, 24 Dec 2021 15:57:10 GMT

Flask

들어가기 전에

1,2주차에 공부를 했던 것은 웹의 '프론트엔드'부분이었다. Html,CSS,JS 등으로 이것을 구현해보았고, 3주차부터는 '백엔드'부분을 공부하고 있는데 서버개발환경에 대해서 아주아주 간단하게 이야기해보면

로컬개발환경 컴퓨터 1대로 개발 및 테스트환경, 서버까지 모두 구축을 한 환경을 이야기한다. 즉, 클라이언트=서버인 상태이다.
현재 구축 중인 환경은? 이번 주차에 Flask를 이용하여 서버를 구축하고 DB는 mongoDB Atlas라는 클라우드를 이용하려 한다.

Flask란?

시작

Python에서 서버를 구축할 수 있게 도와주는 프레임워크이다. (프레임워크=큰 라이브러리)

app.py라는 파일을 하나 생성한 뒤 아래의 코드를 실행시켜주면

import flask
from flask.app import Flask


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)

localhost:5000의 의미

사용자마다 고유의 IP가 있는데 플라스크는 이 IP를 사용하지 않고 localhost라고 알려진 인터넷의 루프백 주소 127.0.0.1을 사용한다.

루프백 주소는 웹 서버나 네트워크 동작 기능을 테스트하는 데에 사용하고, 자신에게 다시 데이터가 돌아오게 하는 방식이다!

URL나누기

@app/route()를 수정해서 URL을 나눠보자!

이때 주의할 점 2가지

url별로 함수명이 같으면 안된다.
route('/')내의 주소가 같으면 안된다!

import flask
from flask.app import Flask


from flask import Flask
app = Flask(__name__)

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

@app.route('/mypage')
def mypage():
    return 'This is myPage!!'

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

이렇게 새로운 페이지를 추가할 수 있다.

구조

Flask 서버를 만들 때는 정해진 구조가 있다.

static : 이미지, css파일을 넣는다.
templates : html파일을 넣는다.
app.py

templates

templates폴더 안에 html파일을 하나 생성하고 내용을 채워준다.




    
    Document


    나의 첫 웹페이지

그 후에 app.py를 수정해준다. render_template을 import 해주고 @app.route('/')의 반환값을 바꿔준다.

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

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

@app.route('/mypage')
def mypage():
    return 'This is myPage!!'

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

API만들기

Flask의 jsonify를 이용하면 데이터를 json형태로 보내주는 API서버를 만들 수 있다.

2주차에서 다뤘었던 jQuary와 ajax를 활용할 것인데 복습 겸 다시 API를 조금 이야기 해보면

API는 클라이언트와 서버를 이어주는 역할을 해주고, 이 때 서버의 요청을 할 때에는 Html 메서드로 그 종류를 알려줄 수 있다.

2주차에는 조회를 하는 GET을 다뤘었고 이번에는 데이터의 생성, 변경, 삭제에 사용을 하는 POST를 이용해보았다!

html





    
    Title
    
    



    나의 첫 웹페이지

GET과 POST의 차이점은 Ajax코드에서 data에 값을 넣어주는 것이다. 딕셔너리 형태로 넣어주면 된다.

app.py

# app.py
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)

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


@app.route('/test', methods=['POST'])
def test_post():
    receive_Hi = request.form['say_Hi'] #클라이언트에서 받은 정보
    print(receive_Hi) #클라이언트에서 받은 정보 출력
    return jsonify({'result':'success', 'msg': '요청완료!'})


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

html파일은 클라이언트 코드이고 app.py는 서버 코드 이다.

html파일에서 버튼을 눌렀을 때 hey()라는 함수를 실행하도록 해놓았다. hey()함수는 서버에 Post요청을 보내고, app.py에서 Post 요청을 받는다.

클라이언트에서 서버로 data에 할당된 { say_Hi:'안녕하세요' }가 전달이 된다. app.py를 실행시켜 확인해 보면 '안녕하세요' 라고 출력이 되는 것을 알 수 있다.

즉, 클라이언트의 요청이 서버에 잘 도착한 것이다.

서버에서는 받은 요청에 대해서 처릴를 한 후 jsonify로 이용해 클라이언트로 json response를 보낸다.

웹사이트를 실행시켜서 버튼을 누르면 콘솔창에 '요청완료!' 라고 출력이 된다.

수업을 듣고 해본 것들

1. 나만의 영화 평점 사이트

3주차에 진행했던 웹 크롤링을 이용해서 og(Open Graph)타이틀과 포스터이미지, 요약을 가져왔다. 저번처럼 선택자 복사를 그대로 이용하면 크롤링이 되지 않아서 soup.select_one('meta[property="og:title"]')['content'] 위와 같이 접근하여 가져왔다.

위와 같은 입력칸에 정보를 입력하면, DB에 저장이 된다.

POST를 하면 window.location.reload()를 통해서 새로고침을 해주고,

$(document).ready(function () { GET요청 함수 }); 를 통해서 새 창이 로드되면 GET요청을 통해 DB에서 정보를 가져오도록 하였다.

서버에서 받아온 데이터를 바탕으로 html뼈대를 붙여주어서 영화 평가컨텐츠가 추가 되도록 하였다!

2. 버킷리스트

버킷리스트를 만들어보았는데 GET, POST로 입력한 리스트를 추가하는 것은 위와 동일하다.

완료버튼을 누르면 빗금을 긋기를 요청하기 위해서 DB에 기록을 할 때 index 를 주었고, 버튼을 눌렀을 때 그 index에 해당하는 DB의 완료 여부를 담는 변수인 done의 정보를 바꾸어 주었다.

db.bucket.update_one({조건},{'$set':수정사항})

위의 코드를 이용하여 DB에 저장된 데이터를 수정할 수 있다.

GET으로 로드한 DB의 데이터 중 done변수에 따라 if문으로 case를 나눠서 붙여줄 html을 다르게 작성해주었다.

끝내며

스파르타 코딩클럽 웹 프로그래밍 강의의 5주차까지 모두 완주하였다! 5주차에는 aws를 이용하여 배포까지 해보았다. 서포터즈 활동을 하며 받은 강의였는데 무언가를 만들기에 최적화된 강의였다. 하지만 전공자들이 웹이 돌아가는 메커니즘이라던가 여러가지 확실히 배우고 싶어서 듣기에는 적합하지는 않았던 것 같다.

반대로 말하면 웹이라는 것을 경험하지 않은 사람들이 빠르게 결과물을 내면서 배우기에는 아주 좋은 환경을 제공해준다는 것이다!

나의 경우에는 웹을 경험해보지 않아서 강의를 듣고 velog 포스팅을 할 때 구글링을 통해 조금 더 찾아보면서 공부를 하게 된 것 같다. 그리고 직접 간단한 여러 프로젝트를 만들다보니 뭔가의 기능을 더 넣어 보고 싶어서 배우고 싶은 열망을 만들어 주었던 강의였다!

웹개발공부 (w.스파르타코딩클럽 / 3주차)-2

Sat, 04 Dec 2021 14:04:08 GMT

mongoDB 조작

mongoDB를 pymongo 라이브러리를 활용해서 조작해보았다.

1. 저장

예시와 함께 알아보면,

from pymongo import MongoClient
client = MongoClient('DB경로')

db = client.prac
doc = {'name':'bobby','age':21}
doc1 = {'name':'mary','age':23}

db.users.insert_one(doc)
db.users.insert_one(doc1)

.inset_one()을 이용해 넣고싶은 데이터를 넣어주면 값이 저장이 된다.

2. 찾기

한 개만 찾을 때

input

user = db.users.find_one({'name':'bobby'})

.find_one()을 이용하면 한 개의 데이터만 가져올 수 있다. 조건을 인수로 주면 된다.

output

{'_id': ObjectId('61ab21751b4b580ad5892475'), 'name': 'bobby', 'age': 21}

위와 같은 결과를 얻을 수 있다.

여러 개 찾을 때

# all_users = list(db.users.find({조건})) #리스트로 형변환하여 처리해주었다.
all_users = list(db.users.find({}))

.find()를 이용하면 여러 개의 데이터를 가져올 수 있다. 이때 빈 조건을 넣어주면 모두 가져올 수 있다.

input

all_users = list(db.users.find({},{'_id':False}))
# {_'id'}는 필요없는 데이터이므로 지워주었다.

output

[{'name': 'bobby', 'age': 21}, {'name': 'mary', 'age': 23}]

3. 바꾸기

input

# db.users.update_one(조건,{'$set':바꿀 내용})
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

output

위와 같은 방법으로 데이터의 내용을 바꿔줄 수 있다.

4. 제거

input

db.users.delete_one({'name':'bobby'})

output

제거도 가능하다!

배운 것으로 한 것들

1. 입대한 달 지니차트 크롤링

2. 리그오브레전드 최근 20게임 전적 통계

게임 닉네임을 입력하면 해당 유저의 최근 20게임의 결과를 크롤링하고 승리,패배 횟수와 승률을 보여주는 코드입니다!

웹개발공부 (w.스파르타코딩클럽 / 3주차)-1

Sat, 04 Dec 2021 07:35:22 GMT

웹 스크래핑(크롤링)

크롤링(Crawling)은 사전적 의미로는 기어다니는 것을 뜻한다. 웹에서 이 의미를 적용하면 웹 상을 돌아다니며 정보를 수집하는 것이다.

다시 말하면, 문서나 API 등에서 데이터를 수집하고 사용자의 입맛에 맞춰 필요한 정보만 추출하여 처리하는 것을 이야기한다!

파이썬을 이용해서 진행을 하는데 총 2가지 라이브러리를 활용하였다.

html을 가져온다 - requests
필요한 데이터를 걸러낸다 - bs4 (beautifulsoup4)

크롤링을 위한 준비

수업에서는 네이버 영화페이지에서 제목 가져오기를 진행했다!

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('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&tg=0&date=20211202',headers=headers)

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

title = soup.select_one('#old_content > table > tbody > tr:nth-child(2) > td.title > div > a')
print(title)

위의 코드가 그 시작인데 하나씩 알아보면

headers : 접속하는 사람/프로그램에 대한 정보 크롤링 할 때 서버에서 사용자를 봇으로 인지하여 정보를 주지 않고 '차단'하는 경우가 있습니다. 이때 headers정보에 User-Agent를 넣어주면 되는데, http://www.useragentstring.com/ 위 링크에서 복사해오면 된다!
data : requests 라이브러리를 활용해 데이터를 가져올 url과 headers 정보를 준다.
title : 변수를 하나 생성해준 뒤 bs4 라이브러리를 활용해서 html정보를 가져온다.

html정보를 가져올 때에는 html의 선택자 복사 기능을 이용한다!

위와 같이 복사를 해준 뒤 문자열 형태로 soup.slect_one()의 인수로 넣어주면 된다.

밥정

그렇게 해주면 원하는 html코드를 가져올 수 있다.

제목 가져오기

#old_content > table > tbody > tr:nth-child(3) > td.title > div > a
#old_content > table > tbody > tr:nth-child(4) > td.title > div > a

선택자 복사를 통해서 서로 다른 두 제목 정보를 비교해보면 old_content > table > tbody > tr 까지 동일하고 그 후 숫자로 구분을 한 뒤 다시 td.title > div > a 부분이 동일한 것을 알 수 있다.

old_content > table > tbody > tr 은 영화칸까지 접근을 한 경로이고, td.title > div > a 는 제목링크까지 접근한 것을 알 수 있다. 이 경로에서 제목 정보를 얻을 수 있다!

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

for movie in movies:
    a = movie.select_one('td.title > div > a')
    if a is not None:
        print(a.text)

movies변수에 .select를 통해 결과값을 '리스트 형태'로 저장해 준다. 그 후, .select_one을 이용해서 하나씩 값을 가져온다. .select_one의 경우에는 속성값을 가져올 수 있기 때문에 .text로 제목값만 가져온다! (구분선으로 되어있는 부분은 None을 반환하기 때문에 예외처리를 해주었다.)

위에서 한 것에 추가로 순위와 평점 정보도 가져왔다. 이번에도 선택자 복사 기능을 이용하면 정말 편하게 할 수 있다!

for movie in movies:
    a = movie.select_one('td.title > div > a')
    if a is not None:
        title = a.text
        rank = movie.select_one('td:nth-child(1) > img')['alt']
        point = movie.select_one('td.point').text
        print(rank,title,point)

DB

DB(데이터 베이스)는 여러 사람이 공유하며 사용할 목적으로 체계화하여 통합, 관리를 하는 데이터의 집합이다.

'데이터를 쉽게 뽑아쓰기 위해서!'가 간단하게 표현한 DB의 목적이라고 할 수 있다.

DB는 Index라는 순서로 데이터들이 정렬되어있고 그것을 통해 쉽게 원하는 것들을 찾아낼 수 있다!

종류

1. SQL

칸을 만들고 채워넣는 방식. 행-열이 있는 엑셀과 비슷함! 정형화 되어 있기 때문에 그만큼 데이터가 일관성이 있고, 분석에 용이하다. 즉, 찾고 싶은 데이터도 보다 더 쉽게 찾을 수 있다.

그러나 많은 양의 데이터가 쌓여있는 상태에서 중간에 변화를 줄 때 유연하게 다루기가 어렵다. ex) MS-SQL, My-SQL 등

2. NoSQL(Not only SQL)

딕셔너리 형태로 데이터를 저장. 들어오는 대로 쌓는 자유로운 형태이기 때문에 변화에 유연하게 대처가능하다는 장점이 있다. 그래서 초기 스타트업과 같은 소규모 단위에서 주로 사용하는 방식이다.

하지만 그 반대로 데이터의 일관성이 부족하다는 단점이 있다! ex) MongoDB

DB의 실체

DB는 우리가 사용하는 프로그램이다. 데이터를 잘 쌓고 관리하는 데에 용이한 프로그램이다! 따라서 사용하고 있는 컴퓨터에도 DB를 설치할 수 있는데

요즈음에는 클라우드환경을 많이 이용한다. 유저 트래픽이 몰리거나 / 백업이 필요하거나 / 모니터링을 해야 할 때 매우 용이하기 때문이다.

수업에서는 mongoDB를 클라우드에서 제공해주는 mongoDB Atlas를 활용하였다!

mongoDB Atlsas 튜토리얼

mongoDB link: https://www.mongodb.com/atlas/database

무료로 시작을 해준 뒤, 클라우드 지역설정과 클러스터의 이름을 설정해준다. (myCluster로 지어주었다!)

그 후에 잠시 기다려주면 위와 같이 생성완료!

Connect버튼을 눌러준 뒤

Connect your application버튼을 누르고 보안설정으로 Username과 Password를 입력해주고

드라이버 설정을 해준다.

위 사진에서 보이는 코드를 복사해온 뒤

mongodb+srv://test:@mycluster.aq6co.mongodb.net/myFirstDatabase?retryWrites=true&w=majority

mongodb+srv://test:(설정한 패스워드)@mycluster.aq6co.mongodb.net/(클러스터명)?retryWrites=true&w=majority

위와 같이 변경을 해준다!

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:kassid@mycluster.aq6co.mongodb.net/myCluster?retryWrites=true&w=majority')

#db = client.(db명)
db = client.kassid

doc = {
    'name' : 'kassid',
    'age': 23
}

#db.(컬렉션명).insert_one(넣고싶은 자료)
db.admin.insert_one(doc)

Collections를 확인해보면 데이터가 잘 들어와있는 것을 알 수 있다.

웹개발공부 (w.스파르타코딩클럽 / 2주차)

Thu, 02 Dec 2021 12:39:13 GMT

1. jQuery

개요

Html의 요소들을 조작하는 Javascript를 미리 작성해둔 것이다. Javascript로 길고 복잡하게 써야 하는 것들을 jQuery로 보다 직관적으로 쓸 수 있게 해준다!

사용방법

사용방법은 2가지가 있다.

직접 서비스 하는 방법
구글의 JS 라이브러리를 사용하는 방법(CDN/Content Delivery Network)

이 중 2번째 방법으로 사용을 해보았다.

https://www.w3schools.com/jquery/jquery_get_started.asp 위 링크에서 아래 코드를 복사해서 넣어주면 된다.

문법

$(제어대상).method();

jQuery는 $로 시작하고 인자값으로 CSS의 선택자를 줄 수 있다.

예시 1

입력창을 하나 만든 후 콘솔창에 위와 같이 jQuery를 작성해주면 이렇게 값을 넣어줄 수 있다.

반대로 값을 받는 방법도 있다.

예시 2

Html을 붙이거나 지우는 것도 가능하다!

위와 같은 입력 칸을 만들어 주었을 때 `이름 붙이기`를 누르면 리스트가 추가가 되고 `모두 지우기`를 누르면 초기화가 되는 것을 한 번 구현해보면

추가하기

모두 지우기

여기에서 html코드를 넣어줄 때에는 '(따옴표)가 아닌 backtick으로 감싸야한다.

이를 이용하여 문자열 중간에 포매팅을 할 수 있다!

2. 서버-클라이언트 통신

API

API는 프로그램들이 서로 상호작용하는 것을 돕는 매개체이다. 이를 비유로 설명하면, 서버를 은행이라고 했을 때, 클라이언트를 고객, API를 은행창구라고 할 수 있다.

같은 예금 창구에서도 개인 대상, 기업 대상에 따라 가져와야 할 것과 처리해야 할 것들이 다른 것처럼 요청을 할 때에도 '타입'이 존재한다!

이는 HTTP 메서드(Method)로 서버에 요청종류를 알릴 수 있다.

HTTP 메서드

메소드의 종류는 아주 많지만 이번에는 GET과 POST에 대해서 공부해보았다.

GET은 보통 데이터 조회(Read)를 요청할 때 사용한다. ex) 영화 목록 조회, 오늘의 날씨 조회 등
POST는 보통 데이터의 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때 사용한다. ex) 계정 생성, 계정 삭제, 계정 정보변경

GET

예시와 함께 알아보자!

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

다음을 나눠서 보면 http 서버주소 /api주소 ?전달할 데이터 로 이뤄져 있는 것이다.

여기에서

? : 이 부분부터 전달할 데이터가 작성된다라는 의미를 담고 있다.
& : 전달할 데이터를 이어주는 역할 (위의 예시에는 나와있지 않지만!)
추가정보 ex) google.com/search?q=갤럭시&sourced=chrome&ie=UTF-8 q (검색어) | sourced (브라우저 정보) | ie (인코딩 정보)

JSON

JSON(JavaScript Object Notation)은 JS 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 포맷이다. HTML로 만들어진 구조에 데이터를 씌워주기 위해서 사용하는데 주로 모바일 어플리케이션에서 많이 사용한다.

구조

딕셔너리 형태인 key:value로 이뤄져 있다. ex)

Profile:{
    name:'Kassid'
    age:23
    ...
}

3. Ajax

Ajax(Asynchronous JavaScript and XML)는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다. 이를 이용하면 웹페이지 전체를 로딩하지 않고도 일부분을 갱신할 수 있다.

구조

jQuery를 이용해서 Ajax를 구현해보자.(GET 방식)

$.ajax({
  type: "GET",
  url: "URL넣기",
  data: {}, //요청하며 줄 데이터, GET방식일 때에는 비워두기
  success: function(result){
    // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  error: function(error){

  }
})

위와 같은 형태를 띄고 있다.

예시

서울시 미세먼지 정보 오픈API http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

$.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) {
                    let rows = response['RealtimeCityAir']['row']
                    for (let i=0; i

위 코드를 콘솔창에서 확인해보면 다음과 같은 결과를 얻을 수 있다.





더 배운 내용


1주차에 만들었던 팬페이지에 '온도 정보'를 추가하였다.
날씨api에서 받아와서 페이지를 로딩하면
자동으로 api에서 정보를 업데이트 하도록 구현되어 있다.
$('적용할 선택자').text('대체할 텍스트')
위의 코드는 jQuery를 이용하여 text를 바꿔줄 때 사용한다.
$('적용할 선택자').attr(src,'대체할 이미지 경로')
이미지를 바꿔줄 때에는 이렇게!
attr()는 속성을 부여하는 메서드인데 위와 같이 활용을 하면
이미지를 변경할 수 있다!



웹개발공부 (w.스파르타코딩클럽 / 1주차)
Sun, 28 Nov 2021 17:56:54 GMT
스파르타 코딩클럽 서포터즈 '르탄즈' 활동 중 우수 활동자로 발탁이 되어서
'웹개발 종합반'이라는 정규강의를 수강할 수 있는 좋은 기회를 얻게 되었다!
5주간 웹의 동작 원리부터 Html Css JS 그리고 직접 나만의 웹서비스를 만들 수 있는
커리큘럼이 짜여져 있다.
그 시작으로 1주차 수업을 듣고 나서 배운 내용을 간단히 정리 해보려고 한다!

1. 서버/클라인트/웹 동작 개념
1-1 웹 동작 개념(HTML을 받을 때)
  서버는 데이터를 저장하고 요청받은 것을 제공하는 역할을 한다.
그리고 브라우저는 서버에서 데이터를 받아와서 사용자의 화면에 그려주는 역할을 한다.
  이때 http(HyperText Transfer Protocol)라는 약속에 따라서 브라우저가 요청을 하는데 API(Application Programming Interface)라는 서버가 만들어 놓은 창구에 보낸다.
1-2 웹 동작 개념(데이터만 받을 때)
  서버에서 뼈대(html)를 계속 불러오는 방식도 있지만 데이터만 받아오는 방법이 있는데
JSON(JS Object Lotation)방식이 바로 그것이다.
브라우저가 미리 뼈대를 다운받아 가지고 있고, 서버에서 데이터 만을 제공받는 것이다. 즉, 껍데기만 가지고 있다가 데이터를 받아서 붙여주는 것이다.
  이 방식은 '앱'에서 많이 사용되는 것이라고 한다.

2. HTML/CSS
2-1 개념 및 구조
HTML은 구역과 텍스트를 나타내는 코드 / 뼈대
CSS는 잡은 구역을 꾸며주는 역할 / 꾸미기
(CSS를 잘 사용하는 것과 이쁘게 만드는 것은 다른 영역이다)



     
     
    
    




HTML
구성
HTML은 크게 head와 body로 구성이 된다.
이 때 head는 페이지의 속성 정보를 담는다.