jjangsh 님의 블로그

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..

변수, 함수에서 TS를 사용// 변수 문법과 똑같음type CustomType = { name: string; age: number; }type Age = number;interface CustomInterface { name: string; age: number;}let a: number = 1;function sum(a: number, b: number): number { return a + b;}function objSum({ a, b }: { a: number; b: number }): string { return `${a + b}`;}  비동기 함수에서 TS 사용( localhost 에 실행된 JSON-Server에 임의로 추가해 준 Todo를 불러오는 로직 )// 커스텀 타입인 Todo 타..

문제 :   내 풀이 : function solution(arr){ let resultArr = []; for(let i = 0; i  1. resultArr은 중복되지 않은 요소들이 들어간다. 2. arr을 반복시키면서 현재 요소 arr[ i ]와 다음 요소 arr[ i + 1 ]가 같지 않으면, 중복되지 않은 것이고  resultArr에 추가한다. 3. 마지막 요소에서는 비교 대상인 arr[i + 1]가 undefined가 되기 때문에 자동으로 마지막 요소는 resultArr에 추가된다.

Pre-Rendering (Static) - Server Side Generation (SSG) // SSG - Server Side Generation(Static)// 서버에서 미리 html을 만든 후 브라우저에 보여주는 렌더링// 아무것도 하지 않으면 SSG// next.js에서는 기본적으로 아무것도 설정하지 않았다면 SSG로 동작// SSG는 빌드타임에 페이지를 만들어줌// 정적 페이지를 로드하기 때문에 처음에 한번 로드하고 다시 로드하지 않음const Ssg = async () => { const res = await fetch("http://localhost:4000/posts", { cache: "force-cache", }); const data = await res.json()..