어리둥절 분석가 그리고 개발자

✔️ useRef가 필요한 상황 JavaScript를 사용할 때에 화면 상에서 특정 대상을 선택해야할 때가 있다. 이것을 특정 DOM을 선택한다고 얘기한다. 리액트가 아니라 Vanilla JavaScript를 쓸 때는 getElementById, querySelector 같은 selector 함수를 활용해서 선택한다. 리액트를 사용할 때에도 아주 드물게 DOM을 직접 선택해야하는 경우가 있다. focus를 선택해주거나 두 개 컴포넌트의 싱크를 맞출 때 (pagination 등) 필요하다. 그 때 ref를 사용하고, useRef는 ref를 설정해주는 역할을 한다. ✔️ 예시 useRef()를 통해서 inputSpace라는 ref 객체를 만들었고, 이 객체를 선택하고 싶은 태그에 ref 값으로 넣어줬다. 이..

✔️ 필요성 서로 다른 효과를 가진 css 코드를 하나의 컴포넌트에 병합해서 적용할 때 사용한다. array[ ] 로도 병합이 가능하지만 true/false boolean을 이용해서 특정 효과를 적용할 지 적용하지 않을 지 선택하는 것이 가능하다. ✔️ 설치 아래처럼 Dimensions를 활용해서 스크린의 너비를 가져오거나, 혹은 다른 어떤 value 값으로 지정해놓고 참조할 때 px를 까먹는 경우가 생길 수 있다. 나처럼... // 둘 중에 하나 yarn add classnames npm install classnames ✔️ 사용 예시 (1) 아래 예시를 잘 보면 생각보다 사용하는 방법은 쉽다 className={classnames('box-info', 'mg-10')} // 'box-info mg-..

✔️ eslint 설치 npx eslint --init ? How would you like to use ESLint? ❯ To checkt syntax, find problems, and enforce code style ? what type of modules does your project use? ❯ JavaScript modules (import/export) ? Which framework does your project use? … ❯ React ? Does your project use TypeScript? ❯ Yes ? Where does your code run? ✔ Browser ? How would you like to define a style for your project? … ..

2021년 11월에 react-router-dom이 그간의 v5에서 v6로 업그레이드하였습니다 이에 맞춰서 코드를 변환시키다보니 react에서 현재 url을 가져오는 부분이 바뀌어서 조금 애를 먹었습니다. 기존에는 아래처럼 useRouteMatch()를 사용하고 있었어요 import { Link, useRouteMatch } from 'react-router-dom' import { useHistory } from 'react-router' ... const { path, url } = useRouteMatch() const key = useRecoilValue(keyState) const history = useHistory() const clickHandler = () => { history.push..

✔️ 필요성 react-native로 한동안 개발하다가 다시 react 프로젝트를 만들려고 하니 다음과 같은 에러가 발생했다 npx create-react-app project-name --template typescript You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remo..

필요성 Alarm이라는 컴포넌트를 만드는데, Alarm의 props 값을 받아서 Alarm 내의 state 초기값으로 설정하고 싶다. 이렇게 하면 될까? // pushAlarmStatus : props const [alarmStatus, setAlarmStatus] = useState(pushAlarmStatus); const Alarm = ({ pushAlarmStatus }: Props) => { const [alarmStatus, setAlarmStatus] = useState(pushAlarmStatus); console.log(alarmName, 'status:', alarmStatus); console.log(alarmName, 'status:', pushAlarmStatus); return ..

타이핑 애니메이션 화면에서 글자를 보여줘야 하는데 타이핑되는 애니메이션이 필요한 경우가 종종 있다. 이 때 쓰기 좋은 라이브러리가 typewriter-effect이다. 아래 npm에 예제도 굉장히 설명이 잘 되어 있어서 쓰기가 쉽다. https://www.npmjs.com/package/typewriter-effect typewriter-effect [](https://circleci.com/gh/tameemsafi/typewriterjs) www.npmjs.com 기본 예제 글씨가 적힌 다음에 잠깐 쉬거나, 다시 글자를 지우거나 하는 효과를 chain 형태로 엮어서 사용할..

Fullpage 란? 요즈음, 스크롤을 한 번 슥슥 내릴 때마다 화면 전체가 슬라이드처럼 내려가는 효과를 입힌 웹사이트를 여러 곳에서 발견할 수 있다. 최근에 개인적으로 가장 인상깊었던 사이트는 티맵모빌리티 웹사이트인데, 동영상과 fullpage를 적절히 잘 사용했다고 생각했다. 리액트 fullpage 에러 모듈 '@fullpage/react-fullpage'에 대한 선언 파일을 찾을 수 없습니다. '[프로젝트명]/node_modules/@fullpage/react-fullpage/dist/react-fullpage.js'에는 암시적으로 'any' 형식이 포함됩니다. 해당 항목이 있는 경우 'npm i --save-dev @types/fullpage__react-fullpage'을(를) 시도하거나, 'd..