TIL | 12.2.금 [DRF ↔️ JS CRUD]

- Django Rest Framework

Front JS CRUD

 

 

[페이지 이동]

 

 

위 동영상 처럼

동일 알고리즘을 쓰지만 구성이 다른 화면 이동을 html페이지 이동이 아닌 화면 전환 처럼 쓰기 위해서

const signUpBtn = document.getElementById("signUp");
const signInBtn = document.getElementById("signIn");
const container = document.querySelector(".container");

signUpBtn.addEventListener("click", () => {
  container.classList.add("right-panel-active");
});
signInBtn.addEventListener("click", () => {
  container.classList.remove("right-panel-active");
});

위의 코드로 버튼 click시 panel만 이동하여 동일 html 페이지에서 다른 화면을 보여줄 수 있다.

 

하지만 여시서 문제는 한 이벤트페이지에서만 username 과 password를 인식하고 다른 이벤트페이지에선 인식을 못하는것이였다.

(회원가입에서 쓰이는 username/password와 로그인에 쓰이는 username/password이 같다고 인식하면서 생기는 문제

→ 한페이지에 동일한 user가 2명이 존재하고 있는걸로 인식함)

 

 

오류를 살펴보니 '[DOM] Found 2 elements with non-unique id'

즉, 다른 화면구성, 다른함수를 사용한다고해도 동일 html페이지에서 id값이 똑같으면 한화면에 같이 사용하는 ID가 2개가 존재한다고 인식하므로 오류가 뜨는것이였다.

 

→ 따라서 다른 화면구성, 다른함수를 사용한다고해도 id값은 꼭 unique하게 설정해줘야한다.

 

 

 

---

 

 

[참고링크]

https://dev-elop.tistory.com/entry/DOM-Found-2-elements-with-non-unique-id

[DOM] Found 2 elements with non-unique id