✔️오늘 한일!
- 알고리즘 문제풀이
- 리뷰 수정기능 추가 및 팝업창 형태로 구현
- Import, Export를 적용해보려 했는데 예상치 못한 오류가 발생하여 보류
발생한 문제 (1)
js 파일이 적용이 안되는 문제가 발생했다. 수정 버튼 클릭 시 팝업창을 구현하기 위해 컴포넌트를 review.js와 modify.js로 나누고 modify.html에 modify.js를 연결했는데 자바스크립트 코드가 아예 먹통이 되버렸다. 코드를 계속 바꿔봐도 반응이 없고 개발자도구에 콘솔도 안찍히고 오류코드가 뜨지도 않아서 뭐가 문제인지 몰라 한참을 찾았다;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="modify.js"></script>
<title>Document</title>
</head>해결방법 (1)
구글링을 해보니 수정 버튼을 누르고 팝업창 내에서 수정사항을 적용하고 저장을 하려다보니 수정 버튼을 누르기 전에는 브라우저에서 review.js파일을 불러와 작업하기 때문에 팝업창과 연결해 둔 modify.js를 불러오려고 했지만 브라우저는 이전에 처리한 js를 캐시에서 불러와 작업하기 때문에 연결이 안됐던것으로 파악이 됐다.
이를 해결하기 위해 modify.js의 주소 뒤에 쿼리스트링으로 구분을 해주면 해결이 가능!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="modify.js?ver=1"></script>
<title>Document</title>
</head>발생한 문제(2)
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
팝업창을 구현하는 중 해당 오류가 발생
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="modify.js?ver=1"></script>
<title>Document</title>
</head>해결방법
해결방법은 간단했다. 다른 js파일은 defer를 적용해서 html이 로드된 후 js를 로드하게끔 해두었는데 modify.js를 작업할때 defer를 깜빡해서 발생한 문제였다.
발생한 문제(3)
현재 코드가 많이 바뀐 상태라 코드내용은 없지만, Import/Export를 적용해보려 했는데 예상치 못한 오류가 발생했다. review.js에 있는 section.appendChild를 읽어올 수 없다 라는 문제가 발생했는데 팀원과 찾아보다가 도저히 못찾겠어서 튜터님께 질문을 드리니 Import/Export의 문제는 아니고 소스코드가 꼬여있어서 해당 값이 null로 넘어가기때문에 발생하는 문제라고 하셨다.
(review.html에는 section태그가 있는데 modify.html에는 section태그가 없음 등등)
Import/Export를 사용하지 않고 기능구현은 해놓은 상태인데,
한번 천천히 코드를 보면서 어디가 어떻게 꼬여있는지 이걸 좀 더 명확하게 바꿀수 없는지 찾아봐야겠다.
To-do-List✔️
- 본인이 쓴 리뷰에만 삭제버튼이 보이고 아닌 댓글은 안보이게 하는 작업
- 전체 코드 병합 한 뒤 리팩토링
- 팝업창 CSS
