전체 글 118

최종 프로젝트 on:son 트러블 슈팅

문제점 : 모바일 버전 디테일 페이지에서는 header 컴포넌트에서 게시글 삭제 기능이 있는데 데스크탑 버전에서는 postContent 컴포넌트에서 직접 게시글 삭제가 되어야 한다. 똑같은 로직을 그대로 가져와서 쓰는데 헤더에서는 되고 posrContent 컴포넌트에선 안됨'use client';import { BackButtonIcon, MeatballMenuIcon, PencilIcon, RecruitmentIcon, TrashBinIcon } from '@/components/icons/Icons';import { useGetPostById } from '@/hooks/useGetPostById';import { useUserStore } from '@/utils/store/userStore';im..

카테고리 없음 2025.02.03

최종 프로젝트 on:son 트러블슈팅 2

문제점 : 수파베이스에서 데이터를 가져와서 카드 리스트를 뿌려줘야하는데 이미지가 절대 안보이는 이슈 import { createClient } from '@supabase/supabase-js';// Supabase 클라이언트 초기화const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string;const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;const supabase = createClient(supabaseUrl, supabaseKey);// posts 테이블에서 데이터 가져오는 함수export interface PostType { address: string;..

카테고리 없음 2025.01.09

최종 프로젝트 on:son 트러블슈팅 1

개발환경 세팅을 마치고 처음 개발 시작하는날!!!! 문제 발생 : 헤더 푸터를 맡으신 조원분이 빠르게 완성해주셔서 pull을 받으려고 dev 브랜치로 이동했다가 내가 작업중인 파일을 먼저 commit 하라는 말에 냅가 dev 브랜치에서 커밋!!!! 해결 방안 : 다행히 커밋까지만 하고 푸쉬는 안한상태이기 때문에 수습이 가능!!! 커밋을 취소하고, 모든 변경사항을 다 없애기 (완전한 초기화)$ git reset --hard HEAD~ 커밋을 취소하고, add한 것도 없던 일로!$ git reset HEAD~ 커밋만 취소하고, add한 파일들은 그대로 둔다. (딱 커밋만 취소하기)$ git reset --soft HEAD~  터미널에 이 명령어를 입력하면 내가 올린 커밋을 취소할 수 있다!! 또 하나 알게 ..

최종 프로젝트 기획 2

이틀 사이에 기획이 바뀌어버렸다. 그 사이에 개발자들과 디자이너님과의 의견이 조율이 안되는 이슈 발생.디자이너님이 오전 회의에 참석하지 못하셔서 우선 개발자들끼리 회의를 진행하면서 디자이너님께 이런식으로 기획이 진행되고 있다고 진행 상황을 알려드렸다. 근데 아무래도 채팅으로 전달을 하게 되기 때문에 디자이너님과 오해가 생겨버렸다. 우리가 말씀드린건 기획을 완전히 바꾸자는거였는데 디자이너님은 기존 기획에 추가로 더 기능을 추가하자는것으로 이해하시고 찬성하셨던것... 오후에 디자이너님이 합류하시고 우리 기획이 오전에 말씀드렸던대로 완전히 바뀌었다고 말씀 드렸는데 그때부터 디자이너님과의 의견 마찰이 생겼다.  우리는 심바라는 어플리케이션이 기존에 있는 다른 어플리케이션과 별다른 차이점이 없고 심부름이라는 아이..

카테고리 없음 2025.01.02

최종 프로젝트 기획

프로젝트 명 : 심바 (심Var)소개한 줄 정리 : "심부름을 바로(심Var)”내용 : 내가 해결하기 어렵고 껄끄러운 일을 대신 해주는 본격 비대면 심부름 서비스 (웹/앱)프로젝트 핵심 기술실시간 채팅(매칭 후 채팅)게시글 crud → 사용자가 주소를 입력할 때 ~~동까지만 입력 받기Q&A ai 챗봇을 이용 → 심바니, 심바꾼에 대한 설명도 있으면 좋을 듯 (FAB)supabase 데이터베이스 (데이터 창고 / 백엔드 대체)주소 api 검색 기능서울인데 부산에서 심부름을 시키고/하고 싶은 경우게시글 검색 기능심바꾼(심부름 해주는 사람) 후기 & 평가로그인, 회원가입서비스 이용자 마이페이지 → 내가 올린 글 모아보기, 프로필 변경 기능(닉네임, 프로필 이미지, 비밀번호 변경, 회원탈퇴)단골 심바꾼 기능

카테고리 없음 2024.12.31

Next.js SEEWHAT 프로젝트 kpt 회고

Keep - 현재 만족하고 있는 부분협업 과정에서 서로 부족한 부분을 보완하고 문제해결을 위해 함께 고민하면서 많은 성장을 이룰 수 있었음디렉토리 구조, import 선언 부분 통일한 부분팀원 과반수 이상 Approve 올려야 PR승인을 할 수 있었던 것불친절한 API를 사용했음에도 성공적인 결과물을 낸 것Problem - 불편하게 느끼는 부분코드 컨벤션을 정하고 시작했으나 각자 익숙한 방법으로 작성한 것구현 못한 반응형 UI댓글을 모아볼 수 있는 페이지가 없는 것형식적인 PR리뷰 & 제목을 그냥 브랜치 이름으로 한 것템플릿을 활용한 발표 자료를 갖추지 못한 것회의의 비율이 많아서 개발의 시작이 늦어졌던 점Try - Problem에 대한 해결책, 당장 실행 가능한 것API 사용 시 제한 사항을 사전에 철..

Next.js 심화 프로젝트 SEEWHAT 트러블슈팅 4

문제점 : build && start 하는 과정에서 지도랑 api 로 받아온 정보가 안보임해결 방안 : 서버 컴포넌트에서 클라이언트 컴포넌트를 사용해서 에러가 생김우리가 사용할 api 정보를 불러오기 위해선 서버 컴폰너트에 dynamic을 추가 해야한다. import { fetchTheaterDetail } from '@lib/theaterDetailApi/serverApi';import TheaterMap from './_components/TheaterMap';import CommentForm from '@components/common/CommentForm';import TheaterInfoDetail from './_components/TheaterInfoDetail';import TheaterC..

Next.js 심화 프로젝트 SEEWHAT 트러블슈팅 3

문제점 : 컴포넌트에 타입 정의를 이상하게 내리고 있었다.해결 방안 : export const fetchTheaterDetail = async (id: string): Promise => { const apiKey = process.env.NEXT_PUBLIC_SEE_WHAT_API_KEY; const theaterDetail = await fetch(`http://www.kopis.or.kr/openApi/restful/prfplc/${id}?service=${apiKey}`); if (!theaterDetail.ok) throw new Error(`fetchTheaterDetail api정보를 받아오지 못했습니다`); const text = await theaterDetail.text(); ..

Next.js 심화 프로젝트 SEEWHAT 트러블슈팅 2

문제점 :미션 1 - 공연 목록 api에서 뮤지컬 상영만 하는 극장 이름만 추리기미션 2 - 추려낸 극장 이름으로 공연 시설목록 api에서 극장 이름과 극장 id값 추출하기미션 3 - 극장 이름과 id 값으로 극장 리스트를 만들고 그 id값으로 각각 디테일 페이지 경로 설정해서 만들기미션 4 - 공연시성상세 api를 받아와서 극장 디테일 페이지 뿌려주기헉헉 바쁘다 바빠근데 여기서 너무나도 큰 장벽이 있었으니... 하루 최대 1500건 api 요청.... 대략잡아도 뮤지컬만 하는 극장 수가 100곳 가까이 되는데 api요청을 15번만 하면 내 api key는 블락 ㅋ api가 개똥같다. 그래서 모든 튜터님들과 고민해본 결과 가장 좋은 방법은...! 해결 방안 : 극장이름과 id값을 한번에 받아 목데이터로 ..

Next.js 심화 프로젝트 SEEWHAT 트러블슈팅 1

문제점 1 : 뮤지컬을 상영중인 공연장의 이름을 받아오기 위해 api 요청을 했는데 한 공연장에서 여러 뮤지컬을 상영중이라 공연장 이름이 중복으로 들어옴const TheaterListPage = async () => { const data = await fetchTheaterName(); return ( {data?.map((name, _) => { return ( {name} ); })} );}; 이렇게 데이터를 받아왔을때는 이런식으로 공연장이 중복으로 들어왔었다. 해결방안 : const TheaterListPage = async () =>..