본문 바로가기

💡 issue6

storybook 에서 styled component css prop 적용이 안된다면? 💡 문제 현상 실행 환경 Next 13 Storybook 7.0.4 Styled component: 5.3.10 Next.js 13 에서 스토리북을 빌드한 결과, styled-component 의 css-prop 이 올바르게 적용되지 않는 이슈가 있었습니다. 🤔 원인은? 기본적으로 css-prop 을 사용하는 컴포넌트는 babel 을 통해서 빌드가 이뤄지는데, Next.js 12 부터는 babel 대신에 swc 로 빌드하기 때문에, 문제가 생긴 듯 보였습니다. 혹시나 해서 관련된 이슈를 찾아보니, 아직 활발하게 논의되고 있는 상태였습니다. https://github.com/vercel/next.js/issues/30802 Port babel-plugin-styled-components to SWC · I.. 2023. 5. 15.

JavaScript 로 생성한 csv 파일에서 한글이 깨진다면? 📌 JavaScript 로 csv 파일 생성해서 다운로드받기 이전에 csv 포맷을 다룰 일이 생겨서 Blob 객체를 생성해서 파일을 다운로드 받도록 코드를 구현했었습니다. const download = function (data) { const blob = new Blob([data], { type: 'text/csv' }); const url = URL.createObjectURL(blob) const a = document.createElement('a') a.setAttribute('href', url) a.setAttribute('download', '파일이름.csv'); a.click() } 코드는 간단합니다. 리소스타입이 명시된 Blob 객체를 생성한 뒤 이를 가리키는 Object URL 을 .. 2023. 3. 18.

Safari 브라우저 window.open block 이슈 📌 1:1 문의하기가 safari 에서만 동작을 안해요! 얼마전에 항공쪽 QA 중에 다음과 같은 이슈가 있었습니다. 원인을 파악하기위해 safari 브라우저에서 동선을 파악해보니, 문의 버튼 클릭 시 새창으로 열기 대신 팝업 차단 알럿이 뜨는 것을 확인할 수 있었습니다. 🤔 원인이 뭘까? safari 브라우저에서 다음과 같은 코드는 정상적으로 동작하지 않습니다. { await asyncJob() window.open('url', '_blank'); // ❌ } /> 이는 safari 브라우저에서 새창을 열때, 사용자의 입력에 곧바로 반응할 수 없는 상황이라면 window.open 액션을 막기 때문입니다. (대표적으로 비동기 요청을 수행한 뒤 리다이렉트 하는 것이 있겠네요) 📌 어떻게 고치면 될까? 🐛 문.. 2022. 11. 26.

-webkit-overflow-scrolling 속성과 stacking context 이슈 📌 부드러운 overflow 스크롤을 위한 css 속성 간단한 overflow container 예시 이전부터 HTML 요소에 overflow 가 발생했을 경우 스크롤 형태로 컨텐츠를 보여주기 위해 다음과 같이 CSS 를 정의했습니다. .container { display: flex; flex-direction: row; overflow-x: scroll; flex-wrap: nowrap; width: 200px; } 특히 iOS 의 경우 스크롤 바운스 효과를 위해 다음과 같이 스크롤 관련 vendor prefix 를 포함한 CSS 코드를 작성하게 됩니다. -webkit-overflow-scrolling: touch; 여기서 touch 로 지정할 경우 모멘텀 기반 스크롤 방식으로 동작하기 때문에 일반적인.. 2022. 7. 4.

Next.js window is not defined 원인 및 해결방법 📌 새로고침 시 오류 페이지가 떠요! 현재 회사에서 Next.js 를 이용한 프로젝트를 진행하고 있는데 특정 페이지에서 새로고침을 하거나 URL 을 통해 직접 접근을 시도할 경우 에러가 발생하며 에러 페이지로 리다이렉션되는 이슈가 있었습니다. 📌 오류 발생 원인은? 해당 페이지에서는 custom hook 을 사용하고 있었는데 여기서 문제가 발생한 것이었습니다. 💡 문제가 된 custom hook 다음은 이번에 문제를 일으킨 주범인 custom hook 의 간단한 예시입니다. export default const customHook = () => { const [flag, setFlag] = useState(Number(localStorage.getItem(countKey) || '0')) // 몇가지 작.. 2022. 6. 17.

Safari 브라우저 scroll-behavior 이슈 📌 부드러운 scroll 동작 구현하기 이전 회사에서 프로젝트를 진행할 때 이벤트 페이지에서 앵커 버튼 클릭 시 특정 위치로 이동해야하는 요구사항이 있었습니다. 직접 offsetTop 을 지정해주는 애니메이션을 구현하거나 window 객체에서 제공하는 Web API 를 사용하는 방법들이 있는데, 구현을 간단하게 하기 위해서 이중 window.scrollTo 를 사용했습니다. 그리고 부드러운 움직임을 위해 behavior 로 smooth 로 지정했습니다. window.scrollTo({ top: 100, behavior: 'smooth' }) 📌 AOS 에서는 잘 되는 것 같은데.. iOS는..? 해당 코드를 앱에 배포해보니 안드로이드 폰에서는 잘 동작하는데 아이폰에서는 smooth 동작이 적용되지 않는 .. 2022. 6. 11.

이전 1 다음

티스토리툴바