[PROKIT] 프론트엔드 프로젝트 키트: 타이머 앱 만들기
2025. 10. 13. 16:49
수정됨
![[PROKIT] DevTime 프로젝트 가이드.pdf](https://cdn.inflearn.com/public/extensions/format_pdf.png?f=avif&w=500)
[PROKIT] DevTime 프로젝트 가이드.pdf
53.4MB
프로킷(PROKIT)을 소개합니다 🔥
프론트엔드 프로젝트를 처음 하려고 해보면 어디서부터 시작해야 할지 막막합니다.
아이디어 준비, 기획 정리, 디자인 시안, 클라이언트에 대응되는 백엔드 개발까지,
여러 요소를 고려해서 프로젝트를 진행하는 게 쉬운 일은 아니죠.
그래서 프로킷(PROKIT) 💻 을 준비했습니다.
프로젝트 진행을 위한 비즈니스 배경, 기획 요구사항, Figma 시안, API 엔드포인트까지 제공해 드리니,
간접적으로 프로젝트를 경험하면서 프론트엔드 심화 학습을 해보고 싶은 분들 주목해 주세요 👀
프로젝트 소개 ⏰
준비한 프로젝트 주제는 [DevTime: 개발 공부 시간 기록용 타이머 구현하기] 입니다.
가상의 비즈니스 목표를 설정하고, 목표 달성을 위해 DevTime이라는 프로덕트를 직접 구현해 볼 거예요.
제공해 드리는 자료를 활용해 프론트엔드 기능 구현에 집중해서 DevTime 애플리케이션을 완성해 보세요!
아래는 진행하게 될 프로젝트 주요 기능 예시입니다.
로그인
회원가입
타이머
할 일 관리
대시보드
랭킹
이외에도 프로필 설정, 마이페이지 등 프론트엔드 필수 구현 과제를 반영한 다양한 기능이 포함되어 있어요.
DevTime 애플리케이션을 직접 구현해보면서 다양한 클라이언트 구현 역량을 심화 학습해 보세요.
프로킷 구성 안내 🛠
프론트엔드 프로젝트 진행을 위해 필요한 요소들을 준비하여 제공합니다.
기획 요구사항 문서(PRD; Product Requirment Document)
DevTime의 주요 기능에 대한 상세 요구사항을 정리해 뒀습니다.
제공해드린 기획 요구사항 문서의 내용을 참고하여 자신만의 타이머 애플리케이션을 구현해 보세요.
(* PRD 문서는 Google Docs Viewer 권한으로 접근할 수 있는 링크를 제공해 드립니다. 자료 수정 시 최신 버전 내용이 지속적으로 업데이트 됩니다).
제공되는 PRD 문서 예시
Figma 디자인 시안
프론트엔드에서 구현해야 할 UI 시안을 제공합니다.
디자인 시스템이 적용된 Figma 시안을 바탕으로 시각적으로 완성도 높은 프로젝트를 만들어 보세요.
(* Figma 디자인 시안은 Viewer 권한으로 직접 시안을 확인할 수 있는 링크를 제공해 드립니다. 자료 수정 시 최신 버전 내용이 지속적으로 업데이트 됩니다).
Figma 디자인 시안
DevTime 디자인 시스템
API 문서(Swagger UI)
하나의 웹 애플리케이션이 정상적으로 동작하기 위해 필요한 기능을 사전에 정의해서 서버를 구현해 뒀어요.
배포되어 있는 API 엔드포인트 정보로 요청-응답을 보내면서 완성된 하나의 프로덕트를 만들어 보세요.
(* API 문서는 웹 페이지로 확인 가능하게 배포된 Swagger UI 링크를 제공해 드립니다. 자료 수정 시 최신 버전 내용이 지속적으로 업데이트 됩니다).
DevTime 기능 구현을 위한 API Docs
이런 분들에게 추천해요 👍
프로킷은 완벽하진 않아도, 꽤 괜찮은 프로젝트 결과물과 문제 해결 경험을 만드는 데 도움을 드려요.
현재 아래와 같은 상황인 분들은 구매를 적극 고려해 보세요!
프론트엔드 분야로 취업 준비 중인 취준생
온라인 강의로 개별 학습한 내용을 활용해 프로젝트를 해보고 싶은 학습자
부트캠프를 수강하면서 좀 더 심화된 프로젝트 경험을 만들어보고 싶은 사람
양질의 자료로 완성도 높은 포트폴리오를 만들고 싶은 사람
나만의 첫 프로젝트를 성공적으로 진행해보고 싶은 프론트엔드 학습자
특별히, 프로젝트 진행을 위한 자료집인 만큼 최소한 아래 내용에 대해서는 기초 학습이 되어있는 분들만 구매를 고려해 주시길 권유드립니다.
HTML, CSS, JavaScript 언어에 대한 기초 지식 및 활용
DOM 조작 및 클라이언트 이벤트 처리
비동기 처리(
Promise,async/await등)에 대한 이해API 통신(
fetchAPI,axios라이브러리 등 활용)1개 이상의 클라이언트 라이브러리/프레임워크 학습 경험(React, Next, Vue 등)
Git/Github을 활용한 버전 관리 경험
추가적으로, 프로젝트 진행을 위해서는 아래 내용에 대한 학습이 필요해요. 필수 선수 학습이 되신 분들이더라도 프로젝트를 하면서 추가 학습이 필요할 수 있는 내용이니, 참고해 주세요!
전역 상태 관리에 대한 이해 및 상태 관리 라이브러리 활용
JWT 토큰 기반 인증/인가 로직 구현
Presigned URL을 활용한 클라이언트 이미지 업로드 처리
프로젝트 환경 구축과 빌드, 번들링에 대한 이해
브라우저 저장소(로컬 스토리지, 쿠키 등)에 대한 이해와 활용
페이지 라우팅 로직 처리
구매 전 주의사항 ⚠️
프로킷은 학습을 목적으로 준비된 프로젝트 자료집입니다.
실제 서비스를 전제하지 않고 있다보니, 아래 사항은 꼭 사전에 참고해 주세요.
프로킷은 프로젝트에 도움을 드리기 위한 자료이고, 실제 프로젝트 수행 과정에 대한 강의나 교육이 제공되지 않습니다.
사전 선수 지식이 필수이며, 프로젝트 진행 시 막히는 부분에 대해선 AI, 구글, 학습 커뮤니티(오픈 카톡방 개설 예정)를 활용해 직접 문제를 해결해 보시길 권유드립니다.
PRD 문서, Figma 시안, API Docs 등은 지속적인 업데이트 사항 반영을 위해 Viewer 링크로 권한을 공유드립니다. 자료의 보안과 무단 공유에 각별히 주의해 주시길 부탁드립니다.
제공되는 모든 자료의 상업적 재활용은 금지됩니다.
DevTime의 서버는 불특정 다수의 사람이 공유하는 연습용 서버입니다. 개인 정보나 욕설/비방/성적 표현/정치/종교 등 민감한 내용이 담긴 데이터를
POST하지 않도록 주의해 주세요.DevTime의 데이터베이스는 매일 새벽 3시 초기화 됩니다. 초기화 시 클라이언트 요청에 답변으로 내려질 최소한의 연습용 Mock 데이터들만 시드(Seed)로 세팅되니, 누적 관리가 필요한 데이터는 별도로 저장해서 관리해 주세요.
기타, 상세한 자료 활용에 대한 가이드는 판매되는 PDF 자료에 상세 기재되어 있습니다. 프로젝트 진행 전 반드시 숙지해 주시길 당부드립니다.
프로킷에 대한 기타 궁금한 사항이 있는 분들은 nybs.contact@gmail.com으로 문의 남겨주세요.
프로젝트를 시작해 봅시다 🏃🏻🏃♀️
프로킷을 활용해서 퀄리티 좋은 프로젝트 결과물을 성공적으로 만들어 보세요!
프로젝트의 세계에 오신 여러분들 다시 한 번 환영합니다 🐵