피어세션

체크포인트

FE

HTML & CSS

• HTML는 용도에 맞는 tag를 찾아서 사용
• HTML5 Layout 태그를 활용
• 모든 엘리먼트들은 가지런히 배치해야하고, 일정한 간격을 유지.
• 배치를 할때 flex 속성 또는 Position 속성을 사용
• HTML,CSS 브라우저 개발자도구를 활용한 문제 분석 방법

JavaScript 와 DOM

• DOM 에 대한 정의와 DOM APIs 에 대한 다양한 이해
• DOM 노드를 탐색하는 querySelector 와 같은 API 사용
• addEventListener 함수를 활용한 이벤트 등록
• breakpoint를 활용한 프로그래밍 실행 중단과 디버깅

서술형

• CSS 코드의 중복을 해결하는 방법을 설명해보세요.
• 주소창에 URL을 입력 후, 브라우저 렌더링이 될때까지의 과정을 설명해보세요.

---

BE

Node.js

• Node.js 설치
• Node.js 의 내부 구조 및 동작원리 학습
• Node.js 공식문서에서 API 살펴보기

Express

• Express 설치
• Express 에서 사용하는 모듈과 패키지들의 역할 살펴보기
• Middleware의 동작방식 이해
• 템플릿 엔진 문법 학습 및 활용

서술형

• 주소창에서 http://localhost:3000/blog/230801.html을 입력해서 응답하기까지의 일어나는 일들을 Express → Node.js → EventLoop → LibUV → OS(Linux) 의 관점에서 설명해 보세요.
• 템플릿 엔진을 사용하는 이유는 무엇일까요? 템플릿 엔진을 사용하지 않는다면 어떤 대안이 있을 수 있을까요?

핵심 경험 공유

이벤트 위임

공통적인 요소들에 대해서 똑같은 html 구조를 가진 부분들을 재사용성을 높여 다른 곳에서도 유용하게 사용할 뿐만 아니라 개별적인 서버의 templating 작업에서도 유용하게 쓰일 수 있는 방식을 사용하게 되면 전체적인 코드의 길이를 줄일 수 있을 뿐만 아니라 다른 페이지에서도 사용할 수 있어 활용도가 높다.

pug 템플릿 엔진의 경우, 이를 mixin 기능을 통해 구현할 수 있었는데, 이 mixin은 argument를 받고 이에 해당하는 html 요소들을 동적으로 생성할 수 있다는 점에서 우리가 알던 리액트와 같은 컴포넌트의 구조와 비슷하여 알아보거나 처리하기 쉽다는 장점을 가졌다.

mixin card(title,detail,author,date,id)
    style
        | @import url('/shared/card/css/card.css')
    include /shared/deleteConfirm/component/deleteConfirm.pug
    div.cardContainer(id=`${id}` draggable="true" data-date=`${date}`)
        form(action="post").editform(hidden)
            .form__div--cardForm
                input.form__input--title(type="text" placeholder="제목을 입력하세요" value=`${title}`) 
                textarea.form__textarea--cardDetail(type="text" placeholder="내용을 입력하세요" rows=1 maxlength=500)#cardDetail #{detail}
                .form__div--buttonWrapper
                    input.form__input__cancel-button(type="button", value="취소")
                    input.form__input__submit-button(type="button", value="등록")
        li.generalCard(data-drag=id)
            .articleWrapper
                article
                    p.title #{title}
                    p.detail #{detail}
                p.author author by #{author}
            aside
                img.deleteTodo(src="../asset/close.svg", alt="delete", data-close=id)
                img.activeEditmode(src="../asset/pen.svg", alt="edit", data-edit=id)
        +deleteConfirm("todo")

해당하는 컴포넌트는 각각의 todolist 안의 카드들이며, 이를 +card(title,detail,author,date,id)를 통해 계속해서 재사용할 수 있는 형태로 바꿔주었다.

하지만 개별 카드에 해당하는 이벤트를 등록하기 위해 해당 컴포넌트 안에서 스크립트를 제작하고 붙여주었는데, 문제는 해당하는 이벤트가 3번이 실행되었다.

문제를 파악해보니 section이 3개로 나뉘어져 이 또한 컴포넌트로 구현했었는데, 재사용하는 컴포넌트의 문제점은 id가 모두 같아 이를 판별하기 어렵다는 점이다. 모든 컴포넌트들에서 등록했던 이벤트가 각각 실행되어 3번이 실행되는 문제가 생긴 것이다.

기존의 문제를 해결하기 위해서는 상위 컴포넌트에서 각 컴포넌트에 해당하는 이벤트를 개별적으로 등록해주는 방법이 있었는데,

1. querySelectorAll를 통해 모든 컴포넌트들을 가져와 forEach문을 통해 각각의 요소에 이벤트 등록
2. 상위 컴포넌트에서 이벤트를 위임하여 처리 가 있었다. 하지만 1번의 경우 개별적인 컴포넌트들이 많아지게 되면 각각에 대해서도 모든 이벤트 핸들러를 등록해줘야 하기 때문에 성능상에 이슈가 생길 수 있다. 따라서 상위에서 모두 공통적으로 작용할 수 있는 이벤트를 하나 등록하고, 위임하여 해당하는 컴포넌트를 구분 한 후에 처리할 수 있도록 하는 이벤트위임을 선택하였다.

document.getElementById("sections").addEventListener("click", (event) => {
  // 각 섹션별 이벤트들
  let addTodo = event.target.dataset.addform;
 
  if (addTodo) {
    // 각 폼에 이벤트 위임
    let form = document.getElementById(addTodo);
    // 보이게 하는 속성
    form.hidden = false;
 
    // 할일 추가 폼 입력란 크기 조절
    let detailInput = form.getElementsByClassName(
      "form__textarea--cardDetail"
    )[0];
    detailInput.addEventListener("input", adjustTextInput);
 
    // 창 닫기 폼
    let cancelButton = form.getElementsByClassName(
      "form__input__cancel-button"
    )[0];
    cancelButton.addEventListener("click", () => closeForm(form));
 
    let submitButton = form.getElementsByClassName(
      "form__input__submit-button"
    )[0];
    submitButton.addEventListener("click", () => {
      console.log("submit event");
    });
  }
 
  // 각 카드 관련 이벤트들
  // 카드 파트(편집 모드 열기)
  let editId = event.target.dataset.edit;
  if (editId) {
    const editComponent = document.getElementById(editId);
    // Edit mode 활성화
    editComponent.getElementsByClassName("editform")[0].hidden = false;
 
    // 할일 추가 폼 입력란 크기 조절
    let detailInput = editComponent.getElementsByClassName(
      "form__textarea--cardDetail"
    )[0];
    detailInput.addEventListener("input", adjustTextInput);
 
    // 카드 수정 -> 취소 눌렀을 때
    let cancelButton = editComponent.getElementsByClassName(
      "form__input__cancel-button"
    )[0];
    cancelButton.addEventListener("click", () => closeEditForm(editComponent));
    // 일반 카드 숨기기
    const generalCard = editComponent.getElementsByClassName("generalCard")[0];
    if (generalCard) {
      generalCard.style.display = "none";
    }
  }
 
  // 카드 삭제하기
  let closeId = event.target.dataset.close;
  if (closeId) {
    const closeComponent = document.getElementById(closeId);
    closeComponent.getElementsByClassName("modalBackground")[0].style.display =
      "flex";
    closeComponent
      .getElementsByClassName("cancelButton")[0]
      .addEventListener("click", () => {
        closeComponent.getElementsByClassName(
          "modalBackground"
        )[0].style.display = "none";
      });
    closeComponent
      .getElementsByClassName("conFirmButton")[0]
      .addEventListener("click", () => {
        closeComponent.getElementsByClassName(
          "modalBackground"
        )[0].style.display = "none";
        closeComponent.remove();
      });
  }
});

FSD 패턴

Feature-sliced Design은 모듈 간의 느슨한 결합과 높은 응집력을 제공할 수 있으며, 쉽게 확장할 수 있는 아키텍처이다. 이러한 패턴은 세 가지 구분 개념이 있다.

Layer

• app
  • 애플리케이션 로직이 초기화되는 곳
  • 프로바이더, 라우터, 전역 스타일, 전역 타입 선언 등
  • 애플리케이션의 진입점 역할
• processes(depricated)
  • 이 레이어는 여러 단계로 이루어진 등록과 같이 여러 페이지에 걸쳐 있는 프로세스를 처리
  • 이 레이어는 더 이상 사용되지 않는 것으로 간주되지만 여전히 가끔씩 마주할 수 있습니다. 선택적 레이어입니다.
• pages
  • 이 레이어에는 애플리케이션의 페이지가 포함됩니다.
• widgets
  • 페이지에 사용되는 독립적인 UI 컴포넌트
• features
  • 이 레이어는 비즈니스 가치를 전달하는 사용자 시나리오와 기능
  • 좋아요, 리뷰 작성, 제품 평가 등이 있습니다.
  • 선택적 레이어
• entities
  • 비즈니스 엔티티
  • 사용자, 리뷰, 댓글 등이 포함될 수 있습니다.
  • 선택적 레이어
• shared
  • 이 레이어에는 특정 비즈니스 로직에 종속되지 않은 재사용 가능한 컴포넌트와 유틸리티
  • 여기에는 UI 키트, axios 설정, 애플리케이션 설정, 비즈니스 로직에 묶이지 않은 헬퍼 등

Slices

슬라이스는 특정 엔티티에 대해서 코드를 그룹화 한다. 이와 같이 필요한 값에 대해서 독립적으로 다룰 수 있는 디렉토리를 생성한다.

세그먼트

각 슬라이스는 세그먼트로 구성되며 목적에 따라 슬라이스 내의 코드를 나누는데 도움이 될 수 있다.

• api - 필요한 서버 요청.
• UI - 슬라이스의 UI 컴포넌트.
• model - 비즈니스 로직, 즉 상태와의 상호 작용. actions 및 selectors가 이에 해당
• lib - 슬라이스 내에서 사용되는 보조 기능.
• config - 슬라이스에 필요한 구성값이지만 구성 세그먼트는 거의 필요하지 않음.
• consants - 필요한 상수.

나는 이러한 FSD를 일부 참고하여 나만의 디렉토리 구조를 만드는데 활용하였다. 하지만 중요한 점인 슬라이스와 세그먼트의 본질에 어긋나지 않도록 조율하였다.