Front/React (13) 썸네일형 리스트형 환경에 따라 간헐적으로 발생하는 타이밍 이슈 팀원이 해결한 이슈중에 최초로 진입하여 태스크를 등록하는 경우 진행상태가 공란인 이슈가 있었다. 프론트 개발 원칙을 로직과 뷰를 분리하기로 하여 로직은 Container에서 호출하고, 뷰는 Component에서 처리한다. 태스크 등록/수정을 담당하는 TaskWriteContainer에서 task를 dependency로 들고 있었는데 등록화면은 task 정보를 받아오지 않기 때문에 초기에 타야하는 로직이 안타는 문제가 있었다. 그래서 ComponentDidMount (= useEffect(()=>{},[]); ) 에서 해당 태스크 내용을 세팅했다. 그리고 TaskWriteContainer에서 사용하는 훅에서 task에 관한 dependency를 뺀 것이다. 문제는 태스크 등록/수정 하는 Container를.. transient-components를 이용한 이슈 해결 아래와 같은 화면이 있다고 하자 이 모바일 화면은 웹뷰로 구현되어 있다. 카드의 개수가 많으면 스크롤바가 생긴다. 스크롤바는 스크롤할때만 보이고, 스크롤 하지 않을때는 자연스럽게 사라지게 구현하였다. 그런데 스크롤하던 도중에 오른쪽으로 스와이프하면 다른 컬럼에 스크롤바가 남아있는 이슈가 있었다. scrollvisible=true인 상태가 다른 컬럼에 영향을 준 것이다. 이런경우 styled-compoent에서 아래와 같이 transient props를 만든다. transient props로 정의하여 넘겨주는 props는 DOM에서 인식하지 않고, styled-components에서만 사용할 수 있도록 하는 방법이다. 그렇기 때문에 DOM에서 감지되지 않아서 다른 컴포넌트에 영향을 주지 않는다. Mobx Store 내부 변수 실시간 tracking 안되는 이슈 팀원 코드리뷰중 확인한 이슈다. 아래와 같은 상황이 있다고 하자 분명 코드상으로는 문제가 없어보이지만, Store에서 서버로 데이터 요청해서 받아온 정보가 제대로 세팅되지 않고 기존에 task 선언할때 세팅되었던 정보로 세팅된다. function TaskModifyContainer() { const { taskStore } = useStore(); . . . const { task } = taskStore; . . . const initTaskModify = async () => { try { await taskStore.getTask(taskId); taskStore.setTask({ ...task, //6번 라인에서 로드한 정보로 세팅된다. startDate: task.startDate?.substr.. React Cache Router 캐시 라우터란 내가 저장하길 원하는 url에 해당하는 페이지를 dom 정보에 저장해 놓고 다음페이지로 넘어가면 캐시라우팅 한 페이지를 display:none 처리해주고 캐시라우팅 한 페이지로 다시 돌아왔을때 display:none 처리되었던 페이지를 그대로 보여주는 기능이다. 따라서 캐시라우팅 한 페이지는 componentDidMount는 동작하지만 unMount 로직은 타지 않는다. 물론 필요하다면 unMount를 타도록 설정하는 것도 가능하다. 스크롤정보, 필터정보등 다양한 정보가 해당 페이지로 돌아왔을때 남겨져 있어야 하는 요구사항이 있을 때 사용한다. 하지만 캐시라우팅에서 간혹 특정한 이유로 동작하지 않는 경우가 있다. 1. react-router-dom의 useParams를 쓰는 경우 https.. 웹/모바일 모노레포 프로젝트 패키지 설계 및 라우팅 웹/모바일 페이지를 둘다 만들고 같은 서비스를 공유하는 상황이었고 본부 정책이 같은 앱이라면 모바일을 웹뷰로 만들자고 협의했고 모노레포로 하자는 결정이 있었다. 프로젝트 관리도 편하고, 백엔드는 대부분 같이가져가기 때문에 모노레포도 충분히 장점이 있는 상황이었다. 우리 앱도 이러다보니 패키지 구조를 어떻게 가져갈 것인가? 라우팅 자체를 어떻게 구현할 것인가 이슈가 있었다. 패키지 부터 나누기가 힘들었다. 두가지 정도로 나뉘었는데- 첫번째 안은 아래와 같다. src -- web -- component -- container -- mobile --component -- container -- store -- repo 두번째 안은 아래와 같다. src -- component -- common -- web --.. 빌드 안될때 이미지 빌드하다가 아래와 같은 오류가 날때 Failed to minify the bundle. Error: static/js/2.20e06688.chunk.js from Terser RangeError: Invalid string length at stringify () at new Promise () at /var/jenkins_home/workspace/WEBTOB_WAPL_BUILD_WORKS/node_modules/react-scripts/scripts/build.js:196:23 at finalCallback (/var/jenkins_home/workspace/WEBTOB_WAPL_BUILD_WORKS/node_modules/webpack/lib/Compiler.js:257:39) at /var.. React-Router-Dom VS React-Router 플랫폼 A가 React-Router-Dom을 사용하고 있고 import한 프로젝트 B가 React-Router를 사용하고 있는 경우 react-router는 native 까지 포함되어있는 full-set 패키지이다. 예를 들어 (a태그로 렌더링되는), 와 같은 컴포넌트들이 있다. 웹 기반 프로젝트라면 React-Router-Dom버전만 사용하여 경량화 할 수 있다. react-router-dom은 그 중에서 DOM이 인식할 수 있는 컴포넌트들만 뺀 라이브러리이다. 프로젝트 B에서 특정 모듈을 export하고 플랫폼 A에서 그 모듈을 사용할 때 플랫폼은 React-Router-Dom이고 프로젝트는 React-Router인 경우 아래와 같은 오류가 발생한다. export한 프로젝트 B의 컴포넌트에도 Reac.. HashRouter의 location.state location.state를 사용하면 HTML elements에 이슈가 발생한다. history.push에 state를 정의하면 HTML element에서 기존에 렌더링 되었던 정보들이 DOM에서 사라지는 것이 아니라 display:none 속성으로 감춰지기만 합니다. 그래서 라우팅 할 때 A 페이지(url/a) -> B 페이지(url/a/b) -> A 페이지(url/a) -> B'페이지(url/a/b') 로 이동을 하려고 할 때 B' 페이지가 아니라 B 페이지가 출력됩니다. B페이지가 보이는 이유는 B페이지가 삭제 되는게 아니라 display:none 처리만 되어 있고 B'페이지로 라우팅 할때 display:none만 해제되어 B'페이지의 componentDidMount가 불리지 않고 B페이지가 그냥 .. 이전 1 2 다음
