강의

멘토링

커뮤니티

AI 기술

/

인공지능 기타

[PROKIT] 프론트엔드 프로젝트 키트: 타이머 앱 만들기

프론트엔드 프로젝트를 미션 콘텐츠입니다. DevTime이라는 타이머 앱을 직접 구현해보면서 프로젝트 실습을 해볼 수 있도록 PRD 기획 문서, Figma 시안, API 엔드포인트를 제공합니다. 실제 서비스와 유사한 수준의 프로젝트를 구현해 보면서 그동안 학습한 지식을 완벽하게 자신의 것으로 만들어 보세요 🚀

5명 이 수강하고 있어요.

난이도 입문

수강기한 무제한

  • 닙스(NYBS)
프로젝트
프로젝트
학습법
학습법
AI 활용법
AI 활용법
프로젝트
프로젝트
학습법
학습법
AI 활용법
AI 활용법

수강 후 이런걸 얻을 수 있어요

  • 꽤 높은 완성도의 실제 서비스 프로젝트 구현 경험 간접 경험

  • 개발 학습에 프로젝트가 꼭 필요한 이유

  • AI 시대가 요구하는 프론트엔드 개발자로 성장하기 위한 마인드

  • 프로젝트를 성공적으로 시작하기 위한 마음 가짐과 방법론

  • 생성형 AI를 활용해 프로젝트를 성공적으로 수행하고 필요한 지식을 습득하는 법

프로킷(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 통신(fetch API, 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으로 문의 남겨주세요.

프로젝트를 시작해 봅시다 🏃🏻🏃‍♀️

프로킷을 활용해서 퀄리티 좋은 프로젝트 결과물을 성공적으로 만들어 보세요!

프로젝트의 세계에 오신 여러분들 다시 한 번 환영합니다 🐵

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 독학으로 웹 개발을 공부해가고 있는 분

  • 웹 프론트엔드 취업 준비생

  • 자신만의 첫 프로젝트를 시작해보려는 분

  • AI 시대에 필요한 개발자로 성장하는 법에 대해 고민하고 있는 분

선수 지식,
필요할까요?

  • React 등 도구 활용에 대한 기초 학습이 된 분

  • 혼자 힘으로 기초 프로젝트를 수행해 볼 준비가 된 분

안녕하세요
입니다.

804

수강생

23

수강평

1

답변

5.0

강의 평점

6

강의

재밌게 성장할 수 있는 콘텐츠를 고민하고 제작합니다.

열정이 있는 누군가에게 해결해야 하는 좋은 문제(과제)를 제시한다면 성장할 수 있다고 믿고 있고,

어떻게 하면 학습에 더 도움이 되는 실무와 같은 문제와 미션을 제시할 수 있을지 주로 고민합니다.

 

Not Yet, But Soon

아직은 아닌 것 같지만, 곧 이루어 갈 모든 분들과 함께합니다.

 

nybs.contact@gmail.com

커리큘럼

전체

6개 ∙ (2시간 20분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

₩27,500

닙스(NYBS)님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!