react 40 [리액트] 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. [Next] Tailwind CSS 도입 및 세팅(feat.Next 12) Tailwind CSS 란? 공식홈페이지의 설명을 살펴보겠습니다. "HTML에서 떠나는 일 없이 빠르게 모던한 웹사이트를 빌드해줄수 있게 하는 프레임워크" 라는 설명으로 시작합니다. 어떤걸 보여주는가 | BEM 전통적인 방식의 CSS 중에 유명한 것으로는 BEM이 있습니다. BEM은 Block, Element, Modifier의 앞글자들을 합친것으로 각각 __와 --로 구분합니다. .header__navigation--navi-text { color: red; } 이렇게 class를 통해 스타일을 정의하고 각각의 HTML element에 입히게 되는 구조입니다. 따라서 어떻게 보이는가 보다는 "어떤걸 보여주는가" 에 초점을 맞춘 방법론입니다. 예를 들자면 위의 CSS는 header 블록의 navigati.. 2022. 1. 5. 이전 1 2 3 4 5 6 7 8 ··· 10 다음
