frontend
-
[Recoil] Recoil 고수의 길 - snapshot과 useRecoilCallbackFront-End(Web)/React - 라이브러리들 2023. 10. 5. 17:44
지난번, atomFamily와 selectorFamily 포스팅에 이어, Recoil에서 유용하게 쓰일법한 기능을 하나 더 소개하고자 한다. Recoil 상태들의 한 순간인 snapshot, 그리고 이를 다루는 useRecoilCallback 등 다양한 API 기능들에 대해 알아보자! 🔗 기능들을 소개하기 앞서.. snapshot과 관련된 기능들을 소개하기 앞서, 이를 소개하게 된 배경들을 간단히 공유해볼까 한다. 1. useRecoilState와는 다른 atom 활용방법 이전 포스팅에서, Recoil의 atomFamily, selectorFamily 등에 대해 다뤄보았다. (포스팅 링크) [Recoil] Recoil 고수의 길 - atomFamily, selectorFamily 최근 프로젝트들을 진행하..
-
[React] cloneElementFront-End(Web)/React - 프레임워크(React, Next) 2023. 3. 22. 03:15
React로 개발하면서, 공통 UI 혹은 기능을 가진 랩핑 컴포넌트를 만드는 경우가 종종 있다. type Props = ButtonHTMLAttributes; function AddTravelerButton({ children, ...props }: PropsWithChildren): JSX.Element { return ( {children} ); } 이 랩핑 컴포넌트에서 Props로 받은 값으로 특정 속성을 만든다고 가정하자. 해당 컴포넌트에서 이 속성값을 사용하는 건 쉽지만, 내부의 {children} 에 이 속성값을 전달할 방법이 전혀 떠오르지 않았다. 이를 구현하기 위해 리서치해본 결과, cloneElement라는 React의 기능을 활용하면 되었다. 💙 cloneElement const clo..
-
[Form 라이브러리] React Hook FormFront-End(Web)/React - 라이브러리들 2023. 3. 19. 00:37
🧐 개요 이전 포스팅에선, Form 라이브러리를 도입한 배경과 React에서 많이 활용되는 Formik 라이브러리에 대해 포스팅했다. (링크) [Form 라이브러리] formik 🧐 개요 프로젝트들을 진행하면서, 입력 form 컴포넌트를 제작해야 하는 경우가 종종 존재하였다. 특히, 폼 제어를 위한 다양한 기능들이 요구된다. (입력값 관리, 유효성 검사 및 에러상태 관리, abangpa1ace.tistory.com 포스팅 초반부에서 소개했듯, Formik과 더불어 통용되는 라이브러리가 React Hook Form(이하 RHF) 이다. 개인적으론 이 라이브러리에 장점을 더 느꼈으며, 포스팅을 통해 주요개념과 왜 그렇게 생각했는지를 함께 소개해보겠다! * 폼 라이브러리 비교 구분 formik React Ho..
-
[Form 라이브러리] formikFront-End(Web)/React - 라이브러리들 2023. 3. 15. 05:26
🧐 개요 프로젝트들을 진행하면서, 입력 form 컴포넌트를 제작해야 하는 경우가 종종 존재하였다. 특히, 폼 제어를 위한 다양한 기능들이 요구된다. (입력값 관리, 유효성 검사 및 에러상태 관리, 유효성 검사 및 입력값 제출 API 연동, 성공/실패 시의 fallback 로직 등..) 이전 회사의 멤버십 프로젝트에서도, 이러한 기능들을 템플릿화 하기 위해 컴포넌트 커스터마이징 등 많은 시도를 했다. 또, 최근 파트너 프로젝트를 지원하면서, 투어상품을 판매하는 파트너로 가입하기 위해 진행되는 다양한 입력 폼에 대한 제어가 필요함을 다시금 느꼈다. 앞으로도, 입력 폼들에 대한 신규개발 혹은 리팩토링을 대비해, React 환경에서 이를 좀 더 심플하게 구현할 방법들에 대해 리서치한 내용들을 간단히 공유하고자 ..
-
[Type-challenges] 난이도 Medium - (8)Front-End(Web)/Typescript 2023. 2. 28. 00:30
Github 챌린지 문제들을 풀고 관련된 내용을 정리하면서, 부족했던 타입스크립트 기본지식을 다지고자 한다. (주 1-2회) https://github.com/type-challenges/type-challenges GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge github.com 📘 목..
-
[Type-challenges] 난이도 Medium - (6)Front-End(Web)/Typescript 2023. 2. 27. 04:00
Github 챌린지 문제들을 풀고 관련된 내용을 정리하면서, 부족했던 타입스크립트 기본지식을 다지고자 한다. (주 1-2회) https://github.com/type-challenges/type-challenges GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge github.com 📘 목..
-
[Type-challenges] 난이도 Medium - (5)Front-End(Web)/Typescript 2023. 2. 23. 02:18
Github 챌린지 문제들을 풀고 관련된 내용을 정리하면서, 부족했던 타입스크립트 기본지식을 다지고자 한다. (주 1-2회) https://github.com/type-challenges/type-challenges GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge github.com 📘 목..