Redux Toolkit와 관련한 레퍼런스를 알아보던 중 흥미로운 Reddit Discussion을 읽었습니다. 의견 작성자는 Redux가 Context API의 어떠한 문제점을 해결해주는지에 대해 발제하였고, 이에 대해 Redux 개발팀의 maintainer가 답변을 달았습니다. maintainer분이 댓글로 달아준 내용도 의견 작성자의 질문에 대한 충분한 답변이 되었지만, 레퍼런스로 남겨주신 Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)에서 이에 대한 보다 심도깊은 내용을 다루고 있었기에 공유해보고 싶었습니다. 원문의 내용을 최대한 온전히 전달하고자 노력했으며, 추가적인 이해가 필요한 부분은 별..

프론트엔드의 관점에서 UX는 중요한 관심사입니다. 종종 다채롭고 직관적인 UI가 좋은 UX를 제공할 것이라고 생각하고 개발을 진행하기 쉽지만, 때로는 사용자의 편의를 위해 제공한 기능이 사용자에게 혼란을 가중시키곤 합니다. 이러한 측면에서 프론트엔드 개발자는 좋은 UX를 보장하는 원칙들에 대해 공부하고 고민해야 합니다. 여러분들은 이모지(Emoji)를 언제 사용하시나요? 저의 경우엔 메신저를 통해 대화를 할 때, 사적인 메일을 보낼 때 이모지를 자주 사용합니다. 그리고 때로는 공적인 포스팅과 문서를 작성할 때도 분위기를 편하게 가져가기 위해 이모지를 사용하고 있습니다. 이처럼 이모지는 복잡한 아이디어를 쉽게 전달하는 데 도움이 됩니다. 하지만 부주의한 이모지의 사용은 일부 사용자에게 불편을 야기할 수 있..

React에서는 전역상태 관리 라이브러리를 사용하여 체계적인 상태관리를 할 수 있습니다. React에서 활용되는 상태 관리 라이브러리들은 여러 개가 있습니다. 대표적으로 Redux, Recoil, Zustand, Jotai, MobX 등이 존재합니다. 그렇다면 이렇게 많은 상태 관리 라이브러리중에 어떤 라이브러리를 사용하면 좋을까요? 제 경우 사이드 프로젝트의 경우 가볍게 Recoil, Zustand를 많이 사용하곤 합니다. 저의 멘토님은 MobX의 열렬한 신봉자(?)이시고, 지인 중 한명은 Jotai 아이콘이 귀엽다는 이유로 Jotai공부를 최근에 시작했습니다. 물론 위와 같은 가벼운 이유로 상태 관리 라이브러리를 선정하기엔 리액트에서 상태 관리는 굉장히 큰 이슈입니다. 자신의 상황, 회사 내부 상황을..

Create React App으로 리액트 앱을 생성해본 적이 있으신 분들은 한번씩 App.test.js 파일을 들어본 경험이 있으실 겁니다. 제가 처음 React를 배웠을 땐 생성과 함께 과감하게 삭제해도 되는 파일로 간주하곤 했습니다. React는 생성과 함께 기본적인 테스팅 과정에서 React Testing Library를 사용하고 있습니다. 이러한 React Test Library는 App.test.js에 자동으로 추가되기 때문에 개발자는 프로젝트 생성과 함께 npm test 명령어를 실행해도 정상적으로 테스트가 동작하는 것을 확인할 수 있습니다. 이와같이 React에선 다양한 방식으로 테스트 코드를 작성하여 코드를 테스팅할 수 있습니다. 이번 포스팅에선 React Test를 진행할 때 알아야 할 ..

자바스크립트에서 HTTP Requests를 위한 방법에는 ajax, fetch, axios 등의 방법이 있습니다. 그 중 axios는 자바스크립트 어플리케이션에서 서버와 통신할 때(=데이터를 가져올 때) 사용되는 대표적인 HTTP 비동기 통신 라이브러리입니다. 현대 웹 환경에서 서버에서 데이터를 받아오는 일은 axios를 기반으로 이루어지고 있습니다. React-Query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리입니다. 자세한 장단점은 향후 Ajax - Fetch API - Axios - React Query를 정리하는 포스팅으로 소개드릴 예정입니다. React-..

여러분들은 개발자가 되고 싶은 이유가 있으신가요 ? 처음 React를 접하며 프론트엔드 개발을 시작할 당시 저는 GitHub라는 방대한 오픈소스 커뮤니티가 가지는 매력에 사로잡혔습니다. 분명 '코드'는 나의 자산이기때문에 Private하게 보관하고 남들에겐 숨길줄 알았지만 GitHub에는 자신의 코드를, 나아가 기업의 코드를 다른 개발자한테 공개적으로 선보이고 검증받는 자생적인 생태계가 자리 잡혀 있었습니다. 특히 지금까지도 사용하고 있는 React도 오픈소스 라이브러리라는게 아직도 믿기지가 않곤 합니다. 저는 개발을 처음 접했을 때부터 지금까지 개발자가 되고 싶은 이유가 한결같습니다. (낭만이 한 컵 들어갔지만요) 언젠가 오픈소스 저자가 되어 다른 개발자들과 오픈소스 생태계에 기여를 하자 하지만 '오픈..

웹 개발 작업에서 CSS를 통해 UI를 만드는 작업은 생각보다 까다로운 작업입니다. 분명 다른 작업에 비해 절대 난이도는 높지 않은거 같은데 생각보다 시간이 걸려 난처했던 경험은 프론트엔드 개발을 하시는 분들은 한번씩 있으실 겁니다. UI 개발은 결과물을 빨리 낼수록 디자인과 기획을 검증하는 시간을 줄일 수 있고 이는 곧 더 나은 제품을 만드는 결과로 이어지기에 CSS 개발의 생산성이 높아지는 방법에 대한 고민은 CSS의 첫 등장부터 현재까지 끊임없이 뜨거운 이슈로 다뤄지고 있습니다. 그 중 현재 CSS 프레임워크 중 가장 선두에 있으며 동시에 논란이 되고 있는 Tailwind CSS와 관련하여 향후 포스팅을 진행하기에 앞서 Tailwind CSS가 내세우는 Utility-First(본 포스팅에선 Ato..

React에서는 전역상태 관리 라이브러리를 사용하여 체계적인 상태관리를 할 수 있습니다. React에서 활용되는 상태 관리 라이브러리들은 여러 개가 있습니다. 대표적으로 Redux, Recoil, Zustand, Jotai, MobX 등이 존재합니다. 그렇다면 이 중에 어떤 상태관리 라이브러리를 사용해야할까요 ? 사실 이 문제에 정답은 없습니다. 지인들을 대상으로 간단한 설문을 진행한 결과만 보더라도 Redux, Recoil, MobX, Zustand 등을 실제 사용하고 있었고 회사별, 업무별로 사용하는 라이브러리가 달랐습니다. 그렇다면 어떤 상태관리 라이브러리를 배워두는 것이 향후 도움이될까요? 다음은 npm trends를 통해 상태 관리 라이브러리의 이용 추이를 확인해본 이미지입니다. 역시 아직까지는..