얼음꽃의 일지

5주차 시작 전.. 복습하기위해 버킷리스트! 본문

웹개발 개발일지/5주차

5주차 시작 전.. 복습하기위해 버킷리스트!

얼음꽃 2022. 9. 2. 18:38
728x90

5주차 내용은 따로 크게 없습니다. 배운 내용들을 업로드 하여 서버에다가 올리는 방식을 배워 볼 예정입니다.

 

그 전에 4주차에서 했던 내용을 복습하고자 버킷리스트를 만들어 해볼 예정입니다.

 

먼저 POST부터 보도록 하게습니다.

 

 

설명하기 위한 사진

 

현재 여기서 필요한 값은 기록할 곳, 기록하기 버튼(함수 save_bucket()) 임을 미리 알려드립니다.

 

POST Ajax 코드
POST API 코드

그림과 같이 입력을 받으면 Ajax 코드에서 그 값을 받아와 API의 _give() 쪽으로 넘겨주게 됩니다. 그럼 API는 bucket_give로 하여 받아와 변수에 입력하게 됩니다. 이때, 저희가 확인해야하는 부분은 버킷리스트를 기록할때의 순서와 다해서 지울때 입니다. 

 

순서는 DB에 있는 내용을 다 가져와서 거기 +1 씩 한 값을 변수로 잡으면 됩니다. 이유는, 리스트, 딕셔너리, 인덱스가 시작하는 값은 항상 0 부터이기 때문에 1부터 시작해주기 위해서 입니다. 그리고 버킷리스트가 완료가 안됐으면 0 됐으면 1을 하기 위해서 기록할때는 항상 0을 유지해야하기 때문에 done 값을 0으로 잡고 DB에 저장해줍니다.

 

이제 버킷리스트를 기록했을때인 GET을 먼저 보겠습니다.

 

설명하기 위한 사진

 

GET Ajax코드
GET API 코드

이제 GET API코드에서 DB 값들을 다 꺼내서 buckets 로 Ajax 코드로 보내면 Ajax 코드는 그걸 받아서 변수인 rows에 대입을 하고 rows의 길이 만큼 돌면서 버킷리스트, 순서, 끝났는지 확인하기 위한 숫자(done) 을 다 꺼냅니다. 그리고 리스트 형태인 <li></li>에 넣는데 이때, done 값이 0일때 아닐때를 구별해야합니다. 0이면 아직 버킷리스트를 못한것이고 1이면 한것이기 때문이죠.

 

추가적으로 버킷리스트를 다 했을때 0 -> 1 로 바꿔주는 부분을 보여드리겠습니다.

 

done POST Ajax 코드
done POST API 코드
done_bucket 함수가 어디에 쓰이는지

저 완료 버튼을 눌렀을때 버킷리스트가 끝나도록 하겠습니다. 먼저 버튼이 눌리면 done_bucket()이라는 함수가 적용됩니다. 그럼 그 숫자를 API에게 보내주게되고, API 코드는 그 숫자를 받아서 done값을 변경하게 됩니다. 0 -> 1로 말이죠. 근데 조심해야하는 부분은 

 

버킷리스트 MongoDB

DB를 보시면 num 부분이 숫자입니다. dictionary에서 받아온 값은 문자열이기 때문에 강제로 정수 변환이 필요합니다. 그래서 int(num_receive) 를 한 것입니다.

 

그래서 버튼을 누르면 다음과 같은 결과 형태가 보입니다.

 

완료 버튼 눌렀을때 결과

 

이전에 다뤘던 내용을 잘 하셨으면 아마 이 부분도 하시는데 큰 지장은 없었을듯 합니다.

 

마지막으로 py파일 코드를 올려놓겠습니다.

 

py파일 코드

728x90

'웹개발 개발일지 > 5주차' 카테고리의 다른 글

서버에 프로젝트를 올리기 위한 준비  (0) 2022.09.02