react
-
분명 tsconfig.paths.json에 alias를 설정했는데 경로가 상대경로로 잡힌다. "typescript.preferences.importModuleSpecifier": "relative", vscode setting.json에 저 값이 relative로 되어있어서 그랬다. "typescript.preferences.importModuleSpecifier": "non-relative", non-relative로 바꿔준다. settings에서 바꿔줘도 된다.
react에서 alias가 상대경로로 지정 될 경우분명 tsconfig.paths.json에 alias를 설정했는데 경로가 상대경로로 잡힌다. "typescript.preferences.importModuleSpecifier": "relative", vscode setting.json에 저 값이 relative로 되어있어서 그랬다. "typescript.preferences.importModuleSpecifier": "non-relative", non-relative로 바꿔준다. settings에서 바꿔줘도 된다.
2024.01.15 -
react-range-slider-input 라이브러리를 사용해서 range bar를 만들어 봤다. (툴팁이 있는 버전으로) react-range-slider-input는 별도로 툴팁나오는 옵션이 없어서 ul태그를 이용해서 만들어줬다. https://www.npmjs.com/package/react-range-slider-input react-range-slider-input React component wrapper for range-slider-input. Latest version: 3.0.7, last published: 4 months ago. Start using react-range-slider-input in your project by running `npm i react-range-sl..
[React] 리액트 range slider 라이브러리 사용해서 range bar 만들기react-range-slider-input 라이브러리를 사용해서 range bar를 만들어 봤다. (툴팁이 있는 버전으로) react-range-slider-input는 별도로 툴팁나오는 옵션이 없어서 ul태그를 이용해서 만들어줬다. https://www.npmjs.com/package/react-range-slider-input react-range-slider-input React component wrapper for range-slider-input. Latest version: 3.0.7, last published: 4 months ago. Start using react-range-slider-input in your project by running `npm i react-range-sl..
2023.04.26 -
loop : 자동 순환되게 설정을 했는데 처음 페이지 진입하면 마지막 페이지 부터 보여줌 구글 검색해 봤는데... 약간 Swiper 에러 같음 가뜩이나 pagination을 fraction타입으로 설정해놔서 3/3 -> 1/3 이런식으로 작동한다. initialSlide={1} 이라고 선언하니까 정상작동함 api 문서 설명에는 Index number of initial slide. 이렇게 작성되어있어서 0이라고 작성했는데 작동을 안함 알고보니 마지막 페이지가 swiper-duplicate? 라고 class가 주어져있고 젤 상단에 있어서 그랬던 것이였음 그래서 그 바로 뒤 index인 1을 주니까 1페이지부터 잘보여줬다.
[React Swiper] loop={true} 마지막 페이지 먼저보이는 에러loop : 자동 순환되게 설정을 했는데 처음 페이지 진입하면 마지막 페이지 부터 보여줌 구글 검색해 봤는데... 약간 Swiper 에러 같음 가뜩이나 pagination을 fraction타입으로 설정해놔서 3/3 -> 1/3 이런식으로 작동한다. initialSlide={1} 이라고 선언하니까 정상작동함 api 문서 설명에는 Index number of initial slide. 이렇게 작성되어있어서 0이라고 작성했는데 작동을 안함 알고보니 마지막 페이지가 swiper-duplicate? 라고 class가 주어져있고 젤 상단에 있어서 그랬던 것이였음 그래서 그 바로 뒤 index인 1을 주니까 1페이지부터 잘보여줬다.
2023.04.13 -
리액트에서 Swiper 모듈 사용하기 * 일단 Swiper를 npm install 했다는 전제하에 1. swiper를 import 해준다. import React, { useRef, useState } from 'react'; import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperCore, { Autoplay, FreeMode, Pagination, Navigation, A11y, } from 'swiper'; 2. swiper 컴포넌트 사용하기 swiper props로 공식문서를 확인하면서 필요한 것을 추가하면된다. https://swiperjs.com/swiper-api Swiper API Swiper is the most modern f..
[React Swiper] 리액트에서 스와이퍼 사용하기리액트에서 Swiper 모듈 사용하기 * 일단 Swiper를 npm install 했다는 전제하에 1. swiper를 import 해준다. import React, { useRef, useState } from 'react'; import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperCore, { Autoplay, FreeMode, Pagination, Navigation, A11y, } from 'swiper'; 2. swiper 컴포넌트 사용하기 swiper props로 공식문서를 확인하면서 필요한 것을 추가하면된다. https://swiperjs.com/swiper-api Swiper API Swiper is the most modern f..
2023.04.13 -
import React, { useState } from 'react'; function ProductItem({ name, rank, onClick }) { const isSelected = rank > 0; const remainingCount = 3 - rank; const countText = isSelected ? `(${rank}/3)` : ``; const buttonLabel = isSelected ? '취소' : '상품 비교'; return ( {name} {countText} {buttonLabel} {!isSelected && remainingCount === 0 && ( 3개 이상 선택할 수 없습니다. )} ); } export function App(props) { const [r..
[React] 리액트 순위 매기기 만들기 (ranking)import React, { useState } from 'react'; function ProductItem({ name, rank, onClick }) { const isSelected = rank > 0; const remainingCount = 3 - rank; const countText = isSelected ? `(${rank}/3)` : ``; const buttonLabel = isSelected ? '취소' : '상품 비교'; return ( {name} {countText} {buttonLabel} {!isSelected && remainingCount === 0 && ( 3개 이상 선택할 수 없습니다. )} ); } export function App(props) { const [r..
2023.02.26 -
리액트 시작하기 1. 코드 플레이그라운드 사용하기 CodeSandbox: Online Code Editor and IDE for Rapid Web Development Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more. codesandbox.io CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io..
[리액트] JSX란?리액트 시작하기 1. 코드 플레이그라운드 사용하기 CodeSandbox: Online Code Editor and IDE for Rapid Web Development Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more. codesandbox.io CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io..
2022.11.16