티스토리

마이구미의 HelloWorld
검색하기

블로그 홈

마이구미의 HelloWorld

mygumi.tistory.com/m

웹 개발 마스터의 날까지

구독자
103
방명록 방문하기
공지 Disqus 댓글 서비스 중단 모두보기

주요 글 목록

  • [React] IOS 페이지 트랜지션 구현해보기 :: 마이구미 이 글은 React 에서 페이지 트랜지션을 구현해본다.페이지 트랜지션은 IOS 처럼 리스트 페이지간 좌우 슬라이드 애니메이션으로 진행한다. 전체 코드 및 실제로 동작하는 예제를 제공할 예정이니 글을 끝까지 읽어보길 바란다. 구현하고자하는 페이지 트랜지션은 무엇인가?이 글에서 구현해보는 애니메이션을 먼저 확인해보자.  첨부 파일을 기반으로 요약하면 다음과 같다.하단 네비게이션바 간의 이동에서는 애니메이션이 없는 상태이다.리스트 페이지에서 아이템을 클릭하면 상세 페이지로 이동하는 경우에 상세 페이지는 Slide 애니메이션이 적용된다.리스트 페이지에서 아이템을 클릭하면 상세 페이지로 이동하는 경우에 리스트 페이지는 FadeInOut 애니메이션이 적용된다. 1, 2번이 주요 내용이고, 3번의 경우에는 응용이라.. 공감수 3 댓글수 2 2024. 10. 7.
  • [React] react-query 에러 핸들링 이 글은 react-query 의 에러 핸들링에 대해 알아본다.API 요청에서 4xx, 5xx 와 같은 상태코드를 받는 경우라고 이해하면 된다.react-query - https://github.com/tanstack/query 이번 주제는 코드를 통해 진행하게된다.해당 코드는 특정 라이브러리들을 기준으로 진행된다.사용하는 라이브러리의 기본 지식은 필요하지만, 모르더라도 에러 핸들링의 전체적인 흐름만 이해해도 좋을 것이라고 생각하고 있다. react-queryaxiosreact-error-boundary 우리는 API 에러 응답에 대해서 핸들링 해야한다.기본적으로 HTTP status code 를 4xx, 5xx 응답한다면, 에러라고 받아들이고 있다. API 가 에러 응답을 한다면, 클라이언트는 무엇.. 공감수 4 댓글수 2 2024. 9. 29.
  • [monorepo] hot reload 적용 :: 마이구미 이 글은 모노레포 환경에서 핫 리로드를 적용하는 글을 다룬다. 모노레포에 대해서는 다루지 않는다. 예제는 CRA 를 기준으로 작성된다. CRA 를 사용하지 않더라도, 도움을 얻을 수 있는 정보가 있을 것이라 생각한다. 예제 코드 - https://github.com/hotehrud/monorepo-react 참고 자료 - https://muguku.medium.com/fix-go-to-definition-and-hot-reload-in-a-react-typescript-monorepo-362908716d0e 개발 환경을 모노레포로 구성하는 경우에 핫 리로드 기능의 확장을 원할 수 있다. 기본적으로 CRA 로 환경을 구성하면 핫 리로드는 기본적으로 적용되어있다. 코드를 수정하고 저장하면 자동적으로 업데이트.. 공감수 0 댓글수 0 2022. 9. 13.
  • [React] PullToRefresh 구현 :: 마이구미 이 글은 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 이라고 부를 수 있다. 이 기능은 웹, 모바일 웹, 앱 구분없.. 공감수 1 댓글수 0 2022. 6. 12.
  • [React] Controlled vs Uncontrolled :: 마이구미 이 글은 React 의 contorlled component, uncontrolled component 를 다룬다. 아래 예제 코드를 확인하고, 글 내용을 이해와 리마인드에 도움이 될 것이다. 예제 - https://codesandbox.io/s/controlled-vs-uncontrolled-10rgwj 어디서 접할 수 있는가? React 를 사용하면 Controlled Components, Uncontrolled Components 와 같은 용어를 들어본 적이 있을 것이다. 이 용어들은 Form 요소와 관련이 있다. 이 용어들은 공식 문서에서도 설명되어 있다. 그리고 UI 프레임 워크에서도 uncontrolled, controlled 예제를 따로 명시해서 제공하기도 한다. 꼭 알아야하는가? 이것들을 .. 공감수 4 댓글수 2 2022. 6. 1.
  • [React] useImperativeHandle :: 마이구미 이 글은 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.. 공감수 2 댓글수 0 2022. 4. 27.
  • [React] react-router v6 에서 Prompt 구현하기 :: 마이구미 이 글은 네비게이션 가드라고 불리는 기능을 위한 Prompt 를 다룬다. 페이지 뒤로가기 또는 다른 페이지 이동으로 하면, 바로 페이지 전환이 일어난다. 때로는 Confirm 과 같은 창을 통해 페이지 이동을 막고 제어하는 것을 원할 수 있다. 이 기능을 네비게이션 가드라고 부를 수 있다. react-router v6 를 기준으로 한다. 이전에는 v4 를 기준으로 작성한 적이 있다. (https://mygumi.tistory.com/358) 예제 코드 - https://codesandbox.io/s/ljn1r8 현재 기준으로react-router 의 버전은 6.x 까지 올라왔다. major 버전이 올라간 만큼 v5 에서 v6 로 마이그레이션 하는 과정은 수정이 좀 필요하다. 그 과정 중 네비게이션 가드.. 공감수 3 댓글수 3 2022. 4. 17.
  • [React] 중첩 라우터 언제 사용하는가? :: 마이구미 이 글은 React 에서 중첩 라우터를 활용한 예제를 다룬다. React 에 국한되지 않고, 중첩 라우터는 어떤 경우에 사용하고 이점은 무엇인가? 를 다루게 된다. react-router-dom v6 을 기준으로 다룬다. react-router - https://reactrouter.com/docs/en/v6/getting-started/overview 특정 사용자 페이지가 있다. (/user) 그리고 사용자 페이지에는 프로필 정보와 계정 정보를 위한 각각의 탭이 존재한다고 가정해보자. 이것은 단순하게 구현하면 다음과 같다. const UserPage = () => { const [tab, setTab] = useState('profile'); return ( User : { name } setTab('.. 공감수 3 댓글수 0 2022. 3. 13.
  • [React] 전역 모달 구현하기 :: 마이구미 이 글은 React 에서 전역 모달을 구현하는 방법을 다룬다. 코드 예제는 React + Recoil + Typescript 로 구성되어있다. Recoil 은 단순 모달 on/off 상태 관리 용도로 학습을 거의 요구하지 않는다. (코드는 3줄이다) 참고 글 - https://opensource.com/article/21/5/global-modals-react 코드 예제 - https://codesandbox.io/s/bitter-brook-rep1f?file=/src/recoil/modal.ts:530-621 이 글에서 "전역 모달" 을 의미하는 것은 전역에서 관리되는 상태를 가지는 모달이다. 반대로 지역으로 관리되는 상태를 가지는 모달을 확인해보자. 모달을 import 하고 모달의 on/off 를 관.. 공감수 3 댓글수 3 2021. 11. 3.
  • Redux 를 걷어낸 이유 :: 마이구미 Redux 의 문제점이 무엇이고 이를 SWR 로 어떻게 해결할 수 있는지 다뤄본다. Redux 와 SWR 이 무엇인지에 대해서는 다루지 않는다. Redux - https://github.com/reduxjs/redux SWR - https://github.com/vercel/swr Redux 는 이미 대중화되어있고 대부분 이미 서비스에 사용되고 있는 라이브러리이기에 본인도 실무에서는 여전히 사용하고 있다. 하지만 개인적으로는 Redux 는 사용하다가 걷어내고 20년 초?부터는 사용하지 않고 있다. 그 대안으로는 SWR 라이브러리를 사용하고 있다. 짚고 가고 싶은 게 있다. "대안" 이라고 말하기가 조금 애매하다고 생각한다. Redux 와 SWR 은 본질 자체가 다르기 때문에 직접 비교할 순 없고 특정 관.. 공감수 6 댓글수 2 2021. 7. 6.
  • SPA 에서 SEO 적용하기 :: 마이구미 이 글은 SPA(Single Page Application) 에서 SEO 를 적용하는 방법을 다룬다. SSR 가 아닌 CSR 로 구현된 페이지에서 SEO 적용은 까다롭다. 이를 위한 방안으로 re-rendering 이라고 불리는 방식이 존재한다. * 동적 라우터를 위한 방식을 알아본다. ex) product/:id 대부분의 BtoC 서비스라면, SEO 는 필수적이다. 우리는 원하는 페이지들이 구글, 네이버, 다음과 같은 검색 서비스에 노출되길 원할 것이고, 카카오톡, 페이스북과 같은 서비스에 공유될 때 원하는 썸네일, 텍스트 등을 노출하길 원한다. 이를 위해서는 html 의 요소인 태그와 태그를 활용해야한다. Hi! "페이지 소스 보기" 클릭 => HTML 코드 확인. "/a" 페이지에서 우클릭 => ".. 공감수 13 댓글수 5 2021. 1. 24.
  • Warning Received `true` for non-boolean attribute :: 마이구미 이 글은 styled-components 에서 발생할 수 있는 Warning 을 다룬다. "non-boolean attribute" 에 관한 Warning 을 경험했다면, 이 글이 충분히 도움이 될 것이다. 원인과 해결방안 그리고 실제 Github 에 등록된 이슈와 버전 히스토리을 살펴본다. styled-components 를 사용하다보면, 다음과 같은 Warning 을 경험할 수도 있다. Warning: Received `true` for a non-boolean attribute `{속성}`. If you want to write it to the DOM, pass a string instead: {속성}=“true” or {속성}={value.toString()}. 사실 Warning 내용만으로는 .. 공감수 22 댓글수 8 2020. 11. 6.
  • 인스타그램 infinite scroll 파헤치기 :: 마이구미 이 글은 infinite scroll(무한 스크롤) 에 대해서 다룬다. 어떻게 코드를 구현해야하는지? 어떤 라이브러리를 써야하는지? 에 대한 코드를 제공하는 글은 아니다. 어떤 접근과 아이디어를 통해 무한 스크롤을 구현할 수 있는지에 대한 그저 하나의 방법을 다룬다. 이를 위한 모델은 인스타그램으로써, Web 버전 인스타그램을 대상으로 진행된다. 간단하게 "인스타그램은 어떻게 무한 스크롤을 구현하는가?" 로 볼 수 있다. 예제 코드 - https://github.com/hotehrud/instagram-infinite-scroll 실제로 무한 스크롤을 위해서는 많은 케이스에 따른 기능과 대안을 제공해야한다. 이러한 초점보다는 어떤 아이디어로 큰 틀을 구현했는지를 보길 바란다. 예제 코드는 tag 를 통해.. 공감수 0 댓글수 1 2020. 7. 12.
  • Redux 에 reselect 적용해보기 :: 마이구미 이 글은 reselect 라이브러리를 다룬다. 대다수의 경우 redux 를 사용하면서 reselect 를 도입하게 된다. 왜 사용하는지, 어떤 개선점이 있고, 주의해야하는 사항은 무엇인지 알아본다. 관련 문서 - https://github.com/reduxjs/reselect redux 공식문서에서 제공하는 기본 예제를 기반으로 연결되는 점들이 많다. 글을 읽기 전에 먼저 훑어보면, 이해에 더 도움이 될 것이다. https://redux.js.org/basics/example 우리는 상태 관리를 효율적으로 하기 위해 Redux 와 같은 상태 관리 라이브러리를 사용한다. 기본적으로 리덕스 스토어있는 state 를 가져오는 방법은 다음과 같다. todoList 가 존재하고, todo 들의 완료 여부를 필터링.. 공감수 4 댓글수 1 2020. 6. 7.
  • 리덕스 Normalizing State Shape :: 마이구미 이 글은 "리덕스를 어떻게 사용할 수 있는가?" 를 나타낸다. 여러 방법 중에 "Normalizing State Shape" 를 다룬다. 공식 문서에서 언급된 것으로, 리덕스를 활용하는 패턴의 하나라고 볼 수 있다. 전반적인 내용과 이를 프로젝트에 적용해본 후기를 작성하려한다. 관련 문서 - https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape 글을 다루기에 앞서, 개발 시나리오를 생각해보자. 프로젝트 진행에 앞서, 서버쪽 API 가 아직 개발되지 않은 상태라면 프론트는 사전 작업을 먼저 하면 된다. 우선 마크업을 미리 진행하면 된다. 그리고 더 나아가 대략 추측 가능한 구조를 기반으로 더미 데이터를 API 응답으로 활용할 수.. 공감수 0 댓글수 0 2020. 6. 4.
  • Storybook 도입 (1) - 마이구미 이 글은 Storybook 적용해본 첫번째 후기를 다뤄본다. 첫번째라는 건, 다양한 용도, 환경 등에서 오는 다양한 후기가 있을거라 판단했다. 정확히는 본인은 계속 사용할 것이고, 굉장히 만족하여 추후에도 분명 다음 편을 쓸거라고 생각한다. https://github.com/storybookjs/storybook 스토리북 설치 및 사용을 중점으로 다루지는 않을 것이다. 이번에 1차적으로 도입해본 과정을 토대로 다뤄본다. 팀 전체가 아닌 개인적으로 시도해본 것이라, 팀 단위의 도입 측면에서의 많은 정보는 가져갈 수 없을 것이다. "이런게 있구나" 맛보기 관점에서 보았으면 한다. 다음과 같은 순으로 진행한다. Storybook 은 무엇인가? 본인이 StoryBook 을 사용한 이유는 무엇인가? StoryBo.. 공감수 0 댓글수 0 2019. 12. 10.
  • [React] Prompt 커스텀해서 제어하기 :: 마이구미 이 글은 react-router 에서 제공하는 Prompt 컴포넌트를 다룬다. 페이지 뒤로가기 또는 다른 페이지 이동으로 하면, 바로 페이지 전환이 일어난다. 때로는 Confirm 과 같은 창을 통해 페이지 이동을 막고 제어하는 것을 원할 수 있다. react-router(v4) 를 사용하고 있다면, 쉽게 제공해주는 으로 해결할 수 있다. 참고 링크 - https://medium.com/@michaelchan_13570/using-react-router-v4-prompt-with-custom-modal-component-ca839f5faf39 브라우저에서 뒤로가기 뿐만 아니라 페이지 이동을 막는 것이 필요한 경우가 많다. 이를 해결하기 위한 방법으로 네비게이션 가드(Navigation Guard) 라고 .. 공감수 0 댓글수 0 2019. 10. 3.
  • create-react-app 에서 service worker 커스텀하기 :: 마이구미 이 글에서는 create-react-app 에서 Service Worker 커스텀을 다루려고 한다. CRA 을 사용한다면, eject 를 하고 싶지 않은 경우가 많을 것이다. 웹팩의 경우는 react-app-rewired 와 같은 라이브러리를 통해 커스텀하고있다. 서비스 워커는 sw-precache 라이브러리를 사용할 수 있다. React 를 사용할 때, create-react-app 을 통해 셋업을 하는 경우가 많다. 우리는 복잡한 빌드 설정를 걱정하지 않고 편하게 사용할 수 있다. Webpack, PWA, Service Worker 등 대부분 우리가 원하는 것들을 이미 제공해주고 있다. 따로 설정 변경이 필요하지않는다면, 굳이 시간을 쓸 필요가 없다. 하지만 CRA 에서 제공하는 설정을 커스텀해야할 .. 공감수 2 댓글수 0 2019. 8. 21.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.