프론트엔드 개발하다보면 메일로 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를 타고 가..

프론트엔드 개발을 하다보면 로그인 방식으로 JWT 방식을 사용하는 경우가 있을 것이다. JWT 방식은 구현하는 방법은 조금씩 차이가 있지만 기본적으로 로그인을 하는 경우 AccessToken과 RefreshToken을 서버에서 클라이언트로 넘겨주고 이것을 통해서 로그인 유지와 사용자 검증을 한다. 결국 Token을 통해서 로그인 정보를 관리하는 것이다. 여기서 이번에 쿠키를 통해서 Token을 관리하는 방법으로 개발을 진행했는데, 배포 환경은 문제가 없겠지만 개발 환경에서 서버가 보낸 Cookie를 브라우저가 저장하지 못하는 문제가 있었다. 서버 ( 192.168.45.123 ) 이고, 클라이언트 ( 192.168.45.321 )일 때, 가장 먼저 할 일이 서버에 cors 설정을 했다. // ... co..

What are Polymorphic Components ? React를 공부할 때 가장 먼저 배우는 개념 중 하나는 재사용 가능한 컴포넌트를 만드는 것이다. 컴포넌트를 한 번 작성하고 여러번 재사용하는 기술이다. 고전적인 재사용 가능한 컴포넌트의 필수 구성요소는 Props와 State이며, Props는 외부에 있으며, State는 내부에 존재한다. 재사용성의 필수 구성요소인 Props와 State는 Polymorphic Components에서도 여전히 유효하지만 최종적으로 렌더링할 요소를 결정할 수 있도록 element를 활용할 것이다. const MyComponent = (props) => { return ( This is an excellent component with props {JSON.str..

프로젝트를 진행하면서 개발자 도구를 확인하니 위와 같은 오류가 있었다. 화면이 렌더링되지 않는 것 같은 치명적인 문제는 없었지만 오류가 나왔으니 해결을 하려고 코드를 확인했다. 확인해보니 state의 업데이트를 useEffect에서 하는 것이 아닌 if문을 사용해서 조건부로 컴포넌트 내부에서 실행해서 발생한 문제였다. 문제를 해결하기 위해서 해당 조건문을 useEffect 내에서 실행하니 오류는 사라졌다. 예상하기론 if문을 사용하더라도 같은 조건인 상황에 여러번 리렌더링이 발생하면 그때마다 state가 변경되기 때문에 문제가 된다고 알려주는 것 같다!

React 애플리케이션에서 과도한 최적화는 최악의 상황을 나타낸다. 몇몇의 개발자들은 useMemo와 useCallback을 개발에서 기본 사항으로 넣어서 모든 곳에 사용한다. 하지만 useMemo는 오히려 애플리케이션의 속도를 저하시킬 수 있다. 명심해야할 것은 메모이제이션은 공짜가 아니다! 우리는 왜 useMemo를 사용할까? useMemo는 컴포넌트의 리렌더링 사이에서 계산 결과를 캐시에 저장하는 Hook이다. React.memo, useCallback, 디바운싱, 동시 렌더링(Concurrent Rendering) 등과 함께 사용해서 성능상 이점을 준다. 이것이 특정 상황에선 정말 도움이 되고 중요한 역할을 하는 것은 맞지만, 대부분은 부적절한 방법인, 모든 변수를 useMemo로 래핑한다. 당연..