-
[React] PullToRefresh 구현 :: 마이구미React 2022. 6. 12. 00:06
이 글은 PullToRefresh 에 대해 다룬다. 결과물의 코드는 ant.d 에서 제공하는 PullToRefresh 컴포넌트의 코드를 기반으로 작성되었다. 구현 방식뿐만 아니라 전반적인 PullToRefresh 기능 학습에 도움이 될 것이다. 참고 링크 - https://mobile.ant.design/components/pull-to-refresh 예제 코드 - https://codesandbox.io/s/pulltorefresh-b0mi3p?from-embed PullToRefresh 는 무엇인가? PullToRefresh 기능은 아래로 끌어내리는 제스처를 통해 새로고침을 실행하게 해준다. 해당 제스처는 Swipe Down 또는 Pull 이라고 부를 수 있다. 이 기능은 웹, 모바일 웹, 앱 구분없..
-
UX 라이팅 시작하기 리뷰 :: 마이구미책 리뷰 2022. 6. 9. 21:34
이 글은 " UX 라이팅 시작하기" 라는 책을 리뷰한다. 본인은 관련 분야의 업무를 맡고 있지 않은 그냥 프론트엔드 개발자이다. 책 링크 - http://www.yes24.com/Product/Goods/103540865 예전부터 UX Writer 에 대해서는 흥미가 있었다. 사소한 메시지 변화로 큰 영향을 주는 건 굉장히 재밌어보이기 때문이다. 요즘은 웹, 앱, 광고 할거 없이 딱딱한 메시지가 아닌 친절하고 재밌는 메시지로 구성되어있다. 그만큼 UX Writing 은 예전보다는 훨씬 중요도가 높아진 것 같다. 처음에는 조금 실망하면서 읽기 시작했다. 제목처럼 UX 라이팅 기초를 원했지만, 본인 이야기 비중이 조금 많이 차지한다고 느껴졌다. 그래도 끝까지 읽은 후에는 많은 도움을 주는 책이라고 느껴졌다...
-
[yup] 유효성 검증 :: 마이구미알아두면 좋은 라이브러리 2022. 6. 5. 10:52
이 글은 yup 이라는 라이브러리를 다룬다. yup 은 유효성 검증 로직에 큰 도움을 줄 수 있다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 yup 이란? Custom validation(without API) Custom validation(with API) Error Message customization Transform, parsing Examples With react-hook-form yup 이란? yup 라이브러리는 스키마 유효성 검증이 목적이다. 실제로는 서버쪽(Node.js) 에서 더 많이 사용된다. React 기준으로는 react-hook-form 과 함께 사용하고 있다. 하지만 그건 크게 중요하지 않다. 유효성 검증이라는..
-
[CSS] transform-origin 이란? :: 마이구미HTML, CSS 2022. 6. 4. 15:16
이 글은 CSS 속성 중 transform-origin 에 대해 다룬다. 이해는 하고 있지만, 직접 사용해본 경험이 없을 수 있다. 와닿을 수 있는 활용 사례를 알고 싶다면 도움을 될 것이다. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin transform-origin 속성은 CSS 속성 중 transform 와 함께 사용하는 속성이다. 요소의 transform 을 위한 기준점을 정하기 위해 사용된다. 기본적으로 transform-origin 속성의 기본값은 중앙(center) 이다. transform-origin: 50%, 50% 좌표를 기반으로 transform 의 기준점은 위와 같은 그림으로 이해할 수 있다. 그렇다면, 실제로는..
-
[React] Controlled vs Uncontrolled :: 마이구미React 2022. 6. 1. 12:17
이 글은 React 의 contorlled component, uncontrolled component 를 다룬다. 아래 예제 코드를 확인하고, 글 내용을 이해와 리마인드에 도움이 될 것이다. 예제 - https://codesandbox.io/s/controlled-vs-uncontrolled-10rgwj 어디서 접할 수 있는가? React 를 사용하면 Controlled Components, Uncontrolled Components 와 같은 용어를 들어본 적이 있을 것이다. 이 용어들은 Form 요소와 관련이 있다. 이 용어들은 공식 문서에서도 설명되어 있다. 그리고 UI 프레임 워크에서도 uncontrolled, controlled 예제를 따로 명시해서 제공하기도 한다. 꼭 알아야하는가? 이것들을 ..
-
[React] react-transition-group :: 마이구미알아두면 좋은 라이브러리 2022. 4. 28. 21:47
이 글은 트랜지션과 관련된 라이브러리 react-transition-group 을 다룬다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 react-transition-group 는 굉장히 심플하다. 게다가 이미 공식 문서에서는 기본적인 예제는 codesandbox 를 통해 제공해주고 있어, 크게 설명할 게 없다. 처음 접한다면 공식 문서를 한번 훑고 오는걸 추천한다. 이 글의 핵심은 기본 예제가 아닌 좀 더 응용할 수 있는 예제를 다뤄본다. 응용 예제는 라이브러리에서 제공해주는 TransitionGroup 컴포넌트를 주로 다루는 예제가 된다. 우선 간단하게 라이브러리를 알아보자. 진입(entering), 후퇴(exiting) 라는 용어로 트랜지..
-
[React] useImperativeHandle :: 마이구미React 2022. 4. 27. 22:05
이 글은 React 에서 제공해주는 Hooks API 에서 useImperativeHandle 을 다룬다. useRef, forwardRef 와 관련이 있다. example - https://codesandbox.io/s/xm605q docs - https://reactjs.org/docs/hooks-reference.html#useimperativehandle 사실 useImperativeHandle 은 사용하는 경우가 많이 없어서 익숙하지 않은 훅이다. 공식 문서에서는 다음과 같이 설명한다. useImperativeHandle customizes the instance value that is exposed to parent components when using ref... useImperative..
-
[React] react-router v6 에서 Prompt 구현하기 :: 마이구미React 2022. 4. 17. 11:54
이 글은 네비게이션 가드라고 불리는 기능을 위한 Prompt 를 다룬다. 페이지 뒤로가기 또는 다른 페이지 이동으로 하면, 바로 페이지 전환이 일어난다. 때로는 Confirm 과 같은 창을 통해 페이지 이동을 막고 제어하는 것을 원할 수 있다. 이 기능을 네비게이션 가드라고 부를 수 있다. react-router v6 를 기준으로 한다. 이전에는 v4 를 기준으로 작성한 적이 있다. (https://mygumi.tistory.com/358) 예제 코드 - https://codesandbox.io/s/ljn1r8 현재 기준으로react-router 의 버전은 6.x 까지 올라왔다. major 버전이 올라간 만큼 v5 에서 v6 로 마이그레이션 하는 과정은 수정이 좀 필요하다. 그 과정 중 네비게이션 가드..