SimCoding

React 모바일 환경 키보드 화면가림 대응하기 window.visualViewport 를 활용해서, 모바일에서 키보드가 생기기 전,후의 높이 차이를 체크해 스크롤링 해주는 방식으로 키보드 화면 가림현상에 대응했다. @ 예시코드 useEffect(() => { if (window) { let prevVisualViewport = window.visualViewport?.height; const handleVisualViewportResize = () => { const currentVisualViewport = Number(window.visualViewport?.height); if ( prevVisualViewport && prevVisualViewport - 30 > currentVisualView..

[ Apollo] apolloClient nextjs 환경에서 network-only 가 작동하지 않는 현상 해결 apolloClient - nextjs 환경에서 network-only가 작동하지 않는 버그가 있는 것 같습니다. 이로인해 첫 request 이후, 캐쉬가 생기면 더 이상 request를 보내지 않게 되어 불편함이 발생합니다. 이를 해결하기 위한 방법을 알아보겠습니다. > 서버사이드 환경과 클라이언트사이드 환경을 구분해 fetchPolicy를 설정합니다. 서버사이드 환경에서는 'network-only' 가 작동하지 않기 때문에 , 서버사이드 환경에서는 'no-cache' 를 적용하고 클라이언트사이드 환경에서는 'network-only'를 적용해 줍니다. fetchPolicy: typeof w..

[Jest] mocking을 위한 jest.spyOn, mockImplementation 에 대해 알아보기 1. spyOn - spyOn은 메소드를 가로채서 모킹할 수 있도록 도와준다. 2. mockImplementation - mockImplementation은 기본적으로 아무런 동작도 하지 않으며, 인자로 콜백함수를 넣어주면 콜백함수가 작동한다. 즉, mocking된 함수를 원하는대로 조작할 수 있게 해준다. @예시코드 // spyOn -> service.sendEmail() 메소드를 mocking 한다. // mockImplementation -> mocking된 함수를 아무런 동작도 하지 않게 해준다. jest.spyOn(service, 'sendEmail').mockImplementation(a..

[Nextjs] nextjs middleware활용해서 redirect구현하기 안녕하세요. 이번 포스팅에서는 nextjs 에서 middleware를 활용해서 redirect를 구현하는 방법에 대해 알아보겠습니다. middleware에 작성된 코드는, request가 완료되기 전에 작동합니다. 이를 활용해, response를 중간에 가로채 수정할 수 있습니다. response를 중간에 가로채서 url을 변경해주면 redirect기능을 구현할 수 있겠죠? 자주 사용되는 예시를 통해, redirect 기능을 구현하는 방법에 대해 알아보겠습니다. 아래 예시코드는 로그인이 되어있지 않은 유저가 페이지에 접근하려고 할 때, root페이지로 redirect를 시키는 코드입니다. // middleware.ts impo..

[Nextjs] userAgent 에서, 브라우저 환경 구분하는 방법 이번 포스팅에서는 userAgent에서 브라우저 환경을 구분하는 방법에 대해 알아보겠습니다. 안드로이드, 아이폰, 오페라 , 윈도우 등 다양한 브라우저 환경이 존재하는데 브라우저에 환경에 따라 다른 코드를 적용해 주어야 할 때가 있습니다. 브라우저 환경은, request-header에 담겨있는 userAgent를 통해 확인할 수 있고, 이를 정규표현식을 통해 원하는 환경별로 구분해서 사용할 수 있습니다. 아래 예시코드를 통해 확인해 보겠습니다 ! const userAgent = typeof navigator === 'undefined' ? 'SSR' : navigator.userAgent; const isAndroid = Boolean..

[React] DarkMode 새로고침시 화면 깜빡임문제 해결 - useLayoutEffect 안녕하세요. 이번 포스팅 에서는 useLayoutEffect Hook에 대해 간단히 소개하고, UseLayoutEffect Hook을 이용해, DarkMode에서 새로고침시 화면이 깜빡이는 문제를 해결하는 방법에 대해 알아보겠습니다. useLayoutEffect & useEffect useLayoutEffect는 기본적으로 useEffect와 형태가 동일합니다. useLayoutEffect(() => { effect(); return () => { cleanup(); }; }, [input]) useEffect와 useLayoutEffect의 차이점 useEffect는 DOM이 화면에 그려진 이후에 호출됩니다...

[Next.js] Nextjs build 할 때, dynamic route 404 error 해결하는 방법 안녕하세요, 이번 포스팅에서는 Nextjs환경에서 build할 때, dynamic route를 처리하는 방법에 대해 알아보겠습니다 ! NEXTJS 개발환경에서는 분명, dynamic route에 정상적으로 접근이 됐었는데 .. build하고 배포를 하면 접근이 안되는 문제가 있었습니다.. NEXTJS Build과정에서, 정적페이지를 생성할 때 DynamicRoute의 경우에는 따로 처리를 해줘야 하는 것 같더라구요.. 저는 NEXTJS 에서 제공하는 getStaticPaths, getStaticProps를 활용해서 DynamicRoute를 처리해주었습니다. 예시코드를 통해 방법을 확인해보세요 ! 간..

[React] fakerjs, shortid 를 이용해서 현실적인 DummyData 만들기. 안녕하세요. 이번 포스팅에서는 fakerjs와 shortid를 이용해 , 그럴싸한 DummyData를 만드는 방법을 알아보겠습니다. 프론트엔드 개발을 하면서, 백엔드가 완성되지 않았을 경우 원활한 작업 진행을 위해 DummyData가 필요한 일이 분명 있을 거에요 ! fakerjs 와 shortid를 활용하면 쉽게 DummyData를 만들어서 이용 할 수 있습니다. 예시 코드와 함께 어떤식으로 DummyData를 만들 수 있는지 확인해 봅시다. > generateDummyPost : 더미데이터를 생성해주는 함수. import shortId from 'shortid'; import faker from 'faker'..