본문 바로가기

TIL

 (95)
TIL - 프로젝트 선정 과정 및 최종 결정 배경 최종 팀 프로젝트로 처음에는 헬스 트래킹 웹사이트를 기획했습니다. 하지만 프로젝트의 주기능과 타겟 사용자에 대한 고민 끝에, 헬스 커뮤니티 사이트로 전환하게 되었습니다. 이 과정에서 많은 논의와 결정이 필요했습니다. 고민처음 기획했던 헬스 트래킹 웹사이트는 실시간 데이터 시각화와 트래킹 기능이 중심이었습니다. 하지만 모바일 어플리케이션이 더 적합할 것이라는 우려가 있었고, 웹 브라우저 환경에서는 사용자 참여가 저조할 가능성이 있다고 판단했습니다.전환 과정: 헬스 커뮤니티 사이트새로운 기획디자이너와의 회의 끝에, 프로젝트의 주기능과 이름을 헬스 커뮤니티 사이트로 전환하기로 결정했습니다. 이는 사용자들이 웹 환경에서 더 유용하게 사용할 수 있을 것이라는 판단에 따른 것입니다. 결론이번 TIL을 통해 헬..
TIL - 타입스크립트 타입 가드와 타입 좁히기 개요오늘은 타입스크립트의 타입 가드와 타입 좁히기 개념을 복습했습니다. 이러한 기능은 특정 스코프 내에서 올바른 타입을 보장하여 더 안전하고 정확한 코드를 작성할 수 있게 해줍니다. 주요 내용은 다음과 같습니다. 타입 가드와 타입 좁히기2-1. typeof와 instanceof타입 가드는 특정 스코프 내에서 변수의 타입을 보장하는 표현식입니다. 이를 통해 더 안전하고 명확한 코드를 작성할 수 있습니다. function printAll(strs: string | string[] | null) { if (typeof strs === "string") { console.log(strs.toUpperCase()); } else if (Array.isArray(strs)) { ..
TIL - Next.js 클라이언트 컴포넌트에서 API 토큰 관리 문제 트러블 슈팅 문제 상황무한 스크롤 기능을 구현하면서 클라이언트 컴포넌트에서 Spotify API에 직접 요청을 보내야 했습니다. 그러나 API 토큰이 서버 측에서만 관리되고 있어 클라이언트에서 API 요청을 할 수 없는 문제가 발생했습니다. 특히 빌드 과정에서 다음과 같은 문제가 있었습니다:로컬 개발 환경에서는 API 라우트 핸들러가 정상적으로 작동했지만,빌드 시에는 로컬 서버가 실행되지 않아 API 라우트 핸들러에 요청을 보낼 수 없었습니다.해결 방안이 문제를 해결하기 위해 spotify.api.ts 파일에 다음과 같은 코드를 추가했습니다:async getAccessToken() { if (typeof window !== 'undefined') { const response = await fetch('/ap..
TIL - 효율적인 데이터 Fetching 전략: 벌크 vs 개별 요청 데이터 Fetching의 중요성1. 사용자 경험(UX) 향상:빠르고 효율적인 데이터 로딩은 사용자 만족도를 크게 높입니다.지연 시간을 최소화하여 앱의 반응성을 개선합니다.2. 성능 최적화:불필요한 데이터 전송을 줄여 네트워크 대역폭을 절약합니다.서버 부하를 감소시켜 전체 시스템의 효율성을 높입니다.3. 리소스 관리:클라이언트와 서버 모두의 리소스(메모리, CPU 등)를 효율적으로 사용합니다.모바일 기기에서 특히 중요한 배터리 소모를 줄일 수 있습니다.벌크 요청 방식 (getMultipleTrackDetails)구현 방법:Spotify API를 사용하여 벌크 요청을 구현하는 예시async getMultipleTrackDetails(trackIds: string[]): Promise { const acce..
TIL - Next.js와 Zustand를 사용한 상태 관리 및 SSR 하이드레이션 소개Next.js는 React 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성을 지원합니다. Zustand는 경량 상태 관리 라이브러리로, 간단하고 직관적인 API를 제공합니다. 이 두 가지를 결합하면 강력한 상태 관리와 효율적인 SSR 하이드레이션을 구현할 수 있습니다 학습 내용Zustand 설정스토어 생성: createCounterStore를 사용하여 상태 관리 스토어를 초기화합니다.import create from 'zustand';const createCounterStore = (set) => ({ count: 0, increase: () => set((state) => ({ count: state.count + 1 })), decrease: () => set((st..
TIL- 시스템 설계와 Many-to-Many 관계 적용 오늘은 복잡한 데이터 구조들을 효율적으로 구현하는데 있어서 올바른 데이터베이스 구조와 관계 설정에 대해 배웠습니다 Many-to-Many 관계 적용 예시1. 트위터 피드트위터와 같은 소셜 미디어 플랫폼에서 Many-to-Many 관계를 활용하는 대표적인 예시로는 사용자와 트윗 간의 관계가 있습니다.테이블 구조: Users, Tweets, FollowersUsers: 사용자 정보를 저장하는 테이블.Tweets: 트윗 정보를 저장하는 테이블.Followers: 사용자 간의 팔로우 관계를 저장하는 테이블.기능: 사용자 A의 피드 조회사용자 A가 팔로우하는 모든 사용자(B, C, D 등)의 트윗을 조회합니다.이를 위해 조인 쿼리를 사용하여 Followers와 Tweets 테이블을 연결합니다.2. 플레이리스트음악..
TIL - 서버 사이드 렌더링으로 화면 깜빡임 제거 문제 설명React 애플리케이션에서 서버 사이드 렌더링(SSR)을 사용하지 않을 때, 즉 next.js를 사용하기 전에는 초기 페이지 로드 시 데이터가 없어서 화면이 깜빡이는 현상이 발생할 수 있습니다. 예를 들어, 로그인된 사용자의 정보를 표시할 때, 초기 렌더링에서 데이터가 없으면 "없습니다"라고 표시되었다가, 데이터가 로드되면 "사용자 이메일"로 변경됩니다. 이러한 화면 깜빡임은 사용자 경험을 저하시킬 수 있습니다. 해결 방법이 문제를 해결하기 위해, 서버 사이드에서 초기 데이터를 가져와 클라이언트로 전달하고, 이를 통해 초기 렌더링 시에 데이터를 사용하여 화면 깜빡임을 방지할 수 있습니다. 이를 위해 Next.js의 서버 사이드 렌더링 기능과 컨텍스트 API를 사용합니다.  구현 단계1. Auth..
TIL - 소셜 로그인 기능 추가 도중 트러블 슈팅 발단 이번 프로젝트에서는 사용자가 Google 및 카카오 계정 등을 사용해 로그인할 수 있도록 소셜 로그인 기능을 추가하려고 했습니다. 하지만 여러 가지 문제를 겪으며 해결 과정을 통해 많은 것을 배울 수 있었습니다.문제 소셜 로그인 버튼을 클릭할 때 리디렉션이 되면서 supabase에 저장되지 않는 오류가 발생했습니다.  원인 분석처음에는 문제가 Google API 콘솔의 리디렉션 URI 설정에 있다고 생각했습니다. 이후, 리디렉션이 발생하는 것을 확인하고 로그인 폼 제출 방지 문제라고 생각해서 테스트해 보았지만, 문제가 지속되었습니다. 로그를 통해 문제를 찾으려고 했지만, 소셜 로그인 시 페이지가 이동하면서 로그를 확인하기가 어려웠습니다. 이 과정에서 소셜 로그인 페이지로 이동하는 것을 보고 연결은 ..

티스토리툴바