Today I Learn/이슈 해결 (10) 썸네일형 리스트형 정규표현식 일치탐색 수행 시 놓치기 쉬운 이슈 2021. 11. 2. 16:04 사내 앱 환경은 UserAgent 문자열을 보고 앱에서 접근했는지 여부를 알 수 있다. const UA_SAMPLE = 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/605.1 APP_NAME(inapp; search; 1000; 11.5.5.2; 11)' 따라서 정규표현식으로 UserAgent를 분해해서 디바이스 환경 및 앱 환경 여부를 검사하는 parseDeviceInfo 함수를 선언했다. const appUserAgentRegEx = /APP_NAME\([inapp]+;[^0-9]*(search);[^0-9]*.. react 16.8 -> 16.9 업그레이드로 인한 react-testing-library 실패 해결 2021. 10. 5. 16:36 팀 내 react 16.8 버전을 이번에 npm7로 버전 업하면서 함께 16.9로 올렸다. 그런데 올리고 보니 기작성되었던 일부 테스트 케이스들이 실패했다. 실패하는 원인을 보니 비동기 실행으로 인해 HTMLElement를 찾기 전에 fireEvent 나 userEvent를 실행해버려서 실패되었다. 따라서 아래처럼 HTMLElement도 비동기로 찾게끔 수정하였다. test('', async () => { const container = render() // ... 중략 ... const button await waitFor(() => { button = findButton(container) expect(button).not.toBeUndefined() }) fireEvent.click(button) .. [Nextjs] 리액트에서 Nextjs로 이전하던 중 생긴 이슈들 2021. 7. 28. 00:38 현재 사내 모든 서비스는 단 하나의 저장소에 모두 몰려있다. 따라서 내가 맡은 서비스만 배포할 수 없는 불편함+코드가 너무 방대해져서 유지보수의 어려움 등등의 이유로 각 서비스 별로 저장소를 분리하는 과정에 있다. 내가 맡은 서비스 또한 저번 주 신규 서비스 런칭이 끝났으므로 저번주부터 저장소 분리에 착수했다. 이전 저장소는 CRA 기반 React js 환경이었다면 새로 분리하는 저장소에서는 Nextjs + Typescript를 도입하였다. Nextjs 기본 Setup을 끝내고 나서부터는 코드를 옮기는 작업을 진행하였는데, 역시 그대로 옮겨질리가 없다. (ㅋ) 1. Link 이전 cra 기반 reactjs 환경에서는 react-router-dom 의 Link 컴포넌트를 사용하였다. Next js에서는 n.. [React] render() 내에서 history.push(replace)를 하면 안되는 이유 2021. 7. 8. 19:27 스토어의 상태값 여부를 검사하여 상태값이 없으면 다른 라우터로 이동하는 로직을 상위 컴포넌트에 추가하였다. const InfoChecker = ({children}) => { const {info} = useExampleStore() const history = useHistory() if (!info) { history.replace('/') return null } return children } const Info = () => { const {info, clearInfo} = useExampleStore() useEffect(() => { return () => { clearInfo() } }, []) return ( {info.name} ) } const Routes = () => { const.. [React] history.block으로 뒤로가기 막기 (blocking-transition) 2021. 7. 8. 14:51 만약에 A 컴포넌트에 name 상태값이 있다고 가정하자 사용자가 A 컴포넌트의 name 상태값을 수정하였으나 실수로 브라우저 뒤로가기를 누르면 A 컴포넌트는 언마운트되고 수정했던 name 상태값은 유실된다. 이런 경우를 방지하기 위해 브라우저 뒤로가기 발생 시 '정말 뒤로 가겠습니까?'와 같이 사용자에게 한 번 더 확인을 요구하는 confirm 창을 띄울 수 있다. history에서는 block으로 push/pop을 제어하여 이를 처리할 수 있도록 한다. 다음은 상태값이 변경되어 isBlocking이 true, action이 'POP'일 때 confirm창을 띄우는 예시이다. 참고 React Router v5.2 - Blocking route change with createBrowserHistory a.. getEventListeners로 등록된 이벤트리스너 확인하기 2021. 6. 14. 18:23 웹 개발에서 이벤트 리스너가 잘 해제되고 있는지 확인해야 하는 경우가 있다. 그럴 때 getEventListener를 사용하여 확인할 수 있다. getEventListeners(window) getEventListeners(document) 결과 { error: Array(1), unhandledrejection: Array(1), pagehide: Array(1), popstate: Array(1) } 결과에서 볼 수 있듯이 [Event 종류]: Array으로 결과를 볼 수 있다. 예를 들어, React에서 visibilitychange 이벤트 리스너를 등록 후 지우지 않았다면 const Comp = ({children}) => { const onVisibilityChange = () => { /** .. [JS] Blur 이벤트 전에 Click 이벤트를 실행하기 2021. 3. 17. 18:15 사내 디자인 가이드 중 이런 형태의 가이드를 구현해야 할 일이 있었다. 입력란에 포커싱 되고 타이핑이 있을 때만 옆의 x 버튼을 보이게 하는 기능을 구현해야 했다. 처음엔 css로 visibility를 제어하고, input에 포커싱이 될때만 버튼 영역을 그리려 했다. .flexible-delete { visibility: hidden; &.active { visibility: visible; } } const [isFocus, setIsFocus] = useState(false) const onFocus = () => setIsFocus(true) const onBlur = () => setIsFocus(false) return ( {isFocus && ( )} ) 하지만 onClick 이벤트보다 Blu.. react-router-dom __RouterContext 미존재 이슈 2021. 1. 21. 15:48 기존 프로젝트에 설치돼있던 react-rotuer-dom은 5.0.1 이고 프로젝트에서 useRouter hook을 다음처럼 만들어서 사용하고 있었다. import {useContext} from 'react' import {__RouterContext} from 'react-router-dom' const useRouter = () => { return useContext(__RouterContext) } export default useRouter 그런데 이번에 typescript를 적용한 버전으로 새로 repo를 파서 기존 프로젝트 컴포넌트 관리를 위한 storybook을 구축하고 있는데 해당 훅을 그대로 사용하려 하니까 __RouterContext라는 값이 없다는 에러가 떴다. (참고) __Rou.. react-testing-library의 “not wrapped in act” Errors 원인과 해결법 2021. 1. 8. 15:47 최근 추후에 있을 기능 개선과 리팩토링을 위해 중요 로직이 포함된 컴포넌트에 react-testing-library를 이용하여 단위 테스트 코드를 작성하고 있다. 그러던 중에 다음 Warning을 발견했다. Warning: An update to Component inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): 해당 경고를 받는 3가지 원인과 해결책을 잘 정리해둔 글이 있어 기억할 겸 정리해보았다. 출처 : React Testing Library and the “not wrapped in act” Errors 들어가기 앞서 re.. [JS] encodeURIComponent, encodeURI 이슈 2020. 11. 18. 22:40 프로젝트에서 겪은 이슈 중 encodeURIComponent 이슈가 있어서 글로 남기게 되었다. 서버에서 응답으로 주는 값 중에 URL이 있었다. { encryptUrl: `https://${도메인}?key=${암호화된 값}` } 그 URL은 암호화된 값을 쿼리 스트링으로 포함하고 있고 이 값을 받아 외부 브라우저 환경이 아닌 다른 인앱브라우저(앞으로 A라고 표현하겠다)에서 구동을 해야 하였다. 사내에서 제공하는 url scheme을 사용함 window.location.href = `app://inappbrowser?version=42&url=${encodeURIComponent( `${landingUrl}` )} A로 이동해서 끝이 아니라 받은 URL 쿼리 스트링을 파라미터로 하여 서버로 복호화를 요청.. 이전 1 다음
요즘 개발
