본문 바로가기

오류 해결 기록

 (5)
[Node.js] 노드 버전 오류 글로벌로 Node를 설치했는데 그로인해 모든 프로젝트에 영향이 가는 이슈 발생글로벌로 Node.js를 설치하면, 기본적으로 모든 프로젝트에서 그 글로벌 버전을 사용하게 된다.이는 특정 프로젝트가 특정 Node.js 버전을 필요로 하는 경우 문제가 될 수 있기 때문에 이를 해결하기 위해 Node.js 버전 관리 도구를 사용하면 각 프로젝트마다 다른 Node.js 버전을 쉽게 관리할 수 있다.가장 많이 사용하는 Node.js 버전 관리 도구는 **nvm (Node Version Manager)**이며,nvm을 사용하면 프로젝트별로 다른 Node.js 버전을 사용할 수 있다. 1. nvm 설치먼저 nvm을 설치해야 하고, 터미널을 열고 아래 명령어를 입력한다.curl -o- https://raw.githubu..
[CSS] IOS 노치 대응 웹뷰 개발하는 도중 IOS 단말에서 postion fixed 후 top 의 값이 원하는 방향대로 나오지 않아서 꽤나 삽질했던 경험이 있어서 기록을 남긴다. 안전영역(Safe Area)이란?Safe Area는 원래 TV에서 처음 도입된 개념이다.TV 해상도 비율이 다양해지면서 영상에서 타이틀, 자막 등이 필수 콘텐츠의 노출을 보장할 수 있는 영역아이폰X는 Safe Area가 필요한 이유아이폰8 이하 기종과 달리 아이폰X의 디스플레이 영역은 상/하단 라운드 영역을 포함하고 있기 때문이다.추가적으로 상단 영역은 카메라, 스피커 등의 센서가 있는 노치(notch)가 존재하여 콘텐츠가 제대로 노출될 수 없다.IOS 전체 화면 적용 export const FaqFixedTabButtonWrap = styled(Bo..
[JS] event bubbling 버그 keyboradEvent 발생시 자식과 부모도 동일하게 이벤트가 있는데 상속되는 현상 발생event.preventDefault()html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드event.stopPropagation()상위 엘리먼트로의 이벤트 전파, 즉 이벤트 버블링을 막는다는 차이이벤트 버블링(Event Bubbling)이란?이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. const handleBackdropClick = ( event: React.MouseEvent, reason: "backdropClick" | "escapeKeyDown" ) => { event.stopPropag..
[CSS] IOS에서 스크롤 바운스 효과 비활성 버그 엘리먼트 스크롤 업, 다운 시 특정 엘리먼트 숨김 및 노출 처리 시 사파리 브라우저만 이상 발생overscroll-behaviorCSS overscroll-behavior 속성은 스크롤 영역의 경계에 도달했을 때 브라우저가 수행하는 작업을 설정한다.const StyledBox = styled(Box)` position: relative; width: 100%; box-sizing: border-box; overflow-y: auto; overscroll-behavior: none; height: calc(100% - ${(props) => props.offsettop}px); padding-bottom: 50px; max-height: ${(props) => props.type === "m..
[라이브러리]Swiper - Thumbs gallery loop Thumbs click 버그 Swiper 라이브러리 중 Thumbs 부분 클릭을 두번해야 동작하는 이슈가 있어서, 문서중 하단 옵션을 추가하니까 정상적으로 되는걸 확인했다.threshold임계값(px). "터치 거리"가 이 값보다 낮으면 스위퍼가 움직이지 않는다고 한다.threshold: 9, const about__advantage02__slides = new Swiper('.about__advantage02__slides', { slidesPerView: 5.5, spaceBetween: 10, freeMode: true, watchSlidesProgress: true, observer: true, observeParents: true, threshold: 9, breakpoints: ..

티스토리툴바