[인프런 워밍업 스터디 클럽 3기 PM/PO] 4주차 발자국

[인프런 워밍업 스터디 클럽 3기 PM/PO] 4주차 발자국 인프런 워밍업 스터디 클럽 3기 PM/PO 4주차 발자국인프런 워밍업 스터디 클럽 3기 PM/PO 4주차 발자국📚 주간 학습 내용 요약1. 제품 발견(Product Discovery)의 개념과 중요성제품 발견이란 "무엇을 만들지 결정하는 과정" (deciding what to build)많은 제품들이 stakeholder-driven, sales-driven 방식 때문에 실패함제품팀(PM, 디자이너, 엔지니어)이 단순히 요구사항 수행보다 권한과 자율성을 가져야 함구시대적 프로세스(아이디어→로드맵→요구사항→디자인→개발)를 탈피해 이터레이션이 필요2. 성공적인 제품의 4가지 필수 요소Valuable(가치): 고객이 구매하고 유저가 사용하고자 하는 제품Usable(사용성): 사람들이 사용법을 익히고 사용할 수 있는 제품Feasible(실현 가능성): 우리 기술력으로 구현할 수 있는 제품Viable(지속 가능성): 사업적으로 타당하고 규제 및 이해관계자 요구를 충족하는 제품3. 제품 발견의 두 단계 프로세스Problem/Opportunity Discovery: 어떤 문제/기회에 집중할지 찾는 과정Solution Discovery: 문제를 어떻게 해결할지, 기회를 어떻게 활용할지 찾는 과정PM은 문제 정의에, 디자이너와 엔지니어는 문제 해결에 오너십을 갖되 긴밀한 협업 필요4. 가설(Assumptions)과 검증모든 제품 개발은 여러 가정에 기반함가치(Value), 사용성(Usability), 실현 가능성(Feasibility), 사업적 타당성(Viability) 관련 가정을 검증리스크가 크고 근거가 부족한 가정부터 우선적으로 검증해야 함검증 방법: 심층 인터뷰, 사용성 테스트, 데이터 분석, 프로토타이핑, A/B 테스트 등5. 제품 발견을 위한 전략적 프레임워크기회 솔루션 트리(Opportunity Solution Tree):고객 니즈/페인 포인트/욕구를 발굴하고 그룹핑기회를 상위 기회 밑에 구조화하여 집중할 영역 선정솔루션 아이디에이션, 가설 검증 및 실행으로 진행북극성 프레임워크(North Star Framework):지표에 초점을 맞춘 제품 발견 방법론북극성 지표: 제품팀이 영향을 끼칠 수 있고 장기적 사업 성과에 도움되는 지표인풋-아웃풋 관계 파악을 통한 가설 검증 중요6. 프로덕트 그로스(Product Growth)의 이해PMF(Product Market Fit) 달성 후에야 진정한 그로스 의미 가짐그로스 워크의 4가지 영역: Feature Work, Growth Work, PMF Expansion, Scaling Work그로스 레버(Growth Lever): Acquisition(획득), Retention(유지), Monetization(수익화)7. Acquisition(고객 획득) 전략마케팅/세일즈 외에도 제품을 통한 고객 획득 방법 중요신규 고객을 충분히 많이, 비용 효율적으로 획득하는 것이 목표비용 효율성 측정 지표: CAC, LTV, Payback Period네트워크 효과, UGC(User Generated Content), 검색엔진 최적화 활용B2B 제품에서도 Product-Led Growth(PLG) 방식 확산 중제품을 통한 획득의 장점: 자연스러운 성장, 광고효과, 마케팅 비용 절감8. Retention(유지)과 Activation(활성화)"Retention is King" - 리텐션이 그로스의 핵심 요소리텐션 측정 방식: 코호트 리텐션, Day N 리텐션, Bracket/Unbounded 리텐션리텐션이 좋은 제품은 장기적으로 큰 성장 차이를 만듦Activation은 리텐션을 위한 첫 번째 레버로, 사용자가 핵심 가치를 경험하는 과정Setup → Aha → Habit Moment의 3단계 구조:Setup Moment: 사용자가 제품 가치 경험을 위한 준비 완료Aha Moment: 사용자가 처음으로 제품의 핵심 가치 경험Habit Moment: 제품의 핵심 가치 경험이 습관화유저 온보딩은 단순한 기능 소개가 아닌, 핵심 가치 경험을 돕는 전체 과정사용자 행동 모델 (Nir Eyal의 'Hooked'): Trigger → Action → Reward → Investment9. Engagement(참여도) 측정과 개선리텐션을 위한 두 번째 레버로, 사용자의 제품 사용 활발도인게이지먼트 지표:Breadth(넓이): DAU, WAU, MAU (사용자 수)Depth(깊이): 기능 사용 깊이, 사용 시간Frequency(빈도): DAU/MAU, 재방문율Efficiency(효율성): 과업 성공률BJ Fogg의 행동 모델: Behavior = Motivation × Ability × PromptMotivation(동기): 즐거움, 기대, 소속감Ability(능력): 시간, 비용, 노력 등 행동 용이성Prompt(트리거): 행동 유도 알림인게이지먼트 핵심 시스템: 알림(Trigger) → 액션(Action) → 보상(Reward) → 투자(Investment)10. Monetization(수익화) 전략어디서 수익을 얻을 것인가?: 사용자, 광고주, 제3자무엇에 대한 대가로 돈을 받을 것인가?: Value Unit 정의가격 책정 고려 요소: 비용(Cost), 경쟁(Competition), 가치(Value)Usage-Based Pricing vs Seat-Based PricingIncentive Alignment: 고객과 회사의 이익 방향 일치시키기수익 극대화 전략:무료 사용자 그룹 늘리기 (Freemium, Free Trial)사용자가 지불하고 싶게 만들기 (Perceived Value 강화)인지편향 활용하기 (앵커링, 손실 회피 등)적절한 시점에 Prompt 제공하기11. 그로스 모델(Growth Model)제품 성장 메커니즘을 도식화한 개념적 지도제품의 성장에 영향을 끼치는 요소들을 시각화그로스 모델 예시: AARRR, Growth Loop, North Star Framework정성적 모델링부터 시작하여 각 요소의 영향력 이해12. PM/PO의 팀 협업 방식Hand-Off 방식보다 Collaboration 중심으로 접근엔지니어와 협업: 스테레오타입 버리기, 기술 이해하기디자인 피드백 주기: 프로젝트 이해 → 사용자 관점 경험 → 이슈 파악 → 우선순위화시도, 회고, 개선의 사이클 구축"PM이 항상 정답을 가질 필요는 없다" - 함께 좋은 방안 찾기🌟 핵심 학습 인사이트배운 점제품 성공의 핵심은 무엇을 만들지 결정하는 Product Discovery 과정에 있음성공적인 제품은 가치, 사용성, 실현 가능성, 지속 가능성 모두를 충족해야 함리텐션은 "왕(King)"으로서 장기적 성장의 핵심이며, Activation과 Engagement를 통해 개선그로스 모델링을 통해 제품 성장 메커니즘을 이해하고 전략적으로 접근 가능PM, 디자이너, 엔지니어는 각자의 영역만 담당하는 것이 아닌 협업이 핵심적용할 점문제/기회 발견과 솔루션 발견의 두 단계로 제품 발견 과정 체계화Setup → Aha → Habit의 명확한 경로 설계로 사용자 활성화 강화리텐션 개선을 위한 인게이지먼트 지표(Breadth, Depth, Frequency, Efficiency) 모니터링제품을 통한 Acquisition, Retention, Monetization 전략 구체화디자이너, 엔지니어와의 효과적인 협업 방식 도입BJ Fogg 행동 모델을 활용한 사용자 행동 유도 설계💭미션에 대한 회고이번 미션에서는 "코촉촉" 반려동물 돌봄 서비스의 Opportunity Solution Tree를 만들어보았습니다. 처음으로 OST를 작성해보는 경험이었는데, 생각보다 복잡했습니다.제품의 근본적인 문제와 기회를 식별하는 것부터 시작해서, 가장 중요한 기회를 선택하고 솔루션을 도출하는 과정을 경험했습니다. 특히 "바쁜 현대인의 반려동물 돌봄 시간 부족"과 "낯선 사람에게 반려동물 맡기는 불안감"이라는 두 가지 핵심 기회에 집중했습니다. 어려웠던 점은 너무 많은 기회와 솔루션이 떠올라서 정말 중요한 것을 선택하는 것이었습니다. 하지만 "전략의 핵심은 무엇을 하지 않을 것인가를 정하는 것"이라는 마이클 포터의 말을 떠올리며 집중할 부분을 좁혀갔습니다.앞으로 실제 프로젝트에서 OST를 활용한다면, 더 많은 사용자 리서치와 데이터를 기반으로 기회를 발굴하고, 팀원들과 함께 더 다양한 솔루션을 도출해보고 싶습니다. -------------------------수고 많으셨습니다!

[인프런 워밍업 스터디 클럽 3기 풀스택] 4주차 발자국

4주차 학습 내용강의 및 학습 내용React/Next.js 기본 레이아웃 구성Flex 속성 활용: flex, justify-center, items-center 등의 특성 학습컴포넌트 구조화 방법과 레이아웃 관리테일윈드 CSS를 활용한 그라데이션 배경 적용bg-gradient-to-r from-cyan500 to-blue500 등의 문법 활용로그인/회원가입 화면 구현SetView 상태관리를 통한 화면 전환 구현사용자가 로그인과 회원가입 사이를 전환할 수 있도록 기능 개발이메일과 패스워드 입력폼 설계 및 유효성 검사 구현Supabase 활용Supabase Auth를 통한 인증 시스템 구현메시지 테이블 설계와 컬럼(id, message, sender, receiver, is_deleted, created_at) 구성Supabase Realtime을 활용한 실시간 채팅 기능 구현RLS(Row Level Security) 정책 설정으로 데이터 보안 강화채팅 기능 구현메시지 전송 및 수신 기능 개발메시지 상태(읽음/안읽음) 관리를 위한 is_read 필드 활용메시지 삭제 기능 구현(is_deleted 필드 활용)UUID를 사용한 사용자 식별 및 메시지 보내기/받기 구현디자인 및 UI 개선Material Tailwind 활용className 속성을 통한 스타일링 관리반응형 디자인 구현(모바일 최적화)유저 아바타 구현을 위한 랜덤 이미지 API 활용학습 회고Instagram 클론코딩 4주차에서는 채팅 기능 고도화를 진행했습니다.Supabase의 실시간 데이터 처리 기능을 활용해 메시지 전송, 수신, 상태 관리를 구현했습니다.로그인/회원가입 페이지의 UI를 개선하고 테일윈드 CSS로 그라디언트 배경 효과를 적용했습니다.React와 Next.js, Supabase를 조합해 백엔드 인프라 없이도 강력한 기능을 빠르게 구현하는 현대적인 웹 개발 방식을 경험했습니다.실시간으로 채팅이 된다는 점이 너무 재밌었습니다.🛠 미션 해결 과정채팅 기능 고도화 미션 구현구현 과정데이터베이스 테이블 설계:message 테이블 확장: is_read, is_deleted 필드 추가blocked_users 테이블 생성: blocker_id, blocked_id 필드 포함reports 테이블 생성: reporter_id, reported_id, message_id, reason 필드 포함각 테이블에 적절한 외래 키(Foreign Key) 설정Row Level Security 정책 구현:메시지 읽기, 쓰기, 업데이트 권한 설정"사용자가 수신한 메시지 읽음 표시 가능" 정책 추가차단 및 신고 기능에 대한 사용자별 접근 권한 설정메시지 삭제 기능 구현:Message 컴포넌트에 삭제 버튼 추가is_deleted 필드를 업데이트하는 서버 액션 구현삭제된 메시지는 UI에서 필터링하여 표시하지 않도록 처리메시지 읽음/안읽음 표시 기능:is_read 필드를 이용해 메시지 상태 관리메시지를 읽을 때 자동으로 상태 업데이트UI에 읽음 상태 표시 (읽음/안읽음)사용자 차단 기능 구현:사용자 차단 버튼 및 확인 모달 추가blocked_users 테이블에 차단 정보 저장차단된 사용자와의 메시지 교환 제한메시지 신고 기능 구현:부적절한 메시지 신고 버튼 및 신고 사유 입력 모달 추가reports 테이블에 신고 정보 저장신고 후 사용자 피드백 제공실시간 업데이트 기능 개선:Supabase Realtime을 통한 INSERT와 UPDATE 이벤트 동시 구독메시지 상태 변경 시 실시간으로 UI 업데이트새 메시지 알림 구현로그인/회원가입 페이지 버그 수정:화면 전환 로직 오류 수정회원가입/로그인 버튼 기능 정상화 미션 해결 회고구현 내용데이터베이스 테이블 설계: message, blocked_users, reports 테이블 구성Row Level Security 정책 구현: 메시지 읽기/쓰기/업데이트 권한 설정메시지 기능 구현:메시지 삭제 기능읽음/안읽음 표시 기능사용자 차단 기능메시지 신고 기능Supabase Realtime을 통한 실시간 업데이트 기능 개선로그인/회원가입 페이지 버그 수정배운 점Supabase RLS(Row Level Security) 정책 설정을 통한 데이터베이스 보안 구현 방법WebSocket 기반 Supabase Realtime을 활용한 실시간 UI 업데이트 구현TypeScript를 활용한 타입 안전성 확보Supabase를 활용한 서버리스 백엔드 구축의 효율성실시간 기능이 사용자 경험에 미치는 중요성

[인프런 워밍업 스터디 클럽 3기 PM/PO] 3주차 발자국

[인프런 워밍업 스터디 클럽 3기 PM/PO] 3주차 발자국📚 주간 학습 내용 요약1. 지표(Metric)의 기본 개념과 중요성지표는 사업과 제품의 현황/성과를 정량화한 측정 도구상시 모니터링 지표(DAU, MAU, 매출 등)와 특정 상황 확인 지표로 구분완벽한 지표보다는 팀의 집중력을 높이는 실용적 지표가 중요2. Acquisition(고객 획득) 지표CAC(Customer Acquisition Cost): 고객 1명 획득 비용LTV(Customer Lifetime Value): 고객 1명이 가져다주는 총 이익Payback Period: CAC 회수 기간채널별 CAC 측정이 중요하며, 현금 흐름 관리가 핵심3. Activation(활성화) 프레임워크Setup Moment → Aha Moment → Habit Moment의 3단계 구조신규 사용자가 제품의 가치를 경험하고 습관화하는 과정각 단계별 전환율을 측정하고 개선하는 것이 중요4. Engagement(참여도) 측정법Breadth(얼마나 많은 사용자): DAU, WAU, MAUDepth(얼마나 깊게 사용): 기능 사용 깊이, 사용 시간Frequency(얼마나 자주 사용): DAU/MAU, Lness 지표Efficiency(과업 성공률): 매칭률, 완료율 등5. Retention(유지율)의 중요성"Retention is King" - 성장의 핵심 요소리텐션 측정 방식: 코호트 리텐션, Day N 리텐션, Bracket/Unbounded 리텐션산업별로 다른 리텐션 기준 존재 (소셜, 트랜잭션, SaaS 등)6. Event-Based Analytics 기본 개념이벤트: 사용자와 제품 간 상호작용 (페이지 조회, 버튼 클릭 등)이벤트 프로퍼티: 이벤트의 상세 정보 (카테고리, 이름, ID 등)데이터 트래킹: Client-Side와 Server-Side 방식의 장단점7. Event Taxonomy 설계 방법Top-Down 접근: 목적에서 시작해 필요 데이터 정의Bottom-Up 접근: 제품 핵심 이벤트에서 시작명확한 이벤트 명명 규칙과 속성 정의가 중요🌟 핵심 학습 인사이트배운 점지표 설정은 과학보다는 '예술'에 가까우며, 팀의 집중을 이끌어내는 스토리텔링이 중요함완벽한 지표보다는 비즈니스 성과에 도움되는 실용적 지표가 더 가치 있음사용자 여정에 따라 단계별(Acquisition → Activation → Engagement → Retention → Monetization) 지표 설정 필요데이터 환경 구축은 투자가 필요한 중요 자산이며 체계적 설계가 필수적💭 미션에 대한 회고코촉촉 서비스의 프로덕트 지표를 설정하면서, 일반적인 프레임워크를 넘어 서비스만의 고유한 가치(실시간 위치 공유, 맞춤형 매칭, 긴급 요청 대응 등)를 측정할 수 있는 지표 개발의 중요성을 깨달았습니다. 지표가 단순한 수치가 아닌 구체적인 '의사결정 도구'로서 역할을 한다는 점과, 타겟 사용자(바쁜 현대인, 어린 강아지)의 특성을 반영한 지표 설계가 서비스의 방향성과 가치를 명확히 한다는 것을 배웠습니다. 이번 미션을 통해 프로덕트 지표 설정이 기술적 작업이 아닌 제품의 핵심 가치와 비전을 명확히 하는 전략적 과정임을 이해하게 되었습니다.

[인프런 워밍업 스터디 클럽 3기 풀스택] 3주차 발자국

Netflix 클론코딩 - 영화 검색 서비스 1. 프로젝트 기본 설정 및 구조기술 스택Next.js 기반 프레임워크React 컴포넌트 시스템TypeScript 타입 정의Tailwind CSS 스타일링Supabase 데이터베이스TMDB API (영화 데이터 소스)프로젝트 구조config, app, components, utils 폴더 구성페이지 라우팅 설정환경 변수(.env) 구성2. 데이터베이스 구축Supabase 설정TMDB에서 가져온 60개의 영화 데이터 활용CSV 파일 업로드 방식으로 데이터 임포트영화 테이블 스키마 구성:제목, 설명, 이미지 URL, 평점, 인기도, 개봉일 등데이터 타입 설정 (float, string, nullable 등)3. UI 컴포넌트 개발헤더 컴포넌트상단 고정 네비게이션 바로고 및 네비게이션 메뉴 (Movies, Dramas)검색 기능 UI 구현푸터 컴포넌트하단 고정 레이아웃저작권 및 출처 정보 표시영화 카드 컴포넌트그리드 시스템으로 반응형 레이아웃 구현MD 사이즈에서 4개, 기본 사이즈에서 3개 카드 표시호버 효과 및 트랜지션 적용영화 상세 페이지동적 라우팅을 통한 개별 영화 페이지영화 포스터, 제목, 설명, 평점, 인기도, 개봉일 표시4. 데이터 관리 및 API 연동React Query 활용useQuery hook으로 데이터 페칭 및 캐싱로딩 상태 및 에러 처리Recoil 상태 관리atom을 활용한 검색어 상태 관리useRecoilState, useRecoilValue 등의 훅 활용Supabase API 연동영화 목록 조회 (getMovies)개별 영화 상세 정보 조회 (getMovie)검색 기능 구현 (SearchMovies)5. 고급 기능 구현무한 스크롤React Intersection Observer 활용useInfiniteQuery로 페이지네이션 구현Range Query를 통한 효율적인 데이터 로딩페이지 단위로 12개 항목씩 로드검색 기능실시간 검색어 상태 관리Supabase LIKE 쿼리를 활용한 검색 기능검색 결과 렌더링데이터 최적화flatten을 통한 배열 데이터 처리페이지 상태 관리 (hasNextPage, isFetching 등)6. SEO 최적화메타데이터 관리generateMetadata 함수 구현동적 메타데이터 생성영화 제목, 설명, 이미지 정보 포함소셜 미디어 공유 최적화오픈 그래프 태그 추가트위터 카드 설정카카오톡 공유 시 이미지와 설명 표시 최적화7. 학습 회고이 Netflix 클론 프로젝트를 통해 Next.js의 App Router와 TypeScript, Supabase를 결합한 풀스택 개발을 경험했습니다. 컴포넌트 아키텍처: 서버 컴포넌트와 클라이언트 컴포넌트를 적절히 분리하는 Next.js의 패턴을 익힘데이터 페칭 최적화: React Query를 활용한 효율적인 데이터 관리와 무한 스크롤 구현 방법 서버리스 백엔드: Supabase를 활용한 데이터베이스 관리와 서버 액션으로 별도 백엔드 없이 기능 구현복습을 꾸준히 하고 supabase의 다양한 기능을 습득하도록 해야겠습니다. 🛠 미션 해결 과정찜 기능 구현 과정 및 회고구현 과정Supabase 테이블 설계:favorites 테이블 생성: id, movie_id, device_id, created_at 필드 포함Foreign key는 설정하지 않고 간단한 구조로 진행클라이언트-사이드 식별자 구현:deviceId.ts 유틸리티 생성: 사용자 브라우저를 식별하기 위한 고유 ID 생성 및 로컬 스토리지에 저장로그인 없이도 각 사용자의 즐겨찾기를 식별할 수 있는 방법 제공서버 액션 구현:favoriteActions.ts: 즐겨찾기 추가/제거 및 목록 조회 기능 구현searchMovies 함수 수정: 즐겨찾기 정보 포함 및 즐겨찾기 항목 상단 정렬 로직 추가UI 컴포넌트 수정:MovieCard 컴포넌트에 하트 아이콘 추가: Font Awesome과 Material Tailwind 사용찜 상태에 따라 아이콘 스타일 변경 (빨간색/회색)클릭 이벤트 처리 및 비동기 동작 구현타입 관리:기본 Movie 타입 확장하여 MovieWithFavorite 인터페이스 정의TypeScript 타입 오류 해결을 위한 전략 수립미션 해결 회고로그인 없이 사용자별 데이터를 관리하기 위해 기기 식별자를 활용한 접근법을 알게되어 활용해보았습니다. Supabase로 찜한 정보를 저장하고 관리하는 과정에서 서버리스 데이터베이스의 강력함을 경험했습니다.타입스크립트의 인터페이스 확장을 통해 is_favorite 속성을 추가하며 타입 시스템의 중요성에 대해 또 느꼈습니다.원하는 기능이 있을때마다 supabase에 테이블을 추가하여 활용하는 것이 신기했습니다.

[인프런 워밍업 스터디 클럽 3기 PM/PO] 2주차 발자국

[인프런 워밍업 스터디 클럽 3기 PM/PO] 2주차 발자국📚 주간 학습 내용 요약1. 고객을 직접 만나기의 중요성PM은 '고객 전문가'가 되어야 성공적인 제품을 만들 수 있음간접적으로 고객 의견을 전달받는 것(VOC, 영업팀 보고)보다 직접 만남이 필수적고객의 경험, 생각, 감정을 생생하게 이해하고 정확한 멘탈 모델 구축 가능2. 효과적인 고객 리서치 설계 방법명확한 리서치 목적과 해결하려는 문제 정의가 먼저적절한 리서치 방법론(정성적/정량적) 선택 중요타겟 고객 선정과 실행 계획 수립이 성공적인 리서치의 기본3. 심층 인터뷰 기법1대1 심층 인터뷰는 고객을 파악하는 가장 강력한 도구실제 행동, 최근 경험, 구체적 상황을 중심으로 질문 설계비즈니스 질문 → 리서치 질문 → 인터뷰 질문으로 단계적 발전4. 사용성 테스트의 중요성사용자가 제품을 얼마나 쉽게 이해하고 사용할 수 있는지 평가5명 정도의 소수 참가자로도 대부분의 사용성 문제 발견 가능'지식의 저주'를 극복하는 방법: 개발자는 제품을 잘 알지만 사용자는 그렇지 않음5. 데이터 활용의 핵심데이터를 기반으로 한 의사결정 프로세스 구축사용자 행동을 로그와 이벤트로 체계적으로 기록의미 있는 데이터를 수집하고 분석하여 실질적인 인사이트 도출🌟 핵심 학습 인사이트배운 점소수의 심층 인터뷰가 대규모 설문보다 더 가치 있는 경우가 많음제품 개발자는 사용성을 50% 이상 예상하지만, 실제 사용자 정답률은 2.5%에 불과한 경우가 많음 (지식의 저주)사용자 경험을 직접 관찰하고 데이터로 검증하는 이중 접근법의 중요성인터뷰에서 추상적인 질문보다 구체적인 경험을 물어보는 것이 더 정확한 정보를 얻는 방법💭 미션에 대한 회고코촉촉 서비스를 위한 고객 조사 계획을 설계하면서 반려동물 주인들의 실제 니즈와 페인 포인트를 정확히 파악하는 중요성을 깨달았습니다. 신뢰와 안전이 핵심인 반려동물 돌봄 서비스에는 심층 인터뷰와 사용성 테스트가 설문조사보다 효과적임을 인식했습니다.처음에는 기술적 측면에 너무 집중했지만, PM은 기술 스택보다 사용자 니즈와 제품 방향성에 집중해야 함을 배웠습니다. '지식의 저주' 개념을 통해 개발팀이 사용자의 제품 이해도를 과대평가하기 쉽다는 점을 이해했고, 이를 극복하기 위한 체계적인 사용성 테스트의 가치를 깨달았습니다.비즈니스 질문에서 구체적인 인터뷰 질문으로 단계적으로 발전시키는 방법론을 통해 코촉촉의 핵심 가치에 집중한 실용적인 질문들을 도출할 수 있었습니다. 앞으로는 이론적 계획을 실제 실행해보고, 정성적 인사이트와 정량적 데이터를 균형 있게 활용하는 역량을 키우고 싶습니다.

[인프런 워밍업 스터디 클럽 3기 풀스택] 2주차 발자국

🚀 Dropbox 클론코딩 - 파일 스토리지 서비스 제작하기📚 강의 수강일주일 동안 학습한 내용 요약🔧 프로젝트 설정 (섹션 4-2)Next.js 프로젝트 초기 설정 방법Tailwind CSS와 TypeScript 환경 구성Material-Tailwind, React Query 등 필요한 라이브러리 설치프로젝트 페이지 구조와 레이아웃 설정환경 변수(.env) 구성🎨 UI 구축 (섹션 4-3)Dropbox 클론의 직관적인 인터페이스 구현logo.tsx, dropbox-image, search-component 등 재사용 컴포넌트 개발Next.js의 이미지 처리와 정적 파일 관리Tailwind CSS의 flex, grid 시스템을 활용한 반응형 디자인useState 훅을 활용한 검색 기능 상태 관리🗄 Supabase Storage 설정 및 파일 업로드 (섹션 4-4)Supabase Storage 버킷 생성 및 설정Form 요소와 onSubmit 이벤트를 활용한 파일 업로드 기능FormData 객체를 활용한 파일 데이터 처리React Query의 useMutation 훅을 통한 파일 업로드 상태 관리업로드된 이미지 URL 생성 및 표시🔄 고급 기능 구현 (섹션 4-5)Supabase Storage의 remove 함수를 활용한 파일 삭제 기능react-dropzone 라이브러리를 활용한 드래그 앤 드롭 구현useDropZone 훅 활용 및 onDrop 콜백 함수 설정multiple 옵션을 활용한 여러 파일 동시 업로드 기능Promise.all을 활용한 비동기 파일 업로드 병렬 처리로딩 상태 표시 및 사용자 피드백 개선학습 내용 회고이번 주 학습을 통해 Next.js와 TypeScript를 활용한 모던 웹 애플리케이션 개발 과정을 경험할 수 있었습니다. TypeScript의 타입 시스템을 적극 활용하면서 인터페이스 정의와 컴포넌트 타입 적용에 많은 배움이 있었지만, Material Tailwind 컴포넌트와의 타입 호환성 문제를 해결하는 과정에서 any 타입을 사용한 것은 아쉬움으로 남습니다. 🛠 미션 해결 과정TypeScript 타입 문제 해결Material Tailwind 컴포넌트와 TypeScript의 타입 호환성 문제에 직면했을 때, 다음과 같은 과정으로 해결했습니다:문제 정의: IconButton, Input, Spinner 등의 컴포넌트에서 다음과 같은 TypeScript 타입 에러가 발생했습니다.'{ value: string; onChange: (e: ChangeEvent) => void; label: string; icon: Element; }' 형식에 'Pick' 형식의 onPointerEnterCapture, onPointerLeaveCapture 속성이 없습니다. 해결 방안 탐색: 여러 가지 해결 방법을 고려했습니다:@ts-ignore 또는 @ts-expect-error 주석 사용타입 단언(Type Assertion) 사용props 객체와 any 타입 활용효율적인 접근법 선택: 코드 가독성과 유지보수성을 고려하여 props 객체와 any 타입을 활용하는 방법을 선택했습니다:const inputProps: any = { value: searchInput, onChange: (e: ChangeEvent) => setSearchInput(e.target.value), label: "Search Images", icon: }; return ; 일관된 패턴 적용: 비슷한 문제가 발생하는 다른 컴포넌트에도 동일한 패턴을 적용하여 코드의 일관성을 유지했습니다. 예를 들어 IconButton, Spinner 등의 컴포넌트에도 같은 방식으로 타입 문제를 해결했습니다.로딩 상태 처리: boolean 값 처리 문제도 해결했습니다.// 경고: Received `false` for a non-boolean attribute `loading` // 해결: loading 속성 제거 후 조건부 렌더링으로 처리 const iconButtonProps: any = { onClick: () => { deleteFileMutation.mutate(image.name); }, color: "red", children: deleteFileMutation.isPending ? ( ) : ( ) }; 외부 라이브러리와의 통합 과정에서는 때로는 타입 시스템을 부분적으로 우회해야 할 필요가 있다는 것을 배웠습니다.미션 해결 회고기능에 집중을 하다가도...아무래도 빨간줄 에러표시가 뜨는 것이 저는 너무 신경이 쓰였던 것 같습니다. 중간중간마다 타입에러를 해결하는데 시간투자를 했었습니다. (ai에게도 많은 질문을 했습니다)저는 결국, 에러 무시하는 방법 혹은 TypeScript를 사용하여 타입 안전한 코드를 작성하는 방법 중 타입스크립트를 적용해보는 것을 선택했습니다.틈틈이 타입스크립트 공부도 해야할 것 같습니다.이번 풀스택 강의가 끝나고 나서 컴포넌트 안에서 공통으로 적용하여 재사용가능한 타입으로 빼서 리팩토링 할 시간도 가져보면 좋을 것 같습니다.그리고 프로젝트를 진행하면서 업로드 날짜 표시 기능과 한글 파일명 변환하는 작업은 하지 못한 점은 아쉬움으로 남습니다. 다른 수강생분들은 강의 따라하는 것 외에 새로운 추가 기능도 넣기도 한 것 같은데 저는 기본을 따라 가는 것에도 벅차서 추가적인 기능은 넣지 못했습니다..복습을 좀 더 해서 빠르게 지나쳤던 용어나 코드들을 재점검해야 할 것 같습니다... 감사합니다.