본문 바로가기
반응형

react7

react-app-rewired 와 customize-cra를 사용하여 CRA eject 안하고 babel 설정하기. create-react-app 에서 eject를 사용하면? eject를 사용하는 머리 좋은 똑똑한 사람들이 있지만, 나는 돌고래 지능이라서 해놓고 감당도 안되고, 원복도 안되고, 개빡치면서 관리가 안된다. eject를 안하고 babel 과 webpack 를 설정을 하려고 여러가지를 찾아보니까 craco와 react-app-rewired, customize-cra같은 패키지가 있었다. 이름이 맘에 들어서, react-app-rewired와 customize-cra를 사용해보려고 한다. react-app-rewired 와 customize-cra 란? react-app-rewired 홈페이지 customize-cra 홈페이지 앞서 위에서 말한 그대로 eject를 안하고 babel, webpack을 설정할 수.. 2021. 3. 16.
useEffect, useMemo, useCallback 사용 후기 말처럼 useEffect, useMemo, useCallback 사용하고 난 후 느낀점 음...리액트 class 방식에서 hook 방식으로 넘어오면서 많은 어려움이 있었다. 특히 didMount 와 didUpdate는 너무나도 편리하게 사용을 했었었다. 개인적인 생각으로 didMount 와 didUpdate가 있어서 많은 편리함이 있어서 hooks에서 지원을 했으면 좋겟다라는 생각을 하긴한다. 물론 지원을 해주는 패키지? 같은게 있긴하다. 필요하다면 찾아서 올려보도록 하겠다. 무튼 쉽게 내가 쓰면서 기억을 해두려고 메모를 해보려고 한다. 배치 순서 useRef useContext useState 작업 함수들 useMemo useCallback useEffect return JSX 개발할 때는 위 순으로 .. 2021. 2. 26.
react input 특정 부분만 마스킹하기 Iuput 태그에서 일부분만 마스킹하기 화면을 개발하는 도중 유저의 첫번째 아이디만 제외하고 전부 마스킹을 해달라고 했다. 정확한 오더는 아래와 같다. 유저가 입력할 때는 입력하는 내용이 보여야한다. 유저가 다른 곳을 클릭하면 첫글자를 제외한 나머지는 마스킹을 해야된다. 유저가 아이디를 수정하면 리셋을 해야된다. 위 내용과 같이 코드를 구현하는데, 한번 해두면 두고 두고 쓸 것 같아서 메모를 해둔다. 확실히 리액트는 이것저것 코드들을 좀 정리를 해두어야하는데, 너무 귀찮다. const [userId, setUserId] = useState(''); const [maskingUserId, setMaskingUserId] = useState(''); const handleChangeUserId = (id) .. 2021. 2. 24.
javascript 문자 길이와 공백 체크하기[react][maxLength ] 리액트.js에서 개발하다보니 문자길이를 바이트로 해결해야했다. 문제 문자열를 입력받고, 공백만 입력한 경우를 체크해야한다. 화면을 구현하다보니 문자입력 제한을 해야하는 경우가 있다. maxLength를 사용하면 문자 제한을 두었다. 여기서 의도치 않는 에러가 발생하였다. //입력 데이터 가나다라마바사아자차가나다라마바사아자차가나다라마바사아자차가나다라마바사아자차가나다라마바사아자차 그냥 입력할 때는 위 처럼 50자가 잘 제한이 되었다. [에러부분] 위 이미지처럼 끝에 자음이나 모음 혹은 예상치 못한 값들을 입력하고 다른 곳을 클릭을 하면 입력이 되었다. 문자 갯수로도 해도 되지만, 이번에는 바이트로 계산을 하여 공백을 제한하고, 문자열에 제한을 두려고 한다. 쉽게, 100자를 입력한다. 공백만 입력을 했을 경.. 2021. 2. 23.
react styled-components 와 react-nomalize 적용하는 법 리액트 react-nomalize 적용하기 react-nomalize styled-components nomalize를 적용하기 위해서 위해 설치를 한다. 세팅을 편하게 하기 위해 두가지 패키지를 설치한다. ✗ npm install --save styled-normalize styled-components /src/assets/styles/global-styles.ts import styled,{createGlobalStyle, css, keyframes } from 'styled-components'; import { normalize } from 'styled-normalize' export const GlobalStyle = createGlobalStyle` ${normalize} html { fo.. 2021. 2. 22.
반응형