[해결] 페이지가 새로고침 되는 이유를 모르겠습니다.

Question

안녕하세요.자바스크립트 연습 프로젝트 중 페이지가 새로고침되는데 그 이유를 알 수 없어 질문드립니다.코드 아래쪽에 존재하는 submitPost 함수가 eventListener를 통해 호출될 때 페이지가 새로고침이 됩니다.아래는 도움이 될 수 있을까 하여 정리한 리스트입니다.1. submitPost 함수안의 easyHttp.post 메서드를 호출하지 않을 때는 새로고침이 되지 않는다. ( easyHttp.post 메서드는 async 함수입니다)2. e.preventDefault 메서드를 호출해봤지만 똑같다3. 해당 프로젝트 깃허브 저장소 입니다. 혹시 모듈로 추가된 js파일도 필요하실까봐 링크 올립니다. import { easyHttp } from './easyhttp3.js'; import { ui } from './ui.js'; const URLs &#61; { base: &#34;http://localhost:3000&#34;, getAllPosts: &#34;/posts&#34;, addPost: &#34;/posts&#34; }; // DOM Loaded Eventlistners document.addEventListener(&#34;DOMContentLoaded&#34;, getPosts); // Listen for add post document.querySelector(&#34;.post-submit&#34;).addEventListener(&#34;click&#34;, submitPost); // get Posts function getPosts() { easyHttp.get(&#96;${URLs.base}${URLs.getAllPosts}&#96;) .then(data &#61;> { ui.showPosts(data); }) .catch(err &#61;> { console.log(err); }) }; // Submit Post function submitPost(e) { console.log(e); const title &#61; document.querySelector(&#34;#title&#34;).value; const body &#61; document.querySelector(&#34;#body&#34;).value; if (title !&#61;&#61; &#34;&#34; && body !&#61;&#61; &#34;&#34;) { const dataToSend &#61; { title, body }; easyHttp.post(&#96;${URLs.base}${URLs.addPost}&#96;, dataToSend) .then(data &#61;> { ui.showAlert(&#34;Post Added!&#34;, &#34;alert alert-info&#34;); ui.clearFields(); getPosts(); }) .catch(err &#61;> { console.log(err); }); } }

dev_jian · Accepted Answer

RWB 말씀해주신대로 혹여나 vs code extension인 live server로 서버를 실행시킨게 문제인가 싶어, babel이랑 webpack을 추가해서 webpack-dev-server를 이용해 실행시켰더니 새로고침 문제가 해결되었습니다. 감사합니다 !다만 babel이 compile 해준 덕분인지 server를 달리해서 그런건지 아직 밝혀내지 못해서 추가로 알아내는 사항이 있으면 코멘트로 업데이트 할게요 !또한 해결 후 수정하여 위에 기재된 repo에 commit 했습니다.다시 한번 감사드립니다.

ISA · Answer

클릭이벤트랑 서브밋 이벤트는 달라요

biggerer · Answer

https://github.com/dev-jian/microposts/blob/main/index.html#L29버튼 타입을 submit -> button 으로 바꾸시면 되지 않을까요?

dev_jian · Answer

ihangoon 아 저 type은 원래 button 이였는데 혹시나 해서 바꿔서 시도한 흔적이 남은 거에요. stackoverflow에 물어봤는데 해보라고 해서요 ... https://stackoverflow.com/questions/68051157/i-dont-know-why-it-is-refreshed-when-i-activate-the-event-in-this-code/68051202#68051202

dev_jian · Answer

ISA type&#61;submit 되어있는거 button 입니다. 리포에 있는거 흔적남은 거에요. 수정할 예정이니 button type이 button이라 생각해주시고 리뷰 부탁드릴게요.

RWB · Answer

HTML 내용 보니까 div에 form 클래스 있던데 UI 프레임워크 쓰시는 건가요?UI 프레임워크 내부에서 form 클래스를 form 태그로 바꿔줄겁니다.(아마도) 그렇다면 실제 동작하는 DOM은 form 태그인데, form 태그 내부의 button 태그는 그냥 submit으로 먹힙니다. 즉, form 태그 내부에서 submit을 하지 않는 버튼을 사용하시려면 반드시 input을 사용하셔야합니다. 현재 질문자분 소스는 button 태그를 사용하고 있으므로 submit 이벤트가 호출되고 있는 상태고, submit 이벤트에 따라 form의 action값으로 이동하겠지만, action은 당연히 선언을 안 해주셨기 때문에 새로고침만 할거고, 아마 URI 끝에 ?가 붙을겁니다. 난 반드시 button 태그를 사용해야겠다! 하시면 form의 onSubmit 이벤트에 넣어주는게 맞습니다.click 이벤트는 submit 이벤트랑 다르기 때문에 e.preventDefault(); 암만 선언해줘봐야 의미 없습니다.

dev_jian · Answer

RWB 위의 댓글에서 말씀드린 부분인데, 스택오버플로우에 달린 답변을 보고 submit으로 시도했으나 동작하지 않았어요. 혹여나 해서 bootswatch css cdn을 걷어내고 시도해봤으나 새로고침 현상이 고쳐지지 않네요.제가 제일 이해가 가지 않는 건 본문에서 기재한 1번사항이에요.easyHttp.post 메서드를 호출하지 않을 경우 새로고침 현상도 없고 이벤트가 정상적으로 수행됩니다.그런데 해당 메서드를 호출하면 새로고침이 일어나요.해당 메서드는 async function입니다.

RWB · Answer

음..... 우선 easyHttp.post 얜 관계없습니다. 그냥 비동기 HTTP 호출하는 함수에요.중요한건 현재 질문자분 소스에서 submit 이벤트가 일어나고 있다는겁니다. 질문자분 버튼 눌렀을 때 비동기 동작하고 싶으신거죠?그럼 우선

dev_jian · Answer

RWB 지금 제가 서버를 열어놨는데 한번 확인 부탁드릴게요. MicroPosts현재 easyHttp.post 메서드를 주석처리하고 event.type을 console에 로그로 남기는 로직을 추가했어요. post it 버튼 클릭하시면 해당 e.type이 뜨는데 click으로 나와요. type에 button 값도 제거 했습니다.

RWB · Answer

다시 원래대로 한 번 돌려보시겠어요?

dev_jian · Answer

RWB 넵. 말씀대로 되돌렸습니다. 개발자 도구 sources 탭에서 해당 부분 주석 풀린 것 확인했습니다. 그런데 제가 json-server로 동작시켜서 easyHttp.post 부분이 동작이 안되니까 로그가 찍히는 것 같아요.실제 제 컴퓨터에서는 주석을 풀면 새로고침 현상이 일어나고 있어요.혹시 실례가 안되면 직접 로컬에서 테스트 해주실 수 있을까요 ??

RWB · Answer

http://localhost:3000 이 부분 때문에 제쪽에서 동일하게 테스트 환경을 구축하긴 어려울 거 같아요.애초에 localhost:3000이 하드코딩되어있어서 다른 컴퓨터에서 테스트 할 수가 없는 환경이네요..

dev_jian · Answer

RWB json server를 제 ip로 호스트 하는 방법을 찾아서 수정해서 호스팅했습니다! 제 컴퓨터에 json 파일을 사용하실 수 있게 되었어요. 다시 확인 한 번 부탁드릴게요. 죄송합니다 ㅠ

RWB · Answer

websocker 쪽이 뭔가 있는 거 같은데, 이쪽 한번 확인해보세요.

dev_jian · Answer

안녕하세요, 데브지안입니다.다름이 아니라 제가 질문했던 문제의 구체적인 원인을 파악해서 다른 분께 도움이 되었으면 해 추가적인 코멘트를 등록하려합니다.먼저 원인은 VS Code의 extension인 Live Server의 AutoReload 기능 때문이었습니다.제가 위에 게시한 GitHub 코드에서 확인할 수 있듯 해당 프로젝트의 back-end는 json-server라는 패키지를 이용해 로컬에 있는 json파일에 데이터를 저장하는 방식입니다.따라서 POST 메서드를 이용해 HTTP 요청을 보내면 제 프로젝트 폴더 내부의 db.json 파일에 요청한 데이터가 쓰여지게 되죠.Auto Reload 기능은 제 프로젝트 폴더 내부의 데이터가 변경될 경우 자동으로 새로고침이 되는 기능입니다.따라서 ,1. POST를 요청하여 db.json 파일을 바꾼다.2. 프로젝트 내부의 db.json 파일이 바뀌었으니 페이지를 Auto Reload한다.가 되어 해당 이벤트가 일어난후 새로고침이 일어났던 것이었습니다.이를 Auto Reload가 되지 않는 Webpack-dev-server로 바꾸었기 때문에 해결되었던 것이었어요.혹시나 저처럼 VS Code의 Live Server와 별도 JSON server를 이용하여 테스트 하시는 경우가 있으시다면 아래의 링크를 참조하셔서 live server의 auto reload 대상에서 해당 로컬 파일을 제외하시면 도움이 될 것 같습니다!https://stackoverflow.com/questions/58150660/how-to-disable-auto-refresh-in-vscode 도와주신 모든 여러분께 다시 한 번 감사의 말씀 드립니다. 좋은 하루 되세요.

[해결] 페이지가 새로고침 되는 이유를 모르겠습니다.

15개의 답변

Q&A 목록