프론트엔드 개발을 하다보면 컴포넌트를 만들 때 컴포넌트를 만들다보면 유사한 디자인에서 조금 조금씩 다른 부분이 존재한다. 이런 경우 각각의 컴포넌트를 다 만들기에는 동일한 기능이 많고 반복되는 코드로 인해 추후 유지 보수를 하는 경우 하나의 기능을 수정해야 하는 경우 관련된 모든 곳을 수정하는 불편함이 존재한다. const OuterFrameOne = () => { return ( ); }; const OuterFrameTwo = () => { return ( ); }; 코드로 구현하면 다음과 같은 방식으로 나올 것이다. outerFrame과 frame 부분은 동일한데 아래 텍스트 부분이 달라서 새롭게 만드는 경우도 있다. 이렇게 된 경우 앞서 말한 것처럼 outerFrame이 변경되는 경우 OuterF..

Effect는 React 패러다임에서 벗어날 수 있는 탈출구이다. Effect를 사용하면 React의 외부로 나가서 컴포넌트를 React가 아닌 위젯, 네트워크 또는 브라우저 DOM과 같은 외부 시스템과 동기화할 수 있다. 즉, 외부 시스템이 관여하지 않는 경우에는 Effect가 필요하지 않다. 불필요한 Effect를 제거하면 코드의 가독성이 좋아지며, 실행 속도가 빨라진다. 또한 오류 발생률도 줄어든다. 불필요한 Effect를 제거하는 방법 Effect가 필요하지 않는 경우는 일반적으로 2가지가 있다. ▶ 렌더링을 위해 데이터를 변환하는 경우. 예를들어, 목록을 표시하기 전에 필터링을 하고 싶은 경우를 가정해보자. 목록이 변경될 때 상태 변수를 업데이트하는 Effect를 작성하고 싶을 수 있다. 하지만..

React에서 슬라이드를 구현하는 방법 중 하나가 Swiper 라이브러리를 사용하는 것이다. 간단한 기능은 구현하는데 어려움이 없으나 개발하다보면 특이한 기능이 필요한 경우가 있다. 그런 기능을 직접 구현해보면서 아카이빙할 계획이다. 일반적인 Auto Play 컴포넌트이다. // ... 몇가지 옵션을 필요에 따라 줄 수 있겠지만 Auto Play를 위한 옵션만 주었다. ( 옵션 설명 생략 ! ) Pause Resume 먼저 자동 재생 기능을 사용하면 Progress가 나오는 경우가 있다. 다음 스크롤로 언제쯤 이동되는지 알려주는 기능이다. 해당 기능은 이미 Swiper의 데모에 잘 나와있는데, const handleAutoplayTimeLeft = (s, time, progress) => { progre..

웹 개발을 하다보면 가장 큰 스트레스 중 하나가 브라우저이다. IE는 처리했고 남은게 사파리 ( iOS ) 그리고 떠오르는 샛별 카카오 브라우저이다. 카카오톡은 웹사이트 링크를 타고 들어가면 인웹 브라우저로 실행이 된다. 근데 요놈도 참 간혹 예상치 못한 말썽을 일으기키는 뇨속이다. 아무튼 iOS에서 발생한 문제를 하나씩 해결하면 올려보겠다. vh 아이폰에서 vh를 100으로 설정했을 때, 스크롤을 내린다던지 해서 해당 영역이 짤리는 문제가 있다. resize useEffect(() => { const setViewportHeight = () => { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh",..

프론트엔드 개발하다보면 메일로 HTML 코드를 보내야하는 경우가 있다. 간단한 디자인의 경우 문제가 없는데 복잡한 디자인의 경우 깨지는 일이 빈번하다... 사용할 수 있는 css 속성에 제한이 있고 반응형 작업 등에도 곤란함을 느끼는 매우 귀찮은 작업이다. 그래서 이번에 몇가지 보편적인 작업을 위한 방식을 정리하려고 한다. display : flex 레이아웃을 구성할 때 가장 많이 사용하는 것 중 하나가 display : flex 일 것이다. 해당 스타일 자체는 인라인 태그로 설정해도 문제가 없다. 하지만 Google Gmail에게 html 코드로 flex 속성 중 하나인 justify-content / align-item을 사용하면 스타일이 적용되지 않는 문제를 확인했다. 네이버에서는 정상적으로 작동한..

얼마 전 day.js의 장점으로 isAfter, isBefore, isBetween에 대해서 이야기했다. 그 후, moment.js를 살펴보니 moment.js에도 동일한 함수가 있었다. 그렇게 생각하니 day.js와 moment.js는 어떤 부분이 다른지 궁금증이 생겼다. 찾아보니 기능적인 차이점은 많이 없었다. 1. 크기 day.js는 moment.js보다 가벼운 라이브러리로 알려져 있다. 라이브러리의 크기는 성능에 중요한 영향을 미치는데, day.js는 moment.js보다 훨씬 작다. moment.js는 압축하고 minify 했을 때 약 60KB인 반면, day.js는 압축하고 minify 했을 때 2KB이다. 이것은 프론트엔드에서 매우 중요한데, 페이지 로드 시간에 영향을 줄 수 있다. 2. 불..

달력을 만드는 일이 생각보다 많이 귀찮다. 그래서 보통 Antd의 Calendar를 많이 사용하는 편인데, 이번에 특정 값이 변경되면 달력의 선택된 날을 바꿔야하는 일이 있었다. 그러다가 알게된 것이 dayjs! 기본적으로 Antd의 Calendar에서 제공하는 모든 함수는 dayjs의 값을 리턴한다. dayjs는 날짜와 관련된 작업을 도와주는 라이브러리이다. 일반적으로 날짜와 관련된 작업을 할 때, 간단한 작업이면 Date, 복잡하다 싶으면 moment를 사용했는데, 이번에 처음으로 사용하게 되었다. dayjs는 편의성은 moment와 비슷하지만 특별한 함수를 제공하고 있었다. 바로 isAfter, isBefore, isBetween이다. 이것은 날짜를 비교하는 함수인데, 아주 간단하게 비교가 가능했다..

MSW란 서버의 API가 아직 개발 중인 단계일 때 프론트엔드에서 API 명세를 토대로 연동 작업을 할 수 있게 도와주는 라이브러리이다. 서버가 API를 완성하는 단계에서 프론트가 API 연동을 하는게 이상적이지만 현실은 일정을 완벽하게 맞추는게 쉽지 않은 일이다. 이때 MSW는 정말 많은 도움이 되는 친구이다. 프론트에서 보낸 body / params / query가 서버에 정상적으로 전달될지 테스트도 가능하고 명세에 따른 데이터를 실제로 받아서 테스트할 수 있기 때문이다. 하지만 개인적으로 한 가지 불편한 점이 있었는데, MSW를 사용하는 환경과 서버와 통신하는 환경을 모두 동시에 사용할 수 없었던 것이다. 내가 모르는 좋은 방법이 있을 지는 모르겠지만 MSW를 설정하면 모든 요청은 MSW를 타고 가..