jjangsh 님의 블로그

10월 23일 수요일세팅 시점에 Next.js 15 버전이 정식 공개 되었다.하지만 레퍼런스도 많이 부족하고 불안정성을 고려해 우리는 14 버전을 선택하였다. - next14 버전으로 프로젝트 시작하기supabase, zustand, tan-stack-query 설치.env.local (supabase) 설정 완료supabase 폴더에 ( client, server, middleware 폴더 생성 및 설정 완료)초기 컴포넌트 분리 설정 - 카카오 디벨로퍼스 앱 생성 후 초대 완료 - pwa 세팅 라이브러리 설치yarn add next-pwa next.config.mjsimport withPWA from 'next-pwa';/** @type {import('next').NextConfig} */const ..

10월 21일 화요일ERD 작성 맨 아워 / 마일 스톤 기획supabase 세팅 (ERD를 바탕으로)

10월 21일 월요일유저 플로우 언제 만들어야 할지 결정해야 함.와이어프레임 진행해 보고 유저 플로우 필요할 거 같으면 선택적으로 진행, 디자이너님들이 필요할 것 같지 않다면 안 해도 됨카카오 페이 / 토스 페이 결제 API 둘 중 무엇을 사용해야 할지?카카오 페이 결제시스템으로 결정이유: 우리가 필요한 기능(결제, 주문조회, 결제취소, 정산조회)은 다 가능하기 때문에 좀 더 대중적인 카카오페이 API 결정단건 결제https://developers.kakaopay.com/docs/payment/online/single-payment주문 조회(결제내역)https://developers.kakaopay.com/docs/payment/online/payment-detail결제 취소(전체 취소만 가능한 듯)ht..

10월 20일 일요일 IA 작성   자료 조사 (타 서비스 플로우)  유저들의 사용자 경험 고려하여 사용자 인터페이스 조정모임 생성 - 기존에는 메인페이지의 하단바에 위치했었지만, 홈과, 둘러보기 상단바에 위치시키기로 변경챗봇 - 기존에는 모든 페이지에서 접근이 가능하도록 플로팅버튼으로 오른쪽 하단에 위치했었지만, Scroll Top 버튼 등 위치가 겹치는 문제로 인하여 마이페이지 > 문의하기로 변경( 챗봇은 FAQ 기능만 지원 )

10월 18일 금요일주제 선정팀원 각자 진행하고 싶은 주제와 레퍼런스 찾기겹치는 주제 추리기주제에 대한 목적 설정 (뉴스 기사 등)목적이 타당하고 설득력 있는 주제로 선정     기능 선정팀원 각자 구현하고 싶은 기능과 라이브러리나 레퍼런스 찾기해당 기능이 왜 매력적인지, 왜 해당 라이브러리를 사용해야 하는지 생각하기

💣 중복 세션 생성 문제 위는 기술 면접(문제풀기, 채점하기)를 한 싸이클로 만들어 저장하기 위한 테이블이다. const { data: sessionData, error: sessionError } = await supabase .from('tech_sessions') .insert({ user_uuid: userUid }) .select() .single(); 위 코드는 tech_interview > page.tsx 에서 처음 기술 면접 페이지에 접근했을 때, 세션 테이블을 생성하는 로직이고위 로직은 useEffect안에서 이루어진다. 또한 useEffect에 의존성은 로그인 한 유저의 useId를 의존성배열에 넣었다. 의도대로라면 한번에 한개의 세션..

오늘 팀프로젝트를 시작하게 되었다. 우리 팀은 취업을 도와주는 여러 서비스를 제공하는 사이트인 가치뽀를 기획하였다. 주요 기능( 기획단계 )로그인, 회원가입기술면접 질문지,답안 제공 ( 서술형 답변, 본인이 직접 채점해 보기 )포인트 기능본인의 이력서를 업로드하여 멘토들에게 피드백 받을 때 지불멘토들은 본인의 피드백이 채택받으면 포인트를 얻게 되고 기프티콘 상점에서 포인트를 쓸 수 있다.이력서작성폼 제공하고 pdf로 내려받기 가능하다. 와이어프레임( 기획단계 )    ERD ( 기획단계 )  DB 테이블 구축하고 관계를 연결하는것이 익숙하지 않고 생각해야 하는 부분이 많아서 힘들었다. 그리고 기술면접의 사용자 답변과 기술면접 결과를 다른 곳에서 보여주지 않고 1회성으로 사용한다고 하면 굳이 테이블이 있어..

프로젝트 개요프로젝트명 : 푸드 나침반 프로젝트 소개 : 푸드 나침반은 "내가 찾는 맛집을 더 쉽게"라는 슬로건 아래, 개인의 취향을 기반으로 맛집 탐색 경험을 제공하는 서비스이다. 사용자는 지역별, 음식 카테고리별 맛집 정보를 지도를 활용하여 직관적으로 공유할 수 있다. 진행계기 : 광고 없는 나만의 찐맛집을 다른 사람들에게 알리고 다른 사람들의 맛집도 지역별로 또, 지도상으로 한눈에 볼 수 있는 서비스를 만들어보고자 진행 진행기간 : 24.09.12 ~ 24.09.23 배포 링크 : https://food-compass-beige.vercel.app/ 깃허브 링크 : https://github.com/jjjangsh/food-compass 시연 영상   담당 기능장성현 (팀장) : 로그인 및 회원가입..

💣 댓글 pagination 이슈 댓글에서 pagination을 구현하던 중 1페이지에서 2페이지로 넘어가도 1페이지의 댓글들만 보이는 이슈가 생겼다.  코드는 아래와 같다.// 페이징처리 댓글 가져오는 요청export const getComments = async (postId, page, limit) => { const response = await commentInstance.get('', { params: { postId, _page: page, _limit: limit } }); return response.data;}const [page, setPage] = useState(1);const limit = 5;// postId에 해당하는 댓글들 페이지..

08 / 28 ~ 09 / 04 기간 동안 진행했던 devnote 프로젝트를 마무리 지었다. 시연영상         구현기능회원관리로그인 : 유효성 검사로 입력 양식 검증, supabase에 저장된 사용자의 정보와 일치하면 로그인처리회원가입 : 유효성 검사로 입력 양식 검증, supabase에 입력받은 정보를 저장정보 수정 : 사용자의 기본키값인 id로 로그인 한 사용자의 정보를 입력받은 값으로 수정로그아웃 : 사용자가 로그아웃하면 Supabase는 새로 고침 토큰을 취소하고 클라이언트 측에서 JWT를 삭제Context API로 user를 전역 상태 관리게시판작성 : 썸네일 이미지, 제목, 내용, 기술스택, 진행 기간 등 정보를 입력받아 DB에 저장수정 : 게시글에서도 작성한 사용자의 id를 가지고 있기..