VanillaJS 로 신년메시지 주고받는 사이트를 SPA 로 만들기 2차 회고

bicco2·2023년 1월 16일
0

-Numble Challenge

2차 회고록



첫번째 문제

처음에 처음 렌더링된 페이지의 navbar에 들어있는 a 태그들에 대해서만 페이지 이동 처리되는 것으로 인지

방법 1.

새로 생성하는 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 스택이 중첩된다.

방법 2.

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 에 박아 넣었음

이후 진행 예정

  1. 리펙토링
    1. input 엘리먼트 가져오고 등록하는거 모듈화시키기
    2. 디자인 수정
  2. 배포
profile
FE 개발자다?

0개의 댓글