콕콕이라는 앱의 어드민 웹을 개발해서 사용하던 중, 신고/문의 확인하려고 웹으로 접속하는 게 귀찮아졌다. 그래서 어드민 웹을 폰에 깔아서 궁금할 때마다 쉽게 접근하고 싶은 욕구가 생겼다. 하지만 앱으로까지 만들고 싶지는 않았다. 앱을 개발해서 운영해 본 결과… 앱이 웹보다 유지보수가 훨씬 힘들었다. 앱스토어의 경우 developer program 때문에 매년 돈도 갖다줘야 하고, ios든 android든 자꾸 자기 생태계를 바꾼다. 그들은 그들

React Redux를 어떻게 적용했는지, Context API와 React Redux는 무엇이 다른지 정리해봤다. React Redux를 적용할 때 Redux Toolkit 을 함께 사용했다. React Redux 공식문서에서도 Redux Toolkit을 사용하길 권장하며, 실제로 사용해보니 작성해야할 코드가 줄어들어 편했다. React Redux Redux는 action이라고 불리는 이벤트를 사용해 상태를 관리하는 패턴이며, React Re

React에서 props drilling을 피하고 싶거나 변수를 전역적으로 사용하고 싶을 때 상태 관리 라이브러리를 사용하곤 한다. React는 상태 관리가 가장 중요한 만큼 관련된 다양한 라이브러리들이 있다. 가장 대중적인 React Redux 부터 Recoil, Justand, Jotai, MobX 등등. 하지만 라이브러리를 사용하기 전에 React 자체 기능을 사용할 줄 알아야 한다고 생각한다. 라이브러리도 React 기능을 사용해서 만들

React 프로젝트에 이미지를 사이즈 생각 안하고 넣었더니 로드하는 데 시간이 오래 걸려 이미지 사이즈를 최적화했다. 이미지 사이즈 줄이기 이미지 크기가 너무 크면 로드하는 데 시간이 걸리고 이미지 크기가 너무 작다면 화질이 저하된다. 그렇다면 이미지는 어느 정도 크기여야 적당할까? 나는 다음 말에 설득되어 이미지가 화면에서 차지하는 픽셀의 두 배 정도 크기로 이미지 사이즈를 조절했다. 단순히 화면에 표시되는 사이즈로 만들어야 한다고 생각할 수

React 프로젝트를 최적화하는 방법 중 코드 분할과 지연 로딩에 대해 알게 되었다. 💡 코드 분할 Code splitting 이란? 하나의 빌드 파일을 한 번에 다운로드하는 대신 여러 파일로 분할해 필요할 때만 다운로드하는 것이다. 초기 리소스 다운로드 시간을 줄일 수 있다. 불필요한 코드 또는 중복되는 코드 없이 적절한 사이즈의 코드가 적절한 타이밍에 로드되는 것이 중요하다. 💡 지연 로딩 Lazy loading 이란? 처음 페이지가 로