incodevelop

📌 Task TODOLIST- [x] 이전 메세지 더보기 기능 - [x] 더보기 버튼 만들기- [x] 가져올 메세지가 가져오고 싶은 메세지의 갯수보다 적으면? 더보기 버튼 안보이게  ✨개발 내용1. 이전 메세지 더보기 기능Why ?  처음부터 모든 메세지를 다 불러오면 많은 양의 데이터를 초기에 불러와야 해서 초기 로딩 시간이 길어질 거라고 판단.How ?  (1) 아예 처음에는 11개의 메세지만 서버로부터 받아서 CSR 페이징에서 hydration함으로써 초기 로딩 속도 줄이기  (2) 그 이후 이전 메세지를 더 보고 싶다면, 더보기 버튼 누르기 -> 이전 10개의 메세지 불러오기what ? 불러올 메세지 수 상수화export const ITEM_INTERVAL = 10;더보기 횟수에 따른 불러올 메..

📌 Task TODOLIST- [x] user Table에서 user 정보(user Id) 가져와서 chatting과 연결시키기- [x] RLS 추가하여 내가 쓴 글만 삭제할 수 있도록- [x] 채팅 삭제기능 구현 + Realtime으로 삭제 구독하기 1. user Table에서 user 정보(user Id) 가져와서 chatting과 연결시키기 먼저 SQL의 일종인 progreSQL을 제공하는 Supabse에서채팅에 쓰이는 message table의 구조는 다음과 같다.이 중 send_from 이라는 컬럼을 user table의 user_id에서 가져와야 했기 때문에 foreign Key로 등록했다.user 테이블에서 해당 유저의 정보가 update 되거나 delete 될 시 같이 반영되기를 원해서 ..

📌 Task TODOLIST- [x] 채팅방 뼈대 만들기 - [x]  이전 채팅 데이터 가져오기 - [x] 새로고침 시에도 데이터 유지하여 렌더링하기 - [x] 채팅 데이터 새로 추가하기  ✨ 개발 내용채팅방 뼈대 만들기 이전 채팅 데이터 가져오기- TTV를 위해서 server 측 supabase 사용하여 CSR 컴포넌트에 Props로 내려주기- 채팅 데이터를 CSR 컴포넌트에서 직접 불러와서 렌더링 할 수도 있었지만,   TTV를 줄이기 위해 초기 메세지는 서버에서 받아서 CSR 컴포넌트로 Props로 넘겨줬다.const ChatPage = async ({ params }: { params: { chatroom_id: string } }) => { const chatRoomId = params.ch..

오늘은 두 가지의 아주....힘들었던 트러블슈팅이 있었다..ㅠㅠ Supabase의 Realtime 기능으로 실시간 채팅기능을 구현하는 중이었다. 트러블슈팅 1. react-query랑 Supabase-Realtime이 뭐가 다른데? 왜 이런 의문점이 들었냐면, 우리가 보통 react-query를 많이 애용하는 이유는 - 캐시에서 데이터를 가져오기 때문에 새로 추가된 데이터가 있을 때, 전체 데이터를 처음부터 다시 요청하지 않아도 된다는 점 => 동일한 데이터에 대해 반복적인 비동기 데이터 호출 방지, 바뀐 것만 요청 = 성능측면 Good - DB에 데이터가 추가-변경-삭제될 시, 캐시공간의 변화가 일어나면서 알아서 기존 데이터를 무효화시킨 뒤 새로운 데이터를 fetch -> re-렌더링 (invalida..

안다고 생각했는데도 자꾸 헷갈려서 정리해보려 한다.   indexOfconst beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];console.log(beasts.indexOf('bison'));// Expected output: 1// Start from index 2console.log(beasts.indexOf('bison', 2));// Expected output: 4console.log(beasts.indexOf('giraffe'));// Expected output: -1보는 것과 같이 indexOf는 배열.indexOf(해당요소) 가 들어간다. findIndexfunction isPrime(element) { if (element % 2 === ..

최종프로젝트를 시작했다.팀장을 맡게 되었는데,팀원들이 극 I이다.말을 안한다.힘들다.. 프로젝트 기획을 하는 중인데단순히 기능에 대해서만 생각할 것이 아니라사용자의 행동에 따른 여러가지 경우의 수까지 생각해야 한다는 점,그 경우에 수에 따라서 UI와 또 다른 기능까지 생각해야 한다는 점에서코드 짜는 것 보다 기획이 생각보다 어렵다고 느꼈다. - 인증을 어떻게 해야할지? 보안 상 본인인증을 하면 좋은데 본인인증 제공하는 API가 있는지? 그럼 대학생이라는 인증은 어떻게 할 것인지?학교 메일로 하게 된다면, 학교를 졸업한 20대는? 학교를 다니지 않는 20대는?  - 모두가 수락해야 채팅창으로 넘어가는데, 4:4 라서 8명 모두가 수락해야 한다면 state 관리가 너무 번거롭지 않을까?=> 방장에게만 수락 ..

next.js에는 middleware.ts라는 파일이 있다. 이 middleware.ts 파일은 클라이언트가 서버로 요청을 보낼 때, 중간에서 요청을 가로채서 적절한 처리를 해준 뒤 서버로 전달해주는 역할을 한다. 따라서 보통 middleware.ts 파일의 용도는 1) 전역 미들웨어: 모든 요청에 적용되는 미들웨어로, 보안, 로깅 등과 같은 전반적인 기능을 처리한다. 2) 라우트 미들웨어: 클라이언트의 특정 pathname만 protected Route에 접근할 수 있도록 한다. 3) 보안 미들웨어: 보안에 관련된 기능을 처리하는 미들웨어로, CSRF(Cross-Site-Request-Forgery) 공격방지, XSS(Cross-Site-Scripting) 방어, 헤더 보안 설정 등을 수행할 수 있다...

Navigate to만으로는 렌더링되지 않아요! issue: Navigate 로 url은 바뀔 지 몰라도, 해당 경로에 대응하는 라우트가 설정되어 있지 않으면, 실제 라우팅이 되지 않아서, 렌더링이 되지 않는 오류가 있었다. -> 해당 주소에 맞는 라우트를 찾지 못하면 Nothing 렌더링 (= 해당 주소에 맞는 라우트를 찾아야 해결된다) Outlet : 해당 라우트에 매칭되는 애를 찾아서 하위 라우트들을 "렌더링"해주는 결정적인 역할! Outlet의 역할은 두 가지로 나눌 수 있다. 1. 하위 라우트 렌더링 - Outlet은 상위 라우트에 속한 하위 라우트들을 렌더링 한다. 일반적으로 사용되는 Outlet의 주된 역할 2. 경로에 따른 라우트 선택 - Outlet은 현재 경로에 맞는 하위 라우트를 선택..

우선 Dehydration과 prefetching을 왜 궁금하게 되었는지부터 시작해야 한다.SSG와 ISR, SSR의 공통점은 서버사이드 렌더링이다.말 그대로 서버에서 렌더링을 하는 것 즉, 서버에서 초기 HTML을 생성하여 클라이언트로 전송하는 것을 말한다.우리가 보통 Next.js에서 서버사이드 렌더링을 할 때는,-> 서버컴포넌트에서 데이터를 fetch 하고-> 그 데이터로 HTML을 만든 뒤에-> 클라이언트로 전달한다.(+물론 SSG, ISR, SSR에 따라 fetch에 옵션을 다르게 준다).이 때, 초기 컴포넌트 상태는 클라이언트와 서버 간에 공유되지 않으며, 클라이언트 측에서는 새로운 인스턴스가 생성된다.그래서 룰루랄라 SSG를 만드려고 했는데, DB에서 받아온 데이터를 전역적으로 관리하기에는 ..

# new RegExp() 란?- 문자열 패턴을 정규식 객체로 변환하는 기능왜 사용하게 됐는가? let babbling = ["ayaye", "uuu", "yeye", "yemawoo", "ayaayaa"];  let heCan = ["aya", "ye", "woo", "ma"]; 이라는 두 배열이 있을 때, babbling의 요소 중 heCan 배열의 요소로 바꾸고 싶었다.반복문을 사용하여 replace() 함수를 사용하려고 했는데, replace 함수를 사용할 때 인자가 동적으로 바뀔 때는 단순히 bab.replace(heCan[i], ""); 이렇게만 하면 안 되고, 인자를 정규식으로 바꿔줘야 한다.  bab.replace(new RegExp(heCan[i]), ""); 이렇게 정규식으로 바꿔주면 ..