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를 의존성배열에 넣었다. 의도대로라면 한번에 한개의 세션..

문제 : 내 풀이 :function solution(n, arr1, arr2) { let answer = [] for (let i = 0; i  for (let i = 0; i arr1과 arr2의 각 요소를 한 쌍씩 가져와서 변환한다. let key1 = arr1[i].toString(2).padStart(n, '0');let key2 = arr2[i].toString(2).padStart(n, '0');정수 arr1[ i ]와 arr2 [ i ]를 각각 toString(2)로 이진수 문자열로 변환한다.padStart(n, '0')를 사용하여 이진수 문자열이 항상 n자리의 길이가 되도록 앞에 '0'을 채워준다. 예를 들어, 5를 2진수로 변환하면 '101'인데, n=5라면 '00101'로 변환된다...

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

주요 의사결정의 핵심, 라우팅 📌 일반적으로 Next.js를 채택할 때 주요한 의사결정1. Pages router 사용?2. App router 사용? 📌 Next.js는 라우팅(Routing)을 중심으로 두 가지로 나뉘게 된다.1. 12버전까지 사용해오던 Pages Router 방식2. 13버전부터 새롭게 도입된 App Router 방식 📌 그렇다면 왜 router 기반으로 주요한 속성을 분류하는 것인가 의문이 들었다.1. 우리는 웹사이트를 기획할 때, 어떤 페이지가 존재할지, 라우팅은 어떻게 할지를 먼저 고민한다!!2. 라우팅은 그만큼 프론트엔드 개발자에게 아주 중요하다.   React와 Next.js에서의 라우팅 구현 방법React.js : react-router-dom을 이용해서 라우팅을 가..

프로젝트 개요프로젝트명 : LoL Dex프로젝트 소개 : Riot API를 활용한 리그 오브 레전드 정보 앱진행기간 : 2024.09.27 ~ 2024.10.07배포링크 : https://lo-l-info.vercel.app/  주요 기능🔼홈🔼챔피언 목록🔼챔피언 상세보기🔼아이템 목록🔼로테이션 챔피언 목록 🔼신규 플레이어를 위한 무료 챔피언 목록  기술 스택 주요 코드레이아웃공통적인 헤더, 푸터 레이아웃metadata 설정export const metadata: Metadata = { title: "LOL DEX", description: "League of Legends Information",};export default function RootLayout({ children,}: Re..