rhanziy

https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 시작해볼까. $ npm install swiper 만들고싶었던 UI형태는 이렇다. 센터가 고정되면서 슬라이드되는 카드 공식문서에서 제공하고있는 React 코드를 보면, (다른 말이지만 코드샌드박스 진짜 안열린다 개빢침) import { Pagination } from "swiper/modules"; import { Swiper, SwiperSlide } from "swiper/react"; import ..

https://velog.io/@kyungjune/Styled-components-%EA%B8%B0%EC%96%B5%ED%95%98%EA%B8%B0 Styled-components 기억하기 React를 학습하던 중 모듈 시스템의 중요성을 계속 깨닫고 있다. 익숙하지 않은 방식들에 시간이 오래 걸리긴 하지만 반복적으로 사용하고 익숙해지면 분명 세분화된 폴더트리 구성에 훨씬 편해 velog.io https://kyounghwan01.github.io/blog/React/styled-components/basic/#global-theme styled-components 개념 및 예시, react, redux styled-components 개념 및 예시, react, redux, 환경설정, global the..

firebase로 sso기능 만들고 firestore에 사진+트윗 올리는 기능 만드는 중. image file 업로드와 preview 구현 코드. 사진 저장은 firestore에다 할 것이니 조금만 기다리세요. file 업로드 처리, 미리보기 코드 const [ attachment , setAttachment ] = useState(); const onFileChange = (e) => { const { files } = e.target; const theFile = files[0]; const reader = new FileReader(); reader.onloadend = (e) => { const { result } = e.currentTarget; setAttachment(result); } re..

리액트에서 페이지를 나누고 싶을 때 react-router-dom 이라는 외부 라이브러리를 설치해서 구현해보자. 터미널 오픈 후 npm install reat-router-dom@6 설치 후 index.js 셋팅 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); App 컴포넌트를 BrowserRouter로 감싸준다. 이제 라우터로 url 경로마다 다른 페이지를 보여주고 싶을 때 (App.js) import { Routes, Route, Link } from 'react-router-dom'; function App(){..

오늘은 react-query 라이브러리를 설치했다. 더보기 서버 상태를 관리해주는 react-query 라이브러리 장점 1. 성공/실패/로딩 중 쉽게 파악 가능 2. 틈만나면 refetch 해줌 3. 실패 시 retry 해줌 4. state 공유 안해도 된다.(ajax코드 다시 쓰면 됨) 5. ajax 결과 캐싱 가능 => 실시간 데이터 전송이 필요한 페이지에서 주로 쓰인다. ( ex. 코인거래소) 사용법을 알아보자. 터미널 오픈 후 npm install react-query 그리고 index.js에서 설정해줘야 할 몇가지. import { QueryClient, QueryClientProvider } from 'react-query'; const queryClient = new QueryClient()..

저번 글에서 redux toolkit을 설치하고 store.js 파일에 공유할 state들을 모아놨다. 이제 useState처럼 state를 변경하는 방법. 좀 복잡하다 ㅋ let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Grey Yordan', count : 1} ] }) 장바구니에 담긴 아이템 data가 들어있다. 중복된 아이템이 추가되면 수량을 올리거나, 장바구니 아이템을 추가/삭제하는 기능을 만들어 state를 변경하고 싶다면 reducers를 이용해 기능을 추가하면 된다. let cart = createSlice({ name : ..

컴포넌트끼리는 state를 props 문법으로 공유할 수 있다. 하지만 공유할 state가 많다면,... 자식 컴포넌트가 많은 복잡한 구조라면....! redux를 설치해보자. 리액트와 리액트 돔 버전이 18.1.x 이상이여야 설치가 가능하니 package.json파일에 가서 버전 확인/수정해준다. 터미널 오픈 후 install. npm install @reduxjs/toolkit react-redux 그리고 index.js에서 필요한 셋팅 import { Provider } from "react-redux"; // Provider import import store from './store.js' // Provider로 을 감싸주면 된다. 속성은 store //그럼 이제 과 그 모든 자식컴포넌트들은 s..

서버 : 유저가 요청한 데이터를 보내주는 프로그램. get : 서버에서 데이터를 가져올 때 post : 데이터를 서버로 보낼 때 브라우저 주소창에 GET, POST 날리면 브라우저가 새로고침되는 단점이 있다. ajax란? 서버에 GET, POST 요청 시 새로고침 없이 데이터를 통신할 수 있게 도와주는 간단한 브라우저 기능. 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 사용법은 3가지가 있는데, 1. XMLHttpRequest 라는 옛날 문법사용 2. 자바스크립트 fetch() 3. axios 외부라이브러리 리액트에서 서버와 ajax 통신할 때 axios 라이브러리 설치&사용 법 // 터미널 오픈 후 install npm install axios ..