Frontend40 [Javascript] 금액 입력 시 자동으로 콤마 삽입 Introductioninput으로 금액을 입력받을 때, input 값에서 자동으로 콤마가 삽입되도록 하는 방법을 알아보려 한다. 동작 과정1. onChange를 이용하여 현재 price 값을 갱신해야 한다.2. price의 숫자 이외의 문자는 모두 제거한다.3. 정규식을 이용하여 3자리마다 콤마를 삽입한다.4. 콤마를 삽입한 값을 setPrice로 갱신한다. ※ price의 값은 콤마가 포함된 string이므로 콤마를 제외하고 숫자로 변환하는 과정을 거쳐야 한다. placeholder="금액" value={price} onChange={(e) => { const inputPrice = e.target.value.replace(/.. 2023. 9. 21. [React] useCallback vs useMemo Introduction useMemo와 useCallback의 개념에 대해서는 알고 있었지만 이 둘의 정확한 차이점은 알지 못했기에 각각 이 둘의 쓰임과 어떤 부분이 다른지 알아보려 한다. useMemo 와 useCallback useMemo와 useCallback은 모두 성능 최적화를 위해 사용되는 리액트 훅이다. 함수의 결과를 저장하여 동일한 계산을 여러번 하지 않도록 하여 더 빠르고 효율적인 로직을 구현할 수 있다. useMemo의 기본 구조 useMemo(() => fn, [deps]) 첫 번째 인자로는 함수를, 두 번째 인자로는 실행할 조건 변수를 담은 배열의 형태이다. useMemo 사용 예시 - useMemo를 사용하지 않았을 경우 const Calculation = ({ a, b }) =>.. 2023. 9. 21. [React] React-calendar Introductionreact-calendar 라이브러리의 사용법과 css custom 하는 법을 알아보려고 한다. https://www.npmjs.com/package/react-calendar react-calendarUltimate calendar for your React app.. Latest version: 4.6.0, last published: 2 months ago. Start using react-calendar in your project by running `npm i react-calendar`. There are 422 other projects in the npm registry using react-calendar.www.npmjs.com react-calendar 설치np.. 2023. 9. 17. [React] Styled-components에서 스크롤 애니메이션 구현 Introduction스크롤 y 값을 통해서 특정 스크롤 위치가 되었을 때 애니메이션을 실행하는 코드를 구현해보려고 한다. 1. React에서 스크롤 이벤트 적용하기function App() { const [scr, setScr] = useState(0) // 스크롤 높이를 나타내는 변수 // addEventListener 를 이용하여 스크롤 이벤트가 발생할 때마다 scr를 갱신 useEffect(() => { window.addEventListener('scroll', (e) => { setScr(window.scrollY); }); return () => { window.removeEventListener.. 2023. 8. 31. [React-Native] Firebase에 이미지 업로드 Instroduction Firebase의 storage에 이미지를 업로드하는 방법을 알아보려고 한다. // result {"assets": [{"fileName": "rn_image_picker_lib_temp_a56ab75e-5409-4700-8f51-6a4611a148ae.jpg", "fileSize": 199797, "height": 1280, "type": "image/jpeg", "uri": "file:///data/user/0/com.android_rn/cache/rn_image_picker_lib_temp_a56ab75e-5409-4700-8f51-6a4611a148ae.jpg", "width": 960}]} 이미지를 선택하고 나서 result로 출력되는 객체는 다음과 같다. 여기서 fil.. 2023. 6. 1. [JavaScript] 버튼 클릭 시 전주, 차주 이동 Introduction다음 동영상과 같이 back 버튼을 누르면 전주로, next 버튼을 누르면 차주로 날짜가 바뀌는 것을 JavaScript로 구현해보려 한다.대략적인 순서는 다음과 같다.1. 현재의 날짜 범위 중 시작 날짜를 가져온다. (ex. 2023-02-06)2. 전주 이동과 차주 이동을 구분한다.3. for문을 이용하여 현재 날짜의 전주/차주를 월~일 순으로 객체 생성한다.4. 생성된 객체의 일자를 각각 요일에 맞게 순서대로 삽입한다.5. 새로 생성된 날짜 범위를 갱신한다. ※ 이때, 전주/차주의 기준점이 되는 주는 항상 화면에 렌더링 된 것을 가져와 사용한다.ex) 현재 날짜 범위가 2023-02-06 ~ 2023-02-12 에서 차주 버튼을 누르면 현재 날짜 범위는 2023-02-13 ~ .. 2023. 2. 25. 이전 1 2 3 4 5 ··· 7 다음
