이번 프로젝트에서는 모바일 사용자를 타겟으로 진행했기에 모바일에서 더 사용성이 좋은 무한 스크롤을 구현하게 되었습니다. 이전에는 offset 방식만을 사용해서 구현해보았는데 이번에는 cursor 방식을 선택해서 작업했습니다.낯선 cursor 방식을 선택한 이유는 offset 방식으로 구현하면 건너뛸 페이지를 지정해서 데이터를 요청하고 응답받기 때문에 해당 페이지에서 실시간으로 데이터 리스트들의 변경사항이 있어도 스크롤시 변경되지 않기 때문에 데이터의 일관성을 보장할 수 없다고 생각했기 때문입니다.백엔드에서 데이터를 보낼 때 더 불러올 데이터가 있을 때까지 nextCursor 값을 보내주기로 논의했고, API에서는 type, cursor, limit, order 값이 쿼리로 주어졌고 그 중 type만 필수..

기획 단계에서 PM님과 디자이너님과 함께 상의할 때부터 사용자의 입장에서 플랫폼에서 사용성이 좋게 느껴지게 하려면 어떤 방식으로 제공할 수 있을까를 많이 고민할 수 있었다. 그 과정에서 유저가 어렵게 느껴질 수 있을 법한 부분에서 툴팁이나 토스트를 이용해서 방법을 적절히 제시해주기로 했는데, 문제는 다른 분들이 스낵바와 토스트, 툴팁 모두 혼용해서 워드를 쓰다보니 다 모르는 나는.. 이게 뭐지 😱 ??! 상태가 되었다.그래서 공부했다..... 사용자 상호작용으로 제공할 수 있는 알림창의 종류는 이정도로 찾아봤다. 설명사용 예시Dialog사용자의 중요한 상호작용을 위한 웹 페이지 내부에서 생성되는 컴포넌트. 사용자가 처리하기 전까지는 사라지지 않는다.정보 입력, 삭제 확인Toast사용자의 동작에 의한 피..

프로젝트 당시에는 Throttling & debouncing에 대해 학습할 시간도 없어서 ; 이벤트 리스너로만 진행했었던 부분이다. 문서 정리하다 보니까 이젠 Intersection Observer API를 사용하는 방식을 많이 쓴다고 해서,다음 프로젝트에는 Intersection Observer API에 대해 학습하고 이걸로 무한스크롤을 구현했다.  ➡️ Intersection Observer API를 사용한 무한스크롤 구현 📑 여기서는 백에서 처음에 5개 잘라서 보내주신 걸 받아서, 스크롤 이벤트에 +5개 항목 씩 더해서 보여주는 것으로 진행했다.   const handleScroll = () => { const windowHeight = window.innerHeight; // 현재 브라우저 창..

처음에 구상한 UI 디자인을 바꾸면서 이 방식이 더 적합하다 생각되어 변경했다.  이게 처음 나왔던 피그마이고, 이때는 전역으로 모달 관리해주는 방식으로 redux-toolkit을 사용하려고 했다.➡️ redux-toolkit을 이용해서 모달 상태관리 01. 전역에서 상태 관리되는 모달 만들기 (Next.js v14, redux-toolkit)저번에 만든 모달은 모달에서 crud하는 기능만을 가졌었는데 이번에는 슬라이드, 모달 내의 모달 타입이 지정된 버튼,그리고 버튼에 해당하는 모달 form, ...... 그야말로 모달 일대기라고 볼 수 있nuew.tistory.com  그러다가 다음이 바뀐 디자인이고, 이렇게 하려면 어떤 방식이 좋을까 고민하다가 Next.js의 기능 중 하나인 parallel rou..

3~4주차간 진행됐던 팀 과제를 묶어서 하나의 문서로 정리해보았습니다. 1. AI Coding Assitant 도구 조사 및 비교 분석Amazon CodeWhispererCodeCursorTablinCodeiumGitHub Copilotreplit GhostWriter1-1. Amazon CodeWhispererAWS 환경에서의 개발을 최적화한다는 특징을 가지고 있다.주요 특징 : 자동 완성, 다양한 프로그래밍 언어 지원, 주석 기반 코드 생성, AWS 서비스와의 통합1-2. Codex현재 Github Copilot, TabNine등과 같은 AI coding assistant도 Third-party extensions로서 Codex를 사용(leverage)하고 있다.주요 특징 : Coding assist..

next-auth 에서는 3가지의 Provider를 제공한다.Oauth / Email / Credentials그 중에 OAuth 기능으로 카카오 로그인을 구현할 것이다.session 정보를 불러올 수 있는 getServerSession 훅을 사용하기 위해서는 root layout을 SessionProvider으로 감싸줘야 한다.그런데 나는 리덕스 세팅을 해둬서 이미 만들어둔 Provider 컴포넌트로 이동해서 먼저 이곳에서 제일 바깥에 SessionProvider로 심어줬다. /lib/Provider.js"use client";import { SessionProvider } from "next-auth/react";import { Provider } from "react-redux";import { st..

root의 layout.ts 만지면서 경로를 수정하고 있었는데, 황당하게 이런 레이아웃이 나왔다.에러페이지를 머리에서 잊고 있다가 이렇게 뜨니까 생각남.. layout.js가 루트에만 있고 분기별 처리가 되어있지 않아서 전역적으로 적용되기 때문에 생긴 문제였다.그리고 이 레이아웃 파일이 app/(foldername)/page.tsx처럼 ()로 라우터 페이지가 숨겨져 있어도 하위 폴더 안의 페이지에 적용되기 때문에 발생했다. https://nextjs.org/docs/app/building-your-application/routing/route-groups공식 문서에서 이 부분을 보고 다음과 같은 방식으로 해결했다. 먼저 기존의 root layout 형식을 그대로 사용할 페이지와 아닌 페이지를 나누고,ap..

1. Continue에서 completionOption 설정하기Continue에서 completionOption 설정하는 데에는 2가지 방법이 있습니다.1-1. config.json > completionOption전역적으로 설정하는 방법입니다.여기서 설정한 completionOption 값들은 모델에 상관없이 Continue에서 모든 작업에 동일하게 적용됩니다.{"completionOptions": {"temperature": 0.7,"topP": 0.9,"maxTokens": 150}}1-2. config.json > models > completionOptions모든 모델에 대한 기본값이 아니라 특정 모델에 대한 설정을 별도로 정의하고 싶을 때 사용합니다.e.g., Msty와 gpt-4o-mini에..