나만의 개발 일기

React ScrollMagic Example

ScrollMagic 설치 npm install scrollmagic src/components/ScrollMagic.tsx import Magic from 'scrollmagic' import styled from 'styled-components' import { useEffect } from 'react' import classes from './ScrollMagic.module.css' const ScrollMagic = () => { const controller = new Magic.Controller() useEffect(() => { new Magic.Scene({ triggerElement: `.${classes.redBox}`, }) .setClassToggle(`.${classes.r..

Typescript useRef 여러개 사용하기

반복문에 마다 ref 를 주고 싶을 때 어떻게 작업을 해야 할까? ( 오류코드 ) import { useRef } from 'react' import classes from './TopNavigator.module.css' const TopNavigator = () => { const menuRef = useRef(null) return ( {[0, 0, 0].map((_, index) => ( (menuRef.current[index] = e)} > 대메뉴{index + 1} 중메뉴1 소메뉴1 소메뉴2 소메뉴3 소메뉴4 소메뉴5 중메뉴2 소메뉴1 소메뉴2 소메뉴3 소메뉴4 소메뉴5 중메뉴3 소메뉴1 소메뉴2 소메뉴3 소메뉴4 소메뉴5 중메뉴4 소메뉴1 소메뉴2 소메뉴3 소메뉴4 소메뉴5 중메뉴5 소메뉴..

Next Eslint / Prettier ( with Typescript ) 설정하기

1. Next 프로젝트 생성 npx create-next-app@latest * 기본적인 프로젝트 명 , lint 사용 여부 등을 고른 후에 프로젝트를 만들어주자. 2. Eslint 와 Prettier 를 함께 사용하기 위해 다음을 설치합니다. npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier 3. 프로젝트 생성될 때 생긴 .eslintrc.json / js 를 작성합니다. module.exports = { env: { // 전역 변수 사용을 정의합니다. 추가하지 않으면 ESLint 규칙에 걸리게 됩니다. browser: true, es6: true, node: true, }, extends: [ 'eslint:re..

React 상태 관리 라이브러리

프론트엔드 관점에서 상태 관리는 매우 중요하고 필수적이다. 리액트는 기본적으로 state, props 로 상태를 관리한다. 리액트의 데이터 흐름은 기본적으로 부모 -> 자식 이라는 흐름을 가지는데, 자식에서 부모의 상태를 바꾸려면 props 를 넘겨줘야한다. 이를 반복하다보면 props depth가 증가해 불필요한 리렌더링이 일어나 비효율적이다. 즉 상태관리 라이브러리를 사용하자! Redux * Redux는 store 에 모든 상태를 저장한다. store는 오직 하나만 가질 수 있으며, 외부요소이고 리액트 내부에 접근할 수 없다. 이로써 생기는 강점은 하나의 객체 트리를 가지므로 디버깅이 용이하다. * store 내부 상태는 action 을 통해서만 변경이 가능하다. 모든 상태(state) 들이 하나의 ..