Pusher 라는 실시간 통신 라이브러리를 이용해 WebSocket 서비스를 구현했습니다.
테스트를 위해 /feed 페이지에 샘플 코드를 작성했습니다.
회원가입 작업이 완료되면 User DB에서 role이 ADMIN 인 경우에만 Toast를 띄우도록 조건을 추가할 예정입니다.
시크릿 브라우저 1개(다른 브라우저), 일반 브라우저 1개로 WebSocket 기능을 테스트 할 수 있습니다.
Routing Group을 이용해 인증이 필요한 페이지, 인증이 필요하지 않은 페이지를 직관적으로 관리하기 위해 그룹으로 묶었습니다.
docs 페이지는 예시이며 (public) 이라는 폴더 내에 바로 라우팅 폴더가 들어가는 경우 /public/docs가 아닌 /docs URL로 접근합니다.
매직 스트링을 줄이기 위해 기본적인 값을 상수로 사용하도록 추가했습니다.
⚙️ 기타 사항
PR에 대한 추가 설명이나 작업하면서 고민이 되었던 부분 등
Server Action을 사용하려면 form 태그에 action 이라는 props를 이용해야 하는데 react-hook-form의 에러 핸들링은 onSubmit 함수에서만 동작하는걸로 확인되어 Server Action에서 바로 DB에 접근하지 않고 API를 호출하는 방식으로 수정했습니다.
( 어떻게 효과적으로 사용할지 리서치가 필요해 보입니다. 기능 자체는 굉장히 흥미롭습니다 )
form 태그에 onSubmit과 action을 같이 사용하면 action쪽이 실행되지 않습니다.
테스트를 위한 .env 파일 업데이트가 필요합니다. 자세한 내용은 공용 노션 참고해주세요.
🛠️ 작업 내용 (Content)
📝 상세 설명
/feed페이지에 샘플 코드를 작성했습니다.User DB에서 role이ADMIN인 경우에만Toast를 띄우도록 조건을 추가할 예정입니다.⚙️ 기타 사항
action이라는 props를 이용해야 하는데 react-hook-form의 에러 핸들링은 onSubmit 함수에서만 동작하는걸로 확인되어 Server Action에서 바로 DB에 접근하지 않고 API를 호출하는 방식으로 수정했습니다. ( 어떻게 효과적으로 사용할지 리서치가 필요해 보입니다. 기능 자체는 굉장히 흥미롭습니다 )form태그에 onSubmit과 action을 같이 사용하면 action쪽이 실행되지 않습니다..env파일 업데이트가 필요합니다. 자세한 내용은 공용 노션 참고해주세요.🚨 Merge 전 필요 작업 (Checklist before merge)