inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

[리뉴얼] React로 NodeBird SNS 만들기

팔로잉한 게시글만 가져오기

강의 외 질문입니다. 부탁드립니다.

273

rrallvv .J
0

안녕하세요 제로조님
혼자 프로젝트 진행중에 너무 해결이 안되서 혹시나 조언을 얻을 수 있을까 해서 질문을 남깁니다. 강의와 관계가 없는 점 사전에 말씀드립니다. 죄송합니다 ㅠㅠ
 
shopify와 같은 e-commerce 사이트에서 상품을 등록하는 페이지를 보게되면 상품명, 상품 설명과 같은 string 타입의 인풋이 있고 variations(options)과 같이 object 타입의 여러개의 input을 입력할수 있는 칸들이 있습니다. 아래와 같이요.
(예시)
 
 
제가 궁금한 것은 이 페이지에 submit버튼이 하나가 있고 이 action으로 모든 변경된 사항을 디비에 적용하고 싶은데요, 이 action하나에 update, create, delete,와 같은 여러가지 변경사항이 있을수 있을거 같습니다. 예를들어 상품명, 상품 설명은 변경이 되고, 어떤 variant들은 추가가 되고, 기존에 있던 variant들은 삭제가 될텐데, 이걸 어떻게 핸들링하는게 좋은 방법인가요? 서버에 여러번의 요청(multiple CRUD oprtaion)을 보내게 되는건가요?
 
shopify사이트가 이와 같은 구조여서 network탭에 들어가서 보았는데 update api를 하나를 호출하였고, payload를 보니 최종적으로 변경된 states만 서버로 보내서 서버에서 추가할 것들은 추가하고 삭제할 것들은 삭제해서 처리를 하는거 같습니다. 그렇다면 서버에서 데이터베이스에 있는 값들을 불러와서 디비에 없으면 추가하고, payload의 states에 없으면 데이터베이스에서 삭제하는 이런 작업을 일일이 해주는 것인가 궁금합니다.
 
저는 FE에서 데이터를 가공해서 server로 딱 필요한 요청과 데이터만 보내는게 맞다고 생각을했는데 서버에서 이런것들을 쉽게 핸들링할수가 있고 이렇게 logic을 운영하는게 맞는지 궁금합니다.
 
긴글 읽어주셔서 감사합니다.

답변 1

0

제로초(조현영)

네 DB에 들어갈 데이터 정제는 백엔드 서버에서 하는 겁니다. 프론트에서 변경한 데이터들을 보내면, 서버는 그걸 취합해서 쿼리로 만듭니다. 이 때 variant들을 추가/제거할 수도 있고요. 최종적으로 DB에도 update 쿼리를 하나만 날리는 게 제일 좋습니다.

0

rrallvv .J

답변 감사합니다. 

서버로 변경된 데이트를 보내면 취합을 서버가 한다고 하셨는데요. 서버는 프론트엔드에서 보낸 state를 가지고 어떤 object가 삭제됐는지, 어떤 오브젝크가 생성됐는지, 수정됐는지 어떻게 파악을 하나요? 결국 디비에 select쿼리(or find)로 불러와서 일일이 다 비교해봐야 알수 있지 않나요?

 

서버에서 어떤 variant를 삭제하고 추가하고 변경할지 가공하는 작업이 데이터베이스의 내용과 일일이 비교해야해서 많은 쿼리문을 보내서 그 결과를 비교해봐야할거같은데, 일일히 비교하는것 말고 더 괜찮은 방법이 있나요?

0

제로초(조현영)

왜 많은 쿼리문을 보내야 하나요? 전체 조회를 하는 쿼리 1개를 보내고 그것과 프론트에서 보낸 상태와 비교해서 바뀐 부분만 추려서 업데이트하는 쿼리 2개면 되지 않나요? 또한 프론트에 이미 전체 데이터가 있고, 그걸 기반으로 바꾼 거면 조회하는 쿼리 1개조차도 필요없을 수 있습니다.

0

rrallvv .J

맞습니다. 제가생각이 짧았네요. 덕분에 많은 공부할수 있게 됐습니다!! 감사합니다.

또한 프론트에 이미 전체 데이터가 있고, 그걸 기반으로 바꾼 거면 조회하는 쿼리 1개조차도 필요없을 수 있습니다.

 - 이 경우는 프론트에서 전체 데이터를 같이 백앤드로 보냈을 경우인가요?

0

제로초(조현영)

아뇨 프론트에서는 바꾼 데이터만 백엔드로 보내면 됩니다.

0

rrallvv .J

네 알겠습니다.

알려주신 내용 토대도 더 공부해볼게요. 좋은 하루되시고 답변 너무 감사합니다