Live Code: Coffee e-commerce app
- 라이브 코딩 세션에서 DevChallenges.io의 커피 이커머스 앱 챌린지를 시작했습니다. 🔴
- 바닐라 자바스크립트 사용을 고려했으나, 새로운 AI 브라우저 'Dia'의 추천을 받아 기술 스택을 결정했습니다. 💡
- 최종적으로 React, TypeScript, Vite, Bun, Tailwind CSS를 사용하여 프로젝트를 진행하기로 했습니다. 🛠️
- 제공된 엔드포인트에서 커피 제품 데이터를 성공적으로 가져와 콘솔에 출력했습니다. ☕
- 가져온 데이터를 기반으로
CoffeeCard 컴포넌트를 생성하고, 각 커피 항목의 이름, 가격, 인기 태그, 평점, 투표 수를 표시하는 UI를 구현하기 시작했습니다. 🏗️
- Tailwind CSS를 활용하여 UI 스타일링을 적용하고, 이미지, 인기 태그, 제품 정보, 평점 섹션 등을 구성했습니다. 🎨
- 코딩 과정에서 키보드 사용의 어려움과 터미널 자동 완성 기능(Warp 선호)에 대한 개인적인 경험을 공유했습니다. 🚧
- Astro 사용도 잠시 고려되었으나, 실시간 데이터 필요성 때문에 React를 선택하게 된 배경을 설명했습니다. 🤖
데브허브 | DEVHUB | Live Code: Coffee e-commerce app