React16 [React] 리액트로 아주 간단한 todo-list 만들기 useState를 연습해보기 위해 간단한 일정 관리 앱을 만들어 보자. ※기능 연습이라 css는 적용하지 않음. 1. input과 버튼 생성 우선 할 일을 적을 input 창과 등록을 하기 위한 버튼을 만들어 주자. function App() { console.log(toDos); return ( Add TO Do ); } export default App; 아주 간단한 입력창과 버튼이 만들어졌다. 2. input창에 어떤 값이 들어왔는지 확인 우리는 입력창에 어떤 값이 들어 왔는지 알아야 한다. 입력 창에 어떤 값이 들어왔는지 알기 위해서는 useState를 사용해서 어떤 값이 들어 왔는지 계속 업데이트를 해 줘야 한다. import { useState } from "react"; function Ap.. 2023. 9. 24. [React] 간단한 코드로 애니메이션 만드는 법(Fade, Zoom, Flip 등) 여러 사이트에서 스크롤을 내리면 글자나 이미지가 나타나는 애니메이션을 볼 수 있다. 이것을 하나하나 코드로 작성하기에는 코드 양이 많아 질 수 있다. 이런 문제를 해결하기 위해 리액트에서 라이브러리를 제공해 준다. 이것을 사용하면 몇 줄 안되는 코드로 애니메이션을 만들 수 있다. https://www.react-reveal.com/ Home - React Reveal React Reveal React Reveal is high performance animation library for React. It's MIT licensed, has a small footprint and written specifically for React in ES6. It can be used to create various.. 2023. 7. 13. [React] React로 간단한 H&M 사이트 만들기1 오늘은 React로 쇼핑몰 사이트인 H&M 사이트를 약간 간단한 버젼으로 만들어 볼 것이다. 우선 개발 순서는 아래와 같다. 1. 페이지는 총 전체 상품 페이지, 로그인 페이지, 상품상세 페이지 3개가 있다. 2. 전체 상품페이지에서 전체 상품을 볼 수 있다. 3. 로그인 버튼을 누르면 로그인 페이지가 나온다. 4. 상품 디테일을 눌렀으나. 로그인이 되어있지 않은 경우 로그인 페이지가 먼저 나온다. 5. 로그인이 되어있을 경우에는 상품 디테일 페이지를 볼 수 있다. 6. 로그아웃 버튼을 클릭하면 로그아웃이 된다. 7. 로그아웃이 되면 상품 디테일페이지를 볼 수 없으며 다시 로그인 페이지가 보인다. 8. 로그인을 하면 로그아웃 버튼이 보이고 로그아웃을 하면 로그인 버튼이 보인다. 9. 검색창을 통해 상품을.. 2023. 3. 20. [React] API로 날씨 앱 만들기 3(OpenWeather API 사용) https://conquer-it.tistory.com/195 API로 날씨 앱 만들기 2(OpenWeather API 사용) [React] API로 날씨 앱 만들기 2(OpenWeather API 사용) https://conquer-it.tistory.com/194 API로 날씨 앱 만들기 1(OpenWeather API 사용) 4. 현재 위치한 날씨 데이터 보여주기 저번까지 동작은 하지 않는 UI까지 만들었다. 이제 API를 통해 이 UI가 동작하게 만들 차례 conquer-it.tistory.com 6. 도시별 날씨 가져오기 우선 여러 도시의 날씨를 불러오기 위해 App.js에서 city라는 state를 만든다. const [city, setCity] = useState(""); 그 후에 setCi.. 2023. 3. 1. 이전 1 2 3 4 다음
