react 썸네일형 리스트형 코알누-redux middleware 리덕스 미들웨어 비동기 처리 미들웨어 : 중간에 가로채는 느낌 redux thunk 미들웨어 사용 npm install redux-thunk = store을 app에 적용 reducer는 파라미터 2개 = state,action 더보기 코알누-redux개념 소개 리액트는 단방향 통신 부모가(app)이 자식한테만 전달가능하고 자식이 부모한테는 못간다. 리덕스를 어려워하는 이유 : component 방식:어떤 state를 만들어서 거기서 state를 싹다 저장하고 여기서 component가 요청을 해서 값을 받아오는 방식 useDispatch:액션을 던지는 훅 useSelector: 컴포넌트에서 store에 있는 값을 가져와서 쓸때에 redux랑 react-redux 차이점 간단히 말해서, Redux는 상태 관리를 위한 독립적인 라이브러리이며, React-Redux는 Redux를 React 애플리케이션과 함께 사용하기 위한 도구 세트입니다. React-Redux를 사용하면 Redux를 더욱 효율적으로 React 애플리케이션에 통합할 수 있습니다. react를 사용해.. 더보기 코알누-react 라우터란? 여러 웹페이지를 만드는 지름길 http://reactrouter.com 리액트 라우터를 활용해서 상황에 맞춰서 보여주고 싶은거를 가능하게 함 ⌘Link,Navigate: 페이지 사이를 이동하는법 하지만 이런 생각이 들수있다. 내가 매번 url바꿔줘야해?? Homepage에서 Aboutpage로 이동하는 링크를 만들어주자 페이지를 왔다갔다 하는 방식은 2가지가 있는데 1. Link라는 방식 2.useNavigate방식(react hook을 사용하는 방식) import React from 'react' import {useNavigate} from 'react-router-dom' const Aboutpage = () => { const navigate = useNavigate() const goToHomepage=()=>{ naviga.. 더보기 코알누 react의 lifecycle을 활용한 날씨앱 만들기-5(로딩 스피너) 로딩 스피너 api를 가져온다. import ClipLoader from "react-spinners/ClipLoader"; const[loading,setLoading]=useState(true) {loading?( ):( )} const getCurrnetLocation=()=>{ navigator.geolocation.getCurrentPosition((position)=>{ let lat = position.coords.latitude let lon = position.coords.longitude getWeatherByCurrentLocation(lat,lon); }); }; const getWeatherByCurrentLocation = async(lat,lon)=>{ let url = `ht.. 더보기 코알누-react의 lifecycle을 활용한 날씨앱 만들기-4(도시별 날씨 가져오기) 이번에 하는게 최종보스 남은게 도시버튼을 누르면 도시에 맞춰서 정보가 바뀌는거 고민하고 어떻게 하면 되나 생각하면 이런 난제에 부딪혔을 거다. import React from 'react' import { Button } from 'react-bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; import WeatherBox from './WeatherBox'; const WeatherButton = ({cities}) => { console.log("cities?",cities); const[city,setCity]=useState('') const searchByCity=(cityName)=>{ setCity(cityName) let url = '.. 더보기 코알누-react의 lifecycle을 활용한 날씨앱 만들기-3(버튼 보여주기) 5개의 버튼이 있다 . 1개는 현재위치 4개는 다른 도시 const cities = ['paris','new york','tokyo','seoul'] 앞으로 많이 쓰일 정보들은 따로 모아서 관리해주는게 좋다. // 도시 정보를 weatherButton에 props로 넘긴다. const WeatherButton = ({cities}) => { console.log("cities?",cities) 도시가 한개든 만개든 한줄 코드로 끝내주는게 있음 더보기 코알누-react의 lifecycle을 활용한 날씨앱 만들기-2(ui작업,날씨 데이터 보여주기) 코드 설명을 해보자면 화면 높이의 100% vh 반복되는 사진 없앨려면 no repeat 반복되는 사진은 없앴는데 짤린 부분이 보기싫으면 cover까지 해주면됨 이제 날씨 박스 만들기 - weatherBox라는 컴포넌트 만들어서 생성해주자 이 정도로 일단 해두고 버튼도 만들어 줄건데 이것도 컴포넌트로 만들지만 디자인 하기 귀찮아서 react의 bootstrap이란걸 사용해볼거다. 버튼을 생성후에 가운데 정렬을 하려고 했는데 한가지 문제가 발생했다. display:flex때문에 flexable하게 아이템 조절에는 너무 좋지만 div안에있는 모든 아이템들을 가로 정렬로 바꿔버린다. flex의 방향을 바꿔줘야 하는데 flex-column으로 변경해주자 날씨 데이터 보여주기 weather date는 ui에 보여.. 더보기 코알누-react의 lifecycle을 활용한 날씨앱 만들기 Api를 가져온다. (날씨가 어떤지 우리는 알수 없으니까) 첫번째 과정을 실행하기 위해서는 lifecycle의 useEffect를 실행해야 한다. ⌘useEffect에는 파라미터 값이 두개가 들어가는데 1.함수 2.array배열이 들어간다. 함수에는 내가 해주고 싶은걸 써준다. 배열에 아무것도 안써놓으면 componentDidmount처럼 발동을 한다. 배열안에 아무것도 안써주면 componentDidmount처럼 작동을 한다. 렌더를 하고나서 바로 실행을 시켜준다. 자 그러면 이제 현재위치 기반의 날씨를 가져올건데 현재위치를 먼저 가져와보자(모르면 구글에 찾아보기) 이제 api를 이용해서 현재 위치 날씨 가져오기 function App() { const getCurrnetLocation=()=>{ na.. 더보기 이전 1 2 3 4 다음
