React
-
[React] 전역 모달 구현하기 :: 마이구미React 2021. 11. 3. 22:00
이 글은 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 를 관..
-
Redux 를 걷어낸 이유 :: 마이구미React 2021. 7. 6. 22:00
Redux 의 문제점이 무엇이고 이를 SWR 로 어떻게 해결할 수 있는지 다뤄본다. Redux 와 SWR 이 무엇인지에 대해서는 다루지 않는다. Redux - https://github.com/reduxjs/redux SWR - https://github.com/vercel/swr Redux 는 이미 대중화되어있고 대부분 이미 서비스에 사용되고 있는 라이브러리이기에 본인도 실무에서는 여전히 사용하고 있다. 하지만 개인적으로는 Redux 는 사용하다가 걷어내고 20년 초?부터는 사용하지 않고 있다. 그 대안으로는 SWR 라이브러리를 사용하고 있다. 짚고 가고 싶은 게 있다. "대안" 이라고 말하기가 조금 애매하다고 생각한다. Redux 와 SWR 은 본질 자체가 다르기 때문에 직접 비교할 순 없고 특정 관..
-
SPA 에서 SEO 적용하기 :: 마이구미React 2021. 1. 24. 00:27
이 글은 SPA(Single Page Application) 에서 SEO 를 적용하는 방법을 다룬다. SSR 가 아닌 CSR 로 구현된 페이지에서 SEO 적용은 까다롭다. 이를 위한 방안으로 re-rendering 이라고 불리는 방식이 존재한다. * 동적 라우터를 위한 방식을 알아본다. ex) product/:id 대부분의 BtoC 서비스라면, SEO 는 필수적이다. 우리는 원하는 페이지들이 구글, 네이버, 다음과 같은 검색 서비스에 노출되길 원할 것이고, 카카오톡, 페이스북과 같은 서비스에 공유될 때 원하는 썸네일, 텍스트 등을 노출하길 원한다. 이를 위해서는 html 의 요소인 태그와 태그를 활용해야한다. Hi! "페이지 소스 보기" 클릭 => HTML 코드 확인. "/a" 페이지에서 우클릭 => "..
-
Warning Received `true` for non-boolean attribute :: 마이구미React 2020. 11. 6. 22:10
이 글은 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 내용만으로는 ..
-
인스타그램 infinite scroll 파헤치기 :: 마이구미React 2020. 7. 12. 19:04
이 글은 infinite scroll(무한 스크롤) 에 대해서 다룬다. 어떻게 코드를 구현해야하는지? 어떤 라이브러리를 써야하는지? 에 대한 코드를 제공하는 글은 아니다. 어떤 접근과 아이디어를 통해 무한 스크롤을 구현할 수 있는지에 대한 그저 하나의 방법을 다룬다. 이를 위한 모델은 인스타그램으로써, Web 버전 인스타그램을 대상으로 진행된다. 간단하게 "인스타그램은 어떻게 무한 스크롤을 구현하는가?" 로 볼 수 있다. 예제 코드 - https://github.com/hotehrud/instagram-infinite-scroll 실제로 무한 스크롤을 위해서는 많은 케이스에 따른 기능과 대안을 제공해야한다. 이러한 초점보다는 어떤 아이디어로 큰 틀을 구현했는지를 보길 바란다. 예제 코드는 tag 를 통해..
-
Redux 에 reselect 적용해보기 :: 마이구미React 2020. 6. 7. 19:03
이 글은 reselect 라이브러리를 다룬다. 대다수의 경우 redux 를 사용하면서 reselect 를 도입하게 된다. 왜 사용하는지, 어떤 개선점이 있고, 주의해야하는 사항은 무엇인지 알아본다. 관련 문서 - https://github.com/reduxjs/reselect redux 공식문서에서 제공하는 기본 예제를 기반으로 연결되는 점들이 많다. 글을 읽기 전에 먼저 훑어보면, 이해에 더 도움이 될 것이다. https://redux.js.org/basics/example 우리는 상태 관리를 효율적으로 하기 위해 Redux 와 같은 상태 관리 라이브러리를 사용한다. 기본적으로 리덕스 스토어있는 state 를 가져오는 방법은 다음과 같다. todoList 가 존재하고, todo 들의 완료 여부를 필터링..
-
리덕스 Normalizing State Shape :: 마이구미React 2020. 6. 4. 23:21
이 글은 "리덕스를 어떻게 사용할 수 있는가?" 를 나타낸다. 여러 방법 중에 "Normalizing State Shape" 를 다룬다. 공식 문서에서 언급된 것으로, 리덕스를 활용하는 패턴의 하나라고 볼 수 있다. 전반적인 내용과 이를 프로젝트에 적용해본 후기를 작성하려한다. 관련 문서 - https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape 글을 다루기에 앞서, 개발 시나리오를 생각해보자. 프로젝트 진행에 앞서, 서버쪽 API 가 아직 개발되지 않은 상태라면 프론트는 사전 작업을 먼저 하면 된다. 우선 마크업을 미리 진행하면 된다. 그리고 더 나아가 대략 추측 가능한 구조를 기반으로 더미 데이터를 API 응답으로 활용할 수..
-
Storybook 도입 (1) - 마이구미React 2019. 12. 10. 23:19
이 글은 Storybook 적용해본 첫번째 후기를 다뤄본다. 첫번째라는 건, 다양한 용도, 환경 등에서 오는 다양한 후기가 있을거라 판단했다. 정확히는 본인은 계속 사용할 것이고, 굉장히 만족하여 추후에도 분명 다음 편을 쓸거라고 생각한다. https://github.com/storybookjs/storybook 스토리북 설치 및 사용을 중점으로 다루지는 않을 것이다. 이번에 1차적으로 도입해본 과정을 토대로 다뤄본다. 팀 전체가 아닌 개인적으로 시도해본 것이라, 팀 단위의 도입 측면에서의 많은 정보는 가져갈 수 없을 것이다. "이런게 있구나" 맛보기 관점에서 보았으면 한다. 다음과 같은 순으로 진행한다. Storybook 은 무엇인가? 본인이 StoryBook 을 사용한 이유는 무엇인가? StoryBo..