클론코딩 프로젝트
총 14주 중, 5주차에 진행하게 됩니다. 평균 3~4명의 프론트엔드와 백엔드 팀원이 불과 1주일 만에 이루어낸 결과물입니다.
지금까지의 배움들을 정리하면서, 기존의 서비스를 100% 똑같이 구현해봅니다. 이를 통해 자연스럽게 주특기를 갈고닦게 됩니다. 참고할 키워드와 가이드라인을 제공받되, 주도적 학습을 통해 어려운 실습 과정을 팀원들과 함께 끝까지 실행하는 법을 훈련합니다.
이를 통해 서비스를 뜯어보고 이를 바탕으로 기획부터 개발까지 할 수 있는 사람, 팀으로 협업할 수 있는 사람이 됩니다.
1조
DANOSHOP 클론코딩 (1조)
/
프론트엔드 1인, 백엔드 1인으로 구성된 1조입니다. 건강한 식단 전문 쇼핑몰인 DANOSHOP을 클론코딩했습니다. 상세페이지 상품 추가 로직과 장바구니에 공을 들였습니다. 서버를 거치지 않고 로컬스토리지에 저장하는 방식입니다. 로그인/회원가입이 가능하며 상품 리스트를 사이트에서 직접 크롤링해 와 데이터를 DB에 저장한 뒤 프론트 요청에 따라 화면에 보여주고 있습니다.
2조
2조스타그램
/
인스타그램 클론코딩 기능 - 반응형 - 로그인 & 회원가입 - 팔로우 & 언팔로우 - 전체 게시글 보기 & 친구 게시글만 보기 - 프로필 사진 변경 - 게시글 CRUD - 댓글 CRUD - 좋아요 - 개인 피드 (댓글 프로필, 게시글 프로필, 친구 추천등 이름 누르면 해당 개인피드로 이동)
3조
3조 - 인스타그램 클론코딩
/
인기 많은 소셜 미디어 중 하나인 인스타그램을 클론코딩을 했습니다.
4조
4조 마켓컬리
/
마켓컬리 사이트 클론코딩 입니다. 회원가입 및 로그인, 상품조회, 장바구니(CRUD)를 구현했습니다.
5조
5조 - 프로그래머스 (모든 문제)
/
프로그래머스의 "모든 문제" 페이지만 구현했습니다. 필터 및 페이징 가능합니다.
6조
6조-다노샵 클론코딩
/
다노샵 클론코딩으로 기능 및 ui를 최대한 비슷하게 만들었습니다. 한번 구경해보시고 궁금한 부분 있으면 편하게 말씀해주시면 감사하겠습니다.
7조
kukka | clone project 항해99 7조
/
Our team just created a clone project of a website, which sells flowers online. Our team consists of four teammates: two front-ends and two back-ends. Our main feature in this project is to facilitate the trasmission between client and server side by JWT token. On the front side, we focused on building pure React components rather than utilizing html/css tags. This project is contributed by Eunjin Park, Joonyeob Kim, Yonghyeon Choi, and Hyungseok Cho. Thank you for watching! 😎 - 프론트엔드와 백엔드 간의 JWT로 구현한 로그인/회원가입 송수신 기능과 html 태그가 아닌 순수한 React Componenet로 구현하도록 초점을 두어 작업하였습니다.
8조
hanghae99_books
/
리디 셀렉트의 서적 리뷰 서비스를 클론 코딩한 프로젝트입니다.
9조
인스타그램 클론코딩 | 항해99 1기 클론코딩 9조
/
저희 9조는 클론코딩으로 인스타그램을 만들었습니다. 프론트엔드는 리액트, 백엔드는 스프링입니다. 인스타그램처럼 로그인이 되어야 본페이지에 입장할 수 있도록 로그인/회원가입을 첫 페이지로 설정했습니다. CRUD를 구현하는 목적에서 원래 인스타그램의 여러 기능들 중에서 좋아요 추가/취소/누적 좋아요수 표시, 게시글 작성/수정/삭제, 댓글 작성/삭제가 되도록 했습니다. 많이 봐주시고 좋아요, 댓글 많이 달아주세요!
10조
NETFLIX Clone Coding
/
실제로 프론트와 서버간에 API를 요청하고 응답받은 데이터를 활용해 넷플릭스 메인페이지에 출력해 보았다. 프론트에서는 카테고리 별로 api를 요청하기 위해 axios라이브러리를 사용했다. 스프링으로 구현한 DB에서 받아 올 수 없는 데이터는 TMDB의 오픈api를 활용해서 컨텐츠를 구성했다. 리액트와 스프링을 연동하여 배포까지 작업해 보았다. ⁎⁎TMDB(TheMovieDB) 사이트에서 영화,TV 등과 같은 여러가지 컨텐츠 정보를 제공한다. Open API를 통해 정보를 제공받을 수 있다.
11조
당근마켓 클론코딩
/
당근마켓 클론코딩 하였습니다.
12조
12조 클론코딩
/
번개장터 클론코딩 하였습니다.
13조
뉴닉 클론코딩
/
뉴닉 클론코딩입니다.
14조
14조 벨로그 클론코딩
/
벨로그 클론코딩을 했습니다. 구현기능 - 게시글 목록 가져오기, 디테일 포스트 - 로그인, 회원가입 - 게시글 등록, 수정, 삭제 - 댓글 등록, 수정, 삭제
15조
당근마켓 앱 -> 웹
/
당근마켓 웹에는 기능이 별로 없어서 앱을 따라 웹을 만들어보았습니다.
16조
16조 - velog
/
velog.io 클론코딩 입니다. 게시글 CRUD, 상세 조회를 구현하였습니다. 부족한 부분이 많지만 기초를 다짐과 동시에 협업에 중점을 두었습니다.
17조
17조 마켓컬리 클론코딩
/
메인 화면을 통해 상품 상세 페이지에 접근하여 장바구니에 상품들을 담고 확인하는 것을 목표로 프로젝트를 진행함.
18조
18조 Careerly Clone Coding - React Native / Node.js
/
IT 실무자들의 트렌드 해석 Careerly 클론코딩을 했습니다. -- 구현 기능 -- - 게시글 목록 가져오기, 디테일 포스트 - 회원가입 로그인 비밀번호 찾기 - 팔로우 - 게시글 등록 - 내 게시글 , 내가 추천한 게시글 가져오기 - 댓글 등록 - 추천하기
19조
Starbucks Clone 19조 - React Native / Node.js
/
스타벅스 사이렌 오더어플이 새로 개편했는데 이가 RN UI구조와 비슷한듯해 최대한 뼈대와 기능을 비슷하게 구현했습니다. 주요 기능은 주문-결제기능이며 크롤링으로 웹사이트에서 데이터를 가져왔습니다. 크롤링(스크래핑):https://github.com/silano08/TIL-Today_I_Learnd-/tree/main/scraping
20조
20조 - 당근마켓 클론코딩
/
RN2명과 Node.js3명이 협업하여 당근마켓을 클론코딩 하였습니다.