본문 바로가기
반응형

notion/react_info4

react input 특정 부분만 마스킹하기 Iuput 태그에서 일부분만 마스킹하기 화면을 개발하는 도중 유저의 첫번째 아이디만 제외하고 전부 마스킹을 해달라고 했다. 정확한 오더는 아래와 같다. 유저가 입력할 때는 입력하는 내용이 보여야한다. 유저가 다른 곳을 클릭하면 첫글자를 제외한 나머지는 마스킹을 해야된다. 유저가 아이디를 수정하면 리셋을 해야된다. 위 내용과 같이 코드를 구현하는데, 한번 해두면 두고 두고 쓸 것 같아서 메모를 해둔다. 확실히 리액트는 이것저것 코드들을 좀 정리를 해두어야하는데, 너무 귀찮다. const [userId, setUserId] = useState(''); const [maskingUserId, setMaskingUserId] = useState(''); const handleChangeUserId = (id) .. 2021. 2. 24.
체크박스 테스트 파일입니다. 체크박스 테스트 파일입니다. 우선 선택 햇을 때 돌아갈 것입니다. 저도 테스트를 못해봤습니다. import React,{useMemo, useState, useEffect} from 'react' const init_row = [ { label:'user000' } , { label:'user001' } , { label:'user002' }, { label:'user003' }, { label:'user004' }, { label:'user005' }, { label:'user006' }, { label:'user007' }, ] const ListTester = () => { const [list, setList] = useState(null) const handleClickCheckBox = (se.. 2021. 2. 7.
javascript firefox 에서 날짜가 에러가 나는 경우 firefox 에서 날짜와 dayjs 가 오류가 나는 경우 Front 개발시 날짜 관련 npm 중에서는 dayjs package를 자주 사용하게 된다. 개인적으로 moment 보단 훨씬 가볍고 사용법도 간편하여 자주 쓸 수 밖에 없다. 하지만 개발을 chrome 에서만 하다보니 firefox 에서 날짜가 NaN 이나 invalid date 에러가 나는 줄 몰랐다. 대략적으로 내용을 찾아보다보니 chrome 과 firefox가 날짜의 형태가 달라서 에러가 나오는 것라고 한다. 또한 이건 dayjs 의 문제가 아닌 new Date() 를 사용 했을 때, 나오는 날짜의 값이 Chrome 과 Firefox가 다르다는 것이다. 예를 들어 2013-08-08 11:52:18 UTC의 date 형태를 2013-08-.. 2021. 2. 4.
eslint 경로 에러와 절대경로 지정(.eslintimport/no-unresolved) eslint의 경로에 경고가 뜨는 에러 eslint를 설치를 하고 메인 페이지를 작성을 했는데,경고가 나왔다. 위 이미지를 봤을 때 처럼 경고가 나온다. > module "/Users/xers/Desktop/local_xers/proj/github/custom_react/src/pages/MainPage" Unable to resolve path to module '~/pages/MainPage'.eslint import/no-unresolved Peek Problem (⌥F8)Quick Fix... (⌘.)예시코드 import React from 'react'; import {BrowserRouter, Switch, Route} from 'react-router-do.. 2021. 1. 29.
반응형