스파르타코딩클럽/[내일배움캠프] 프로젝트와 트러블 슈팅

MongoDB의 ObjectId 최대한 간단하게 처리해서 프론트로 넘겨주기 ✔️

아무리 정리하려고 해도 이상하게 매끄럽게 한 두 문장으로 문제 상황과 해결이 정리가 안 된다… 감안하고 봐주시길. 배경 스토리:MongoDB의 데이터를 프론트로 보내주려고 할 때, 발목을 잡는 것이 MongoDB 고유 객체인 ObjectId이다. 이걸 그대로 프론트로 실어 보내려고 하면 에러가 난다. 그래서 사용하는 게 json_util.dupms()로 ObjectId를 한 번 파이썬이 인식 가능한 형태로 풀어주는 것이다. 그러면 ObjectId는 풀어지는데 다른 멀쩡한 문자까지 깨지게 되어, 그걸 또다시 정상적으로 바꿔주기 위해 json.loads()를 써주고 마지막으로 포장하는 게 jsonify(). 이렇게 3단계를 거쳐서 프론트로 보내주고 있었다. GET 요청의 응답으로 Response객체가 아닌 ..

jsonify()는 뭘 어떻게 포장해서 프론트로 보내는가 ✔️

발단:app.py에서 return jsonify(”쌩 메세지”)로 보내고, 프론트에서 success: function(response) { alert(response) } 해도 alert(response[’msg’]) 때와 똑같은 형식으로 잘 뜨는 것을 발견했다. 이유가 궁금했다. response를 jsonify로 안 보내면 어떻게 되지?⇒ jsonify()로 안 보내도 된다. 이 포스트에 연구해놓았다.response를 jsonify로 잘 보내도, ‘키’값이 없는데 어떤식으로 저장돼서 보내지고 출력되는 거지? ⇒ 결론부터 말하면, jsonify()는 위치 인자를 그냥 나열하는 것(jsonify(”메세지1”, “메세지2”, …))과 키워드 인자쌍을 주는 방식(jsonify({”msg”: “메세지1”, “m..

비번 확인해서 삭제시키기 + 실패시 에러 메세지 띄우기 ✔️

비번 확인해서 삭제시키기 발단: DELETE 요청 실패시 서버에서 반환한 errorhandler 안의 메세지를 프론트가 적절히 받지 못해 임의의 alert 내용을 띄우도록 했었는데, 이 사항을 뜯어본 과정을 기록해 보았다. 결론부터 말하면, Ajax의 error 옵션을 사용해서 추출해낼 수 있었다. Ajax 삭제 요청시 “실패하면”의 조건을 달고 싶을 때 error 옵션을 쓴다. “성공하면”의 조건을 달 때 success 옵션을 쓰는 것과 같이. 아래는 템플릿 그대로 “실패하면” 콜백에게 인수 3개 쥐어주고 뭐가 나오는지 실험해 본 결과이다.Ajax의 error 옵션 실험:# app.py @app.route("/api/comments/delete/", methods=["DELETE"]) def delet..

HTML 스크립트 태그 내에서 제이쿼리 이벤트가 무시되는 에러 해결 ✔️

이걸 그냥 실행시키면 id=”official”속성을 가진 문서 객체가 생성되기도 전에 저 스크립트를 실행하고 넘어가게 되어 아무 일도 일어나지 않는다. 이를 방지하기 위해 두 가지 해결책이 있다: // 1. // 2. 둘 모두 잘 동작함을 확인했다. 그런데 1번이나 2번이나, “official”이라는 id를 가진 버튼에 마우스를 올릴 때마다 반복되서 실행되는데 그건 어떤 원리로 가능한 건지 모르겠다. ⇒ 저 함수들은 이벤트를 ‘연결지어줌’을 완료한 것이기 때문일까?개인적으로 2번이 더 이해가 안가고 1번이 더 안전하고 확실해 보인다. 앞으로 1번 방식을 사용하기로 한다. 참고로:부트스트랩 버튼을 해주고 class를 부트스트랩 버튼 클래스들로 똑같이 채우기만 하면 똑같은 모양으로 만들어지는 신기한 현상을 ..

01. 미니 프로젝트 - 팀 페이지를 만들 때

※ 개인 기록용으로 남겨놓는 첫 팀 프로젝트 - 정리x 우왕좌왕 기록. 시간이 남아돌 때만 볼 것. 프로젝트 요구 명세: index.html - 팀 소개 대문 페이지 자유 형식 하나app.py - 댓글 Ajax 요청을 보내고 받는 서버 하나댓글 보여주기가 가능하도록. 각 개인 페이지로 이동이 가능하도록. 개발 기간 : 11/16(수) ~ 11/18(금)일주일 중 약 3일 사용 기술/언어: CSS, HTML, JavaScript(JQuery, Ajax)mongoDB, Python(Flask) 초안 : 팀 회의 하면서 혼자 끄적여 본 초안: 과도기 : 결과제출한 버전 ( =Initial commit 때의 상태 ): GitHub - devocean-han/Mini_Poject_V2 at eaced8b054f0..

01. 미니 프로젝트 - 개인 페이지를 만들 때

※ 개인 기록용으로 남겨놓는 첫 팀 프로젝트 - 정리x 우왕좌왕 기록. 시간이 남아돌 때만 볼 것. 프로젝트 요구 명세 : 개인 index.html - 내 개인 소개 페이지 자유 형식 하나댓글 받기 기능 개발 기간: 11/14 (월) ~ 11/16 (수)일주일 중 약 3일 사용 기술/언어: CSS, HTML, JavaScript(JQuery, Ajax)⇒ 왜 이 기능을 사용했는지(?)ex. 이 프로그램을 개발하는 데 파이썬을 썼는데, 왜냐하면 파이썬에 이에 관련한 강력한 라이브러리 2개가 있어서이다. 일번 라이브러리는 이렇고저렇고, 2번 라이브러리는 이렇고 저렇고한 기능을 제공해서 내가 필요한 기능과 가장 부합하는 도구라서 갖다 쓰게 됨. (단순 기록용) 작업 기록디자인 샘플 검색이미지https://ww..