🦁 Python Online Store 만들기 11편 - 상품 수정

🎈 Front End Developer 의 Back End 도전기 ! 🎈

이 글은 PROJECT LION : 호코치 강사님의 강의를 들으며 참고한 글입니다.

작업 중, 개발과정 정리 및 issue가 되었던 부분들을 공유 및 기록하고자 작성하게 되었습니다.

1. 상품 수정

✍ 상품 수정은 등록과 매우 유사하다. 변경하고싶은 특정 상품의 고유번호를 주소값에 담고 update 주소를 정의한다. flask가 주소를 요청받으면 API 함수를 호출하고, 특정상품의 고유번호를 가진 product document 상품을 찾아 수정시켜 주는 것이다.

1. 상품 수정 API 생성
   = route를 product_id/update 주소로 요청하며, update 함수를 사용함과 동시에 product_id값을 받아준다.

---

= 상품 등록과 유사하게 동일한 data 값을 받아온다.
하지만 등록과는 다른 점이 있다. 수정을 하는 경우에는 img file을 수정하지 않을 수도 있을 것이다.

수정을 하지 않는 경우에는 upload를 하지 않을 것이고, thumbnail 및 detail img가 아무것도 존재하지 않을 것이다.

그러므로, if문으로 존재여부를 파악하여 있다면 upload 시키도록 작업을 해주었다.
🔖 등록도 동일하게 if문으로 처리해준다.

---

하지만, 수정을 하지 않는 경우에는 if문이 동작하지 않고, 최종적으로 update_one 함수가 실행될 때 thumbnail_img_url 및 detail_img_url 을 정의할 수 없어 오류가 발생할 것이다.

---

이러한 상황을 예방하기 위해 기본적으로 정의를 해두어서 undefined 가 발생하지 않도록 변수를 정의해 두었다.

---

그 후, 데이터를 받아와서 저장해야 하므로 update_one 이라는 함수를 만들어 저장하겠다.
필요한 data는 어떤 상품을 삭제할 지 파악해야 하므로 고유 id값과(product_id), form_data, thumbnail_img_url 과 detail_img_url 값을 받아오겠다.

---

2. update_one 함수 생성 (models > product.py)

📍 update_one 함수 생성(요청한 data값 받아옴) 및 mongodb connect

---

📍 생성의 경우 insert_one으로 정보들을 저장하였으나, update_one 함수를 사용하여 $set 부분에 정보를 전달하는 코드를 작성한다.

---

📍 어떤 document(상품)을 수정할 것인지 구분이 필요하므로, 전달받은 ObjectId 값으로 product id를 찾는다.

---

📍 기존의 정보와 새로 들어온 정보들이 구별되어 저장되어야 한다.
(수정하는 사람의 입장에서는 data를 변경하지 않을 수도 있으므로 빈값으로 update 되지 않도록 해준다.)

---

📍 img 처리
이미지가 존재한다면, new_product 에 img를 url 로 수정해준다. 즉, 새로운 수정된 img 의 url값을 넣어준다는 의미이다.

---

📍 return 값 생성

---

3. 상품 page 생성

   📍 상품 정보 수정 페이지 API 생성 = 어떤 상품을 수정할 지 파악해야 하므로 고유 id값/edit 으로 주소를 정의하였다.
   find_one 이란 수정 page에 접속했을 때 어떤 정보가 기존에 작성이 되어있는지 확인 후 수정을 거쳐야하므로 id값을 넘겨서 document를 가져올 것이다.

---

📍 models > product.py -> find_one 생성
= id값 및 db 사용하겠다고 선언하였다. 즉, _id가 넘겨준 id과 같은 document를 찾아서 가져온다.
그 후, product document를 return 시 (controllers > product.py)
return 받은 document로 html file과 함께 web browser에 보여질 것이다.

---

📍 Compass 접속 및 product document id값 주소창 입력
= html file에 출력구문을 작성하였다면, 해당 product document의 정보값이 출력 될 것이다.

---

📍 product_edit.html file 커스텀
= 등록폼과 유사한 구조 및 스타일이며, 등록과 다른 부분은 input에 data가 포함된 상태인 것이다.

data를 추가하기 위해서는 name으로 예시를 들자면 value="{{product['name']}}" 값을 추가시켜주면 가져온 data값이 뿌려진다.

update 를 클릭 시 action 값은 /products/{{product['_id']}}/update 주소로 전달되고 controllers > product.py -> 상품 정보 수정 API가 호출이 되면서 return 값 또한 출력 될 것이다.

---

📍update 후 list page 이동 및 import
= redirect를 product 안에 있는 get_products 함수를 호출시켜준다는 의미이다.
즉, 수정이 되면 상품 리스트 조회 page 로 이동시켜준다는 코드이다.

= 이와 같이 정상적으로 list page로 redirect됨과 동시에 data가 수정된 부분을 확인할 수 있다.

🔖 list_page의 edit 버튼에도 /products/{{product['_id']}}/edit edit 페이지로 이동시켜주는 링크를 추가시켰다.

오늘따라 집중이 잘 되지않아 등록과 거의 유사한 부분이 많았음에도 불구하고 몇번이고 반복해서 들었던 것 같다 😵‍💫

그래도 확실히 이해를 하고 넘어갈 수 있어 다행인 것 같다 ^^...........

다음 시간에는 상품 detail page를 작업해 보겠다.