-Numble Challenge
처음에 처음 렌더링된 페이지의 navbar에 들어있는 a
태그들에 대해서만 페이지 이동 처리되는 것으로 인지
새로 생성하는 a
태그의 동작 코드에 navigate
로 처리하기
appendchild
랑 [insertAdjacentElement](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement)
or [insertBefore()](https://developer.mozilla.org/ko/docs/Web/API/Node/insertBefore)
로 이벤트 등록시킴
export const createClickEventAtLink = (targetNode) => {
targetNode.addEventListener("click", (e) => {
e.preventDefault();
const target = e.target.closest("a");
const targetURL = target.href.replace(import.meta.BASE_URL, "");
navigate(targetURL);
});
};
이런식으로 모듈화시켜서 이벤트 등록 hook를 만들어 사용했다.
오류
navigate
가 두 번씩 일어나서 url 스택이 중첩된다.
location.pathname으로 처리하기
const { pathname } = location;
if(pathname === '/'){
new 메인();
}
if(pathname === '/login'){
new 로그인();
}
if(pathname === '/signup'){
new 회원가입();
}
이 방법으로 처리하면 이동이 바로바로 되긴하는데 이동할 때마다 페이지가 새로고침되면서 동작함
SPA의 동작 방식과 다르다고 생각해서 삭제
메인 컴포넌트가 렌더링될 때 a
태그 클릭시 navigate
모듈이 작동하고 router 생성되게끔 하는 로직
따라서 등록해놓고 <a href>
로 똑같이 불러오면 된다.
import { navigate } from "./src/utils/navigate";
import { $ } from "./src/utils/querySelector";
import Router from "./src/router";
function App($container) {
this.$container = $container;
const init = () => {
$(".navbar").addEventListener("click", (e) => {
const target = e.target.closest("a");
if (!(target instanceof HTMLAnchorElement)) return;
e.preventDefault();
const targetURL = e.target.href.replace(import.meta.BASE_URL, "");
navigate(targetURL);
});
new Router($container);
};
init();
}
export default App;
서버데이터로 받아온 배열 데이터를 반복 처리해야하는데 vanilla js에서 해본 적이 없음
알게된 점
foreach
, element.insertAdjacentHTML(position, text)
사용해서 처리
this.commentDataList.forEach((commentItem) => {
$("#comment-list").insertAdjacentHTML(
"beforebegin",
`<li id="comment">
<p>${commentItem.content}</p>
<button id=${commentItem.commentId}>삭제</button>
</li>`
);
position은 아래 있는 단어만 사용 가능하다.
'beforebegin'
element 앞에
'afterbegin'
element 안에 가장 첫번째 child
'beforeend'
element 안에 가장 마지막 child
'afterend'
element 뒤에
text(인자)는 HTML 또는 XML로 해석될 수 있는 문자열이고(html code), (DOM) tree에 삽입할 수 있다.
input 값 넘겨 받으려고 addEventListener(”input”)
으로 리액트에서 하던 것처럼 spread 같이
이어 붙이는 형식으로 진행하려 했는데 아래의 오류 발생
뭔가 잘 안넘어간다.
value를 가져오는 방식으로 변경함 (해결)
commentInput.addEventListener("input", (e) => {
const commentValue = document.getElementById("comment-input").value;
this.comment = commentValue;
});
이상하게 tree의 가장 상위 container의 css가 적용이 안됨
이유 : 캐쉬 ??
일단 생으로 html 에 박아 넣었음
이후 진행 예정