공부하자 공부 공부하자 공부

캐시란? 자주 사용하는 데이터를 임시로 저장해 놓는 공간 원리 프로그램의 전반적인 성능을 향상시키기 위해서 자주 사용하는 데이터를 메인 메모리보다 빠르게 접근할 수 있는 공간에 저장하는 것이다. 데이터가 요청되면 먼저 캐시에 요청한 데이터가 저장되어있나 확인하고 있으면 메인 메모리에서 보다 빠르게 요청을 처리할 수 있다. 브라우저 웹 페이지가 로드될 때 브라우저의 이미지, 스크립트 및 스타일 같은 리소스를 캐시에 저장한다면 페이지를 다시 방문 했을 경우 캐시 해놓은 데이터를 다시 사용할 수 있다. 클라이언트 localstorage, sessionstorage 와 같은 브라우저의 캐시를 javascript를 사용하여 빠르고 효율적으로 접근할 수 있다.

이전 포스트에서 이야기 했던 것과 마찬가지로 쓰로틀링에 대해 이야기하겠다! 쓰로틀링(throttling) 쓰로틀링은 이벤트가 짧은 시간에 많이 일어나는 현상을 방지하기 위해서 사용한다. 주로 스크롤 이벤트라던가... 이벤트가 짧은 시간에 많이 일어나게 되면 성능면에서 좋지않은 영향을 끼칠 수 있다. 이때 쓰로틀링을 적용하면 전에 이벤트가 많이 발생했더라도 한번 이벤트가 발생하면 정해진 시간만큼 지난 후 다시 일어나게 된다. const [timer, setTimer] = useState(false); const handleThrottle () => { if (!timer) { setTimer(true); setTimeout(() => { setTimer(false); console.log('스크롤!'); ..

현재 내가 진행한 프로젝트에는 무한스크롤을 스크롤 이벤트로 만들어 두었다. 이 코드에 문제가 하나 있는데 서버에 요청을 보낼때 여러 번의 요청이 한번에 간다는 것이다. 이 문제를 해결하는 방법을 구글링하니 디바운씽과 쓰로틀링을 찾을 수 있었다. 둘 다 이벤트의 성능을 최적화 하기 위해 사용되는 기법 중 하나이다. 이번 포스트에서는 디바운씽을 설명하고 다음 포스트에는 쓰로틀링을 설명할 것이다. 디바운씽(debouncing) 디바운씽은 채터링(chattering)이라는 현상을 방지하기 위해 사용한다. 채터링이란 스위치 같은 것이 매우 빠른 속도로 온, 오프를 반복해 여러번 스위치가 켜지는 현상을 말한다. 이 현상을 프로그램 측면에서 보자면 데이터를 요청할 때 채터링이 발생한다면 똑같은 요청을 여러 번 보낸다..

Stack HTML CSS Typescript 사용을 하긴 했지만 아직까지 잘 이해했다는 생각이 들지 않는다. 사용하면 계속 이렇게 하는 게 맞는 건가 라는 생각이 항상 들었다. 타입을 명시해 미리 에러가 발생한다는 것을 방지한다는 내용만 알고 있을 뿐... Redux-toolkit 사용하면서 Redux로 전역상태를 관리하는 데에 의문이 생겼다. 전부 서버에서 받아오면 상태를 굳이 관리 안 해도 되는 게 아닐까? React AWS (S3) Styled-components Axios Problem 팀원과의 소통에는 전혀 어려움이 없었다. '정말 이렇게 스무스하게 진행돼도 되는 건가?'라는 의문이 생길 정도로 아무런 트러블이 생기지 않았다. 다만 몰랐던 것, 처음 구현해 보는 것에 대한 어려움은 있었다. 무..

에러 게시판 오른쪽에 추천 게시판이 나열되는데 그곳에 있는 게시판을 누르면 본문 내용이 바뀌지 않는 에러가 발생했다. 아래 사진을 보면 작성자와 시간, 제목과 태그가 다른데 본문의 내용은 같다. 원인 원인은 마크다운을 받아 적용하기 위해서 Toast UI의 Viewer를 사용했는데 Viewer에 initialValue에 값을 넣게되면 리랜더링이 발생해서 값이 바뀌더라도 본문의 내용이 바뀌지 않았다. 해결 Toast UI Viewer로 해결을 보고 싶었지만 관련된 내용을 찾을수 없었다. 스택오버플로우에도 글은 있지만 답변은 없었다.(https://stackoverflow.com/questions/74414258/toast-editor-ui-doesnt-re-render-initialvalue-when-pa..

모달창을 직접 만들어서 사용할 때 모달창 내부를 클릭하면 닫히는 현상볼수 있다. 이 현상을 막기 위해서 보통 event.stopPropagation()을 모달창 onClick을 핸들링하는 함수에 넣어준다. const handleTagSearchOpen = (e: React.MouseEvent) => { e.stopPropagation(); // 이벤트 버블링 막기 setSearchOpen((prev) => !prev); }; 위와 같이 작성하면 부모 컴포넌트에 있는 onClick 이벤트가 작동하는 것을 막을 수 있다. 내가 참고한 모던 자바스크립트 튜토리얼(https://ko.javascript.info/bubbling-and-capturing#ref-868)에 보면 이벤트 버블링은 왠만하면 막지말라고 ..

에러 게시판 작성이나 수정시 30초마다 임시저장기능을 구현해서 데이터를 localstorage에 저장했다. 그런데 게시판을 등록하고 나서 게시판 작성이나 수정 페이지를 다시 들어가면 작성했던 게시글이 남아있다는 알람창이 뜨는 에러가 발생했다. 원인 localstorage의 데이터를 지우지 않아 계속 남아있기 때문이었다. 해결 게시판의 작성과 수정 완료시 localstorage.remove('editData')를 사용하여 저장되어있는 데이터를 삭제한다. axios.post(`/boards`, newBoard) .then((res) => { localStorage.removeItem('data'); // 수정한 부분 navigate('/board/list'); alert('성공적으로 작성되었습니다.'); }..

에러 위의 사진은 개발자도구의 네트워크 창이다. 위의 사진처럼 요청도 계속보내게 되고 그에 따라 렌더링도 계속되는 현상이 발생했다. 원인 원인은 무한 스크롤에서 데이터를 불러오다가 더 이상 데이터가 없다면 page의 상태가 계속 바뀌면서 요청을 계속 보내게되고 그에 따라 렌더링이 되는 것이 원인이었다. 해결 page의 상태가 마지막 페이지를 넘어갔을때 더는 요청을 보내지 않도록 조건문을 작성해 해결했다. // 수정 전 if (scrollTop + clientHeight >= scrollHeight - 100) { setPage((prev) => prev + 1); } // 수정 후 if (scrollTop + clientHeight >= scrollHeight - 100 && endPage >= isPa..