자바스크립트에서 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를 통해 상태 관리 라이브러리의 이용 추이를 확인해본 이미지입니다. 역시 아직까지는..
React의 Component 에는 Life Cycle(생명주기)이 존재합니다. 라이프 사이클은 Component가 생성(Mount), 업데이트(Update), 제거(UnMount) 될 때 특정 이벤트를 호출하는 것입니다. 이러한 Life Cycle을 다루기 위해 리액트 클래스 컴포넌트는 Lifecycle Method를 사용하고, 함수형 컴포넌트는 Hook을 사용합니다. 이번 포스팅은 리액트 클래스 컴포넌트의 Lifecycle Methods에 대해 알아보겠습니다. 이번 포스팅에선 이전 포스팅에서 다룬 클래스 컴포넌트 개념과 React Hooks의 개념이 일부 사용되고 있습니다. Class Componet 생명주기 Lifecycle Methods는 한국어로 "생명주기 메서드" 라고 부릅니다. 생명주기 메서..
최근 진행한 Frontend 스터디 시간엔 React Hooks에 대한 학습을 진행하였습니다. React Hooks는 React 16.8 버전(2019년도)에 추가된 공식 라이브러리입니다. 제가 항상 강조하는 부분이지만 어떤 기술 스택을 배우기 이전에 '도입하게된 이유'를 학습하는 것은 해당 기술에 대한 다채로운 이해를 돕습니다. 따라서 이번 React Hooks 포스팅은 Hook의 도입 이전에는 어떠한 방식을 사용했고, React Hooks는 왜 도입하게 되었으며, React Hooks의 종류와 사용법에 대해 정리하였습니다. 이번 포스팅은 '이야기'의 형식을 사용하여 평소보다는 긴 호흡으로 작성하였습니다. Class Component와 Function Component 과거 React는 Class Co..
Ruby on Rails의 개발자 데이비드 하이네마이어 핸슨(이하 DHH)의 Turbo 8 is Dropping TypeScript 포스트가 최근 화제를 모으고 있습니다. 최근 Svelte 또한 프레임워크 개발 시 TypeScript를 사용하지 않는 방향으로 전환하기도 해서 더욱 눈길이 가는 소식입니다. 해당 게시물은 여태까지 왜 TypeScript를 배우고 프로젝트에 사용해야하는지에 대해 별다른 비판없이 수용하던 저에겐 상당히 충격적인 내용을 다루고 있었습니다. 기회가 된다면 원문 전체를 옮겨보고 싶지만 오늘은 해당 게시물의 중요 포인트에 대해서만 다뤄보겠습니다. Turbo 8 is dropping TypeScript 원문 내용 DHH(David Heinemeier Hansson)가 제기한 TypeSc..
React에서 개발을 진행하신 분들은 아마 한번쯤은 JS확장자와 JSX확장자를 언제 사용해야 하는가에 대한 의문이 드실 수 있습니다. 대부분의 React강의를 보면 JSX확장자를 이용하여 개발을 진행하면 된다고 하는 경우가 일반적입니다. 하지만 간혹 JS확장자로 파일을 만들고 컴파일을 진행해도 에러 문구 없이 정상적으로 컴파일이 되는 경험을 하실 수 있습니다. 그렇다면 왜 jsx확장자를 사용하여 파일을 생성하라고 권장할까요 ? js와 jsx의 차이는 무엇일까요 ? 이러한 궁금증은 Typescript를 적용하여 React프로젝트를 진행할 경우 더욱 커지게 됩니다. 대부분의 강의 및 자료에서 TS확장자와 TSX확장자를 명확히 구분하여 사용하는데, '어떠한 기준'을 바탕으로 이를 구분하는지 모르고 사용하는 경..