스파르타코딩클럽

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..

[5주차] 인터넷에서 서버 돌리기

※ 스파르타 코딩클럽의 웹개발 종합반(5주)을 공부하며 기억하고 싶은 특이점들만 기록, 정리해 놓은 노트이다.Flask 기초 5탄 - 버킷리스트POST (버킷 등록하기) 1. 요청 정보 : URL= /bucket, 요청 방식 = POST 2. 클라(ajax) → 서버(flask) : bucket 3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (기록 완료!) 단! 서버에서 한 가지 일을 더 해야한다: → 번호를 만들어 함께 넣어주는 것. 그래야 업데이트, 즉 ‘완료’ 표시가 가능하다.역시나 필요한 패키지는 flask, pymongo, dnspython 셋.서버(app.py)측프론트에서 받은 bucket(내용)에 더해 :버킷 번호”와 “완료 여부”를 함께 데이터에 넣어줘야 한다.@app.rou..

[4주차] 내 컴퓨터에서 서버 돌리기

나는 버튼! Flask - POST 요청과 응답1. 프론트(index.html)에 Ajax로 POST 요청 심어주기2. 서버(app.py)에 POST 대응 API코드 만들기# '/test' 창구에 POST 요청을 받았을 경우: @app.route('/test', methods=['POST']) def test_post(): title_receive = request.form['title_give'] print(title_receive) return jsonify({'result':'success', 'msg': '요청을 잘 받았어요'}) 왜 GET 요청 때는 data항목으로 키-값을 넘겨주지 않는 걸까? POST 때와는 무슨 차이지? A. GET방식 때 URL 뒤에 데이터를 붙여 보내는 것과 달리 POS..

[3주차] 파이썬, 데이터베이스 다루기

※ 스파르타 코딩클럽의 웹개발 종합반(5주)을 공부하며 기억하고 싶은 특이점들만 기록, 정리해 놓은 노트이다. ※ 노션에 필기한 내용을 복사해오다 보니 식과 포맷이 엉성한 곳이 있다. let star_image = "⭐".repeat(star); 에러 기록 (인터프리터를 찾을 수 없어…) 가상환경 생성에 실패했습니다. PyCharm에서 파이썬 새 프로젝트를 실행하려는데 ‘인터프리터를 찾을 수 없고’ 그래서 ‘가상환경 생성에 실패했다’는 메세지만 받기를 십 수번… 여기저기 검색도 해보았지만 내 상황엔 적용되지 않는 것 같아보이는 조언들만 읽다가 지치고 읽다가 지치고 하기를 어언 1시간 반… 그래 가상환경 폴더(venv)는 안 만들어져어도 일단 파이썬 파일이 실행은 되니까 진행하자 하고 진행하던 중, 패키지..

[2주차] jQuery와 Ajax로 서버에 GET요청하기

※ 스파르타 코딩클럽의 웹개발 종합반(5주)을 공부하며 기억하고 싶은 특이점들만 기록, 정리해 놓은 노트이다. ※ 노션에 필기한 내용을 복사해오다 보니 식과 포맷이 엉성한 곳이 있다. jQuery란 jQuery는 자바스크립트를 모아놓은 도구모음(라이브러리)다! 부트스트랩이 CSS 도구모음인 것 처럼. jQuery의 장점 코드가 간결해지고 브라우저간 호환성을 해결해줘서 각광받았다. jQuery 임포트하기 내가 직접 제이쿼리.js 파일을 다운받아서 사용하는 것과, 구글 CDN(Content Delivery Network)같이 제이쿼리를 호스팅해주는 곳에서 갖다가 쓰는 방법이 있다. // Google CDN: // 알맞은 버튼에 기능 부여: 영화 기록하기 닫기 포스트를 할 수 있는 박스(post-box)를 처..

[1주차] 눈에 보이는 부분(웹페이지) 만들기

... 크롬 개발자도구 콘솔창이 정확이 이런 의미였다니: “띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구”콘솔 지우기(Ctrl+L): 도화지를 깨끗이 한다방향키 위 버튼: 방금 작성한 코드 복붙 기초 문법 1탄console.log("Hello World!"); // 자바의 System.out.println();과 같음let num = 20 let name = 'Bob'// 덧셈연산 fist+num // Bob20 => 자바에서 연산할 때처럼 문자열이 더 강력함(?) num+num // 40// 네이밍 컨벤션 let first_name = 'Bob' // snake case let lastName = 'Roger' // camel case // 특수문자와 띄어..