rhanziy

데이터 리스트 페이지를 만들고 나서 추가로 엑셀 다운로드 기능을 요청받았다.나는 xlsx-js-style 라이브러리를 사용했는데 과정을 정리하는 겸 작성하는 글..위 라이브러리를 사용한 이유는 `javascript를 사용해 스프레드시트에 스타일을 옵션을 추가`할 수 있는 장점이 있다고해서 선택했다.현재는 워크시트 디자인을 해놓진 않았지만 추후 스타일 변경을 고려해볼 예정,,지원되는 스타일 속성은 `alignment, border, fill, font, numFmt` 이고 설정이 꽤나 간편하다는 생각이 들었다. 🔽 공식 페이지에서 제공하는 코드import XLSX from 'xlsx-js-style';export default function Excel() { // STEP 1: 새로운 workbo..

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..