- 대부분 배운 내용은 스파르타코딩클럽에 있는 강의 노트를 참고하였음을 알립니다.
웹개발 종합반 5주차
수업 목표
- Flask 프레임워크를 활용해서 API를 만들 수 있다.
- '버킷리스트'를 완성한다.
- EC2에 내 프로젝트를 올리고, 자랑한다!
1. 프로젝트3 - 버킷리스트
배운 것
지난 4주차에서 복습 하는 차원으로 버킷리스트 프로젝트를 진행하였다. 마찬가지로 flask 폴더 구조랑 패키지 설치, html, py의 기본 뼈대는 이젠 기본으로 진행하고 시작하였다. 물론 mongoDB Atlas 창도 띄워두었다.
버킷리스트는 다음과 같이 구현 하였다.
먼저 POST연습(기록하기) 구현 방식이다.
버킷리스트 기록 API (Create→ POST)
1. 요청 정보 : URL= /bucket, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : bucket
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (기록 완료!)
근데 여기서는 이전과 다르게 기록 한번 할때마다 버킷 번호(num)를 함께 남겨야 한다. 그 이유는 뒤에 완료하기 구현에서 완료 버튼 누를때 완료 여부를 구분하기 위함이기 때문에 이 부분은 짚고 넘어가서 적용을 해야 했다.
다음은 GET연습(보여주기) 구현 방식이다.
버킷리스트 조회 API (Read→ GET)
1. 요청 정보 : URL= /bucket, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 버킷리스트를 보여주기
마지막으로 POST연습(완료하기) 구현 방식이다.
버킷리스트 완료 API (Update→ POST)
1. 요청 정보 : URL= /bucket/done, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : num (버킷 넘버)
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (버킷 완료!)
이렇게 해서 완성된 프로젝트는 내가 이루고 싶은 목표를 적어서 기록을 누르면 그 기록이 딱 표시가 된다. 그러고 나서 목표를 이뤘으면 해당 목표 옆에 완료 버튼을 누르면 그 문구는 취소선이 표시되면서 완료 했다는 것을 보여준다. 이런식으로 본인이 이루고 싶은 버킷을 추가하고 완료한것은 누르면 되는 방식이다.
느낀 점
마지막으로 API 구현 하는 방식이라 이제 조금 익숙해지는 것 같았다. 그래도 지난 2개의 프로젝트, 숙제 프로젝트와 함께 더불어서 이번 프로젝트까지 통해서 이제 조금 익숙해졌다는 느낌을 받았다.
어려웠던 부분
가장 어려웠던 보단 이해하기 힘들었던 것은 num으로 버킷 번호 지정하는 것이 조금 생소했다는 부분이였다. 그래도 반복적으로 연습해서 적응할 필요가 있어 보인다.
2. 배포하기(1) - 사전 작업
배운 것
본격적으로 배포하기전에 Filezilla 설치작업을 하였다. 이것은 나중에 지금까지 만든 코드 파일을 업로드 할때 사용하게 된다.
그 다음으로 가비아 홈페이지 가서 회원가입을 하고 내가 원하는 도메인 홈페이지를 주문하는 작업을 하였다 자기가 원하는 이름 도메인을 검색하고 난 후 shop 형식의 1년동안 단 500원 밖에 안하는 것을 구매하였다. 이 작업을 미리 하는 것은 주문하고 사용을 하려면 최소 30분정도 소요 되기 때문에 미리 도메인 주소를 구매를 하는 것이다.
느낀 점
본격적인 배포의 시작이라서 앞으로 수업에 기대 할 수 있게 된 것 같아서 좋았다. 뭔가 만드는건 해봤어도 배포는 지금까지 해본 적이 없었기 때문에 이후 강의도 재미 있을 것이라고 생각했다.
어려웠던 부분
파이질라 설치를 하고 가비아 가입해서 도메인을 구매하는 거라 어려운건 딱히 없었다.
3. 배포하기(2) - 서버 구매
배운 것
지금까지는 py파일을 실행해야만 서버가 발동이 되었다. 근데 이런 방식은 내 컴퓨터를 하루종일 켜서 실행을 해야하는데 이러면 전기세도 엄청 나가고 내 컴퓨터도 해치는 것이기에 현실적으로 불가능 하다. 그래서 우리는 AWS EC2를 이용해서 서버를 구매해서 py파일 실행 하지 않아도 서버거 계속 돌아가게 하려가 한다. 이미 1주차때 미리 AWS 회원가입을 했을 것이다.
이제 EC2를 통해서 서버를 구매를 하고 서버 세팅 하는 방법을 배웠다. 먼저 Ubuntu Server 18.04 또는 20.04 버전을 구매를 한다. 그런 다음 KEY 생성하기를 클릭 후, key를 발급 받는데 이때 pem파일로 받는다. 그리고 각종 체크리스트 체크 하면 서버 구매를 완료 한다. 이러면 서버 구매는 완료 된 것이다.
여기서 주의해야할 점은 서버가 2개 이상 구동되면 안되고, 그리고 한개의 서버는 1년까지만 무료이며, 그 이후부터는 수 십만원씩 결제를 해야 하기 때문에 서버 구동이 필요 없을때는 중단하거나 아예 삭제를 해서 결제를 막아야 한다. 그리고 2차 인증도 필히 해서 해킹을 방지를 해야 한다. (해커들로 인해 수많은 서버 구매를 해서 몇백만~몇천만 결제를 해야하는 피해 받은 사례도 있었고, 이거 해결하려면 엄청난 시간이 필요하기 때문)
느낀 점
서버를 구매하는 방법을 배워서 배포의 시작이 되었다는 것을 느꼈다. 잘못 설정해서 결제가 되버리면 큰일나기 때문에 두 세번 확인하고 진행을 하였다.
어려웠던 부분
서버를 구입하는 것 자체는 어렵지는 않았지만 시간이 좀 지난 영상 강의라 그런지 당시 화면에는 가르쳐 부분이랑 약간 다른 부분들이 있어서 구글 검색으로 추가적으로 해결을 하는데 시간이 걸렸다.
4. 배포하기(3) - 서버 세팅
배운 것
3주차때 GIT BASH를 다운 받았을 것이다.(MAC는 터미널로 진행) 이 프로그램은 리눅스 명령어 프로그램인데 이것을 통해서 EC2 서버에 접속을 해볼 것이다. 리눅스 명령어는 아주 많기 때문에 필요 한것은 구글링으로 찾아서 적용하면 된다.
그럼 우리가 키페어를 생성 했을텐데 그걸로 통해 접속을 하면 된다.
ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내아이피
그런 다음 EC2 한방에 세팅하는 방법이 있는데 메모장에 미리 세팅하는 코드(총 5줄)를 받아와서 이것을 모두 명령어에다 입력을 하면 세팅 완료가 된다.
그런 다음에 미리 다운 받았던 파일질라에 들어가서 사전 설정을 해야 한다. 이때 Host는 내 EC2서버의 ip // User는 ubuntu 로 입력을 하면 된다.
그러면 이제 내가 가지고 있는 파일들을 끌어 옮기면 업로드가 완료하는 방식이다.
느낀 점
서버 세팅 하는 방식도 차근차근하게 따라하면 어렵지 않았다. 이제 앞으로 서버를 구동할때 이런식으로 진행하면 된 다는 것을 알게 되었다.
어려웠던 부분
어려웠던 것은 아무래도 명령어 작성하는게 처음이라 이부분에 익숙해지는데 어려웠다. 그거만 빼면 나머지는 어려운건 없었다.
5. 배포하기(4) - 서버 실행
배운 것
이제 내가 만든 팬명록을 업로드 할 시간이다. 파일질라를 통해서 내 파일들을 업로드 하면 되고, 그런 다음에 git bash에서 python app.py 실행하면 된다. 근데 실행이 되지 않는다. 그렇다. git에서 각종 패키지를 설치 안했기 때문이다. 그래서 전에 했던 패키지들을 git에다 설치를 하는데 하는 방법은 pip패키지명 모두 설치 하면 된다. 그리고 나시 다시 실행하면 정상적으로 서버가 실행 되진다. 이제 크롬 브라우저 창에 아래와 같이 http://[내 EC2 IP]:5000/ 실행하면 딱 내가 만든 팬명록이 나올 것이다. 근데 역시 안된다. 아직 EC2에서 추가 설정이 안됬기 때문이다. EC2 보안에 가서 인바인드 설정을 통해 몇몇 포트를 추가를 해야 한다. 이렇게 포트까지 추가 완료되야 비로소 서버가 작동되면서 내 팬명록이 나오게 된다.
근데 이것만 하면 다 되는가 하면 역시 아니다. 지금 GIT BASH를 킨 상태애서만 작동이 되기 때문에 꺼버리면 서버가 끊겨서 접속이 안된다. 그러기 때문에 추가적으로 nohup 설정을 해서 추가 명령인
nohup python app.py &
을 해야 비로소 GIT BASH가 끄더라도 정상적으로 서버가 실행이 된다. 다만 이렇게 서버를 계속 킬수는 없기에 완전히 종료 하는 방법도 있다.
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
로 완전히 종료 시키면 된다.
느낀 점
서버를 실행 하기 위한 추가적인 설정을 통해서 비로소 내 홈페이지가 업로드 된게 엄청 뿌듯했다. 내 힘으로 불가능했던 배포가 완료된 시점이였다.
어려웠던 부분
뭔가 여러가지 설치하고 설정하는것이 조금 애먹은거 빼고는 어려운건 없었다. GIT BASH 부분은 여전히 적응 해야 하는 부분이다.
6. 배포하기(5) - 도메인 연결
배운 것
우리가 이전에 가비아를 통해서 도메인을 구매했을 것이다. 현재는 EC2 IP라는 이상한 숫자 도메인으로 접속해야 하지만, 이제 내가 구매 했던 도메인 주소로 연결을 하면 내가 구매한 도메인 주소로도 연결을 할 수 있다. 그러면 가비아 가서 내가 구매한 도메인 주소의 DNS 설정을 하면 된다. 여기서 호스트 이름에 @, IP주소에 IP주소를 입력하면 이제 비로소 내가 구매한 도메인 주소로도 접속을 할 수 있게 된다.
마지막으로 og태그를 통해서 카카오톡에서도 내 도메인 주소를 올리면 깔끔하게 썸네일이 나오게 하는 방법이 있다. 4주차때 스파르타피디아에서 미리 배웠던 것을 기억하면 쉽게 적용 가능하다. 근데 중간에 수정을 해야 하기 때문에 우선 git에 가서 잠깐 서버를 중단시키고, 내가 적은 코드를 수정한 다음 다시 파일질라에 가서 기존꺼는 삭제하고 바뀌어진 파일을 재 업로드 하면 끝이다. 이런식으로 앞으로 내 홈페이지를 수정 할 때에는 이런 방식으로 이용하면 된다.
- 이로써 내 팬명록은 완벽하게 배포가 완료되었다.
느낀 점
이로써 5주차의 모든 강의가 끝났고 마침내 내가 구매한 도메인 주소로 배포까지 모두 마무리 하였다. 이로써 모든 강의를 완주해서 놀라웠었다.
어려웠던 부분
도메인을 연결을 하는 방법도 어려운 것은 없었고 og태그 또한 이전에 배웠던거라 어려운 점은 없었다.
7. 마무리 코멘트
전체적으로 1주차에는 html,css 작성, 2주차는 script작성, 3주차에는 파이썬과 웹크롤링, 4주차에는 서버 구현과 API 작성, 5주차에는 배포까지, 웹에 대한 모든 것들을 간단하게 전부 구현을 하였고 마침내 완주를 해서 기분이 좋았다. 1회차때는 영상을 보고 따라하고 이렇게 굴러가구나만 이해하고 넘겼지만, 2회차때는 각각의 코드가 어떻게 굴러가는지 이해하는 방향으로 공부를 했다. 이걸 과연 혼자서 다 무사히 진행 할 수 있을까 걱정을 했지만 사전스터디를 통해서 동료들과 같이 힘을 내서 할 수 있었 던 것 같다.
이제 머지 않았다. 2월 6일부터 본 향해가 시작된다. 이제부터는 최소 12시간, 많게는 15시간 이상 앉아서 코딩을 하고, 많은 프로젝트를 팀원들과 협업을 하게 될텐데 무사히 잘 진행하고, 나의 체력 관리도 중요해질 시기이다. 다시 한번 더 같이 사전스터디를 해준 팀원들 모두 고마웠다.
