본문 바로가기

Library-Framework31

[React] Carousel (반응형 이미지 / 가로 스크롤) 사용법 (JS) http://react-responsive-carousel.js.org/ http://react-responsive-carousel.js.org/ React Responsive Carousel Storybook Check it out these cool demos created using storybook. The source code for each example is available here. Summary Installing npm install react-responsive-carousel --save Demo Carousel Code: Contributing Please, feel fre react-responsive-carousel.js.org 물론 직접 구현할 수도 있지만.. 잘 나와있는 .. 2022. 8. 23.
[React] effects 안한 지 오래되서 잠깐 복습 쭈고... create-react-app으로 작업할 때의 포인트는 "분할하고" "정복하는' 것 create-react-app은 css 코드를 javascript 오브젝트로 변환시켜줌 무작위적인 랜덤 class 이름을 가짐 컴포넌트를 분리해서 독립적으로 만들 수 있음 기억해둘 것 state가 변화할 때 모든 component와 코드는 다시 실행된다. 처음 한번만 실행되고 그 다음에는 실행되지 않게 하려면? useEffect 2개의 argument를 가짐 1번 argument "effect" : 딱 한번만 실행하고 싶은 코드 2번 argument "deps" : dependency. 이 부분이 변화할 때 코드를 재실행시킴 코드가 딱 한번만 실행될 수 있도록 보호해줌 [] 특정 조.. 2022. 7. 19.
[React] 리액트 앱 만들기 (create react app) node js 설치 먼저, node js 설치가 필요함 콘솔 창에 node -v 를 입력해서 설치 여부를 확인할 수 있음 npx 를 입력해서 작동이 되는 지 확인 create-react-app npm create-react-app 앱 이릅 혹시 아래와 같은 에러가 뜬다면, You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). We no longer support global installation of Create React App. - npm uninstall -g create-react-app - yarn global remove create-react-app 둘 중 하나를 입력해서 제거한 후 다시 해.. 2022. 7. 1.
[React] Unit Converter 만들기 (state 연습) state를 바탕으로 UI를 변경할 수 있는 것은 매우 유용하다. https://nomadcoders.co/react-for-beginners/lectures/3273 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 2022. 6. 30.