나 자신과의 싸움
악명 높은 4주차. Flask 프레임워크로 로컬 서버를 구성하고 본격적으로 프론트-백을 연결하는 프로젝트 몇 개를 만들었다.
클라이언트와 서버 연결 확인하기 -> 서버부터 만들기 -> 클라이언트 만들기 -> 완성 확인하기
위 순서를 잘 염두해두고 진행해야 한다.
1) 모두의 책리뷰
1. POST API: 리뷰 저장 기능
A. 요청 정보
요청 URL= /review , 요청 방식 = POST
요청 데이터 : 제목(title), 저자(author), 리뷰(review)
B. 서버가 제공할 기능 : 클라이언트에게 보낸 요청 데이터를 데이터베이스에 생성(Create)하고, 저장이 성공했다고 응답 데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'msg'= '리뷰가 성공적으로 작성되었습니다.'
2. GET API: 리뷰 보여주는 기능
A. 요청 정보
요청 URL= /review , 요청 방식 = GET
요청 데이터 : 없음
B. 서버가 제공할 기능 : 데이터베이스에 리뷰 정보를 조회(Read)하고, 성공 메시지와 리뷰 정보를 응답 데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'all_reviews'= 리뷰리스트
2) 나홀로 메모장
포스팅 API, 리스팅API를 만들고 meta 태그 스크래핑을 추가한 프로젝트. 스크래핑 기능은 익숙하지 않으므로 API에 넣기 전 '조각 기능 구현'을 통해 미리 테스트해본다. meta 태그에서 썸네일, 기사제목, 요약내용을 가져올 수 있었다.
3) 숙제: 나홀로 쇼핑몰 완성
역시 포스팅 API와 리스팅 API를 만드는, 1번과 유사한 프로젝트. 수업에서 제공한 템플릿에는 금방 구현에 성공했는데, 기존에 내가 만든 페이지에 적용할 때는 에러메시지를 2시간 넘게 봐야했다.
포스팅 API를 구현하는 과정에 콘솔창에서 'POST http:/ /localhost:5000/order 400 (BAD REQUEST)' 에러가 뜬 것. app.py 파일과 html의 script를 눈이 빠져라 찾아보고 부분부분 복사 붙여넣기를 해봤는데 템플릿버전 코드와 다른 부분이 없어서(그런데도 오류가 나서) 당혹스러웠다.
원인 1. 뒤늦게 보니 venv폴더가 templates 폴더 안에 들어있어서(…) 꺼내주었다. flask나 pymongo 등의 라이브러리를 깔고 시작한 프로젝트가 아니라 여러모로 꼬인 것 같다.
원인 2. 아예 새 프로젝트를 만들어 app.py와 index.html 코드만 복붙하고 run했다. 그런데 새로운 오류 메시지 출현! "400 Bad request. The browser (or proxy) sent a request that this server could not understand." 이건 앞선 프로젝트를 만들면서 본 오류라 뭔가 이해할 수 있을 것 같았다. '브라우저가 요청을 보냈는데, 서버가 이해할 수 없는 요청을 보냈어' … 구글링 해보니 오타가 흔한 원인인 것 같았다. 근데 정말 오타 없었는데!
한참 걸려 버그를 찾아냈다. index.html에서 '수량' input의 아이디를 가져다 이 value 값을 받아서 서버에 저장해줘~ 하고 요청했는데,
let quant = ($('#order-quant')).val()
ajax의 data: {quant_give:quant}세상에 해당 input 컴포넌트에 아이디 값이 두 개나 있어서 app.py는 혼란했던것.
quant_receive = request.form['quant_give']차라리 #order-quant가 앞서 있었으면 오류가 안 났을지도?
나의 페이지는 부트스트랩에서 폼을 가져오면서 자동으로 붙은 id값이 보존, 이번에 새로 제공된 숙제 템플릿은 id값이 깔끔하게 정리되어있던 차이 같다.
오타만큼 허탈하고 마음 아픈 오류였다. 앞으로 id값 두 개 쓰는 일은 절대 없을 것 같다. 또 클래스나 아이디 명을 직관적으로, 정돈해서 처음부터 잘 붙여둬야겠다는 필요성을 느꼈다.
제공된 템플릿에, 그리고 내가 만든 페이지에. 숙제를 두 번 한 셈인데 이렇게 하니까 서버와 클라이언트 연결하는 일련의 과정이 꽤 익숙해졌다.
