📌 데이터에서 article과 content 분리하기

관련 PR 링크

🔹 과연 할 수 있을까 싶었던 것을 도전하고 성공했다. (성능 최적화를 위한 백엔드 로직 수정 성공)

• 무엇을 하고 싶었는가?

  성능 최적화를 하고 싶었다.

  어느 부분을 하고 싶었냐면, PR 제목처럼 post에서 글의 내용과 개요를 분리하고 싶었다.
  

• 왜 하고 싶었는가?

  렌더링을 빠르게 하고 페이지가 가볍기를 바랬다.

  개요는 목록 UI에서 간단하면서 빠르게 보여주고 싶었다. 그런데 기존의 로직대로라면 개요 (제목, 간단한 설명) 정도만 보여주는데 모든 글의 내용을 load 받았어야 했다. content가 모든 글에 항상 붙어있었기 때문이다.

  지금이야 문제 없겠지만 앞으로 글이 많아지면 무거워질테고 그러면 렌더링이 느려질 것이라고 생각했다.

  느린 렌더링은 많이 비선호하는 편이고 프론트엔드 개발자로서도 받아들이기 어려운 부분이었다.

  비단 느린 렌더링 뿐 아니라 굳이 사용하지 않는 데이터를 들고 다닐 이유가 없다고 생각했다.
  

• 어떤 부분에서 구현을 망설였는가?

  백엔드를 잘 몰라서 못할 것만 같았다.

  괜히 실수했다가 꼬이면 어쩌지? 하는 걱정도 들었다.
  

• 어떻게 구현했는가?

  1. 백엔드 구현 로직 확인
  2. chatGPT로 수정 키워드 뽑아내기
  3. mongoose로 relation 설정하기 (populate 활용)

  1. 백엔드 구현 로직 확인

     우선 article을 구현하면서 참고했던 레퍼런스(Step-by-Step Guide: Create a Next.js 13 CRUD App with MongoDB from Scratch)를 다시 보면서 어떤 식으로 백엔드 코드를 짰었는지 다시 점검했다.

     그래도 잘 모르겠고 어떤 부분을 수정해야 할지 감이 잘 오질 않았다.

  2. chatGPT로 수정 키워드 뽑아내기

     막막해서 chatGPT에게 물어보았다. 나의 Schema와 이 상태에서 내가 원하는 로직은 어떤 것인데 어떻게 구현해야 할지 모르겠다고.

     생각 보다 답을 잘 알려주었는데 그 코드가 어떻게 동작하는지 잘 모르겠고 정확성도 신뢰하기가 어려웠다. 그래서 수정된 부분이면서 중요 키워드로 보이는 코드를 따서 구글링 해보았다.

     해당 키워드는 Schema.Types.ObjectId 였다.

  3. mongoose로 relation 설정하기 (populate 활용)

     검색하니 바로 눈에 띄는 제목이 보였다. ‘mongoose로 relation 설정하기 (populate 이용하기)’

     읽어보니 내가 딱 원하던 내용이었다.

     각 모델을 생성하고 아래의 코드를 통해 연결 할 수 있었다.

     연결할 key: {
         type: Schema.Types.ObjectId, // id로 연결
         ref: 'Seller',
         required: true
       }

     그 후, find().populate() 를 통해 연결된 객체까지 조회할 수 있음을 알 수 있었다.

• 소감

  해낼 수 있을까 걱정도 되었는데 늘 하나씩, 차분히 해내기로 마음 먹고 난 후로 하나씩 실마리를 풀어감을 느꼈다.

  그리고 이번에 해결했던 방법처럼 아예 감을 잡기 힘들때는 chatGPT에 키워드를 뽑고 자세한 것은 구글링을 통해 이해할 수 있지 않을까 하는 생각이 들었다.

  계속 차분히 해나가면 해낼 수 있구나 하는 자신감도 얻고 있다.

  중간중간 머리도 아팠지만.. 연속 2시간 반을 자리에서 스트레이트로 구현하는 날 보며 나는 여전히, 처음 프론트를 할 때 처럼 시간 가는 줄 모르고 하는 구나.

  개발하길 잘한 것 같다는 생각이 들어서 보람찼다.

  아무튼.. 이번에도 좋은 경험을 한 것 같다. 수고했다.🤝