yarn add @tanstack/react-query 또는 npm install @tanstack/react-query

yarn add axios yarn add -D @types/axios 또는 npm install axios npm install --save-dev @types/axios

@types/axios = 타입스크립트에서 axios를 인식시키기 위한 타입 정의 파일

2. QueryClientProvider 설정 (앱 전역에 적용)

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>
);

3. API 요청 함수 만들기

import axios from "axios";

export const getResults = async () => {
  const res = await axios.get(
>     "https://api주소"
  );
  return res.data;
};

4. 커스텀 훅으로 useQuery 사용

import { useQuery } from "@tanstack/react-query";
import { fetchUsers } from "../api/example";

export const useUsersQuery = () => {
  return useQuery({
    queryKey: ["users"],
    queryFn: fetchUsers,
  });
};

5. 컴포넌트에서 사용

import { useUsersQuery } from "../hooks/useUsersQuery";

function Home() {
  const { data, isLoading, isError } = useUsersQuery();

  if (isLoading) return <div>로딩 중...</div>;
  if (isError) return <div>에러 발생</div>;

  return (
    <div>
      <h1>사용자 목록</h1>
      <ul>
        {data.map((user: any) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

폴더 구조 example

1.

├── apis/ │ └── api/ │ └── results.ts │ └── services/ │ └── useGetResults.ts ├── pages/ │ └── Home.tsx ├── types/ │ └── result.d.ts └── main.tsx

2.

src/ ├── api/ │ └── example.ts ├── hooks/ │ └── useUsersQuery.ts ├── pages/ │ └── Home.tsx ├── types/ │ └── user.d.ts └── main.tsx

🌈 맡은 기능

1) 실시간 채팅 기능 2) 실시간 알림 기능 일부 3) home 페이지, 헤더, 탭메뉴, 기능 일부

🌈 사용한 라이브러리와 이유

• zustand 사용해 count 전역 상태 관리 : 코드가 복잡하지 않으며 사용이 편리하고 유지보수에 용이

🌈 기술적으로 강조할 부분

• supabase realtime 활용한 실시간 인터렉션
• supabase SQL editor로 안 읽은 메시지 숫자를 반환해주는 함수를 작성해 사용
• useTapScroll 등 재사용이 가능한 코드는 hooks, utils 파일 만들어 재사용

🌈 기술적 의사 결정 과정/사유

• 안 읽은 메시지 개수 세는 SQL 작성: 대량 데이터 처리가 필요한데 DB에서 계산해주면 효율적이라고 생각했습니다. DB 변경은 없는데 실시간으로 소통할 수 있고 클라이언트 사이드에서 코드로 가져오는 것보다 간결하고 처리가 빠를 것이라고 판단했습니다.

🌈 트러블 슈팅과 해결 과정

• 채팅 목록(chat)과 채팅방(chat/[id] 페이지 데스크탑 구현. 모바일에서는 따로 분리되었던 두 페이지의 UI가 데스크탑에선 같이 보여져야 했던 문제. 채팅 목록에서 채팅을 누르면 목록은 그대로 남아있고 옆에 채팅방이 뜨도록 만들어야 했습니다. 이 부분이 막막해서 며칠을 인스타그램 등의 다른 유사 서비스를 살펴보며, 구글링도 해보며 고민하고 우선은 다른 기능부터 작업하다가, 문득 정말 간단한 방법이 있다는 걸 떠올릴 수 있었습니다. chat 폴더의 layout.tsx에 컴포넌트를 넣는 방법입니다. layout.tsx에 채팅 리스트 컴포넌트를 넣고, 1280px 이상일 경우에만 보이도록 설정해주어서 간단히 해결할 수 있었습니다. 처음 해본다고 어렵게 생각하거나 두려워하지 말고, 기초부터 생각해보면 쉽게 답이 나올 수도 있다는 것을 배웠습니다.

🌈 개선 과제

• 맡은 파트 전체적으로 리팩토링

🌈 팀에 대한 평가

• 10점 만점 중 9점
• 모두 맡으신 파트 잘 해주셨습니다. 특히 리더님과 부리더님이 맡은 파트 외의 개발적인 부분도, 개발 외적인 일들도 열정을 다해주시고 이끌어주신 덕분에 완성도 높은 프로젝트를 만들 수 있었습니다. 또한 디자이너님과 함께하는 첫 협업이라는 점에서도 어려움이 있을 수 있었지만, 서로 소통이 원만하게 이루어졌다고 느꼈습니다.

🌈 스스로에 대한 평가

• 10점 만점 중 5점
• 채팅 구현은 예전부터 해보고 싶었던 기능이었는데 좋은 경험이 되었습니다. 실시간 기능 구현, 깃허브 활용, zustand 사용, SQL작성 등 처음 해보는 게 많았는데 도전해보길 잘 했다고 느끼고 있습니다. 하지만 처음 팀에서 지키자고 했던 컨벤션을 못 지키고 정돈되지 않은 코드를 작성하게 되었고, 맡은 파트 구현 자체도 100% 하지는 못 하고 팀원 분들의 도움을 받아 완성시킬 수 있었어서, 프로젝트는 잘 마무리 되었지만 개인적으로 아쉬움이 남습니다.

🌈 부트캠프를 마치며 하고 싶은 말

• 파이널 프로젝트에서 좋은 팀을 만나 많이 배우고 캠프를 잘 마무리 할 수 있었습니다! 고생 많으셨습니다.

김민지 티켓 검토 결과

24. [제안] 본인이 입력한 채팅을 마이페이지에서 확인 가능하도록

-> 채팅 탭이 별도로 존재하기 때문에 구현하지 않아도 될 것 같다. -> 지금은 참여한 여정의 상세페이지에서 '참여하기' 누르면 '이미 참여한 여정입니다?'라고 뜨는데 대신 '채팅하기' 버튼으로 바꾸는 방법? 33. [버그] 채팅 탭을 누르면 전 페이지로 돌아감 -> trips 페이지에서 참여한 여정이 없는 상태에서 chat 페이지로 넘어가신 거로 추정. -> 채팅이 없으면 "아직 참여한 여정이 없습니다! 트립 버디즈와 함께 즐거운 여행을 시작해 볼까요?" 문구 뜨고 클릭하면 trips로 이동하는 로직으로 변경하는 건 어떤지. - 12일까지 47. [제안][공통] 랜덤 채팅방 -> 구현하기 어려울 것 같습니다. 51. [제안] 채팅 메시지 읽음 기능, 메시지 삭제 기능 -> 읽음 기능 추가 예정 - 14일까지 -> 삭제 기능은 후순위로 (피그마에도 없음) 56. [제안] 여정 상세에서 글을 보다가 뒤로 가려면 불편함 -> 여정 상세에서 헤더 고정 -> 모바일에선 헤더를 탭메뉴와 마찬가지로 fixed로 상시 고정하는 방법 어떠신지 팀원분들 의견 구하기 58. [제안] 하단 탭 메뉴 스크롤을 살짝 해야 보여서 불편 -> 고정 -> home 페이지에서만 스크롤 해야 보이는 거로 확인. 수정해보겠습니다. 59. [미구현] 여정 리스트 모바일 헤더 notification 아이콘 미작동 -> notification 리스트 페이지로 이동하도록 구현 완료. 알림 기능은 개발 중. - 14일까지 74. [제안] 홈 페이지 ‘전체보기’가 버튼인지 모르겠음 (와이어프레임과 상이하네요) -> 바로 수정하겠습니다 - 12일까지 78. [제안] 여정 출발 전 휴대폰 알림 -> 후순위로 두기 99. [제안] 홈 헤더 “예정된 ~여정이 ~일 남았어요” 클릭 시 해당 여정 상세로 리다이렉트 -> 이 부분 생각했던 건데 좋은 피드백입니다. 구현 하겠습니다. - 12일까지

얻게 된 것

• 위의 내용 말고도 내 담당이 아닌 부분들까지 굉장히 많은 다양한 피드백을 받았는데, 아예 생각하지 못 한 부분들도 꽤 있어서 도움이 많이 되었다.
• UT를 진행하고 받은 모든 피드백을 다 반영하지는 못 하니, 이렇게 정리해서 우리의 기획, 현재 상황, 그리고 앞으로의 일정과 계획에 따라 조정하는 작업을 잘 한 것 같다. 부팀장님이 피드백을 모두 정리해주시고 형식도 정해주셔서 따라가기만 했는데... 팀플 하면서 이렇게 계속 팀원 분들께 배우게 된다!
• 하나 메모하면 좋을 것: 어떤 기기에서 사용했는지도 설문에 받으면 좋을 것 같다. 운영 체제뿐만 아니라 모바일의 경우 어떤 모바일 디바이스인지..

코드리뷰

그동안 빠르게 approve, merge 하느라 PR마다 코드리뷰를 거의 안 달고 확인 댓글만 짧게 남겼었는데, 한 번 쭉 다같이 코드리뷰를 해보자는 팀장님&부팀장님의 의견에 따라 코드리뷰를 해 보았다.

얻게 된 것

• 코드를 전체적으로 검토해보면서(기술적인 부분은 거의 그냥 넘겼지만..) 내가 쓰지 않은 부분까지 프로젝트 전반적인 구조를 더 이해할 수 있게 되었다! 좋은 작업인 것 같다.
• 놓치고 있던 자잘한 컨벤션도 다시 짚고 넘어갈 수 있게 된 시간이었다. 프로젝트 극 초반에 써놓고 수정하지 않았던 코드를 다시 보니까 컨벤션이 안 지켜져 있다는 걸 확인할 수 있었다.
• 내 코드 리팩토링이 시급하다 (어렵다..)
• 기술적인 면에서 나보다 실력이 좋은 팀원 분들의 조언을 얻을 수 있어서 유익했다.

• notifications 페이지 UI 작업
• trips 페이지에서 Alarm 아이콘 누르면 notifications 페이지로 이동
• 탭메뉴 글씨 추가, 컬러 변경
• 채팅 목록에 안 읽은 메시지 숫자 표시하는 방법에 대해 고민

트러블 슈팅 & 기술적 의사 결정

안 읽은 메시지 숫자 표시하는 방법에 대해 고민. => contract 테이블에 '마지막으로 읽은 메시지 아이디' 컬럼 추가하는 방법으로 결정

의사 결정 사유

두 가지 방법을 생각했다. column을 새로 추가하는 방법과, 클라이언트 사이드에서 useState 변경을 주어서 realtime으로 메시지가 전송될 때마다 +1이 되는 방법. 최대한 table을 건드리지 않고 구현하는 쪽으로 생각해봤는데... => 후자의 경우, 새로고침하면 데이터가 날라간다는 걸 생각 => 테이블에 column 추가하기로 결정.

로직

1. contract table에 contract_last_read_message_id (이하 lrm_id) column 추가
2. lrm_id의 message_created_at 값을 찾는다
3. 그것보다 뒤에 올라온 메시지 수를 계산
4. (+n) 컴포넌트 분리해서 realtime으로 구현. 테이블에 insert 될 때마다 업데이트
5. 채팅리스트아이템 클릭 시 lrm_id를 last_message_id로 업데이트

• 채팅 목록 & 채팅 페이지 pc 버전
• 전체적으로 리팩토링
• tanstackquery 사용
• 컴포넌트 분리, atoms까지 분리!
• messages 테이블에 unread column 추가하는 것 관련해서 의견 내기
• 알림 목록 페이지 만들기
• 알림 기능 구현
• 기술면접 공부
• 남은 2주 동안 github 기록 많이 남기기..

<div className="w-[40px] h-[40px] rounded-full overflow-hidden flex justify-center">
    <Image src={message.buddy?.buddy_profile_pic}
    alt="Profile Image"
    width={40}
    height={40}
    className="object-cover"
    />
</div>

부모 요소 (레이아웃) : overflow-hidden, 하위 요소 센터로 배치 자식 요소 (이미지 자체) : object-cover

자주 필요한 이미지 설정인데 한번 기록해 놓아야 좋을 것 같아서 기록한다!

1. 이슈 문제 파악

현재 supabase를 이용한 실시간 채팅 구현에서 메시지는 정상적으로 불러와지지만, 프로필 사진은 새로고침을 해야만 로드된다. 즉, 프로필 사진 데이터가 컴포넌트의 마운트 시점에만 로드된다. 실시간으로 추가된 메시지의 유저 프로필 사진은 로드되지 않고 있다.

2. 해결 시도 - useEffect

• 데이터 fetch 하는 useEffect()의 의존성 배열 값 = id (현재 채팅의 id)
• 이걸 지우면 해결되지 않을까 하는 생각
• 실시간으로 띄워주는 건 성공했지만! 근본적인 해결책은 아니었다.

3. 해결 방법 - realtime의 chat-room 안에서 messages 테이블, buddies 테이블 모두 접근

• 기존 코드
• 이젠 buddy 정보를 총 두번 불러온다. 처음 마운트 할 때 & 실시간 변경이 일어날 때
• 과제: useEffect buddy 부분 컴포넌트 분리하기

이슈 (2) - 채팅 리스트 데이터 호출

코딩 전에 로직 정리

로직

• buddy_id가 contract.contract_buddy_id와 일치하는
• 모든 contract_id를 찾고, isPending === false && isValidate === true 인 contract_id와 그 contract_trip_id를 필터링
• filtered contract_id마다 있는 모든 contract_buddy_id를 찾고
• 각 buddy_id마다 buddies.buddy_profile_pic를 객체 속 배열로 반환.
• 이런 느낌..data = [{ contract_id: "", contract_trip_id: "", contract_buddies_profile_pics: ["", "", ""] }, ]contract_trip_id와 foreign key로 연결된 trips.trip_id를 찾아
• trips.trip_title 반환
• trips.trip_id와 foreign key로 연결된 가장 최근 생성된 messages.message_trip_id 찾기
• messages.message_content, messages.message_created_at 반환

사용 column

• contract.contract_trip_id / contract.contract_buddy_id / contract.contract_isPending / contact.contract_isValidate
• trips.trip_id / trips.trip_title
• buddies.buddy_id / buddies.buddy_profile_pic
• messages.message_content / messages.message_created_at / messages.message_trip_id

참고용: supabase 사용 정리 잘 되어 있는 블로그 https://ramincoding.tistory.com/entry/Supabase-Supabase-%EB%A1%9C-%EB%B0%B1%EC%97%94%EB%93%9C-%EC%97%86%EC%9D%B4-Database-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95

작업 과정에서 느낀 점

• 본격적인 작업 들어가기 전 로직 정리, 의사코드 작성의 중요성을 느꼈다!
• 어떤 데이터가 필요한지 모두 정리해 놓는 것도 좋다.

useEffect(() => {
        const channel = supabase
            .channel('chat-room')
            .on(
                'postgres_changes',
                { event: 'INSERT', schema: 'public', table: 'messages' },
                payload => {
                    const newMessage = payload.new as Message & {
                        buddy: {
                            buddy_profile_pic: string;
                            buddy_nickname: string;
                        };
                    };
                    if (newMessage.message_trip_id === id) {
                        setMessages(prevMessages => [
                            ...prevMessages,
                            newMessage,
                        ]);
                    }
                },
            )
            .subscribe();

        return () => {
            channel.unsubscribe();
        };
    }, [id]);

    useEffect(() => {
        const fetchMessages = async () => {
            const { data, error } = await supabase
                .from('messages')
                .select(
                    `
                    *,
                    buddy:message_sender_id (
                        buddy_profile_pic,
                        buddy_nickname
                    )
                `,
                )
                .eq('message_trip_id', id)
                .order('message_created_at', { ascending: true });

            if (error) {
                console.error('Error fetching messages:', error);
            } else {
                setMessages(data);
            }
        };

        fetchMessages();
    }, [id]);

리얼타임 써본 후기

어렵게 생각했는데 생각했던 것보다 간결하다!

작업하면서..

이슈 (1)

현재 supabase를 이용한 실시간 채팅 구현에서 메시지는 정상적으로 불러와지지만, 프로필 사진은 새로고침을 해야만 로드된다. 즉, 프로필 사진 데이터가 컴포넌트의 마운트 시점에만 로드된다. 실시간으로 추가된 메시지의 유저 프로필 사진은 로드되지 않고 있다.

이슈 (2)

buddies, trips, contract, messages 4개의 테이블을 잘 엮어서 데이터를 가져와야 한다. 이 부분이 생각보다 오래 걸리고 있다. 그동안 나는 동시에 한 개의, 혹은 두 개의 테이블만 사용했었다. 내일은 여러 개의 테이블의 데이터를 잘 엮어서 사용하는 방법에 대해서 찾아보고 작업에 들어가는 게 좋을 것 같다! 의사코드도 먼저 작성해보고.

이슈 해결 계획

(1) 방법 구글링 (GPT의 도움은 받지 말아보자!) (2) 로직 정리해보기 -> 여러 테이블 엮어서 사용하는 법 서치 -> 의사코드 작성 및 기록 -> 실제 코딩 작업

고민의 과정

어제 강의를 들어봤는데, 두려워 했던 것보다 어렵지 않아 보였다. 이번주에 MVP 발표까지 해야 하는 구현 사항을 마쳐야 하기 때문에... 우선 realtime으로 해 놓고 MVP 발표 이후 웹소켓 활용하여 리팩토링 작업해볼까 하는 새 계획이 생겼다.

기술적 의사결정

결정 사항

본래 웹소켓을 도전 과제로 삼아 작업해볼 계획이었지만 우선 Supabase Realtime을 활용하도록 결정.

Supabase Realtime 사용 결정 이유

1. 짧은 한정된 시간 내에 기능 구현을 완성해야 유저 테스트 진행도 가능해지는데, 현재로썬 어렵다고 판단. 따라서 MVP, 유저 테스트 전까지는 사용이 원활할 정도로 Supabase Realtime을 활용해 구현하기로 결정.
2. 웹소켓을 사용하지 않고 Realtime 만으로도 충분히 MVP와 유저 테스트가 가능할 것 같다는 판단.
3. 팀 전원이 Supabase를 사용하여 작업하고 있기 때문에 통일성을 고려한 이유도 있다. 웹소켓은 기술적 도전을 위한 스스로의 과제 사항. 또한 웹소켓은 현재 상황으로썬 무리지만, MVP 발표 이후 리팩토링 예정.

우리의 컨벤션

초반 기획 단계 회의 시간에 한 번 supabase.ts 의 Database의 public의 Table의 message... 이런 식으로 안 쓰고 저렇게 Tables<'messages'>만 써도 된다고 리더님이 설명 해주셨었다. 좋은 정보. types 폴더 안에 넣어 놓고 파일명은 어떻게 하자~ 이런 컨벤션도 정했었다.

타입 import 시도

기능 들어가기 전 UI만 그리다가... supabase의 Table의 type 불러오는 걸 이제 처음 해봄. 한 번 정리하면 좋을 것 같아서 사용한 파일 세 개 같이 스샷해서 올려 놓는다.

채팅 기능 공부 중

보고 있는 강의

https://www.youtube.com/watch?v=-xXASlyU0Ck&ab_channel=DailyWebCoding

주말 계획

채팅 기능 어느 정도는 구현하기. 바로 응용하는 게 어려울 것 같으면 한 번 테스트용 새 프로젝트 만들어서 똑같이 따라해보고 감을 찾는 것도 방법! 이참에 하나 사이드 프로젝트로 만들어보자.

1. 오늘 한 일

• 첫 모의 기술 면접
• 채팅 목록 페이지 모바일 ui 작업
• 채팅 페이지 모바일 ui 작업

2. 내일 계획

• 기술 면접 공부
• 채팅 페이지 ui 작업 초안 완성
• 채팅 목록, 채팅 페이지 데스크탑 작업
• 채팅 기능 조금이라도 시작

👼🏻 첫 모의 면접

1. 모의 면접 질문

실제 기술 면접처럼 컬쳐핏, 협업, 기술 질문들로 구성.

1. 자기소개
2. 프론트엔드 선택 이유
3. 개발 말고 다른 취미
4. 공부 방법
5. 장점 / 단점
6. 협업 과정에서 어려웠던 점, 어떻게 극복했는지
7. 좋은 협업 환경이란?
8. 프론트엔드도 디자인에 대해 알아야 한다고 생각하는지
9. Javascript 특징
10. 리액트 특징
11. 이벤트 위임
12. useEffect
13. useCallback, useMemo
14. 브라우저 렌더링
15. 크로스 브라우징
16. API 란 무엇인지

2. 피드백 및 느낀 점

• 컬쳐핏, 협업 질문은 잘 대답했는데, 기술 질문은 확실히 준비가 많이 필요할 것 같다.
• 장점과 단점, 협업 능력 등에 관한 질문들은 직무와 연결지어서 얘기하면 좋다. 예를 들면 내가 장점으로 꼼꼼함을 얘기했는데, 거기에 덧붙여서 그 꼼꼼한 성격으로 협업에서 어떤 까다로운 요구사항이 있어도 꼼꼼하게 해결할 수 있다는 것을 어필하면 좋다.
• 기술 질문이 시작될 때 첫 질문은 굉장히 중요하다. 첫 질문에 어떻게 답하냐느에 따라 뒤의 질문들의 수준이 달라진다. 어느 정도 내 기술적 역량을 판단하는 척도가 되는데, 이때 잘 답한다면 내 역량을 높게 평가하고 다음 질문을 낼 수 있다. 수준 높은 질문을 물어본다는 것은 내 역량을 어필할 수 있는 기회가 주어지는 것. 첫 질문의 중요성을 기억하고 최대한 잘 답해보자.
• 개인 면접의 경우 질문을 듣자마자 너무 급하게 답할 필요는 없다. 어느 정도 충분히 생각할 시간을 갖고 답해도 괜찮으니 조금 여유를 가지자.
• 내가 어필하려는 기술 스택의 특징들은 언제 물어보든 술술 말할 수 있어야 한다. 자바스크립트 특징 등.
• 오늘 받은 질문들은 사실상 기초의 기초. 익숙하게 사용하는 것들이지만 막상 말로 설명하니 계속 막히게 되는 것을 경험했다. 대충 아는 것이니 넘어가자~ 라고 하지 말고, 스스로의 언어로 정돈되게 그리고 가득찬 내용으로 대답할 수 있도록 연습이 꼭 필요하다.

• 메인페이지, 탭메뉴 컴포넌트 보다 더 세분화, 재사용성 고려
• 헤더, 탭메뉴 ui 수정
• 이번 프로젝트 첫 PR, 첫 merge
• chat 페이지 (채팅 목록) 스켈레톤 작성
• chat 페이지 구현 시 레이아웃 구성 관련 고민, 레퍼런스 서치

과제

chat 페이지 구성 구현

모바일에서는 chat(목록)과 chat(id) 페이지가 분리되는데, 데스크탑에서는 화면을 둘로 나눠서 같이 띄워주는 작업이 필요. url이 다른데 어떻게 구현해야 좋을지.

레퍼런스 서치

별 거 없지만, 인스타그램을 많이 참고했기에 인스타그램의 url을 한 번 봤다. 주소 구조는 모르겠지만 어쨌든, url이 바뀌면서 한쪽에만 띄워주는 건 가능하다는 것을 봄.

인스타그램...
채팅 목록만 보이는 주소 : https://www.instagram.com/direct/inbox/
채팅 item 누르면 바뀌는 주소 : https://www.instagram.com/direct/t/[id]

고민

• 모바일 width에서는 chat/[id]에 목록 컴포넌트를 hidden으로 처리할까?
• 다른 깔쌈한 방법이 있을 것 같은데, 이건 확실히 서치가 필요하다.

결론

은 아직 안 났다... 내일 해결해보고 남기도록...

TIL

url에 따라서? 동적으로 레이아웃 위치에 있는 헤더를 변경하는 기능에 대한 얘기를 나누다가 본 개념. 파라미터 사용... 공부가 필요할 것 같다. https://nextjs.org/docs/app/api-reference/file-conventions/page

내일 계획

• chat 페이지 레이아웃 구성 작업 (모바일과 데스크탑 모두 고려)
• chat 페이지 리스트 컴포넌트 ui 작업
• chat 상세 페이지 ui 작업 시작

🚨 문제

-4094 에러 (Internal Server Error)

Next.js 를 사용하기 시작하고 나를 계속 괴롭힌 에러.

간단한 CSS 수정을 하든 뭘 하든 뭘 안 하든 짧게는 몇십초 길게는 몇분 내에 꼭 저 에러가 뜨면서 랜더링이 멈추고, yarn dev를 다시 실행해야 했다.

🏃🏻‍♀️ 문제 해결 시도 과정

1. .next, node_modules 폴더 삭제 후 yarn 패키지 재설치

→ 해결 실패

2. 구글링

→ 삭제 후 재설치 외에 '운영체제 초기화' 라는 해결책을 발견…

→ 다른 방법 찾아보기로 결정

3. GPT에게 도움 요청

→ 권한 문제일 수도 있다는 답변!

파일 시스템 권한 확인 권한 문제일 수도 있으므로, 프로젝트 폴더와 하위 파일/폴더에 대한 읽기/쓰기 권한을 확인합니다.

# Windows에서는 관리자 권한으로 실행해야 할 수도 있습니다
icacls "프로젝트경로" /grant Everyone:(OI)(CI)F /T

위 명령어는 프로젝트 폴더와 하위 파일/폴더에 대해 모든 사용자에게 읽기/쓰기 권한을 부여합니다.

→ 해결

→ 된 줄 알았지만… 몇 시간은 괜찮다가 작업을 계속하다 보니 다시 똑같은 에러 발생.

🙆🏻‍♀️ 문제 해결

1. 에러가 발생하는 시점이 언제인지 터미널을 다시 살펴보았다.

VSCode에서 저장됨 > 자동으로 반영 > 서버에 띄워줌 이런 식으로 작동되는데

이게 Compiling이 잘 되다가.. 잘 되다가… 갑자기 뜬금없이 에러가 생긴다.

2. 원인 추측

지금 글자 하나 하나 바뀔 때마다 자동으로 저장이 되는데, 렌더링은 그 속도를 못 따라가서 생기는 문제가 아닐까..???

3. VS Code 설정을 변경해보자..

원래 코드 변경이 있을 때마다 자동 저장 되도록 설정을 해 놨었음. 이게 문제 될 거라고는 생각해본 적이 없는데, 문득 그럴 수도 있겠다는 생각이 들음. Auto Save: afterDelay로 되어 있던 걸 off로 변경해봄.

4. 해결.

이렇게 간단한 문제였다니… 상상도 못 했다. 그래도 혼자의 힘으로 간단하지만 엄청나게 중요한 문제를 해결해서 뿌듯한 경험이 됐다. 컴퓨터 속도 등 환경에 따라 다를 수도 있지만, 이런 방법도 있다는 점을 기록하고 싶다.

👍🏻 결론

VS Code 설정에 자동저장이 켜져 있으면 꺼보세요!!

• 프로젝트 세팅
• 디자이너 님과 미팅
• 맡은 파트의 항목 별 진행 및 마감일 계획 세우기
• 개발 시작
• 메인 페이지 컴포넌트 파일 분리 및 UI 구현 시작

TIL : .eslintrd.js 파일?

팀원 분들이 해결해주신 트러블 슈팅인데 나도 새롭게 배운 부분. git clone 받은 다음 코딩 시작하기 전에 팀장님이 알려주신 세팅을 하는데 계속 모든 코드에 빨간 줄이 뜨는 문제가 발생했다. prettier, eslintrc 설정에 문제가 있었는데, endOfLine: 'auto' 를 추가해서 해결.

module.exports = {
    extends: ['next/core-web-vitals', 'plugin:prettier/recommended'],
    // plugins: ['prettier', 'unused-imports'],
    plugins: ['prettier'],
    rules: {
        // 선언되지 않은 변수 또는 임포트 구문 정리 규칙
        'no-undef': 'error',
        // 'unused-imports/no-unused-imports': 'error',

        // 프리티어 설정
        'prettier/prettier': [
            'error',
            {
                singleQuote: true,
                semi: true,
                tabWidth: 4,
                trailingComma: 'all',
                printWidth: 80,
                bracketSpacing: true,
                arrowParens: 'avoid',
                endOfLine: 'auto',
            },
        ],
    },
};

참고 블로그 : https://guiyomi.tistory.com/134

이것은 개행시 crlf 를 쓸것인지 lf 를 쓸것인지의 문제에서 윈도우 사용자와 맥 사용자가 상이해서 생기는 문제라고 하네요 <- 팀장님의 한 줄 요약!

• 디자이너님과 회의
• 와이어프레임 피드백 및 플로우 정리
• 각자 의사코드 공유, 다같이 회의 거쳐서 수정
• DB 완성

채팅 구현 플로우

홈 의사코드

1. 배너

trips 테이블에서 get

trips.trip_master || trips.trip_members 에 있는 id와 유저 id가 일치하는 trip만 필터링

start_data를 기준으로 저장

0번째 인덱스만 불러와서 배너에 노출

(새로 추가된 테이블 기준으로 수정)

2. 추천 인기 버디즈

온도 기준으로 정렬

buddies 테이블에서 get

메인페이지에선 몇개만 가져오기

전체보기 누르면 /buddies 페이지로 이동

3. 인기 스토리

(이 부분은 은님에게 컴퍼넌트 맡김)

4. 지금 모집중인 여정

trips 테이블에서 isValidated 만 필터링해서 get

메인페이지에선 몇개만 가져오기

전체보기 누르면 /trips 페이지로 이동

chat 의사코드

1. 채팅 생성:

trip 모집 생성 시 바로 contracts 테이블에 isLeader=true인 row 생성

2. contract 추가 및 채팅방 입장:

채팅하기 = isValidate=true 해당되어야만 채팅창 접근 가능

채팅하기 클릭 -> master에게 요청 알림 -> 거절or수락 창

거절 시 거절됐다는 알림

수락 시 수락됐다는 알림 (클릭하면 채팅으로 이동)

수락 시 participant 테이블에 row 생성

master의 경우: 수락하기 -> 채팅방 이동

3. 채팅 목록:

contracts 테이블에서 user_id와 member_id? 비교 돌려서 해당되는 채팅만 가져옴

상태에 저장, 목록 렌더링

클릭하면 chat/[id]로 이동

4. 메시지 전송:

해당 chat과 연결된 messages 리스트를 상태에 저장

메시지 도착할 때마다 메시지 리스트 업데이트

input 창에 입력한 message_content와 message_sender_id 저장

전송 누르면 messages 테이블에 새로운 메시지 삽입

메시지 보내면 notification 테이블에 type="message"로 새 row 추가

5. 이미지 전송 로직

• createObjectUrl이미지를 화면에서 볼 수 있도록 임시 url 생성
• supabase storage에 저장 (webp로)
• getPublicUrl 사용해서 Image 컴퍼넌트로 뿌리기

새로 배운 것들 메모

1. supabase 실시간 채팅 관련

• postgress를 사용하면 서버에 써지면 렌더링됨 바로바로 되려면 broadcast를 쓰면 됨
• 문제: 서버에 저장을 따로 해줘야 함. 화면에 그려지는 순간 업데이트 되지만 채팅 데이터는 따로 테이블에 저장을 해야 한다.

2. 이미지 처리

1) createObjectUrl 사용해 이미지를 화면에서 볼 수 있도록 임시 url 생성 2) supabase storage에 저장

.from bucket
.upload

3) getPublicUrl 사용해 Image 컴퍼넌트로 뿌리기 ***Optimistic 업데이트를 사용한다면 createObjectUrl

3. 퍼널(Funnel) 패턴

출처: https://dev.to/hxxtae/tossyi-peoneolfunnel-paeteon-jeogyonghaebogi-2n7c 요즘 모바일 UX, 토스 이후로 신경쓰기 시작한 부분. 튜터님이 우리 진행 상황을 보시고 모바일 구현 시 다들 참고하면 좋다고 하신 기술이다! 이런 패턴을 적용할만한 부분이 있다면 적용해보자. 좋은 팁을 알게 됐다.

파이널 프로젝트 첫주를 마무리 하며

파이널 프로젝트를 시작한 주. 월요일에 첫 인사를 시작으로 화요일부터 이어진 본격적인 회의. 정말 9 to 9 의 회의 시간. 리더님 부리더님은 새벽까지 회의하신 것 같지만... 12시간 회의도 정말 심리적으로나 체력적으로나 쉽지 않은 4일이었다! 하지만 뿌듯하고, 좋은 팀, 좋은 팀원들을 만난 것 같아서 즐겁게 임할 수 있는 시간이었다. 리더 부리더 님들이 정말 배려를 많이 해주시고, 부족한 부분을 잘 이해해주시고 다같이 문제를 해결해나갈 수 있도록 열심히 도와주셔서... 너무 잘 만났다고 감사하다고 말하고 싶다! 우리가 사전에 계획했던 대부분의 일은 마친 것 같고. 이제 코딩 들어가면 더 바빠지겠지..? 매우 기대가 된다. 회의는 (즐거웠지만) 지쳐서 이제 잘 하든 못하든 코딩을 빨리 시작하고 싶다ㅋㅋㅋㅋ

주말 동안 채팅 구현 로직에 대해 더 공부하고 와야겠다. 기술 면접 준비도 잊지 말고! 알고리즘 문제 풀이도 내일부터는 매일 하나씩은 꼭 하는 거 잊지 말자. 기록은 생명. 5분 기록 보드와 TIL 반드시 12시 지나가기 전에 작성하기.

남은 기간 동안 성실하게 임해보자.

• 와이어프레임 피드백
• 세부 기능, 로직, 플로우 정리
• 디자이너 미팅

  의사 코드 작성..

  채팅 생성: chat 테이블에 컬럼 생성

채팅 목록: chat 테이블 데이터 가져옴 상태에 저장, 목록 렌더링 이름 클릭하면 chat/[id] 로 이동

메시지 전송: 해당 chat과 연결된 messages 리스트를 상태에 저장 메시지 도착할 때마다 메시지 리스트 업데이트 input 창에 입력한 메시지와 사용자id, 닉네임을 저장 전송 누르면 messages 테이블에 새로운 메시지 삽입

일단 플로우 조금 작성해봤는데 많은 수정이 필요할 것 같다. 오늘 밤에 채팅 구현하는 방법을 제대로 찾아보고 로직 작성해보자. 메인 페이지의 의사 코드도!

느낀 점 (소통 관련)

• 말 끊고 들어갈 때 조심스럽게 하기! 기분 상하지 않도록
• 디테일한 부분을 놓치고 있다 싶으면 바로 얘기해보자
• 하지만 내가 말할 때는 정리한 상태로 말하기. 이해가 잘 되도록 생각하면서 얘기하기.
• 항상 집중! 놓치는 게 있다면 바로바로 짚고 넘어가자.

우리는 Figma에서 작업하다가 좀 더 구조 그리기 편한 걸 써보자! 해서 Figjam으로 넘어가게 됐다. 진작 그럴 걸.

컴포넌트 구조

피그잼으로 오니까 이렇게 화살표 그리는 것도 간편하고, 스탬프를 활용해 누가 어떤 파트를 작업할지 나누어 놓는 것도 쉽게 가능해졌다. 컴포넌트 구조:

• 우선 페이지가 들어가는 app 폴더 안에는 (provider) 폴더를 넣고, 그 안에 인증/인가에 따른 (authenticated), (conditional), (public) 세 가지로 나누었다.
• components 폴더를 src 바로 하위 요소로 넣고, atomic 폴더 구조를 활용해보기로 결정했다. atoms < molecules < organisms < templates < pages 이렇게 나누어지는데, 튜터님께 이 방법을 사용하는 게 나을지 다른 방법을 사용하는 게 나을지 자문을 구했다. 결론은 atomic 폴더 구조는 사용하는데 우선은 atoms, molecules, organisms까지만 사용하도록 결정. (어차피 pages도 따로 있으니!) 튜터님에게는 아토믹을 활용한다 하더라도 꼭 다 쓸 필요는 없고, 팀원들끼리 합의 하에 요소와 요소 각각의 기준을 정하고 우리만의 규칙으로 진행해도 된다는 피드백을 받았다.
• hooks, store, providers, context 안에 들어가 있는 파일명도 컨벤션을 정해보았다. "뭐뭐.store.ts" <- 이런 식으로.

(중간은 아직 완전 확정은 아니니까 생략하고...)

DB 설계 하는 중 (일부만 예시로..)

마크다운 랭귀지 새로 배운 거

[링크제목](url주소)

홈 페이지에서 생성하기 누름 -> 기본 정보 입력 모달 -> 모달의 생성하기 누르면 지도 불러오는 페이지로 이동 위와 같은 과정에서, 지도 불러오는 페이지로 이동했는데 지도가 로드 되지 않는 문제가 발생했다. 새로고침을 하면 작동이 되는데, 페이지에서 페이지로 넘어갈 때 안 되는 문제.

해결 과정

다른 팀원 분이 발견하신 문제였는데 그 분이 해결 방법을 찾아보시고, 튜터님과 다른 수강생들한테 도움을 구하러 다니셨지만 해결하지 못 해서 골머리를 앓고 있는 중이었다. 팀 회의에서 보이는 코드를 다 하나씩 주석처리 해 가면서 문제가 어디서 발생하는지 찾아 보았고, 아무래도 다른 것보다 맵 가져오는 컴퍼넌트의 문제인 것 같다고 팀원들과 의견을 나누게 되었다. 그리고, 최후의 방법으로 gpt한테 도움을 구했고... 해결할 수 있었다.

코드

변경 전 코드

'use client';

import { IMGURLS } from '@/constants/images.constant';
import useGeoLocation from '@/lib/hooks/useGeolocation';
import Script from 'next/script';
import { Map, MapMarker } from 'react-kakao-maps-sdk';

const KAKAO_SDK_URL = //dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&libraries=services,clusterer&autoload=false;
const imgUrl = IMGURLS.myLocationIconImgUrl;

const KakaoMap = () => {
  const myLocation = useGeoLocation();
  return (
    <>
      <section className="h-lvh mr-1">
        <Script src={KAKAO_SDK_URL} strategy="beforeInteractive" />
        <Map
          center={
            myLocation ? { lat: myLocation.latitude, lng: myLocation.longitude } : { lat: 37.715133, lng: 126.734086 }
          }
          style={{ width: '800px', height: '100%' }}
        >
          {myLocation && (
            <MapMarker
              position={{ lat: myLocation.latitude, lng: myLocation.longitude }}
              image={{ src: imgUrl, size: { width: 70, height: 70 } }}
              title="현재 위치"
            />
          )}
        </Map>
      </section>
    </>
  );
};

export default KakaoMap;

변경 후 코드

'use client';

import { useEffect, useState } from 'react';
import { IMGURLS } from '@/constants/images.constant';
import useGeoLocation from '@/lib/hooks/useGeolocation';
import { Map, MapMarker } from 'react-kakao-maps-sdk';

const KAKAO_SDK_URL = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&libraries=services,clusterer&autoload=false`;
const imgUrl = IMGURLS.myLocationIconImgUrl;
const KakaoMap = () => {
  const myLocation = useGeoLocation();
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    const script = document.createElement('script');
    script.src = KAKAO_SDK_URL;
    script.onload = () => {
      kakao.maps.load(() => {
        setIsLoaded(true);
      });
    };
    document.head.appendChild(script);
    return () => {
      document.head.removeChild(script);
    };
  }, []);
  return (
    <section className="h-lvh mr-1">
      {isLoaded && (
        <Map
          center={
            myLocation ? { lat: myLocation.latitude, lng: myLocation.longitude } : { lat: 37.715133, lng: 126.734086 }
          }
          style={{ width: '800px', height: '100%' }}
        >
          {myLocation && (
            <MapMarker
              position={{ lat: myLocation.latitude, lng: myLocation.longitude }}
              image={{ src: imgUrl, size: { width: 70, height: 70 } }}
              title="현재 위치"
            />
          )}
        </Map>
      )}
    </section>
  );
};
export default KakaoMap;

메모

코드를 항상 뜯어보고 이해하자... 지금은 시간이 부족해서 구현하기에만 급급하지만... 그리고 문제 해결에 적극적으로 나서자 시간 낭비를 줄이도록

하루종일 회의했던 날... 오늘은 하루 내내 새 팀 프로젝트의 기획과 디자인을 하는 날이었다. 낮밤이 바뀌어서 두 시간 정도 자고 왔는데, 몽롱한 상태로 하루종일 계속 소통하니까 예쁘고 부드럽게 말하는 걸 신경쓰지 못 한 것 같다... 내일부터는 다시 좋은 팀원이 되도록 노력해보자..!!

내일의 계획 지금 맡은 파트 빨리 끝내기 빨리 끝내서 다른 분들 파트 나눠 할 거 있으면 해보기 알고리즘 문제 매일 풀기! 사이드 프로젝트 계획했던 거 빨리 빨리 해보자