개발/리액트 29 [리액트] 다이나믹한 웹을 향하여 (framer-motion, lottie) 들어가며 텍스트로 이뤄졌던 웹이라는 공간이 이미지, 스타일을 넘어 동적이고 유저와 티키타카하는 공간이 되어가고 있습니다. 이런 공간을 만들어야 하는 프론트엔드 개발자로서 항상 css는 두려움과 귀찮음의 공간이기 마련입니다. 하지만 디자이너님이 뽑아준 대로 이쪽으로 나왔다 저쪽으로 들어가는 화려한 애니메이션과 이미지를 멋지게 랜더링 하고 조작할 수 있게 도와주는 좋은 라이브러리들이 있습니다. 이번 글에서는 바로 css로 하기 어려운 작업을 간단하게 도와주는 라이브러리 2개를 소개해드리는 글입니다. 바로 lottie와 framer-motion입니다. 그럼 한번 프로젝트에 적용을 하러 가보겠습니다.!! framer-motion 란? framer-motion의 공식문서상 이를 아래와 같이 설명하고 있습니다. M.. 2022. 5. 7. [리액트] useEffect와 useLayoutEffect | 비교시리즈 들어가며 리액트를 사용하다 보면 useEffect와 useLayoutEffect 훅을 마주하곤 합니다. 생긴 것도 비슷하고 실제 공식문서상에서도 둘은 같다고 말합니다. 오히려 useEffect 쓰라고 합니다. 그래도 useLayoutEffect를 만든 이유가 있을테고, 저 또한 깜빡임 관련된 이슈를 수정하기 위해 useLayoutEffect를 사용했습니다. 그래서 이번 글에서는 useEffect와 useLayoutEffect에 대한 설명과 코드 단에선 어떤 차이가 있는지 알아보도록 하겠습니다. 질문 | useEffect 와 useLayoutEffect를 비교해라 useEffect는 랜더링된 이후에 동작하는 hook이고 useLayoutEffect는 랜더링 되기 이전에 동작하는 hook이다. 네 끝났습니다.. 2022. 3. 31. [리액트] 유령 의존성부터 시작된 yarn berry 도입기 동료 개발자의 기능을 확인하다가 제 환경에서만 동작하지 않는 에러를 발견했습니다. 이번 글에서는 문제 발생부터 원인 파악, 그리고 해결한 방법. 그다음에 유령의존성이 발생한 이유, yarn berry를 도입하여 휴먼에러를 방지한 후기에 대해 정리해보았습니다. 문제 발생 문제의 발견은 git pull를 하고 제 컴퓨터에서 yarn start를 한 시점부터 시작됩니다. 특정 기능이 추가돼서 확인차 기능을 사용했는데 다음과 같은 에러와 함께 기능이 동작을 안 합니다. [Mobx] Observable arrays cannot be frozen 해당 에러가 발견된 위치를 추적해보니 immer의 produce를 사용하는 코드에서 발생했습니다. 에러 로그를 보면 Mobx의 Observable arrays는 froze.. 2022. 2. 16. [리액트] VAC 패턴 적용 후기 및 장단점 VAC 패턴을 접하고 리뷰? 글을 쓴 지 어느덧 반년이 되었습니다. 나름 빨리 글을 작성한 것인지 이젠 VAC 패턴을 검색하면 상위에 랭크되는 글이 되었네요. 글을 작성한 이후로 새로운 프로젝트에 VAC 패턴을 적용해서 프로젝트를 진행해보았습니다. 나름 장점도 있었고 단점도 있어서 이번 글에선 요런 내용들을 정리해보면서 후기를 작성해보려고 해요. VAC 패턴이란 ? View Asset Component의 준말로, JSX와 Style를 관리하여 UI와 비즈니스 로직을 분리하는데 목적을 둔 컴포넌트 설계 방법론입니다. 위의 사진이 VAC 패턴을 설명하는 가장 기초적인 이미지인데요. 사진으로 느낌이 안 오니 직접 코드를 보면서 살펴보겠습니다. const SpinBox = () => { const [value,.. 2022. 2. 3. 이전 1 2 3 4 5 6 ··· 8 다음
