개발 🐾

페이지네이션(1)에서 잘못된 searchParams의 사용으로 API 엔드포인트가 아닌 현재 페이지에 접근했다. [NEXTFLIX_Day3] 페이지네이션(1) - 기능 파악카테고리별 영화 상세페이지에서 페이지네이션을 구현하려고 한다.추후에 어떻게 활용될지 모르니, 기능을 구현하기까지의 트러블 슈팅을 자세히 기록하고자 한다.이번 글에는 잘못된 방향성coco910.tistory.com 구현하고자 하는 방향에 맞는 방법인 '동적 라우트 구조'를 적용하며 작동 방식을 함께 정리해보고자 한다.추가로 페이지와 버튼의 로직을 살펴보며 동작 흐름도 파악해본다.페이지네이션 버튼의 기능다시 짚어보는 버튼의 기능기능 1 : Page = 1 기본값기능 2 : 버튼 클릭 마다 -1 / +1기능 3 : 첫 페이지 : ‘이전’ 버..

카테고리별 영화 상세페이지에서 페이지네이션을 구현하려고 한다.추후에 어떻게 활용될지 모르니, 기능을 구현하기까지의 트러블 슈팅을 자세히 기록하고자 한다.이번 글에는 잘못된 방향성으로 구현했을 때의 문제점을 기록했으며 최종 방법은 2편에서 확인할 수 있다.  [NEXTFLIX_Day3] 페이지네이션(2) - 동적 라우팅 작동 방식페이지네이션(1)에서 잘못된 searchParams의 사용으로 API 엔드포인트가 아닌 현재 페이지에 접근했다. [NEXTFLIX_Day3] 페이지네이션(1) - 기능 파악카테고리별 영화 상세페이지에서 페이지네이션을 구coco910.tistory.com 페이지네이션이란?콘텐츠를 여러 페이지로 나누어 다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소  페이지네이..

2025.03.21(금) Task팀 회의- ERD : 페이지 구조화- supabase DB 설정- 프로젝트 셋업- 역할 나누기 개인 기능 구현- 초기 설정- 기능 파악 및 구현  팀 회의 ERD : 페이지 구조화📍인증 / 인가 방법 : 비회원 익명제 - 홍*동, 댓글 작성 시 비밀번호 설정📍CUD : 영화 상세 페이지 댓글 작성, 수정, 삭제📍와이어프레임을 통해서 페이지 다시 정하기📍페이지 구조 정하기📍필수 기능 체크  supabase DB 설정📍팀원 초대📍comments 테이블 설정id : uuidcreated_at : timestamptzname : varcharpassword : varcharcontent : varcharmovie_id : int8  프로젝트 셋업📍Next.js 설치..

👾 LoL info App 메인 화면 및 작동 영상   Github 링크 : https://github.com/JinchaeKim/lol-info-app.git배포 링크 : https://lol-info-app-git-main-jinchaes-projects.vercel.app🖥️ 프로젝트 소개LoL의 아이템, 챔피언, 챔피언 로테이션 등 다양한 데이터를 조회하는 페이지입니다.TypeScript를 활용하여 타입 선언, useState에서 제네릭을 사용하였습니다.Next.js를 활용하여 동적 라우팅, App Router, 레이아웃 구성, Route Handler를 다루었습니다.Riot Games의 API와 Data Dragon를 활용하여 LoL의 다양한 정보를 나타냅니다. 🕰️ 개발 기간2025 / ..

🔥핫플 인 서울 메인 화면 및 작동 영상 Github 링크 : https://github.com/mangomaneya/HotPlaceInSeoul.git배포 링크 : https://hot-place-in-seoul.vercel.app/🖥️ 프로젝트 소개지도에서 핫플을 찾고 관련 영상을 볼 수 있는 페이지입니다.supabase를 활용하여 회원가입과 로그인을 구현했습니다.카카오 지도 API로 DB에 저장된 핫플레이스를 확인할 수 있습니다.마커를 클릭하면 해당 위치 핫플레이스의 자세한 정보를 모달로 제공합니다.유튜브 API를 활용하여 핫플레이스 키워드로 검색된 유튜브 영상을 제공합니다. 🕰️ 개발 기간2025 / 02 / 26 ~ 2025 / 03 / 05  ⚙️ 개발 환경react, javascript..

2025.02.28 (금) Works 1. DB 연결하기- Tanstack Query- custom hook  DB 연결하기 📍Tanstack Query과제 필수 구현 사항 중 탠스택 쿼리를 이용하여 서버 상태를 관리해야 한다는 항목이 있다.이번 프로젝트에는 supabase, 카카오 지도 API, 유튜브 API 를 사용한다. 사실 전체적으로 CRUD 중 R 외에는 크게 기능이 없기도 하고supabase에 값을 수작업으로 넣어 준 고정 값이기 때문에 탠스택을 어디에 사용해야 하나 고민이 되었다. 조원끼리 대화를 나눠보며 '굳이 캐싱이 필요한 부분이 없지 않냐' 는 이야기가 나왔고 튜터님께 질문을 드렸다.튜터님의 말씀에 따르면탠스택은 특정 key(queryKey)를 기반으로 데이터를 가져온다.이는 캐싱만이..

2025.02.27 (목) Works 1. 와이어프레임 구성- 페이지 구조- 메인 페이지- 장소 세부 모달- 북마크 페이지2. UI 구성- 핫플 리스트- 북마크 페이지   와이어프레임 구성 📍페이지 구조   📍메인 페이지 메인 페이지에 들어가면 헤더와 함께 지도를 확인할 수 있다.지도에는 지역별로 우리가 지정해 둔 핫플레이스가 마커로 표시되어 있으며 마커를 클릭 시 인포 윈도우를 통해 상호명을 확인할 수 있다. 우측 아래 '핫플 보기' 버튼을 통해 해당 지역의 핫플레이스를 모아볼 수 있다. 메인 페이지는 모든 사용자가 지도를 확인할 수 있으며 회원가입 / 로그인을 통해 핫플레이스를 북마크 할 수 있다.   📍장소 세부 모달 핫플 리스트의 항목을 클릭하면 나타나는 세부사항 모달이다.모달에서는 해당 장..

아웃소싱이란? 기업이나 조직이 특정 업무를 외부 전문 업체나 개인에게 위탁→ 한 회사의 개발자가 되었다 생각하고 주어진 요구사항을 잘 반영해서 아웃소싱 프로젝트를 성공시켜 봅시다!두 번째 협업 프로젝트.이번에는 세 가지 서비스 중 한 가지 이상을 포함한 웹사이트를 구현해야 한다.우리 조(하이파이브✋)는 지도 서비스, 유튜브 영상 지원, 설문조사에 따른 결과 중 카카오 지도, 유튜브 를 선택하였다. 2025.02.26 (수) Works 1. 아이디어 스케치 - 피그마2. S.A(Starting Assignments) 정하기- 프로젝트 주제- 포함할 내용- 구성- 기능3. 팀 규칙 정하기 - 커밋 컨벤션- git rules  아이디어 스케치 세 가지 서비스 중 한 가지 이상을 골라서 페이지를 구현해야하기 때..

💟 MBTI Test 메인 화면 및 작동 영상  Github 링크 : https://github.com/JinchaeKim/MBTI-Test_PJ.git배포 링크 : https://mbti-test-pj.vercel.app/🖥️ 프로젝트 소개MBTI 성격 유형 테스트를 진행하고 다른 사람들의 결과를 볼 수 있는 페이지입니다.회원가입/로그인, 프로필 관리, 테스트 결과 저장 기능을 활용하여 페이지를 구현하였습니다.JWT인증과 REST API 통신으로 회원정보를 관리합니다.Axios를 활용하여 비동기 데이터를 관리합니다.json-server를 사용해 로컬 환경에서 API를 구축합니다. 🕰️ 개발 기간2025 / 02 / 20 ~ 2025 / 02 / 25  ⚙️ 개발 환경react, vite, cont..

하루 종일 걸렸던 visibility.. 꿈에서도 나올 단어 2025.02.24 (월) Works MBTI 테스트 결과 페이지를 구현해야 한다.같은 서버를 이용하는 사람들의 테스트 결과를 모아볼 수 있으며 작성자는 자신의 결과만을 공개 / 비공개 / 삭제 처리 할 수 있다.이는 다른 사람의 브라우저에도 반영되어야 하므로 화면에서만 동작하는 것이 아닌 DB에 변동 사항을 적용해야 한다.   json-server (클릭) 이전에 작성한 JWT 인증 방법은 토큰을 이용하여 auth API에서 회원 정보를 관리했다면,테스트 결과는 json API를 이용하여 테스트 결과를 생성하고(C), 가져오고(R), 업데이트하고(U), 삭제(D)해야했다. 따라서 새로운 API 문서를 바탕으로 연결 로직을 작성하고, 해당 내용..