진혀크의 코딩잼

프로젝트를 진행하던 중 성능 관련 이슈가 발생했습니다. 이런 저런 시도를 해가며 성능 개선을 하기 위해 노력했고 그 과정에서 배운 일부분을 공유하고자 글을 적게 되었습니다. 내 웹어플리케이션의 전체적인 평가가 궁금할 때 가장 쉬운 방법으로 크롬 개발자 도구가 지원해주는 Lighthouse가 있습니다. F12를 눌러 개발자 도구를 킨 후 Lighthouse를 선택하면 다음과 같은 화면을...

프로젝트를 진행하던 중 성능 관련 이슈가 발생했습니다. 이런 저런 시도를 해가며 성능 개선을 하기 위해 노력했고 그 과정에서 배운 일부분을 공유하고자 글을 적게 되었습니다. 문제 상황 🤷‍♂️ 이미 문제를 해결한 이후에 글을 적게 되어 비슷한 상황을 예시로 보이고자 합니다. 위의 화면에서 사각형으로 Highlight가 되는 부분이 리액트가 리렌더링을 하는 부분들 입니다....

공부를 하며 블로그 글을 쓰기 때문에 틀린 부분이 있을 수 있습니다. 혹시라도 틀린 부분이 있을 경우 바로 잡아주시면 감사드립니다. 문제 상황 🤷‍♂️ 로그인, 회원가입 기능을 구현하던 중 예외 처리를 체크해야 할 일이 생겼습니다. 로직 자체는 그렇게 어렵지 않았으나 사용자가 입력할 때 마다 상태값이 변하면서 리렌더링이 될 것이고 예외 처리를 하는...

문제 상황 🤷‍♂️ 타입스크립트를 활용하여 프로젝트를 진행하던 중 다른 분이 제작해주신 컴포넌트를 재사용하여 새로운 컴포넌트를 만들어야 하는 일이 생겼습니다. 새롭게 제작해야 하는 컴포넌트는 LoginModal 컴포넌트였는데 현재 Modal 컴포넌트가 organisms 레벨의 Modal 안에 molecule 레벨의 컴포넌트를 만들어서 갈아끼우는 형태를 띄고 있었기에 LoginModalContent라는 molecule 컴포넌트를 제작하고 상황에 맞게 주입 시키고자 했습니다. 기존에...

함께 프로젝트를 진행하고 있는 우진님께서 정리해주신 MobX에 관한 학습 자료입니다. 본격적인 프로젝트를 앞두고 어떤 상태관리 라이브러리를 사용할까 고민하다 Redux와 MobX로 의견을 좁히게 되었고 둘의 차이를 알아본 후 선택하자는 이야기가 나왔습니다. 우진님께서 이 부분을 담당해주셨고, 우진님의 허락을 받고 정리해주신 문서를 공유합니다. MobX란? 상태관리 라이브러리 React와 함께 사용하는 상태 관리 라이브러리중 Redux와...