나의 개발일지 첫 작성!

스파르타코딩클럽에서 5주 간의 웹개발 종합반을 수강하고, 1주 동안 빠르게 복습한 후, 4주간의 웹개발 플러스를 듣고 있다.

웹사이트를 만들어주는 서비스의 도움 없이 인터넷 세상에 내 공간을 어떻게 만들어야 하는지 막연하게 상상만 해보다가 실제로 인터넷 공간을 만드니 재밌었다.

(다음 글은 쌩초보가 이해한 것을 작성한 것으로서 틀린 부분이 있을 수 있다.)

PyCharm이라는 프로그램을 처음 사용해 보았고, Python과 html 파일을 이용해서 웹서비스를 만든다.

제일 먼저 클라이언트와 서버가 무엇인지 배운다.
내가 지금까지 고객으로서 네이버 뉴스도 읽고, 쇼핑몰에서 쇼핑몰도 하면서 클릭했던 모든 행동이 클라이언트로서 서버에 무엇인가를 요청했던 행위였다.
(지금까지 클라이언트로서 요청만 했으니, 당연 저 너머의 미지의 서버 세계에 대해 궁금했을 수 밖에..)

서버는 프론트엔드랑 백엔드로 구분하고, 내가 이해한 바로는 프론트엔드는 인터넷 공간에 클라이언트에게 눈으로 보여지는 건축물 같은 것이고, 백엔드는 건축물 창고에 저장하고 있는 DB 같은 것이다.

우리가 생활하는 공간의 여러 건축물이 뼈대 (골조)와 인테리어로 이루어져 있듯이, 인터넷 공간의 웹사이트들도 비슷하다.
뼈대 (골조)를 뜻하는 것이 HTML이고, 인테리어가 CSS이다.
HTML의 head (페이지의 속성정보), body (페이지의 내용)를 통해 기본적인 구조를 잡고,
CSS를 통해 시각적으로 Variation을 주는 것이다. (예쁘게 ㅎㅎ)
CSS같은 경우 나는 일단 bootstrap이라는 곳에서 짜여진 코드를 주로 가져다 썼다.

그런데 HTML, CSS만 있으면 인터넷 공간이 뭔가 딱딱하다. 동작이 없다.
이 상태에서 Javascript가 웹사이트에 동적인 느낌을 부여해 주었다.
HTML + CSS + Javascript가 한데 모여 웹브라우저에 구현되고, 이게 클라이언트한테 보여지게 되는 것 같다. (javascript를 이용하니 웹사이트에 버튼을 클릭하면 alert 창이 뜨고, post-box가 생겼다가 사라졌다가 하는 동작들을 구현할 수 있었다.)

(jQuery라는 걸 사용해서 Javascript로 HTML을 쉽게 제어할 수 있다.
원래 Javascript는 훨씬 복잡한 코드인데, JQuery라는 라이브러리에 똑똑한 개발자들이 미리 작성한 Javascript 코드를 모아두어서 그걸 가져다가 썼다.)

Python 파일로 DB와 연결된 API를 만들고, HTML파일로 클라이언트 요청에 따라 API에 데이터를 추가하기도 하고, API로부터 데이터를 가져오기도 한다.

(API는 잘 모르겠지만, 위키백과에 찾아보니 API(Application Programming Interface 애플리케이션 프로그래밍 인터페이스[*], 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. 라고 한다;;)

서버는 API에 크게 두 가지 요청을 할 수 있다.
1. GET 요청 : 통상적으로 데이터 조회 (Read)를 요청할 때,
2. POST 요청 : 통상적으로 데이터 생성 (Create), 변경 (Update), 삭제 (Delete)

쉽게 말하면, 블로그 글을 클릭해서 읽는 건 GET 요청을 하는 거고, 블로그 글을 게시, 수정, 삭제하는 건 POST 요청이라고 이해했다.

DB와 연결해서 표현하면, DB에 이미 있는 정보들을 불러와줘! 하는 건 GET 요청, DB에 정보를 추가, 수정, 삭제하는 건 POST 요청.

클라이언트 - 서버 간 연결하여 요청을 구현하기 위해, 일단 HTML파일의 script에 Ajex 코드를 작성했다.

1. GET 요청 Ajex 코드

$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})

2. POST 요청 Ajex 코드

$.ajax({
    type: "POST",
    url: "여기에URL을입력",
    data: { sample_give:'샘플데이터' },
    success: function(response){
        alert(response['msg'])
    }
  })

HTML, CSS, Javascript를 이용해서 HTML 파일을 완성했으면, 이걸 서버에서 구동시켜줄 python 파일이 필요하고, 이 과정에서 여러가지 python package를 설치했다. 설치하면 venv라는 폴더가 생기는데, 가상환경 (virtual environment)를 뜻한다. (가상환경(virtual environment)은 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경 입니다. 라고 한다 ㅎㅎ)

python 파일 구동을 통해 클라이언트가 POST한 Database가 저장되어야 하는데, 이 저장은 Pymongo 라는 걸 이용했다. (왜 이름이 몽고일까..? FileZilla도 그렇고 이름들이 귀엽다.)

MongoDB에 대해 알아보니 다음과 같단다. (출처 : https://velopert.com/436)

MongoDB는 C++로 작성된 오픈소스 문서지향(Document-Oriented) 적 Cross-platform 데이터베이스이며, 뛰어난 확장성과 성능을 자랑합니다. 또한, 현존하는 NoSQL 데이터베이스 중 인지도 1위를 유지하고있습니다.

NoSQL도 어디선가 많이 들어봤다.

흔히 NoSQL이라고 해서 아, SQL이 없는 데이터베이스구나! 라고 생각 할 수도 있겠지만, 진짜 의미는 Not Only SQL 입니다. 기존의 RDBMS의 한계를 극복하기 위해 만들어진 새로운 형태의 데이터저장소 입니다. 관계형 DB가 아니므로, RDMS처럼 고정된 스키마 및 JOIN 이 존재하지 않습니다.

NoSQL의 장점

• Schema-less (Schema가 없다. 같은 Collection 안에 있을지라도 다른 Schema를 가지고 있을 수 있다)
• 각 객체의 구조가 뚜렷하다
• 복잡한 JOIN 이 없다.
• Deep Query ability (문서지향적 Query Language 를 사용하여 SQL 만큼 강력한 Query 성능을 제공한다.
• 어플리케이션에서 사용되는 객체를 데이터베이스에 추가 할 때 Conversion / Mapping이 불필요하다.

이해가 쉽지 않지만 뭔가 관계형 DB (SQL)보다 더 유연하다는 얘기같다.

MongoDB 프로그램은 눈으로 보이지 않아서 (그래픽인터페이스 (GUI)를 제공하지 않는다고 표현한다고 한다.) DB 내부를 살펴보기 위해 robo3T라는 프로그램을 활용한다.

아무튼 다시 Python으로 돌아와서, 만들어둔 html 파일의 GET, POST 요청 Ajex 코드와 서버의 DB를 연결시켜 주기 위한 코드를 작성한다.

1. GET 요청 API 코드

@app.route('/memo', methods=['GET'])
def show_memo():
    sample_receive = request.args.get('sample_give')
    print(sample_receive)
    return jsonify({'msg': 'GET 연결 완료!'})

2. POST 요청 API 코드

@app.route('/memo', methods=['POST'])
def save_memo():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 요청 완료!'})

Pymongo DB와의 연결을 위해 찾기, 추가하기, 수정하기, 저장하기 등 요청 내용에 따라 다른 코드가 작성된다.

1. 모든 결과 값 보기

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

2. 특정 결과 값 보기

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

3. 결과 값 수정하기

db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

4. 저장하기

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

5. 삭제하기

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

여기까지 정리해 보면, 클라이언트 - 서버 간 상호작용은 다음과 같이 이루어진다.

1. 클라이언트가 어떤 활동을 수행하도록 서버에 요청
2. 서버는 클라이언트의 요청에 따라 백엔드에서 DB를 저장, 수정, 삭제 혹은 데이터 제공
3. 백엔드에서 API 생성
4. 백엔드에서 생성한 DB, API를 프론트엔드에서 실행
5. 클라이언트한테 결과값을 보여줌

이를 위해, 나는 다음과 같은 작업을 했다.

1. HTML 파일에 HTML, CSS, Javascript를 활용해 클라이언트에게 보여질 화면 구축
2. Python 파일을 통해 인터넷 서버에 HTML 파일을 구현할 코드 작성.
3. Python 파일을 통해 DB와 연결할 코드 작성
   -> 이렇게 되면 Python 파일의 코드와 Javascript의 Ajex가 서로 상호작용해서 API 화면에 나타나는 것 같음
4. localhost:5000 입력하여 잘 작동하는지 확인

(참고) python 파일을 통한 서버 구동을 위해 Flask 프레임워크를 활용했다. (Flask : 서버를 구동시켜주는 편한 코드 모음)

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)

아직 내 머리속에서 정리 안 된 부분이 많아 뒤죽박죽 적었다.
나중에 다시 보면 틀리 정보들도 있을 것 같다.

위와 같은 구조를 통해 여러가지 간단한 프로젝트를 진행했다.

• 나홀로 쇼핑몰 만들기 (매우 간단)
• 나홀로 메모장 만들기
• 지니뮤직 크롤링하기
• 네이버영화 크롤링하기 (크롤링을 하려면 Flask, Pymongo와 함께 bs4, requests 따로 설치 필요했다.)
• 모두의 책리뷰 만들기
• 네이버 랭킹 영화배우 크롤링해와서 좋아요 누르면 순서 바뀌고 그런 것 한듯..

여기까지 배우고 5주차에 드디어 AWS에서 서버를 구매해서 도메인을 붙이고 친구들한테 공유할 수 있는 방법을 알려줬다.

다음 내용부터는 이해가 거의 한 20% 밖에 안된 상태인 것 같아서 생각나는대로 써보겠다..

"서버가 무엇인가? 쉽게 말하면 그냥 컴퓨터다.
나는 AWS에서 서버를 샀다. (= 새로운 컴퓨터를 샀다.)
서버를 사니 IP 주소를 받았다.
그 IP주소로 MongoDB에 새 계정을 생성했다.
FileZilla로 서버 환경에 파일을 업로드할 수 있도록 했다.
GitBash를 통해 새로 받은 IP주소의 서버에 원격접속했다.
원격접속해서 폴더를 만들고 서버 환경 세팅을 했다.
세팅 내용은 다음과 같다"

• 한국시간 세팅 (컴퓨터의 시간대를 한국으로 맞춤)
• python3 명령어를 python으로 사용할 수 있게 했다. (python3이랑 python 이랑 뭔가 다른가보다. python3을 사용하고 있었는지 이때 알았다ㅋㅋㅋㅋ)
• mongo DB 설치

pip install pymongo

• Flask 서버 설치

pip install flask

이렇게 세팅을 해주고..Filezilla로 만들어뒀던 python, html 파일 등을 업로드해 주었다.

그렇게 하고 다음 코드를 입력해 주면!

python app.py

Debugger is active! Running on ~ 어쩌구 뜨면서 잘 된 것 같은 느낌이 강하게 든다. (근데 사실 아닌 경우가 훨씬 많았음..)

그렇게 하고 검색창에 내가 AWS에서 받은 IP주소를 치면! 안.나.온.다

뭔가 포트 (문)를 허용해 주지 않았기 때문에 보안 문제로 안되는 거라 한다. 그래서 AWS 접속해서 80, 27017, 5000 포트를 추가 허용해 주었다.

그렇게 포트를 열어주고 다시 IP주소를 치면! 화면에 내가 만든 웹서비스가 뜬다.

웹서비스 URL이 IP 주소면 뭔가 덜 멋있으니 가비아에서 도메인을 샀다. (한 개에 500원이다)

도메인을 사서 도메인 설정에서 내가 산 IP주소를 입력해 주고 조금 기다리면!

주소창에 도메인을 입력하면, 내가 만든 웹서비스가 보이고, 이제 세상사람들한테 공유할 수 있다!!! (Yeah!!!!)

그렇게 해서 내가 만든 사이트들이다. (시작은 미미하나 끝은 창대하리라..ㅎㅎ)
http://junekyeong.shop/
http://jscrap.shop/
http://jkword.shop/ <= 이건 웹개발 플러스에서 만든 건데 추가해 놓음

그럼 이제 앞으로 남은 웹개발 플러스도 잘 듣고, 계속 학습해 나가야겠다.

첫 개발일지 끝!!