🥞 오늘 한 일

• 최종 프로젝트
  • 반응형 작업
    • 안내 문구 모바일에도 추가
    • 공구템 리스트 더보기 안 보이는 문제 해결
    • 공유 모달 디자인 적용
    • 좋아요 버튼 위치 수정
  • 게시물 수정 시 글 내용 에디터 안에 적용
  • 날짜 지난 공구템 자동 종료
  • 게시물 작성 및 수정 완료 시 notify 설정
• 기술면접 연습

기술면접 연습

커스텀 훅을 사용해보셨나요? 사용해본 경험을 이야기해주세요.

네 커스텀 훅을 사용해본 적이 있습니다. 커스텀 훅을 만들어 컴포넌트 내부를 깔끔하게 정리할 수 있었고, 보편적으로 개선하여 다른 컴포넌트에서도 재사용할 수 있게 제작하여 유지 보수성을 높일 수 있었습니다.

리액트 컴포넌트의 렌더링 성능 향상에 쓰이는 React.memo에 대해 설명해주세요.

리액트는 props가 변경되면 리렌더링 되는데, 이 때 하위 컴포넌트들도 리렌더링과 관련이 없는 경우에도 모두 리렌더링 됩니다. 때문에 필요한 부분만 업데이트하고 나머지는 그대로 두기 위해 사용하는 것이 바로 React.memo입니다.

React.Suspense에 대해 설명해주세요.

리액트의 suspense는 비동기 데이터를 로딩할 때, 로딩 상태를 표시할 때 사용하면 좋은 선언형 코드의 일종입니다. suspense의 fallback 속성을 통해 로딩 상태일 때 화면에 보여줄 요소를 넣어줄 수 있습니다. 태그에 속성을 주는 것만으로 간결하게 구현할 수 있다는 장점을 가지고 있습니다.

🍽️ 트러블 슈팅

날짜 지난 공구템 자동 종료

문제

UT 테스트에서 날짜 지난 공구템이 자동으로 종료되었으면 좋겠다는 의견이 있었다. 나도 그게 된다면 좋겠다고 생각했지만, 프론트 쪽에서 어떤 타이밍에 어떻게 종료를 시켜줘야할지 감이 잘 오지 않았다. 때문에 여러 방법을 찾아보다가, supabase의 sql을 설정해서 자정마다 적용을 시켜줄 수 있는 방법이 있었다. sql에 대한 지식은 거의 없는 것이나 마찬가지이기 때문에 여러 도구의 도움을 받아서 코드를 짤 수 있었다...^^

해결

create extension if not exists pg_cron;

CREATE OR REPLACE FUNCTION update_finished_groups()
RETURNS void AS $$
BEGIN
  UPDATE group_posts
  SET is_finished = true
  WHERE end_date::date < CURRENT_DATE
  AND is_finished = false;
END;
$$ LANGUAGE plpgsql;

SELECT cron.schedule('0 15 * * *', $$SELECT update_finished_groups()$$);
SELECT * FROM cron.job;

먼저, pg_cron 확장을 활성화한다.
end_date가 현재 날짜보다 이전이고 is_finished가 false인 group_posts 테이블의 행들을 업데이트하는 함수를 생성한다.
매일 자정(한국 시간으로 자정이어야하기 때문에 UTC 기준으로 15:00)에 해당 함수를 실행한다.
설정된 cron 작업을 확인한다.
따라서 이 설정으로, 매일 한국 시간 자정에 자동으로 함수가 실행되어, 종료 날짜가 지난 group_posts의 is_finished 필드가 true로 업데이트 된다.
막상 코드를 봤을 때, 로직 자체가 어렵진 않고 그저 문법이 익숙치 않은 것 같아서, 나중에 sql도 공부해보고 싶다.

간단한 문제들

• 배포 링크에서 결제 창이 뜨지 않는 오류가 있었다. 간단하게 원인을 알 수 있었는데, local에서 사용하던, 결제에 필요한 env 정보를 배포 시에 넣어주지 않았기 때문이었다. 넣어주니 결제 기능이 잘 작동되는 것을 확인할 수 있었다.
• 게시물 수정 시 에디터 내에 기존 글 내용이 들어가지 않는 문제가 있었는데, dynamic으로 EditorModule을 가져오는 게 아닌, 그냥 import로 가져오니 해결되었다. 처음에 바로 editorRef 값을 가져오지 못한 게 문제였다.

🍴 돌아보기

sql로 간단하게 해결할 수 있는 문제를 보면서, 확실히 아는 게 힘이다라는 생각이 든다. 알기만 해도 해결되는 일들이 많기에, 끊임없이 공부를 해서 지식을 늘려야겠다.

🍳 내일 목표

• 최종 프로젝트
  • 브로셔 기술적 의사결정 완성