본문 바로가기

Front-end/Projects

(19)
React - Cocktails
React - Gagu Store Preview : 사이트방문 : https://gagustore.netlify.app/ 개발목표 가구 이커머스 사이트를 구현하는것을 목표로 하였습니다. React-Router-dom을 이용하여 각각 페이지를 나누고 auth0웹 서비스를 이용하여 로그인 기능을 추가하였습니다. 상태관리는 context / reducer을 사용하였습니다. 여러 페이지에 들어가는 공통된 로직들을 한곳에 모아 관리 했습니다. 구현기간 : 2021-06- 28 ~ 2021-07-07 Skills : React, HTML, CSS , JavaScript(ES6) 배포 : Netlify 시연영상: https://youtu.be/eJQh8qo2u6c Code : https://github.com/bellcastle88/ReactGagu..
React - Stripe Preview : 사이트 방문 : https://stripe-withreact.netlify.app/ 소개 : Hover기능을 활용한 Landing page입니다. stripe.com사이트를 모티브로 제작하였고 반응형기능이 추가되었습니다. 구현기간 : 2021-06-25 ~ 2021-06-25 Skills : React, HTML, CSS, JavaScript(ES6) Code : https://github.com/bellcastle88/ReactStripe
React - Sidebar/Model Preview : 사이트 방문 : https://sidebar-modal-withreact.netlify.app/ 소개 : 목록을 볼 수 있는 SIdeBar와 Modal을 볼수있는 APP입니다. useContext를 활용하여 여러 component에서 사용할 수 있는 Provider생성하여 만들어졌습니다. 구현기간 : 2021-06-24 ~ 2021-06-24 Skills : React, HTML, CSS, JavaScript(ES6) Code : https://github.com/bellcastle88/ReactSidebar-Model
React - Navbar Preview : 사이트 방문 : https://navbar-with-react.netlify.app/ 소개 : 반응형 ReactNavbar입니다. 화면이 작아지면 오른쪽에 메뉴바가 생기고 클릭시 아래 목록이 나타납니다. useRef를 사용하여 Navbar목록 추가시 자동으로 메뉴창의 크기가 변경되도록 하였습니다. 구현기간 : 2021-06-23 ~ 2021-06-24 Skills : React, HTML, CSS, JavaScript(ES6) Code : https://github.com/bellcastle88/ReactNavbar
React - Grocery-bud Preview : 사이트 방문 : https://grocery-bud-withreact.netlify.app/ 소개 : 구매 할 식재료를 저장할 수 있는 APP입니다. CRUD기능을 포함하고 있고 로컬스토리지에 목록을 저장할 수 있습니다. 구현기간 : 2021-06-22 ~ 2021-06-23 Skills : React, HTML, CSS, JavaScript(ES6) Code : https://github.com/bellcastle88/ReactGrocery-bud
React - colorGenerator Preview : 사이트 방문 : https://color-generator-withreact.netlify.app/ 소개 : Color를 생성할 수 있는 APP입니다. 선택한 Color를 복사할 수 있습니다. 3초 뒤 컬러복사 문구가 사라집니다. 구현기간 : 2021-06-21 ~ 2021-06-22 Skills : React, HTML, CSS, JavaScript(ES6) Code : https://github.com/bellcastle88/ReactColorGenerator
React - lorem-ipsum Preview : 사이트 방문 : https://loremipsumwithreact.netlify.app/ 소개 : Lorem문구를 생성하는 APP입니다. 원하는 숫자만큼 Lorem을 생성할 수 있습니다. (최대 8개) 구현기간 : 2021-06-21 ~ 2021-06-22 Skills : React, HTML, CSS, JavaScript(ES6) 배포 : Netlify Code : https://github.com/bellcastle88/ReactLorem-ipsum