react 41 [플러터] 로그인 경험을 한단계 끌어올리기 (feat.웹뷰 리액트) 들어가며 사이드 프로젝트를 하면서 브라우저로 제공하던 서비스를 웹뷰형태로 확장을 했습니다. 근데 간편 로그인이 제대로 동작하지 않는 문제가 발생했고, 결국 플러터에서 로그인을 처리하여 브라우저에 넘기는 식으로 리펙토링했던 경험에 대해 살펴보겠습니다. 문제 인식 | 간편 로그인이 안되요 일단 간편 로그인이 무엇인지에 대해 살펴보겠습니다. 사이드 프로젝트에서 카카오톡을 이용한 간편 로그인을 지원하고 있습니다. 바로 아래 사진을 보면 브라우저의 경우 카카오톡으로 로그인 버튼을 누르게 되면 해당 핸드폰에 카카오톡이 설치되어 있으면 별도의 입력 없이 카카오톡으로 인증을 하고 로그인이 완료됩니다. 물론 카카오톡에서 해당 서비스(여기서는 사이드 프로젝트)에서 로그인을 허용하겠냐는 다이얼로그 창과 함께요. 쨋든 이게 .. 2022. 4. 26. [리액트] useEffect와 useLayoutEffect | 비교시리즈 들어가며 리액트를 사용하다 보면 useEffect와 useLayoutEffect 훅을 마주하곤 합니다. 생긴 것도 비슷하고 실제 공식문서상에서도 둘은 같다고 말합니다. 오히려 useEffect 쓰라고 합니다. 그래도 useLayoutEffect를 만든 이유가 있을테고, 저 또한 깜빡임 관련된 이슈를 수정하기 위해 useLayoutEffect를 사용했습니다. 그래서 이번 글에서는 useEffect와 useLayoutEffect에 대한 설명과 코드 단에선 어떤 차이가 있는지 알아보도록 하겠습니다. 질문 | useEffect 와 useLayoutEffect를 비교해라 useEffect는 랜더링된 이후에 동작하는 hook이고 useLayoutEffect는 랜더링 되기 이전에 동작하는 hook이다. 네 끝났습니다.. 2022. 3. 31. [리액트] 유령 의존성부터 시작된 yarn berry 도입기 동료 개발자의 기능을 확인하다가 제 환경에서만 동작하지 않는 에러를 발견했습니다. 이번 글에서는 문제 발생부터 원인 파악, 그리고 해결한 방법. 그다음에 유령의존성이 발생한 이유, yarn berry를 도입하여 휴먼에러를 방지한 후기에 대해 정리해보았습니다. 문제 발생 문제의 발견은 git pull를 하고 제 컴퓨터에서 yarn start를 한 시점부터 시작됩니다. 특정 기능이 추가돼서 확인차 기능을 사용했는데 다음과 같은 에러와 함께 기능이 동작을 안 합니다. [Mobx] Observable arrays cannot be frozen 해당 에러가 발견된 위치를 추적해보니 immer의 produce를 사용하는 코드에서 발생했습니다. 에러 로그를 보면 Mobx의 Observable arrays는 froze.. 2022. 2. 16. [리액트] VAC 패턴 적용 후기 및 장단점 VAC 패턴을 접하고 리뷰? 글을 쓴 지 어느덧 반년이 되었습니다. 나름 빨리 글을 작성한 것인지 이젠 VAC 패턴을 검색하면 상위에 랭크되는 글이 되었네요. 글을 작성한 이후로 새로운 프로젝트에 VAC 패턴을 적용해서 프로젝트를 진행해보았습니다. 나름 장점도 있었고 단점도 있어서 이번 글에선 요런 내용들을 정리해보면서 후기를 작성해보려고 해요. VAC 패턴이란 ? View Asset Component의 준말로, JSX와 Style를 관리하여 UI와 비즈니스 로직을 분리하는데 목적을 둔 컴포넌트 설계 방법론입니다. 위의 사진이 VAC 패턴을 설명하는 가장 기초적인 이미지인데요. 사진으로 느낌이 안 오니 직접 코드를 보면서 살펴보겠습니다. const SpinBox = () => { const [value,.. 2022. 2. 3. 이전 1 2 3 4 5 6 7 8 ··· 11 다음
