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

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..

에러 게시판 리스트를 보여주는 페이지에서 다른 페이지로 이동한 후 다시 게시판 리스트 페이지로 돌아왔을 경우 같은 데이터가 추가되는 에러 발생 원인 같은 데이터인지 아닌지 구별할때 데이터 하나만 가지고 구별했다. 그러다보니 순서가 바뀌어서 들어오게되면 같은 데이터라도 들어가게 되는게 원인이었다. if ( state.listData.length !== 0 && state.listData.filter((el) => el.boardId === data[0].boardId).length === 0 ) { state.listData = [...state.listData, ...result]; } 해결 데이터 하나만 가지고 비교하는 것이 아니라 전체를 비교해서 기존 데이터에 없는 데이터만 추가하게끔 로직을 변경했다..

에러 원인 redux로 리팩토링하는 과정에서 axios 요청을 redux안에 넣고 싶다라는 생각에 넣어 봤더니 생긴 에러이다. boardListItemAdd: ( state, ) => { const fetchData = async () => { const res = await axios.get(`/boards?page=${isPage}&size=16`); const { data, likeList } = res.data; const result = data.map((board: BoardDataProps) => { return { ...board, like: likeList.some( (el: { boardId: number; boardTitle: string }) => el.boardId === boar..

에러 React 환경에서 작성된 코드를 S3에 정적 웹페이지 배포를 하고 배포된 페이지에서 새로고침을 하게되면 발생하는 에러이다. 원인 React에서 작성된 Route의 path를 배포된 환경에서는 사용할 수 없기 때문이다. 시도 Cloud Front사용 Cloud Front를 사용하면 특정 에러 발생시 새로운 주소로 리다이렉션이 가능해진다. 새로고침시 주소가 올바르게 서버 주소로 요청을 보내는게 확인됐지만 Cloud Front로 배포할 경우 배포주소 시작이 https가 된다. 이 말은 보안 때문에 http에 요청을 보내고 응답을 받을 수 없다는 말이다. index.html에 아래의 코드를 넣으라는 방법도 해봤지만 빌드하고 배포하는 순간 페이지가 검게 변하는 현상이 생겼다. 출처:https://velog..