월간 크롬 이슈 리포트 2023년 9월호
프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다. (2023년 9월호)
devBlog
React 글 모음
기업 기술블로그의 React 관련 글 92개
React-query 를 사용해 상태관리를 해보자
React-query 를 사용해 상태관리를 해보자 프로젝트를 새로 시작함에 있어 상태관리 라이브러리를 찾아 보던 중, Redux나 MobX 같은 라이브러리 들에 비해 러닝커브가 상당히 낮고 보일러플레이트가 적어 편하게 사용할 수 있는 React Query에 대해 알게되었습니다. 이미 무스마의 많은 개발자 분들이 Reacy query를 개발에 잘 활용하고 계시지만, React Query를 학습하며 정리하는 차원에서 기술블로그에 작성해보려 합니다.
Storybook의 MSW mock 구조 개선
카카오스타일의 파트너센터 서비스에서는 UI 테스트와 문서화를 위해서 Storybook과 MSW를 사용하고 있습니다. Storybook의 각 스토리마다 MSW GraphQL mock을 개별로 정의해서 사용하고 있었는데, 이로 인해 코드가 중복되고 mock 누락으로 인한 오류가 자주 발생했습니다. 이런 문제를 해결하기 위해, 스토리마다 따로 정의된 MSW mock을 한 군데로 모아서 관리할 수 있는 새로운 구조를 제안하고, recast를 사용한 변
반응형 프로그래밍 with RxJS
Higher-Order Components는 여전히 유용하다
Higher-Order Components는 여전히 유용하다 HOC는 공식 문서에서도 알 수 있듯이 ‘컴포넌트 로직 재사용’을 위한 패턴입니다. Hooks가 나온 뒤로는 컴포넌트 로직 재사용을 위해서 Hooks를 주로 사용하기 때문에 HOC를 사용하는 경우가 많이 줄었습니다.
react-query로 데이터 처리하기 - 파트너스 레거시 코드 리팩토링(2) api 로직, react-query
안녕하세요, 플랫폼 개발팀 프론트엔드 개발자 제리입니다. 오늘은 지난 시간에 소개드린 파트너스 서비스의 레거시 코드들을 어떻게 개선하였는지 소개해드리겠습니다. 리덕스 스토어 안의 덕스 패턴에 얽힌 API 분리하기 기존 파트너스 프로젝트는 Redux를 활용하여 전역 상태의 값을 관리하였고 actionTypes , actions , reducer을 하나의
타입스크립트, 리액트쿼리 도입 - 파트너스 레거시 코드 리팩토링(1)
안녕하세요, 플랫폼 개발팀 프론트엔드 개발자 제리입니다. 오늘은 자사 서비스 중, 카카오헤어샵에 입점한 점주분들의 매장관리 웹사이트인 "파트너스 서비스"의 리팩토링을 진행한 이야기를 소개하려 합니다. 리팩토링의 필요성을 합의하기 레거시 코드를 꼭 리팩토링 해야하는 것은 아닙니다. 프로젝트의 규모가 커질수록, 복잡해지는 dependency 때문에 라이브러
Apollo Client Pagination Fetching Guide
리팩터링 가이드 - 좋은 코딩 습관을 기르자
안녕하세요, 비브로스 웹 프론트엔드팀 한혜경입니다~! 😄
찜으로 찜해보는 react-query
도입배경 트렌비 웹페이지는 react-boilerplate 기반으로 작성되었습니다. 그래서 상태관리에 대해서도 보일러플레이트에서 사용한 리덕스(redux)를 그대로 사용해 왔습니다. 리덕스를 사용하는데 있어 큰 문제는 없었으나, 개발과정에서 아래와 같은 몇 가지 불편함이 있었습니다. 첫째, API를 호출하고 그 결과를 화면에 그리기 위해서 해야할 게 너무 많았습니다. 컴포넌트에서 API를 호출하기 위한 액션(action)을 정의해 줘야 합니다.
깔끔한 폼 개발과 정시퇴근을 위하여 react-hook-form
들어가며 안녕하세요 딜리셔스 웹 프론트엔드 개발팀 이경일입니다. react v16.8.0에 등장하여 당시에는 새로운 패러다임이었지만, 이제는 익숙해진 react hook에 관해 이야기 해보겠습니다. 올해 상반기에 개발 완료된 신상스튜디오 내재화 프로젝트에서 폼 관리를 위해 사용한 react-hook-form을 사례 중심으로 빠르게 소개해 보도록 하겠습니다. Stateless functional component & Hook React는 v0.1
Jotai는 조-타이 라고 읽습니다.
신입 웹프론트엔드 개발자 2개월 차 후기
0. 들어가며
함수형 프로그래밍 (Functional Programming) 어떻게 적용할까?
안녕하세요~! 비브로스 웹프론트엔드팀 한혜경입니다. 😁
MSW 사용하여 테스트 코드 작성하기 with GraphQL, react-query
GraphQL Interface 자동생성으로 빠르게 프론트엔드 개발하기
React Hook Form의 isDirty와 dirtyFields를 알아보자
React Hook Form isDirty 웹에서 Form을 다루다 보면 필드 중 하나라도 사용자 입력이 있었는지 알고 싶을 때가 있습니다. React Hook Form을 사용하면 formState 안의 isDirty 또는 dirtyFields 속성을 활용할 수 있습니다.
리덕스 사가(Redux Saga)란 무엇인가?
리덕스(Redux) 리덕스(Redux)의 필요성 리액트(React)는 상태(State)를 가지고 어떻게 돔(DOM)으로 잘 변형할지에 대해 다루고 있습니다. 여기서 상태란 애플리케이션(Application)이 기본적으로 가지고 있는 아주 중요한 요소인데요. 애플리케이션의 규모가 커질수록 상태 즉 데이터를 관리하기가 매우 까다롭기 때문에 상태를 잘 다루고 실제 돔(DOM)으로 업데이트하기까지 이를 도와주는 라이브러리가 필요합니다. 리액트(Reac
페이지 4 / 6 (총 92개)