본문 바로가기

Front-end/Projects

(19)
React - Slider Preview : 사이트 방문 : https://sliderwithreact.netlify.app/ 소개 : Slider기능을 가지고 있는 Reviews App입니다. 3초 후에 자동으로 다음 Review로 넘어가도록 구현되었습니다. 구현기간 : 2021-06-20 ~ 2021-06-21 Skills : React, HTML, CSS, JavaScript(ES6) 배포 : Netlify Code : https://github.com/bellcastle88/ReactSlider
React - Tab Preview : 사이트 방문 : https://tabwithreact.netlify.app/ 소개 : Experience를 확인할 수 있는 APP입니다. Tab버튼을 눌러 다른 지원자의 경력을 확인할 수 있습니다. 해당 페이지의 Tab에는 색상이 표시되도록 구현되었습니다. 구현기간 : 2021-06-20 ~ 2021-06-21 Skills : React, HTML, CSS, JavaScript(ES6) 배포 : Netlify Code : https://github.com/bellcastle88/ReactTab
React - Menu 사이트 방문 : https://menuwithreact.netlify.app/ 소개 : 메뉴를 확인할 수 있는 APP입니다. 가격, 사진, 메뉴설명을 확인 할 수 있고 Category에서 목록을 변경할 수 있습니다. 구현기간 : 2021-06-19 ~ 2021-06-20 Skills : React, HTML, CSS, JavaScript(ES6) 배포 : Netlify Code : https://github.com/bellcastle88/ReactMenu
React - Accordion 사이트 방문 : https://accordionwithreact.netlify.app/ 개발목표 : Toggle버튼을 활용한 Question App입니다. 버튼을 클릭하여 답을 확인할 수 있습니다. 구현기간 : 2021-06-19 ~ 2021-06-20 Skills : React, HTML, CSS, JavaScript(ES6) 배포 : Netlify Code : https://github.com/bellcastle88/ReactAccordion
React - Review 사이트 방문 : https://reviewwithreact.netlify.app 개발목표 : Review를 확인할 수 있는 APP입니다. 다음/이전 리뷰를 확인할 수 있고 랜덤 버튼을 사용하여 무작위 리뷰를 볼 수 있습니다. 구현기간 : 2021-06-18 ~ 2021-06-19 Skills : React, HTML, CSS, JavaScript(ES6) 배포 : Netlify Code : https://github.com/bellcastle88/ReactReview
React - Tours 사이트 방문 : https://tourwithreact.netlify.app 개발목표 : 여행 API를 활용하여 목록을 보여주는 사이트 입니다. Read More를 이용해서 모든 내용을 읽을 수 있고 가격도 확인할 수 있습니다. 관심없는 목록은 Not Interested를 클릭하여 삭제할 수 있습니다. 모든 목록삭제시 refresh버튼을 클릭하여 모든 목록을 다시 불러올 수 있습니다. 구현기간 : 2021-06-18 ~ 2021-06-19 Skills : React, HTML, CSS, JavaScript(ES6) 배포 : Netlify Code : https://github.com/bellcastle88/ReactTour
React Birthday-Reminder 사이트 방문 : https://birthdaywithme.netlify.app/ 개발목표 : 생일 목록을 보여주는 React Birthday-Reminder입니다. 아래 Clear All을 클릭하여 목록을 삭제 할 수 있습니다. useState를 활용하여 List목록 components을 표시하고 Data를 가져오는 공부를 하였습니다. 구현기간 : 2021-06-16 ~ 2021-06-17 Skills : React, HTML, CSS, JavaScript(ES6) 배포 : Netlify Code : https://github.com/bellcastle88/ReactBirthday
React Movie App Preview : 사이트 방문 : https://serene-kepler-b3e343.netlify.app/ 개발목표 : 영화 API를 호출해 가장 인기있는 영화를 보여주는 웹사이트를 구현하는것을 목표로 하였습니다. 영화 포스터에 hover하여 간략한 Overview를 볼 수 있습니다. 그리고 평점도 확인할 수 있도록 구현하는것을 목표로 하였습니다. 구현기간 : 2021-06-01 ~ 2021-06-11 Skills : React, HTML, CSS , JavaScript 배포 : Netlify 시연영상 : https://youtu.be/Tn7PxQ3aTns Code : https://github.com/bellcastle88/ReactMoviesApp.git 프로젝트 소감 : 영화 API (https:..