DYO 공부하는 블로그

예전부터 개인 포트폴리오 사이트를 웹페이지로 만들고 싶은 욕심이 있었다. 그래서 세달 전에 레포 파고, 배포 하고, 도메인까지 연결해뒀었던 것이 있어 그걸 개선해 사용해보려고 한다. 세 달 전에 처음 레포를 파고, 배포할 때는 두근거리면서 시작했지만 프로젝트 너무 일정이 바빴고, 포트폴리오 결과물이 마음에 안 들었다. 때문에 추후에 시간이 남을 때 리뉴얼을 해보기로 계획했고, 지금에서야 리뉴얼 작업을 하기로 결정했다. 당시에 결과로 만들었던 것은 아래와 같다. 새로 개선해야겠다고 느꼈던 부분1. 히어로 섹션의 높이가 애매하다. 반응형으로 100vh로 화면을 꽉 채우는 설계로 변경2. About 섹션에 내 소개가 부족한 것 같아 좌우명이나 개발철학과 같은 것들 짧게 써보기3. 인터렉티브한 요소가 너무 적어..

1. 프로젝트 개요🌌 Re:Life"만약 그때 다른 선택을 했다면?"AI가 시뮬레이션하는 평행우주적 인생 시나리오 서비스📖 프로젝트 소개Re:Life는 사용자의 과거 인생 선택을 기반으로, AI가 "만약 그때 다른 선택을 했다면?"이라는 평행우주적 인생 시나리오를 시뮬레이션하여 제공하는 웹 서비스입니다.단순한 재미를 넘어, 실제 사회 통계와 개인 성향 데이터를 반영하여 현실적이고 구체적인 대안적 삶을 탐색할 수 있도록 설계되었습니다.깃허브 레포지토리 GitHub - prgrms-web-devcourse-final-project/WEB5_6_OneTop_FE: 프로그래머스 웹개발 프론트엔드 6기 8회차 1팀 최프로그래머스 웹개발 프론트엔드 6기 8회차 1팀 최종 프로젝트 프론트엔드 레포지토리입니다. C..

동적 라우팅은 page에서 관리동적 라우팅을 사용할 때는 layout 레벨에서 사용하면 필요한 parameter를 받아오는 것이 불가능하기 때문에 page에서 관리해야 한다. 정적 라우팅은 상관 없지만, ‘일관성’을 갖추는 게 코드 가독성에 많은 영향을 미치기 때문에 하나로 통일해보자.server action으로 로그인 시에는 Cookie를 받을 때 직접 관리해줘야 한다.서버에서 해석을 마치기 때문에 쿠키를 클라이언트로 직접 내려줘야 한다. RCC에서 fetch할 경우 set-cookie가 자동으로 쿠키를 처리해주지만, server action또는 RSC에서 쿠키를 수령해야 하는 경우에는 위와 같이 cookieStore에 직접 쿠키를 삽입해줘야 한다. // Set-Cookie 헤더로 자동으로 JSESS..

배포 주소 https://pick-it-book.vercel.app/ PickitBook pick-it-book.vercel.app 프로젝트 레포지토리 https://github.com/prgrms-fe-devcourse/FES-5-Project-TEAM-6 GitHub - prgrms-fe-devcourse/FES-5-Project-TEAM-6: 룰렛 기반 책 선택과 도전과제와 같은 미션으로 책에 대한룰렛 기반 책 선택과 도전과제와 같은 미션으로 책에 대한 관심을 높이는 PickItBook 프로젝트입니다. - prgrms-fe-devcourse/FES-5-Project-TEAM-6github.com1. 프로젝트 개요- 프로젝트명: PickItBook- 기간: 2025.08.22 ~ 2025.09.0..

6. 낙관적 업데이트낙관적 업데이트는 서버 응답을 기다리지 않고, 사용자 입력에 따라 먼저 UI를 업데이트한 다음 나중에 서버 응답 결과에 따라 처리하는 방식이다. 사용자의 액션에 즉시 반응해 결과를 렌더링 서버 응답이 실패하면 롤백하거나 에러 처리반대 개념으로는 서버 응답이 올 때까지 기다렸다가 UI를 업데이트하는 비관적 업데이트가 있다. - 적용하면 좋은 경우실패 확률이 낮고 복구가 쉬운 경우사용자 체감 속도가 중요한 경우 ( 댓글 작성, 좋아요, 팔로우 )모바일 네트워크 환경처럼 지연이 잦은 경우 - 프로젝트에 적용이번 프로젝트에는 피드 submit 동작에 대해서 낙관적 업데이트를 적용했었다. infinity Sroll과 realtime을 통해 피드들을 로드했기 때문에 hasMore(해당 방향에 추..

3. Supabase 쿼리 분기와 lazy execution supabase의 데이터 요청 쿼리는 lazy execution을 사용하고 있어 공통 쿼리를 공통 부분을 작성한 뒤 조건에 맞는 쿼리를 분기시켜 실행시킬 수 있다. - Lazy Evaluation(지연 평가)와 Eager Evaluation(즉시 평가)Lazy Evaluation(지연 평가) : 값이 필요할 때만 실행, 성능 최적화 가능, 불필요한 연산 회피, 디버깅 어려움Eager Evaluation(즉시 평가) : 코드를 읽는 즉시 실행, 디버깅 직관적, 불필요한 연산도 계속 수행 supabase의 요청 쿼리 분기 예시// 이 쿼리문은 서버에 요청을 보내지 않음const query = supabase .from("table") .sele..

1. 테이블 관리 전략- 테이블이 분리된 상황에서 조회하기DB를 3NF를 목적으로 설계했었다. 이럴 때 문제는 이행적 함수를 모두 제거하므로 테이블이 아래와 같은 형태가 된다.장르 코드는 시맨틱한 정보가 아니다. 따라서 user_genres 테이블만 조회해서는 유저의 선호 장르 정보를 찾을 수 없다. 따라서 유저 장르와 연결된 장르의 이름을 찾기 위해서는 유저 장르 테이블과 장르 정보 테이블을 join한 view로 조회해야만 한다. 당연한 내용이지만 3NF로 구성된 DB를 조회하는 게 처음이라 처음엔 좀 헤맸다. 하지만 이 VIEW를 만능열쇠처럼 유저 선호 장르를 조회할 때마다 사용한다면 의미가 없다는 것도 기억해야겠다. - 조회는 View 또는 RPC로, 삽입, 삭제, 수정은 테이블로supabase에서..

이번 프로젝트는 음악 클립을 공유하고 음악 관련 소통을 하는 SNS 플랫폼이다.이번에도 팀장으로 전체 프로젝트 일정 관리, 스크럼 마스터로 작업하게 되었다. 이번 글에서는 프로젝트 준비 과정에서의 의사결정과 프로젝트에서의 학습 전략을 정리했다. 프로젝트 준비 과정1. 프로젝트 방향성 정하기 :프로젝트를 진행하며 팀원들이 얻어내고 싶은 건 뭔지, 요구사항을 만족하기에 어떤 아이디어가 적절할 것 같은지와 작성할 문서에 대해서 의논했다.- 진행 중심은 학습 위주로- SNS형태로 구현- 필요 문서 : 와이어프레임, 디자인 문서, 요구사항 분석, 기획서 2. 아이디어 브레인스토밍아이디어 브레인스토밍 뒤에 각자 차별점과 기존 서비스를 비교한 기획서를 써온 뒤 차별점 중심으로 발표했다. 3. 아이디어 투표짜온 기획서..