Development(Web, Server, Cloud)/22) React.js & Node.js22 React.js & Node.js 15일차 : React-Router dom v6 React Router dom v6 React Router dom의 custom hook useLocation useParams : 다이나믹라우트 정보 useNavigate : 페이지 이동 useLocation : 페이지정보 pathname은 현재위치 search는 쿼리문 부분이다 대충 위와같은 느낌이다. 그래서 useLocation은 현재 페이지 정보를 알 수 이는 함수이다. 이걸 가지고 우린 두가지를 해볼 수 있다. 1. topNav가 Main 페이지에서 안보이게 만들어보자 TopNav의 Link만 쓰던것을 우리가 만든 컴포넌트로 바꾸자 이제 리액트가 익숙해지면 아래와 같이도 구현할 수 있다. 이제 책의 isbn을 기준으로 책별 페이지를 만들어보자. 데이터를 보면 isbn은 위와같이 온다 우리는 두번.. 2022. 1. 17. React.js & Node.js 14일차 : 영화./책 검색사이트 먼저 movie 목록에 링크가 없어서 해당 링크를 추가해주자 그리고 글자에 를 태그로 인식한다. 이걸 html 태그로 인식하게끔 해주어야 한다. Title 안에 dangerouslySetInnerHTML을 붙여주어야 한다. 그래서 JS를 실행할 수 있는 가능성이 생기기 떄문에 이렇게 쓰는 것은 유의해야한다. BOOK 페이지 만들기 import { useState } from "react"; import styled from "styled-components"; import { getBookList } from "../../apis/book"; import { BtnSubmit, Form, InputText } from "../atoms"; import BookList from "../organisms/B.. 2022. 1. 12. React.js & Node.js 13일차 : 영화/책 검색 사이트, CORS Problem, Axios(API), Pagination 위와같이 api를 사용하는 함수를 만들어서 제작한다. 결과 이 submit되면 getMovieList 함수 실행시키기 1. 에 입력된 값을 useState 변수에 저장 2. 이 submit되면 e.preventDefault() 로 새로고침 막기 3. 이 submit 되면 1) e.preventDefault()로 새로고침 막기 2) 1에서 저장한 값을 getMovieList함수에 담아 실행시키기 4. console에 에 입력된 값이 찍힌다. 401에러는 권한에러이기때문에 좋은것이다. 보면 CORS policy라는 것이 왔다. 서버끼리는 문제가 없는데 브라우저에서 서버에 요청하면 정책을 위반했다면서 막는다. 이를 해결하기 위해 proxy라는 것을 넣어야한다. 이건 바로 에러문구에보면 주소가 나와있다. "ht.. 2022. 1. 11. React.js & Node.js 12 : 영화/책 검색 사이트, React Router, Atomic Design Pattern 1. React Router 2. Axios(API 통신) 3. Atomic Design Pattern 4. CORS proxy 5. Pagination ``` npm i axios styled-components react-router-dom ``` 1. React Router react router은 페이지와 관련된 기능을 수행한다. import { BrowserRouter, Routes, Route } from "react-router-dom"; const Router = () => { return ( ); }; export default Router; ㅇ 위와같이 작성하면 라우터가 페이지에 맞추어서 실행시키어준다. BrowserRouter : 이건 라우터의 종류를 나타낸다. 이거외에도 HashRo.. 2022. 1. 10. 이전 1 2 3 4 5 6 다음
