복습용연습장

https://hyunu0504.github.io/movie 영화 hyunu0504.github.io 프로젝트 과정 TMDB에서 제공하는 API를 사용하였습니다. 제공하는 API의 정보를 보고 현재 상영 중, 상영 예정작, 인기 영화를 보여주고 검색할 수도 있고 영화를 클릭했을 때 해당 영화의 상세정보를 보여주는 사이트를 만들고자 했습니다. useEffect를 사용해서 불필요한 렌더링이 안생기도록 했습니다. useContext로 데이터를 관리했습니다. 영화 상세 페이지에서 새로고침할 때 클릭한 영화의 ID값이 초기화 되는것을 local storage에 담아서 새로고침해도 보이도록 했습니다. 새로고침을 할때 404에러가 발생해서 확인해보니 깃헙은 SPA를 지원하지 않는다고 해서 react-route-dom..

REACT 2023. 2. 4. 15:21

터미널에 npm i swiper import { Swiper, SwiperSlide } from "swiper/react"; import { Pagination, Navigation, Autoplay } from "swiper"; Slide 1 Slide 2 Slide 3 https://swiperjs.com/demos#custom-plugin Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 자세한건 여기에 나와있다.

REACT 2022. 12. 23. 01:34

1. 터미널에 npm install react-spinners --save 2. import import 사용하려는 스피너 from "react-spinners/사용하려는 스피너"; 여기서 고르면 된다. https://www.davidhu.io/react-spinners/ React Spinners www.davidhu.io

REACT 2022. 12. 7. 02:57

react-router-dom은 리액트의 화면 전환을 도와준다. 리액트는 가상 돔을 사용해서 변화가 있는 컴포넌트만 업데이트를 해주기 때문에 굳이 화면을 새로고침을 할 필요가 없다. react-router-dom을 사용하면 새로고침없이 화면 전환이 가능하다. 터미널에 npm install react-router-dom }/> }/> 최상위 부모로 작성한다. }/> }/> BrowserRouter와 똑같이 작성하지만 차이점은 url에 #이 붙는다 BorwserRouter와 달리 # 때문에 SEO에 불리하다. }/> }/> 를 작성할때 부모로 사용한다. }/> path에 작성한 url로 들어가면 element에 들어있는 컴포넌트를 보여준다. ~~~ ~~~ 는 a태그와 같은 하이퍼링크이지만 Link를 사용해야..

REACT 2022. 8. 19. 21:59

CSR,SSR CSR( Client Side Rendering ) 클라이언트에서 랜더링하는것을 CSR SSR( Server Side Rendering ) 서버에서 랜더링하는것을 SSR이라고 부른다. CSR의 장점 1. 페이지를 이동해도 웹사이트가 새로고침 되지 않는다. 2. SSR보다 훨씬 빠르고 효율적이다. SSR의 단점 1. 페이지를 이동할때 깜박인다. 2. CSR에 비해서 느리다 그 이유는 뭘까? SSR에서 요소가 추가된다고하면 서버에서 클라이언트로 보내서 원래 존재하던 요소들도 다시 랜더링해야된다 이전에 포스팅한 리액트에서 virtual DOM ( 가상 돔 )이 이전의 가상 돔과 비교해서 변경된 요소만 바꿔준다고 했다. 그게 CSR이다. 그렇기 때문에 SSR보다 빠르고 효율적이다 CSR의 단점 1..

REACT 2022. 8. 18. 20:12

SPA SPA는 Single Page Application의 줄임말이다. 말그대로 "싱글 페이지 어플리케이션" 페이지가 한개의 페이지로 구성되어있다. 예전의 웹사이트는 다른 페이지로 이동하면 서버에서 새로운 페이지를 불러와서 새로고침이 됐다면 SPA는 첫랜더링때 페이지 전체를 불러오고 페이지를 이동할때는 서버로부터 새로운 페이지를 불러오지 않고 내부를 수정해서 보여준다. 단점으로는 SEO에 좋지않다. DOM DOM은 HTML 요소들을 트리형태로 나타낸것이다. 트리 전체를 DOM이라고 하고 트리안에 있는 모든 요소 하나 하나들을 Node라과 부른다. 그리고 그 요소들은 다 API다. 사진에 있는 document가 자바스크립트에서 사용하는 document.~~이다. 그래서 querySelector처럼 DOM..

REACT 2022. 8. 16. 17:18

https://hyunu0504.github.io/todolist/ React App hyunu0504.github.io 1. useContext, useReducer 상태관리 ( 다크모드, Created Tasks, Done Tasks) 2. styled-component로 스타일링 3. modal창에서 배경 클릭시 발생하는 이벤트 버블링 해결 4. input창 입력 후 취소, 생성, 배경 클릭시 input창 값 초기화 5. input창 빈값일시 alret창 출력 6. 1023px 이하 반응형 디자인 7. useRef로 focus효과를 useEffect안에 첫랜더링, create버튼을 클릭할때 반응 8. 엔터 누르면 생성 버튼 클릭

REACT 2022. 8. 12. 17:54

onKeyUp 한/영, 한자, 특수키 제외 가능하다 키를 입력하고 땟을때 작동한다. onKeyDown onKeyUp과 동일하나 차이점은 키를 입력하면 작동한다. onKeyPress onKeyDown이랑 똑같이 키를 입력하면 작동한다. 차이점으로는 추가적으로 onKeyUp, onKeyDown과 다르게 Enter, crtl,backspace, tab들은 인식하지 못한다 const 함수명 = (e) => { if( e.key === '입력할 키' ){ `동작할 코드` } }

REACT 2022. 8. 3. 23:00