분류 전체보기 (231) 썸네일형 리스트형 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 React - controlled-input import React, { useState } from 'react'; const ControlledInputs = () => { const [firstName, setFirstName] = useState(''); const [email, setEmail] = useState(''); const [people, setPeople] = useState([]); const handleSubmit = (e) => { e.preventDefault(); if (firstName && email) { const person = { id: new Date().getTime().toString(), firstName, email }; console.log(person); setPeople((people) => {.. event.preventDefault() 설명 preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 1번은 직관적이니까 예시는 생략하고 2번을 예시로 들자면 예시 이러한 구구단의 정답을 받는 form 이 있고, 거기에 EventListener 를 추가해주었습니다. 정답 form 밑에는 resultDiv 가 있어서 정답 여부를 출력하게끔 하였습니다. 이 함수를 실행하면 밑에 정답! 혹은 땡! 이.. 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 이전 1 ··· 7 8 9 10 11 12 13 ··· 29 다음
