디자인 회의
•
디테일 페이지
◦
댓글 작성부분은 예약 하지 않은사람에게는 보여주지 않기
◦
신청하기, 문의하기 버튼 위치 서로 바꾸기
•
리스트 페이지
◦
온라인 클래스의 위치가 없는 경우 사용자에게 약간의 설명?
⇒ 온라인 클래스일때는 위치를 못넣게
◦
클래스 카드에서 위치 테두리 삭제
•
클래스 디테일 페이지
◦
클래스 정보 수정기능
•
예약페이지
◦
배경색 분리
◦
예약완료페이지 소요시간 박스 밑으로 꺼내기
•
채팅페이지
◦
사진은 기능 끝나고 추가기능
◦
클립 누르면 모달창이 뜨고 모달창 안에서 이미지 여러개 선택할 수 있고 미리보기 한 다음에 모달 닫히면서 한번에 전송
NExt.js 일단 서버사이드로 렌더링을 진행하고 클라이언트로 전송
◦
window document 등은 서버에서는 존재하지않음
◦
useEffect는 컴포넌트가 렌더링을 마친 후에 실행되므로, 이를 이용하면 서버 사이드에서는 실행되지 않고, 클라이언트 사이드에서만 실행되도록 할 수 있다.
1.
useSearchParams 같은 훅이 서버에서 실행될 때 빌드 에러를 일으킬 수 있다고 언급했는데, 이는 Next.js에서 빌드 시 렌더링이 아닌 클라이언트 사이드에서만 실행되어야 하는 훅들과 관련된 문제입니다. 이를 정확하게 표현하려면, 이러한 훅들은 클라이언트 사이드 코드에서만 사용해야 한다고 명시하는 것이 좋습니다.
2.
useEffect를 사용하여 클라이언트 측에서만 실행되도록 하는 것은 맞으나, SSR 과정에서는 클라이언트 측 전용 객체에 접근하지 않도록 조건을 추가하는 것이 중요합니다. 이를 위해 typeof window !== 'undefined' 체크를 사용하는 것이 일반적입니다.
3.
typeof window !== 'undefined': 해당 코드가 브라우저 환경에서 실행 중인지 명시적으로 확인하기 위해 사용되는 조건입니다. 이는 조건 내의 브라우저별 코드가 window및 document를 사용할 수 없을 때 서버 측 렌더링 중에 오류를 일으키지 않도록 보장합니다.
◦
useEffect로 안전장치 한번 걸어
◦
useEffect를 사용하면 클라이언트 사이드에서만 실행되는건 맞음.
▪
typeof로 명시적으로 클라이언트 사이드에서만 실행된다고 써주는것?(근본적인 해결책은 아니고 useEffect랑 같이 써주기???)
◦
typeof만 쓸거면 if(typeof window ≠ ‘undefined’) {}하고 else {}로 서버측에서 렌더링할때의 처리를 해주어야 한다.
Session Storage
튜터님 피드백
◦
테마색 연보라색이 확고할 수록 이미지 각인 시킬 수 있어서 좋음
◦
팀웍 좋대여!!
◦
UX 부분
▪
로그인 confirm 창 : 확인 / 취소 버튼 ⇒ 좋음
▪
채팅 기능 : good
▪
무한 스크롤 : 유저 UX 고려해줘서 좋았음 → 마이페이지 리스트에서 사용?
▪
선생님 전환 confirm 좋았음
▪
완료 되었습니다 창 다시 한 번 더 보여주는 부분 좋음
▪
기획/와이어프레임 괜찮아보였음
▪
middleware로 접근 제한 good
▪
use client : CSR이 아니다.. SSR 먼저 일어나고 client component로 만든다. client api를 사용한다는 의미
발표 피드백
배포링크 있으면 채팅창에서 다같이 볼 수 있게 하면 좋겠다
테마색이 확고할수록 이미지를 확실히 각인할수있기 때문에 좋았다
팀워크 굳
UX 피드백
로그인 컨펌창 굿
채팅기능이 놀라웠다 굿 !!
메인페이지 페이지네이션은 어떻게? => 인피니티스크롤로 유저의 UX를 고려한점
내가 예매한 티켓에도 페이지네이션이나 스크롤 추가하면 좋을듯
선생님 전환 버튼을 항상보여주고 컨펌창을 보여주는게 좋았다
클래스를 만드는 과정이 끝난 다음 완료되었습니다 하면서 한번더 확인해주는 부분이 좋았다(꼼꼼한 기획 굿)
꼼꼼한 와이어프레임이 돋보였다
선생/수강생 롤베이스가 컴포넌트에서 제어하지않고 미들웨어로 접근제어 => 대단하다
기술스택 굿
트러블슈팅 'use client' 는 완전히 클라이언트 사이드가 아님. 서버사이드에서 한번 렌더링이 일어남
클라이언트 사이드 렌더링이 아니라 클라이언트 api를 사용하겠다는 뜻으로 이해하면 좋음
데일리 스크럼 굿
실시간 채팅참여수 ⇒ supabase presence?
텍스트 에디터 라이브러리 클래스 등록할 때 쓰면 좋을듯합니당
supabse에서 만들어주는 CLI가 있다
아니면 복붙해서 사용