전체 글 (35) 썸네일형 리스트형 React 캐로셀 캐로셀 라이브러리 없이 구현하기구조 파악하기기본 구조는 가로로 쭉 나열이 되어 있어야 한다.처음에 쭉 나열이 되어 있으면 브라우저에 스크롤? x가 생길 것이다.이 스크롤을 css로 overflow을 hidden으로 설정 해준다.이제 버튼을 눌렀을 떄 앞으로, 뒤로 가게 하면 되는데 이떄 css에 transform: `translateX()'을 써준다.구현하기많은 곳에서 쓰이니깐 커스텀 훅으로 만들어 주었다.import React, { useCallback, useEffect, useState } from 'react'const UsePreBtn = (data) => { const [index, setIndex] = useState(0) const [cardsPerView, setCardsPerView.. html , js 정규식 계속 미루다가 공부하는 정규 표현식!정규표현식이란?정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴js에서는 정규 표현식도 객체이다. RegExp, exec(), test() 메서드를 사용이 가능하다string의 match(), matchAll(), replace(), replaceAll(), search(), split() 메서드와 함께 사용이 가능하다.정규 표현식 만들기정규 표현식은 두가지 방법으로 만들 수 있다.리터럴 방식: 슬래시로 패턴을 감싸서 작성const re = /ab+c/;RegExp 객체의 생성자 호출const re = new RegExp("ab+c");정규 표현식 패턴 작성하기단순 패턴은 문자열을 있는 그대로 탐색할 떄 사용예를 들어 /abc/ 이 패턴은 문자열.. React 커스텀 Hook, await와 axios.all 활용법 React에 커스텀 훅으로 만들어서 처리하기커스텀 훅은 개발자가 스스로 훅을 정의 할수 있고, 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용이 가능하다.폼 데이터 관리, API 요청 상태 관리, 비동기 데이터 요청을 여러 곳에서 사용할 때상태관리 로직의 재활용이 가능, 코드의 가독성 증가, 상태 관리리액트 공식문서 예시 const { useState, useEffect } = React; function useCounter() { const [count, setCount] = useState(0); useEffect(() => { const id = setInterval(() => { setCount.. 이전 1 2 3 4 5 다음
