본문 바로가기

Front

 (44)
환경에 따라 간헐적으로 발생하는 타이밍 이슈 팀원이 해결한 이슈중에 최초로 진입하여 태스크를 등록하는 경우 진행상태가 공란인 이슈가 있었다. 프론트 개발 원칙을 로직과 뷰를 분리하기로 하여 로직은 Container에서 호출하고, 뷰는 Component에서 처리한다. 태스크 등록/수정을 담당하는 TaskWriteContainer에서 task를 dependency로 들고 있었는데 등록화면은 task 정보를 받아오지 않기 때문에 초기에 타야하는 로직이 안타는 문제가 있었다. 그래서 ComponentDidMount (= useEffect(()=>{},[]); ) 에서 해당 태스크 내용을 세팅했다. 그리고 TaskWriteContainer에서 사용하는 훅에서 task에 관한 dependency를 뺀 것이다. 문제는 태스크 등록/수정 하는 Container를..
모바일 Native에서 웹뷰 웹소켓 이벤트 못받는 이슈 지금 내가 만든 시스템은 React로 웹/모바일을 제공하고 있다. 모바일은 웹뷰를 띄워서 제공을 하고 있다. 모바일 팀은 React Native로 만들었고, 우리 앱을 클릭하면 웹뷰로 띄우주는 구조이다. 앱의 구조는 아래와 같다. 물론 빌드하면 모바일로 접속했을때 모바일 리소스만 로딩해야하기 때문에 빌드는 웹/모바일이 분리되어 있다. 이 구조에서 모바일 서비스도 지원하라고 해서 급한대로 웹뷰를 지원했다. 그런데 웹소켓이 동작 안해서 확인해보니 웹소켓 연결은 PlatForm에서 로그인 할때 하는데, 모바일에서는 React Native로 자체적으로 만들어져 있고, 로그인한 후 그 세션을 가지고 플랫폼 로그인 처리를 해서 플랫폼 로그인 로직이 안타고 그 결과 웹소켓연결도 안하는게 문제였다. 만약 기존 상태에서..
transient-components를 이용한 이슈 해결 아래와 같은 화면이 있다고 하자 이 모바일 화면은 웹뷰로 구현되어 있다. 카드의 개수가 많으면 스크롤바가 생긴다. 스크롤바는 스크롤할때만 보이고, 스크롤 하지 않을때는 자연스럽게 사라지게 구현하였다. 그런데 스크롤하던 도중에 오른쪽으로 스와이프하면 다른 컬럼에 스크롤바가 남아있는 이슈가 있었다. scrollvisible=true인 상태가 다른 컬럼에 영향을 준 것이다. 이런경우 styled-compoent에서 아래와 같이 transient props를 만든다. transient props로 정의하여 넘겨주는 props는 DOM에서 인식하지 않고, styled-components에서만 사용할 수 있도록 하는 방법이다. 그렇기 때문에 DOM에서 감지되지 않아서 다른 컴포넌트에 영향을 주지 않는다.
Antd 하위호완 Antd는 하위호완이 안된다.. 가끔 중요한 production build에서 버전 업그레이드 되면서 기존 로직에 영향을 주는 경향이 많다. 버전을 고정시켜서 쓰면 되지만, 만약 다른 플랫폼 위에 내 프로젝트가 올라간 경우는 내 앱만 버전을 고정하는 부분이 프로젝트 설정에 따라 안먹을 확률이 훨씬 더 높다. Antd Mobile은 기능이 빈약하다.
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..

티스토리툴바