ESM from CommonJS vscode를 사용하는 프론트엔드 개발자를 위한 팁 - https://www.vscodecandothat.com/ CSS Auditing Tools CSS Generators 모두를 위한 프론트엔드 테스트 React 사용을 중단해야 하는 이유 - 중단할 필요까지는 없겠지만 많은 부분에 있어서 공감이 가는 내용을 담고 있다. 리액트는 단순히 라이브러리 수준으로 제공하고 있기 때문에 모든 것을 제공하는 앵귤러 같은 프레임워크를 선호하는 것도 이해가 간다. 리액트 개발자로써 여러 회사 수준에서 혹은 프로젝트 수준에서 여러 리액트 프로젝트를 경험했다. 리액트 프로젝트 마다 서로 고유의 아키텍처로 구현되어 있기 때문에 단순히 리액트를 해봤다고 해서 어떤 리액트 프로젝트든지 빠르게 ..

컴포넌트 내부에서 state 변경을 하는 비동기 호출을 하면서 발생하는 문제로 테스트 코드 두번째 함수에 async 를 붙여주면 해결됨 test('async test', async () => { await act(async () => { ... }) }) 참고 medium.com/@bmb21/reacts-sync-and-async-act-caa297b658b0

애니메이션 작업을 하고 있었다. react-spring 라이브러리를 사용했다. transition 사용시 주의해야 할 점은 map을 통해서 render 할때 transtion에서 준 속성을 통해서 그려야 한다는 점이다. 다른 속성을 넘겨줘서 그리면 의도치 않은 애니메이션 효과가 발생하게 된다. 최근에 react 개발도구에서 re-render시 화면에 깜빡이는 라인이 제거되어 릴리즈되었다. 리액트 개발자는 re-render에 너무 연연하지 말고 구축하는게 좋다는 의미에서 제거했다고 한다. 하지만 github에서 토론되는 모습을 보면 많은 개발자들이 아쉬워하고 해당 기능을 다시 포함시키길 원하는 모습이다. 프로젝트를 진행하면서 나도 개발툴에서 깜빡이는 모습을 줄이기 위해서 최적화를 많이 시도했다. 자체 컴포..

리액트 개발시 문제가 없는데 product로 빌드 후 발생하는 문제 product로 빌드 했다는건 코드가 압축되고 변형되었다는 건데 컴파일된 코드 때문에 발생한 문제일 확률이 높다. 컴파일 후 발생하는 문제는 사실 디버깅하기 매우 힘들기 때문에 난감하다. 문제로 예상되는 코드들을 하나씩 제거해가며 범위를 좁히거나 다른식으로 변형에서 사용하는 방식으로 찾아내곤 하는데.. 어쨌든 나의 상황은 export const ChartRoutes = props => ( ... ) export 해준 위의 ChartRoutes 함수가 사용하는 곳에서 정의되어 있지 않은 상태로 인식하고 있었다. 변수가 아닌 function 으로 정의해주니 문제가 간단히 해결되었다. 아마 hoisting과 관련된 문제로 생각된다. 문제는 해..

리액트를 다루는 기술 - 김민준 velopert 라는 닉네임으로 더 유명한 분이 출간한 리액트 입문 서적으로 리액트와 관련하여 구글에서 검색하면 제일 많이 나오는 페이지가 이 저자분의 블로그가 아닐까 싶다. 본인도 리액트를 처음알았던 몇년 전부터 자주들렀던 블로그인데 포스트 하나에도 정성과 고생이 느껴졌다. 이 책은 그 정성과 고생으로 나온 결과물로 보인다. 책 내용 중 많은 부분이 실제로 블로그에서 다뤘던 내용인데 이를 좀더 순차적으로 접근할 수 있게 책으로 담아냈다. 개인적으로 블로그에 자주 들렀던 편이기 때문에 책에 담겨져 있는 내용들을 많이 알고 있는 편이다. 그래서 블로그와는 다른 내용을 기대했었는데 기존 블로그에 포스팅된 내용과 유사한 부분이 많아서 아쉽다. 그래도 복습겸 내용을 하나하나 따라..