Frontend168 [ 자바스크립트(JavaScript) ] addEventListener의 passive option을 알아보자 📍 addEventListener의 passive option을 알아보자 touchstart 이벤트를 이용해 IOS에서 기존 swipe gesture를 block하고 custom swipe를 적용하던 중 console 창에서 Violation을 마주했다. (Violation은 chrome browser 혹은 web에서 에러를 나타내는 것이 아니라 앱 개선에 도움이 되는 경고를 의미한다.) [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event... 해당 코드는 다음과 같다. const handleTouchStart = useCallback((event: TouchEvent) => { const { client.. 2023. 10. 16. [ styled-components ] override 우선순위를 제일 높게 설정하는 2가지 방법 📍 override 우선순위를 제일 높게 설정하는 2가지 방법 styled-components를 사용해 기존 style을 override하는 경우 우선순위가 제대로 적용되지 않는 경우가 있다. 이번에 마주한 이슈는 headlessUI 패키지의 Dialog 컴포넌트에 custom style을 override하려는데 의도대로 적용되지 않는 이슈였다. 부지런히 검색해보니 styled-component issues - #2620에 나와 비슷한 문제를 겪고 있는 글을 찾을 수 있었다. 원인은 React의 createPortal이었는데, portal의 특성상 portal을 사용하게 되면 해당 element의 DOM이 현재 위치가 아닌 다른 위치로 변경되는데, styled component가 바뀐 DOM의 위치를 알.. 2023. 4. 17. [ 리액트(React) ] Higher Order Component 사용하기 📍 Higher Order Component 사용하기 나는 고차 컴포넌트를 즐겨 사용하지 않지만, React로 작업을 하다 보면 특정 상황에서 고차 컴포넌트를 사용하면 적합한 경우가 종종 있다. (물론 고차 컴포넌트 이외에도 효율적인 접근방법이 있지만, 여기서는 고차 컴포넌트를 사용한다고 가정하자.) id, name, title가 담긴 리스트 타입의 values는 고차함수인 map method를 통해 컴포넌트()를 하나씩 렌더링하고 있는 상황이었다. 여기서 컴포넌트 내부에는 공통적으로 useState가 주입 되어야하는 상황이다. 여기서 나는 HOC를 사용하여 해결했다. 고차 컴포넌트는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술인데, 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. 나만의 .. 2023. 4. 13. [ Next.js ] TypeError: Cannot set properties of undefined (setting 'nodeToRestore) 해결방법 알아보기 📍 TypeError: Cannot set properties of undefined (setting 'nodeToRestore) 해결방법 알아보기 Next.js에서 특정 컴포넌트를 호출하면 다음 에러가 뜨면서 정상적으로 렌더링이 되지 않는 이슈를 발견했다. 해당 컴포넌트는 adobe/react-spectrum의 react-aria/focus 패키지를 참조하고 있었다. 여러 가지 검색해 보다 development 단계에서 잠재적인 warning이나 bug를 찾도록 도와주는 react StrictMode가 원인인 것을 발견하고 next.config.js에서 reactStrictMode을 false로 변경했더니 작동이 잘 되었다. 혹은 React18을 17로 다운그레이드해도 정상 작동된다는 comment도 .. 2023. 4. 5. ted는 서비스 프론트엔드 온보딩 프로세스에서 무엇을 느꼈을까? ( 이 글은 사내에서 발표한 자료를 바탕으로 작성했습니다. ) 서론 안녕하세요! 5월 2일에 트리플 서비스 프론트엔드 팀에 합류한 ted입니다. 👋🏾 👋🏾 이번 아티클은 우리 TRIPLE의 기능 혹은 기술적인 문제를 깊게 파고들기보다 이제 막 회사에 적응하는 신규 입사자의 관점으로 온보딩 프로세스에서 느낀 점을 솔직하게 말씀드리려고 합니다. 본론 개발팀에서 단순히 개발을 잘하는 것도 중요하지만, 팀/동료와의 협업은 빼놓을 수가 없습니다. 트리플은 이를 위해 다양한 문화들이 마련되어있습니다. 1. 데일리 스크럼과 KPT 회고 소프트웨어 개발 방법론 중 하나인 애자일을 채택한 팀이면 빠질 수 없는 스크럼입니다. 우리 팀은 반복적인 개발(Sprint)기간을 2주로 잡고 있습니다. 월요일 격주로 스프린트 플래닝.. 2023. 4. 3. 이전 1 2 3 4 ··· 34 다음
