Vite는 제가 정말 좋아하고 자주쓰는 프론트엔드 빌드 툴입니다. 리액트, 뷰, 스벨트 추가로 타입스크립트 사용 여부까지 맞춰서 빠른 속도로 프로젝트를 세팅할 수 있게 해줍니다. 또 개인적으로 npx CRA로 리액트 개발을 했을 때 보다 빌드나 런타임 소요 시간이 훨씬 빠른 것을 체감할 수 있었습니다. CSS관련 기술 중에서는 Tailwind CSS를 개발할 때 즐겁게 썼습니다. class 네이밍을 고민하지 않아도 되고, css 파일을 왔다갔다 하며 확인하지 않아도 된다는게 참 편리했습니다. 그래서 제가 좋아하는 이 둘을 합쳐, Vite로 세팅한 React 프로젝트에서 Tailwind css를 좀 더 효율적으로 사용 하는 방법을 공유하고자 합니다. (저의 개인 경험을 바탕으로 작성된 글이니, 항상 정답은..

이번에 오픈마켓 프로젝트를 하면서 무한 스크롤 기능 구현에 도전해보았다. 상품 목록 불러오기 api를 사용하면 한번에 15개 상품씩만 불러와지는데, 스크롤이 최하단으로 이동할 때 마다 다음 상품목록을 api로 불러오게 하고 싶었다. 마침 이번 프로젝트에서는 리액트 쿼리를 쓰고 있었는데, 리액트 쿼리로 무한 스크롤 구현이 가능하다! 이 에는 크게 리액트 쿼리의 두 가지 기술이 쓰이고, 역할은 다음과 같다. 1. useInfiniteQuery - 특정한 조건이 충족되면 계속해서 api 통신으로 데이터를 불러온다. 이 때 한 번 api 통신이 이뤄질 때마다 page에 담긴다. 예를 들어, 상품목록이 15개씩 불러와진다면, 첫 15개는 page1에 담기고, 그 다음 16번째 부터 시작하는 15개 상품목록은 pa..

리액트를 쓰다보면 state, props 개념을 싫더라도 알게 되고 사용하게 되는데, 이 때 자식 컴포넌트에서 props로 넘긴 값을 상위 컴포넌트에서 state로 props로 값을 정해주게 된다. 쉽게 예를 들어보면 function 부모컴포넌트() { return( ) } function 자식컴포넌트(props) { return( Hello, {props} ) } 자식 컴포넌트의 props는 상위 부모컴포넌트에서 "안녕" 이라는 값을 넘겨주게 되고, 컴포넌트가 렌더링 되면 Hello, 안녕 이렇게 보이는 것이다. 이렇게 state props는 부모 -> 자식 단방향으로 값을 정해주는데, 만약 반대로 자식 -> 부모 방향으로 값을 정해줘야한다면 어떻게 해야할까? 일단, 거두절미하고 결론만을 말하면 "함수..

이번에 반응형 웹 클론 코딩을 하면서 vite라는 것을 써볼 기회가 생겼다. vite가 무엇인지 여기서는 생략하고 vite 사용 방법과 그 후 github페이지에 배포하는 방법을 글로 정리해보려한다. vite가 무엇인지 간단하게 정리해 둔 참고 사이트 Introduction | Cracking Vue.js Vite 비트(Vite) (opens new window)는 기존의 프런트엔드 개발 경험을 향상시켜줄 새로운 프런트엔드 툴입니다. Vue 창시자 에반 유가 만들었으며 현재 Vue, React, Svelte 등의 주요 프레임워크 커뮤니티에 joshua1988.github.io 1. vite 설치 우선, 프로젝트를 시작할 폴더 디렉토리에서 터미널에 npm create vite@latest를 입력한다. 그런..

https://www.daleseo.com/react-forward-ref/ - 참고 //상위 컴포넌트 function Upload() { return ( ); } export default Upload; 에서 불러온 이미지 파일들이 background로 보여야 했기 때문에 컴포넌트에서 ref를 사용하여 background 속성을 부모 컴포넌트에서 내려주려했다. import { useRef } from "react"; import "./PhotoList.scss"; function PhotoList(ref) { const previewImg = useRef(); return ( ); } export default PhotoList; 단순하게 생각해서 원래 하던대로.. 위처럼 했더니 에러가 났다. 일반 p..

리액트에서 Link와 Route를 쓰면 자꾸 브라우저 주소창에 url만 바뀌고 컴포넌트가 재렌더링 되지 않아 화면이 바뀌지 않았다. 그래서 해결한 방법은 원래 쓰던 react-route-dom 5.3.0 버전을 삭제하고 6.3.0 버전을 까는 것. 그리고 아래 코드와 같이 제일 바깥 쪽에 로 한번 감싸고 그 안에서 로 한번 더 감싸고 를 작성해 주는 것이다. import { BrowserRouter, Routes, Route } from 'react-router-dom'; import "./App.css"; function App() { return( ); }