프런트 딴에서는 아이디와 비밀번호를 입력을 받고요. 입력 받은 값을 로그인 버튼이 눌릴 때, 해당 값들이 서버로 전달이 됩니다. 서버는 그러한 데이터를 받아서 로직을 처리하게 됩
니다. 우리가 값을 HTML에을 통해서 입력을하게 되면, 이 데이터들을 자바스크립트에서 제어할 수 있어야합니다. HTML에 존재하는 값을 단순히 자바스크립트에서 제어할 수 없습니다. 그런데 그를 가능하게 하는 것이 DOM(Document Object Model)입니다. 한국말로 문서 객체 모델로, 이것은 일정한 인터페이스인데요. 이 인터페이스를 사용해서 자바스크립트에서 HTML에 존재하는 데이터들을 가져와서 제어할 수 있게 됩니다.
login.js에서 id Text에 해당하는 부분을 자바스크립트에서 id라는 변수로 담아줄거에요. DOM을 사용하기 위해서 document로 접근을해줘서 querySelector라는 것을 가져올 것입니다. 두번째 파라미터로 넘어오는 선택자를 통해서 HTML 값을 가져올 수 있습니다.
document.querySelector("선택자");
가져와서 제어해주기 위해서,
login.ejs
document.querySelector로 불러오기 위해서 일단 input에 id를 지정해줬습니다.
login.js
결과를 보면 밑에 hello는 정상적으로 출력이 되는 것을 볼 수 있는데 id에서 null로 출력이 됩니다. 위 document의 querySelector로 해당 값을 가져오기 전에 console.log가 먼저 실행이 되버려서 id가 null로 출력이 되는 것입니다.
그럴 때 어떻게 해야하냐면, defer또는 async를 사용하시면 됩니다.
결과보면 이제는 태그를 정상적으로 출력하는 것을 볼 수 있습니다.
이제 서버에 데이터를 넘기는 부분을 해보겠습니다.
결과
입력한 값을 잘 가져오는 것을 볼 수 있습니다.
'IT-백엔드' 카테고리의 다른 글
| Node.js MVC의 C(controller) 컨트롤러 분리하기 (0) | 2024.01.24 |
|---|---|
| Node.js 백엔드 맛보기 | app.listen() 모듈화, 폴더 구조 최적화 (0) | 2024.01.24 |
| Node.js | fetch | 프런트에서 서버로 데이터 보내기 (1) | 2024.01.24 |
| node.js 로그인 API 만들기 (0) | 2024.01.24 |
| Rest API에 대해서 1 (0) | 2024.01.24 |
