[TIL 2024. 04. 03] 게시물 수정,삭제 | 댓글 수정, 삭제

Team-8 project: python, flask, SQLAlchemy, javascript를 사용하고 있다
-> javascript는 웹종 강의에서 사용한 기본적인 코드만을 사용함

 

게시물 수정

 

1. 게시물 수정의 로직이 꼬임

문제상황: 처음에는 게시물 수정을 새로운 html을 만들어서 할 건지 아니면 기존의 게시물 작성.html을 활용할 것인지도 결정을 하지 못했다. 그러다보니 자연스레 app.py와 update_post()의 로직도 꼬여버리는 문제가 발생했다

 

해결의 실마리: 게시물 수정시에는 기존에 게시물 작성에서 받았던 입력폼 그대로에 db에 저장되어 있는 내용이 각 입력칸에 들어가 있어야 했다. 따라서 게시물 작성.html을 최대한 활용하되, 게시물 작성.html에 게시물 수정까지 구현하는 것보다는 별도로 게시물 수정.html을 만들어서 사용(게시물 작성.html 최대한 활용)하는 것이 쉬울 것 같아서 그렇게 하기로 했다.

 

게시물 조회.html에 있는 '수정'버튼을 누르면 게시물 수정.html을 렌더링해주는 함수가 하나 필요하고, 게시물 수정.html에서 수정값을 입력받으면 이를 다시 db의 Posting테이블에 갱신하기 위한 함수가 하나 더 필요할 것이라고 생각을 정리했다.

 

정리하면,

1. 게시물 수정.html을 만듦
2. app.py에 edit()와 update_post()를 만들어줌
   1. edit()은 게시물.html을 렌더링해주는 역할
   2. update_post()는 수정값을 db에 갱신해주는 역할
3. 게시물 조회.html의 수정버튼에 form태그로 통신 메소드를 선언해주며, url을 지정해줌 (to. edit())
4. 게시물 수정.html의 form태그로 메소드 선언 및 url을 지정해줌 (to. update_post())

게시물 수정.html_경로지정에 유의해야한

 

app.py

개발자 도구로 오류를 확인_400번대 클라이언트 오류였음

 

---

2. 게시물 수정.html이 렌더링될 때 posting_title이 제대로 출력되지 않음

 

문제상황: 게시물 수정.html이 렌더링될 때는 기존에 db에 저장되어 있던 데이터들이 각 input란에 들어있어야 했는데, {{ post.posting_title }}로 오타 없이 코드를 작성했고, db에도 posting_title컬럼에 데이터가 잘 저장되어 있음에도 렌더링되는 출력값에 오류가 있었음.

 

예를 들면 posting_title로 "아이언맨3 리뷰 작성"으로 게시물 작성시에 입력했고, db Posting테이블에도 잘 저장되어 있음에도, 수정버튼을 누르고 게시물 수정.html이 렌더링 될 때는 그냥 "아이어맨3" 이렇게 출력됐다.

 

해결의 실마리: 이런 오류가 나타나는 이유가 서버단의 문제인지(db에서 데이터가 잘 받아와지지 않아서인지), 아니면 html단의 문제인지를 알아보기 위해 app.py의 edit()에 print문을 찍어보면서 데이터가 잘 받아와지는지 확인했다.

(python app.py를 하고 웹상에서 수정버튼을 누른 다음에 IDE상의 터미널을 확인하면 됨)

 

서버단에서는 데이터가 잘 받아지고 있다

 

그러면 html단의 문제라는 건데, posting_title을 제외하고 다른 변수들은 모두 받아와진 데이터를 value={{}}를 통해 렌더링에서 잘 보여주고 있었다.

 

다행히 튜터님이 posting_title이 띄워쓰기를 기준으로 짤리고 있는 것 같다고 하셔서 value={{}}에 따옴표를 추가해본 결과 posting_title이 제대로 출력되지 않던 오류가 해결됐다!

 

단, 주의해야 할 점은 input태그에는 따옴표를 써주지만, textarea태그에는 따옴표를 안 써줘도 된다는 것. 그리고 textarea태그에는 중괄호로 변수를 넣는 위치도 열리는 태그와 닫히는 태그 사이다.

 

 

---

게시물 삭제

3. method를 'DELETE'로 지정했는데, '허용되지 않은 메소드' 오류 발생

 

문제상황: 게시물 조회.html에서 삭제 버튼을 누를시에 app.py와 delete_post()를 통해 db에서 해당 데이터가 삭제되는데, method로 POST나 GET 대신에 DELETE를 지정했다. 그런데 계속 '허용되지 않은 메소드'라는 오류가 났다.

 

해결의 실마리: GPT에게 물어보니, http의 제한으로 인해 DELETE 메소드로 명시적으로 통신 방법을 지정했음에도, POST나 GET으로 바뀔 가능성이 높다는 답변을 얻었다. 구글링 결과, http가 허용하는 메소드는 POST와 GET 두 가지 뿐이라는 사실을 알게 되었다.

 

 실제로도 delete_post()에의 요청을 DELETE로 지정 했었는데, 신기한 것을 발견하게 된다.

 

 

즉, delete_post()로의 요청이 GET으로 가기도 하고, POST로 가기도 하는 등 무작위했다.

그래서 app.py의 delete_post()에서도 다음과 같이 조건문을 줬다.

if request.method == 'GET' or 'POST':

---

댓글 수정, 삭제

4. 댓글 수정을 게시물 조회.html 페이지 내에서 하고 싶음

문제 상황: 게시물 수정은 페이지를 새로 해서 수정값을 받아도 자연스럽지만, 댓글은 게시물 상세 조회 페이지 내에 있기 때문에 페이지를 새로 해서 댓글 수정을 하게 하면 좀 어색해지는 느낌이 있다.

 

하지만 나는 일단 게시물 수정, 삭제 시에 사용했던 방법(html을 별도로 만들기)을 그대로 사용해서 댓글 수정, 삭제 기능을 구현하는데 성공했다. 즉, 처음에는 댓글 수정.html을 만들었다.

 

근데, 개인적인 아쉬움이 있어서..ㅎㅎ 이런저런 방법을 찾아봤는데 지금의 내 수준으로 가능한 것은 다음의 두 가지 정도였다.

• 부트스트랩 사용 (모달)
• 자바스크립트로 근근히 어떻게든 해본다..

일단, 부트스트랩으로 먼저 시도해봤는데 부트스트랩 cdn을 html에 붙여넣는 것만으로도 웹상에서 크롤링해온 영화 이미지가 화면 전체로 확대 되어서 나타나는 등 여러가지 오류가 나타났다.

 

그래서 자바스크립트를 사용하긴 해야겠는데, 당장 생각나는게 웹종 강의 때 들었던 '토글'에 대한 내용이었다. 토글은 웹종 강의 때 사용했던 코드 재사용도 가능하겠다 싶어서 토글로 수정창을 만들어보기로 했다.

 

즉, 게시물 조회.html에서 댓글 수정 버튼을 누르면 하단에 '댓글 수정 textarea'가 나타나고(기존의 댓글 내용이 들어가 있게끔 데이터 받아옴), 여기서 수정 버튼을 누르면 app.py의 delete_comment()로 요청을 보내서 db에서 해당 댓글을 삭제한다.

 

이때도 url지정에서 애를 먹었는데, app.py에서 게시물 조회.html에 렌더링시에 함께 넘겨주는 변수 comment는 db에서 filter결과를 전부 담고 있는 것이어서(all()) Not Found오류가 났다고 판단되어서, com이라는 변수를 새로 만들어서 filter해서 하나만 데이터를 담아서(first()), html단으로 함께 넘겨주니 모든 출력이 원하는대로 나왔다.