React (115) 썸네일형 리스트형 [react] Debounce -lodash.com 사이트 이용 방법 debounce 디바운스 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술 콘솔에 글자 하나칠때마다 함수 호출되는것말고 텀사이(띄어쓰기)를 그룹으로 묶어서 호출한다. [사이트 이용 방법] https://lodash.com Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn lodash.com 1. .. [react] 스토리지 (Web Storage , Local Storage, Session Storage) * Web Storage * Local Storage -Key와 Value의 쌍으로 데이터 저장하고 조회할 수 있는 저장소 -서버에 전달되지 않는다. -지우지 않는 이상, 브라우저의 탭을 닫거나 다시 열어도 유지됨 -크롬 콘솔에 위에 코드 치고 application>storage>localstorage>해당호스트링크 보면 값이 들어가 있음 -문자열만 저장 가능: 문자열, 숫자, 오브젝트 다 가능하지만 로컬스토리지를 거치고 나면 String 이 되어버림. Object를 그대로 가져오려면? >JSON형태로 바꿔서 저장하고 : JSON.stringfy(); >JSON형태로 바꿔서 가져오기 : JSON.parse(); (JSON.stringfy 오브젝트, 객체, 배열 ..JSON 문자열로 반환 JSON.pars.. [react] swiperjs 사용법 https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 터미널에 npm i swiper 작성하여 설치하기 사이트-Installation 부분 참고 참고로 아래꺼를 props로 값 넣어줘야 자유롭게 각 슬라이더img width 적용됨 slidesPerView='auto' [react] styled components 사용법 https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com 1. 설치하기 vscode 의 터미널에 npm i styled-components 작성하여 설치 2. 확장 프로그램 설치 vscode 확장 프로그램에 styled 치면 나오는 vscode-styled-components 설치 3. 사용되는 App.js에 컴포넌트 태그 넣기 ▼ 아래에선 import './App.css'; import Style from './components/Styl.. [react] mockaroo 사이트 이용 방법 (Json dummy data 만들기) https://mockaroo.com/ Mockaroo - Random Data Generator and API Mocking Tool | JSON / CSV / SQL / Excel Mock your back-end API and start coding your UI today. It's hard to put together a meaningful UI prototype without making real requests to an API. By making real requests, you'll uncover problems with application flow, timing, and API design early, improvi mockaroo.com 기존 옵션을 이용하여 JSON 파일을 만들 수.. [react] react router 사이트 이용 방법 https://reactrouter.com/ Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com React에서 페이지 전환 기능을 구현하기 위해서는 외부 라이브러리에 의존해야 한다. 페이지 전환을 위해 주로 react-router를 이용한다. Start the Tutorial 참고하기 설치 방법 (v6버전) - .. [react] Axios (axios-http.com)사이트 이용 https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs 시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코 axios-http.com Axios: 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리(사이트이용) - React 애플리케이션에서 API를 사용하는 방법으로는 크게 Axios(Promise 기반 HTTP 클라이언트) 와 Fetch API(Javascript 내장 Web API)가 있다. (* Web API:클라이언트 측에서.. [react] 컴포넌트 만들기 (props 사용) 컴포넌트는 클래스 컴포넌트, 함수 컴포넌트가 있다. 초기에는 클래스 컴포넌트를 주로 사용하였으나 사용하기 불편하다는 의견이 많이 나와서, 이후에는 함수 컴포넌트를 개선해서 주로 사용하게 되었다. 함수 컴포넌트 개선 과정에서 개발된 것이 훅HOOK이란 것인데, 현재 거의 훅을 사용한다. 함수 컴포넌트 function Welcome(props){ return 안녕하세요, {props.name} ; } ->Welcome이름을 가진 함수는 props객체를 받아서 인사말이 담긴 리액트 엘리먼트를 return한다.(리액트 컴포넌트) 클래스 컴포넌트 class Welcome extends React.Component{ render(){ return 안녕하세요, {this.props.name}; } } ->리액트의 모.. 이전 1 ··· 11 12 13 14 15 다음
