Studyyyyy

특정한 상황에서 페이지 전체(html/body)가 움직여버리는 현상이 생겼다.나의 경우엔 header를 고정, content를 header의 height(60px)만큼 margin-top을 적용시켜놨는데, 특정 상황에서 자꾸 페이지 전체가 60px씩 위로 올라가버리고, 창의 하단엔 그만큼의 여백이 생겨버렸다. https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move ScrollIntoView() causing the whole page to moveI am using ScrollIntoView() to scroll the highlighted item in a list into view. When I..

https://shape-coding.tistory.com/entry/TypeScript-ReactFC%EC%97%90-%EC%82%AC%EC%9A%A9%EC%97%90-%EB%8C%80%ED%95%B4-%EC%83%9D%EA%B0%81%ED%95%B4%EB%B3%B4%EA%B8%B0 [TypeScript] React.FC에 사용에 대해 생각해보기FC란? Function Component 타입의 줄임말로, React + Typescript 조합으로 개발할 때 사용하는 타입입니다. 함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입입니다. React.FC 사용 타shape-coding.tistory.com React.FC는 children 속성을 암시적으로 포함하고 기본 pro..

처음 렌더링을 하고, scrollHeight의 값과 clientHeight의 값을 비교하여 다음 데이터를 자동으로 불러올지 말지를 구현하는 일이 생겼다.그런데 자꾸 제대로 작동하지 않아서 확인해보니 scrollHeight과 clientHeight값이 둘다 20으로 뜨는것이다. clientHeight의 값이 더 커야 작동을 하는데 값이 저렇게 나오니 제대로 작동하지 않은것이다. gpt에게 물어본 결과, 초기 데이터 로딩 이후 DOM이 아직 완전히 렌더링되지 않아서일수 있다고 한다.제시해준 해결책은, setTimeout()을 이용해 DOM이 렌더링 될 시간을 준 후에 추가 데이터를 로드하도록 하는것이었다.checkAndFetchMoreData() // 기존에 그냥 함수를 호출했다면setTimeout(() =..

자주 써서 생각 안하고있었는데, 기록해논 적이 없는거같다.https://velog.io/@moonheekim0118/JavaScript-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81 [JavaScript] 이벤트 위임자바스크립트 코드 내 이벤트 버블링과 캡쳐링을 이해한다.이벤트 위임 패턴을 이해한다.이벤트 위임이 무엇인지 알기위해서는 먼저 이벤트 버블링과 캡쳐링이 무엇인지 알아야한다.특정 엘리velog.io 프로젝트 특성상 모달창을 띄울 일이 많은데, 아무래도 fetch로 페이지를 불러오다보니 호출 후에 어떠한 선택자를 반환시키려면..?이 선택자는 무조건 fetch 이후에 불러오지 않으면 undefined를 반환할것이고, 오류를 낼것이다. 이럴때 쓰라..

자바스크립트를 공부하던 초창기부터 계속 들어왔던 콜백함수를 드디어 직접 사용할 일이 생겼다.이번에도 fetch 작업을 하다가 생긴 문제였는데, 기존 코드에서는 fetch 후의 작업이 모두 무언가를 클릭하거나 상호작용이 있어야지만 일어나는 이벤트들이라 전부 이벤트 위임으로 코드를 짜놨었는데 추가적으로 부여할 기능은 특정 상황에서만 새로 fetch 후에 자동으로 이벤트가 실행돼야했다.이 상황에 나는 콜백함수를 사용하게 됐다. const fetchDetails = async (callback) => { // fetch기능 어쩌구저쩌구 if (typeof callback === 'function') { callback(); // 파라미터로 가져온 callback } }; const ca..

이 에러가 났을 경우엔 html에서 data-bs-toggle="modal"이 있는데 js를 통해 해당 버튼 클릭시 모달을 열게끔 중복으로 기능을 부여했거나data-bs-target에 열어줄 모달 id를 잘못 입력했거나 둘 중 하나다..아ㅡㅡ

https://mong-blog.tistory.com/entry/JS-%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A5%BC-%EB%A7%8C%EB%93%9C%EB%8A%94-2%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95Event-CustomEvent [JS] 커스텀 이벤트를 만드는 2가지 방법(Event, CustomEvent)🤜 이번 시간에는 JS에서 커스텀 이벤트를 만드는 방법에 대해 알아보았다! 1. Custom event란? 커스텀 이벤트는 말 그대로, JS의 내장 이벤트(click, scroll 등)가 아닌 사용자가 생성한 이벤트를 말한다mong-blog.tistory.com 분명 저번에 글을 작성했다고 생각..

/* eslint-disable camelcase */ 뜬 오류가 camelcase라면 해당 js파일 최상단에 이런식으로 주석을 붙혀주면 오류가 사라진다.