- 대부분 배운 내용은 스파르타코딩클럽에 있는 강의 노트를 참고하였음을 알립니다.
웹개발 종합반 4주차
수업 목표
- Flask 프레임워크를 활용해서 API를 만들 수 있다.
- '화성에 땅사기' API를 만들고 클라이언트에 연결한다.
- '스파르타피디아' API를 만들고 클라이언트와 연결한다.
1. Flask
배운 것
드디어 4주차 부터 서버를 배우기 시작했다. 4주차에서는 Flask 프레임워크를 설치해서 본격적으로 서버를 구축하는 것을 배웠다. 그전까지는 파이참에서 실행했지만 앞으로 부터는 Flask을 작성 후 실행 한 뒤에 직접 인터넷 주소에 localhost:5000를 눌러서 서버를 만드는 것을 배웠다. Flask도 서버를 만들 때 프로젝트 폴더 안에, static 폴더 (이미지, css파일), templates 폴더 (html파일),app.py 파일(Flask 서버), 그리고 venv(각종 패키지를 설치한 곳) 이렇게 파일을 만들고 진행했고 앞으로 후에 진행 될 4가지의 프로젝트 할때도 이런 사전 설정 방식으로 제작하였다. html 파일을 불러오는 것은 flask의 함수 중 하나인 render_template함수를 이용하였다.
마지막으로 GET, POST 방식의 정의를 배웠는데 GET는 통상적으로 데이터 조회(Read)를 요청할 때 쓰이며, 이때의 데이터 전달은 URL 뒤에 물음표를 붙여 key=value로 전달한다. POST는 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 쓰이며, 이때의 데이터 전달은 바로 보이지 않는 HTML body에 key:value 형태로 전달한다.
느낀 점
서버 구현은 이전에 배워본적이 없어서 처음으로 구현을 해서 신기했다. 서버를 만들때 이렇게 Flask 프레임 워크롤 통해서 만들 수 있다는 것을 느꼈다. 다만 현재는 Flask 서버를 실행해야만 서버가 돌아가 웹을 나타내는 방식이라 Flask를 꺼도 서버 계속 웹이 돌아가게 하는 것은 5주차때 배울 예정이다.
어려웠던 부분
GET, POST 방식 이해하는건 알았지만, 이게 어떻게 구조가 되는지는 상당히 햇갈렸다. 이 부분은 앞으로 프로젝트 할때도 힘들었던 부분이였다.
2. 프로젝트1 - 화성땅공동구매
배운 것
첫 번째 프로젝트로 화성땅공동구매를 시작 해 보았다. 시작 전에 flask 폴더 구조도 만들고, flask, pymongo, dnspython 패키지 3개를 설치 하였다. 그리고 미리 완성된 html, css 코드를 받아왔고, 우리가 할 것은 flask를 통해 API 만드는 것이다. 이름, 지역, 평수의 데이터를 받아야 하기 때문에 mongoDB Atlas 창 띄워두었다.
이제 구현 방식은 다음과 같이 진행했다.
먼저 POST(주문 저장) 구현 방식이다.
이름, 주소, 평수 저장하기(Create → POST)
1. 요청 정보 : URL= /mars, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : name, address, size
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (주문 완료!)
다음은 GET 연습(주문 보여주기) 구현 방식이다.
저장된 주문을 화면에 보여주기(Read → GET)
1. 요청 정보 : URL= /mars, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 주문을 보내주기
그렇게 완성된 프로젝트는 이름과 사는지역을 입력하고, 평수 10평~50평 총 5개의 중 하나를 선택을 하고 난 후 주문하기로 주문을 하면 주문 완료와 함께 mongoDB Atlas에서 데이터를 받고 받은 데이터를 웹에 이름, 사는곳, 평수를 보내서 아래에 남게 되는 프로젝트이다.
느낀 점
1~3주차를 배웠던 부분이 전반적으로 활용해서 이렇게 서버를 구축하고 데이터를 받고 출력을 하는 방식을 알게 되어서 좋았다. 상당히 흥미를 가졌던 부분이였지만 아직은 많이 헷갈리기에 이후 프로젝트를 통해서 이해하도록 노력을 해야 할 것 같다.
어려웠던 부분
처음 API를 만드는 거라 상당히 햇갈렸다. 코드 입력하는건 어럽진 않았지만 이게 어떻게 굴러가는지는 이해하는데 많이 힘들었다.
3. 프로젝트2 - 스파르타피디아
배운 것
두 번째 프로젝트로 스파르타피디아를 시작 해 보았다. flask 파일 구조랑 패키지 설치는 이전과 화성땅 프로젝트랑 동일하다. 다만 여기서는 추가적으로 meta태그를 대해서 추가적으로 공부를 했는데 meta태그는 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그이다. 여기서는 og:image / og:title / og:description를 이용을 하였고, 사실 이게 카카오톡에 링크를 올리면 이미지, 제목, 설명이 나오는 거 그거 맞다.
스파르타피디아는 다음과 같이 구현하였다.
먼저 POST 연습(포스팅하기) 구현 방식이다.
포스팅API (Create → POST)
1. 요청 정보 : URL= /movie, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : url, star, comment
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (포스팅 완료!)
다음은 GET 연습(보여주기) 구현 방식이다.
보여주기API (Read → GET)
1. 요청 정보 : URL= /movie, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 영화를 보내주기
그렇게 완성된 프로젝트는 영화 기록하기를 누르면 영화URL와 별점, 그리고 코맨트가 뜨는데 모두 입력을 하고 기록하기를 누르면 아까 배웠던 meta태크를 통해서 영화포스터, 영화제목, 영화소개가 나타나고, 마저 별점 표시와 코멘트까지 같이 나타낸다.
느낀 점
화성땅은 모든게 처음이라서 헷갈렸지만, 스파르타피디아는 아까전보다는 조금 익숙해지기 시작하였다. 하지만 여전히 햇갈리고 어려웠던 부분은 존재하였고, 이런 부분은 두 프로젝트 뒤에 숙제 프로젝트인 팬명록을 통해서 다시 한번더 보완을 하였다.
어려웠던 부분
아까전 화성땅 프로젝트보다는 조금 나아진 상태지만, 여전히 어려운건 flask와 html 연관 관계 이해하는게 어려웠었다. 다음주에도 프로젝트 하나 더 복습을 하지만 어떻게 굴러가는지 좀 더 이해하고 노력을 해야 하는 부분이였다.
