-
[스파르타코딩클럽] 웹개발 종합반 5주차 [21.10.04 - 21.10.10]스파르타코딩클럽(웹_앱 종합반)/개발일지(웹개발) 2021. 9. 27. 16:32
웹개발자 코스의 마지막 단계인 5주차는 클라우드 환경이라고 하는 인터넷 상에 가상의 컴퓨터를 사서 우리가 올려놓은 코드들을 올려 놓고, 모든 인터넷 유저들이 볼 수 있게하는 작업을 진행한다. 마지막 주차라 시원 섭섭하면서 아직 갈길이 먼 내 자신이 불쌍해지기도 한다.
프로젝트 진행 시 뼈대 작업을 할 때 통상적으로 데이터를 쌓는 작업을 선행하여 진행하게 될것이다.
5주차 처음 진행하는 '무비스타' 프로젝트를 진행할 때도 데이터를 쌓는 작업부터 진행했다.
GET [무비스타 보여주기]
init_db 로 데이터 쌓기 우선 init_db 를 가지고 와서 데이터를 쌓고 app.py 와 index.html 코드 데이터를 불러오기로 한다. 그 다음 4주차에서 신물나게 썼던 웹 만들기 4단계를 쓰고 시작하자!
1. 클라이언트와 서버연결 확인하기
2. 서버로부터 만들기
3. 클라이언트 만들기
4. 완성 확인하기
클라이언트와 서버연결 확인 후 localhost:5000 페이지 확인 1. 클라이언트와 서버연결 확인하기 는 앞서 진행했던 프로젝트들과 마찬가지로 파이참에서 서버와 클라이언트 코드들을 확인하고http://localhost:5000 주소로 들어가서 확인을 해준다. 위의 이미지와 같이 나오면 서버와 클라의 연결은 SUCCESS!
그 다음은 2. 서버로부터 만들기 를 바로 진행해주면 되는데, 우리는 지금 가지고 있는 db 의 영화인들 모두를 보여줄 것이기 때문에 GET API 를 만드는 것 부터 시작하면 된다. 여기서 일단 영화인들의 정보가 있는 db 를 조회(read) 하고 그다음 클라이언트로 부터 받은 좋아요 수(update) 를 내림 차순으로 증가시키는 것 까지 만들면 서버에서 할 일은 끝이다.
좌측에 GET API 이미지를 보면 우리가 원하는 모든 영화인의 정보를 보여주기 위해서 pymongo 의 find 코드를 가지고 와서 입력해 있는 모습을 볼 수 있다. 그런데 앞선 수업에서들과는 달리 우리는 그냥 데이터를 내려줄 것이 아니라 좋아요 받은 수의 순서대로 정렬을 해서 데이터를 보여줄 것 이기 때문에 pymongo 에 정렬을 도와주는 코드(우측 빨간 박스)를 넣어주면 웹사이트에 원하는 대로 구현될 것이다.
(정렬과 관련된 코드는 이 문단 바로 아래 첨부한 이미지이다.)
pymongo 정렬 코드 
그 다음은 3. 클라이언트 만들기 를 진행할텐더 우선 get 을 받는 함수인 myStar response 에 'movie_stars' 들언 온 것을 구글 콘솔창에서 찍어보고 잘 입력되었는지 확인한다. 위의 우측 이미지를 보면 크롬 콘솔창에 영화인 50명의 데이터가 잘 나오고 있는 모습을 확인할 수 있다.
그 다음 for 문을 이용해서 원하는 정보 목록을 db에서 찾아서 html 에 넣어주고 바로 크롬 콘솔로 확인 하면 위의 우측 이미지와 같이 잘 찍히는 모습을 볼 수 있다.
우리는 가지고 있는 db 에 영화인들을 위의 좌측 이미지 안에 빨간 박스(영화인 정보) 의 형태를 해서 밑으로 붙여줄 것이기 때문에 html 에서 <body></body> 에서 <div class="card"></div> 찾아서 원하는 데이터 정보들을 위의 우측 이미지처럼 바꿔주면 된다.
마지막으로 우리는 아까 가져온 영화인 박스를 <div class="star-list" id="star-box"> 이곳에 붙혀줄 것이기 때문에 위의 좌측 이미지 처럼 붙여주고, http://localhost:5000 에 접속해서 확인하면 우측 이미지 처럼 이미지 박스가 잘 붙고 있는 모습을 볼 수 있다.
데이터 정리하기 아 진짜진짜 마무리로 처음부터 나오던 영화인 김다미 박스를 지워주고, 좋아요가 역순으로 잘 나오는지 확인해야 한다. 그것은 원래 있던 <div class="star-list" id="star-box"></div> 안에 <div class="card"></div> 을 지워주면 된다.(위의 좌측 이미지 첨부)
그리고 좋아요가 역순으로 나오는지 확인은 위의 좌측 이미지를 참고해서 robo 3t 들어가서 아무나 like 수를 바꿔주고(오른쪽 키를 눌러 Edit document..), http://localhost:5000 에 접속해서 확인하면 된다. 위의 이미지처럼 영화인 허이재의 like 를 1 로 바꾸고 위의 오른쪽 이미지처럼 브라우져 접속 확인을 해본 결과 설정했던 내림차순으로 잘 나오고 있다. 이렇게 되면 GET 요청과 관련된 부분은 끝난다!
POST [무비스타 좋아요 + 1]
1. 클라이언트와 서버연결 확인하기
2. 서버로부터 만들기
3. 클라이언트 만들기
4. 완성 확인하기
POST 에서 UPDATE 하는 작업을 할 것인데, 우리가 현재 해야하는 작업은 영화인들이 받는 좋아요 수를 바꿔주는 작업을 할 것이다.
우선 1. 클라이언트와 서버연결 확인하기 를 진행하여 연결을 확인하고 2. 서버로부터 만들기 를 해주는데, 평상시 우리가 진행했던 API 의 코드보다는 조금 복잡하지만, 얻고자하는 데이터를 생각하고 직관적으로 진행하면 될 것이다. 좋아요를 받는 POST API 가 좀 복잡한데, 위에 좌측 이미지를 보면 이해하기 쉬울 것 같다. db 로 부터 이름을 받고 클라이언트가 누른 좋아요 수의 현재 값을 찾고 그 이름에 해당하는 좋아요 값을 높여주는, 즉 1 을 올려주는 작업을 해줄 것이다. 이것은 곧 update 를 의미한다.
그 다음 3. 클라이언트 만들기 를 진행해주는데 우측 이미지를 보면 클라이언트에서의 작업은 그리 복잡하지 않다. likestar 함수를를 name 으로 받고 alert 로 메세지를 띄워주면끝이다.
4. 완성 확인하기 alert 와 좋아요 값이 잘 올라가고 있는 모습을 보여주면 완성이다!!
POST [무비스타 삭제하기]
1. 클라이언트와 서버연결 확인하기
2. 서버로부터 만들기
3. 클라이언트 만들기
4. 완성 확인하기
삭제하기는 앞서 좋아요 수를 update 하는 과정보다 훨씬 단순하다. 위의 이미지(좌:서버 / 우: 클라이언트) 참고하면 이전 과정보다 단순해진 코드 진행을 볼 수 있다.
1. 클라이언트와 서버연결 확인하기 를 확인하고 바로 2. 서버로부터 만들기 진행하는데 db 코드에서 삭제 하는 코드를 불러와서 없애고자하는 name 을 넣어주면 서버의 할 일은 끝이다. 바로 3. 클라이언트 만들기 돌입해서 데이터에 named 을 넣어주면 끝이다.
마지막으로 4. 완성 확인하기 를 위해 바로 http://localhost:5000 에 접속해서 확인해 보면 말끔히 삭제된 모습을 볼 수 있다.
# 내 프로젝트 서버에 올리기
특별한 컴퓨터만이 서버가 될 수 있다? No!
어떠한 컴퓨터도 서버가 될 수 있다. 여기서 서버의 역할은 기본적으로 클라이언트가 요청한 것에 대한 이미지를 주거나
ajax 콜로 요청한 사항에 대한 데이터를 주는 즉 클라이언트들의 요청을 받는 행위를 하는 것이 서버의 역할이다.
웹 서비스를 오픈하기 위해서는 클라이언트의 요청을 항상 응답해줄 수 있는 서버의 프로젝트가 실행되어야 하는데,
언제나 요청에 응답하려면 컴퓨터가 항상 켜져있고, 프로그램(app.py)이 항상 실행되어야 한다. 그리고 모두가 접근할 수 있는 IP 주소로 컴퓨터를 인터넷 세상에 열어두어야 한다. 그런데 만약 지금 나의 데스크탑, 노트북으로 이 과정을 진행한다고 생각해보면...과연 해킹과 보안에서 살아남을 수 있을까?..
이러한 문제 때문에 통상적으로 클라우드 서비스라는 인터넷 환경에 가상으로 나만의 컴퓨터를 만들어서 내 서버를 열어둔다.
우리는 편리한 서버 관리를 위해 AWS(Amazon Web Service) 라는 클라우드 서비스에서 서버를 구입한 후 프로젝트를 진행해 보았다.
서버를 운영하기 위해서는 여러 대의 컴퓨터를 운용해야하기 때문에 라이센스 비용이 들지 않는 리눅스라는 오픈소스 OS 를 사용한다.
그렇기 때문에 우리가 프로젝트를 진행할 때도 리눅스 운영체제의 Ubuntu 를 사용할것이다. Ubuntu 는 가장 보편적이고 많이 사용하는 리눅스의 운영체제이다. 나 같은 초심자는 구글링을 비롯한 검색을 했을 때 소스와 정보가 많은 보편적인 것을 선택하는 것이 가장 중요한 것 같다.
웹서비스 서버 런칭 과정
1. AWS 서버 구매
2. 서버세팅
- filezilla 이용하여 서버 세팅
3. flask 서버 실행해보기
4. AWS 에서 포트 열기
5. 내 프로젝트 업로드
6. 포트 포워딩
7. nohup 설정하기
8. 도메인 구입(가비아 이용)
9. Last 'og tag 만들기'
10. 내 웹서비스 완성 (http://taetookim.shop/)
'스파르타코딩클럽(웹_앱 종합반) > 개발일지(웹개발)' 카테고리의 다른 글
[스파르타코딩클럽] 웹개발 종합반 4주차 [21.09.27 - 21.10.03] (0) 2021.09.20 [스파르타코딩클럽] 웹개발 종합반 3주차 [21.09.20 - 21.09.26] (0) 2021.09.17 [스파르타코딩클럽] 웹개발 종합반 2주차 [21.09.13 - 21.09.19] (0) 2021.09.09 [스파르타코딩클럽] 웹개발 종합반 1주차 [21.09.06 - 21.09.12] (0) 2021.09.08