1주차 미션: Vanilla-Todo

🫶 개요

안녕하세요 디자이너 솔빈입니다. CEOS 프론트엔드 스터디 1주차 참여 결과를 깃헙에 남기게 되었습니다.

🔗 배포 링크

https://vanilla-todo-15th-kappa.vercel.app/

🗝 KEY QUESTIONS

DOM은 무엇인가요?

렌더링 과정에서의 DOM Tree

웹브라우저가 HTML 문서를 해석한 결과를 보여주는것을 렌더링이라고 합니다. 이 코드를 해석하는 과정에서 브라우저는 요소들을 트리 형태로 해석하게 되는데, 이것이 흔히 말하는 DOM 트리이며 DOM은 웹 요소들이 트리형태로 구조화된 문서(데이터)라고 이해하면 됩니다. 웹 브라우저가 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며, 이후 CSSOM Tree와 함께 해석되어 Render Tree를 생성하는 과정을 거치는 등의 과정이후에 비로소 화면에 표시됩니다.

프로그래밍 인터페이스로서의 DOM

DOM은 HTML 문서의 프로그래밍 인터페이스로, 자바스크립트를 이용해 페이지의 HTML 요소를 마치 JS 객체처럼 접근해 내부의 콘텐츠와 구조를 수정할 수 있도록 돕습니다. 성공적인 DOM 조작을 위해서는 HTML 문서의 body 마지막에 <script> 태그를 삽입하거나, head 내부에 삽입했을 경우 defer를 사용하여 HTML 문서를 전부 읽은 후 접근하여 DOM 조작을 진행해야 합니다.

HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요?

createElement 메소드

DOM은 HTML 문서의 프로그래밍 인터페이스로 프로그래밍 언어*(JS)* 가 HTML 요소에 접근하거나 이를 생성, 삭제할 수 있도록 메소드와 프로퍼티를 제공합니다. DOM은 document 객체에 구현되어 있으며, 이를 이용하여 기초적인 CRUD를 할 수 있습니다.

먼저 createElement 메소드를 통해 노드를 생성합니다. 이 과정을 거치고 나서도 DOM Tree에 해당 노드는 보이지 않습니다.
append/appendChild 메소드를 통해 DOM Tree의 올바른 부모 노드에 연결합니다. 이 과정이 끝나고 나서야 DOM Tree에 적절하게 연결된 것을 알 수 있습니다.

다만 이 경우 노드가 생성될 때 마다 DOM Tree를 처음부터 다시 탐색해야하기 때문에 성능 저하가 발생한다고 합니다.

insertAdjacentHTML 메소드

타겟 노드의 특정 위치에 원하는 노드를 바로 추가할 수 있는 메소드입니다. 다만 XSS 공격에 취약한 보안 이슈가 있어 지양되는 것 같습니다.

Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요?

Semantic tag의 예시

100여개의 Semantic tag가 있지만 웹사이트의 주요 구조를 중심으로 8개의 태그를 살펴보려고 합니다.

header
- 페이지의 제목, 소개 내용 등을 포함
- heading 태그, 로고, 아이콘, 저작권 정보, 검색 양식, 작성자 이름 등을 포함하기도 한다.
nav
- 메뉴, 목차 등을 포함
- 일반적으로 디자인 요소에서 navigation bar 라고 불리는 요소
main
- 지배적인 콘텐츠 영역을 나타내는 태그이다.
section
- 구채적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타낸다.
- 매우 소수의 예외를 제외하고는 제목이 있는것이 일반적이다.
- 실제 중심이 되는 내용을 감싸는 주제별 컨텐츠 영역이라고 볼 수 있다.
article
- 그 자체로 의미가 있는 웹사이트의 부분이다.
- 독립적으로 배포 또는 재사용되도록 의도 된 문서이다.
- 게시물, 잡지나 신문 기사, 블로그 작성 글, 제품 카드, 사용자의 댓글, 대화형 위젯등이 있다.
aside
- 간접적으로 문서와 관련된 내용을 나타낸다
- 광고, 링크 모음이 포함되기도 한다
footer
- 일반적으로 섹션의 작성자에 대한 정보, 저작권 데이터, 관련 문서에 대한 링크를 포함한다.
img
- 웹에서의 해당 이미지의 중요도를 컴퓨터의 입장에서 알리고 싶을 때 사용한다.
- div 블록에 background-image 를 활용하여 이미지를 삽입하더라도 웹에 구현된 모습은 유사하다. 하지만 컴퓨터가 이해하는 바는 두 태그가 서로 달라지기에, 단순 배경이나 이미지 스프라이트에는 img 태그를 사용하지 않는것이 도움이 된다.

Semantic tag를 사용하는 이유

검색 엔진 최적화(SEO)에 도움이 된다. 검색엔진은 태그를 기반으로 페이지의 핵심키워드를 판단하는데, 시맨틱 태그에 의해 컴퓨터가 HTML의 요소를 더 명확하게 해석할 수 있다.
웹 접근성이 향상된다. 시각 장애가 있는 사용자가 스크린 리더를 통해 페이지를 탐색하는 데 도움이 되기 때문이다.
개발자의 입장에서도 시맨틱한 네이밍의 코드블록이 수많은 div, span 보다 구분하기 쉽다.
해당하는 컴포넌트를 의미론적으로 반영하며, 적절한 컴포넌트 이름 짓기를 돕습니다.

Flexbox Layout은 무엇이며, 어떻게 사용하나요?

Flexbox Layout 이란?

Flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. 다양한 뷰포트 크기를 가진 디바이스들이 등장하면서 반응형 웹의 필요성이 커짐에 따라 등장하게 되었다.

Flexbox Layout 사용하기

정렬하려는 요소의 부모 요소에 display: flex 속성을 선언하면 된다. 이 속성이 적용된 요소는 flex container가 되고, 이 자식 요소는 flex item이 된다. align-items, justify-content 속성을 통해 내부 요소들의 배치를 유연하게 지정해줄 수 있다.

JavaScript가 다른 언어들에 비해 주목할 만한 점에는 어떤 것들이 있나요?

주목할 만한 장점

정보에 대한 상호운용성
- 자바스크립트는 다른 프로그래밍 언어와 완벽하게 호환된다.
확장성
- npm, yarn 등을 통해 풍부한 라이브러리를 쉽게 추가할 수 있다.

주목할 만한 유의점

다양한 플랫폼과 브라우저
- 브라우저마다 자바스크립트를 해석 하는 방법이 달라, 코드를 배포하기 전에 체크가 필요하다.
- 특정한 구형 브라우저에서는 지원되지 않는 기능들이 있다.
디버깅 기능의 부족
- 브라우저는 에러를 보여주지 않기 때문에 문제가 있어도 모르고 넘어가는 경우가 있다.
- 자바스크립트는 인터프리터 언어이기에
객체지향의 개념적 지원 부족
- private 키워드를 지원하지 않는 브라우저가 많아 캡슐화에 한계가 있다.
- 인터페이스 기능이 없어 추상화 기능이 부재한다.

코드에서 주석을 다는 바람직한 방법은 무엇일까요?

바람직한 주석

주석이 필요없는 코드
- 주석으로 코드를 설명하기 보다, 그 의도를 드러내는 알맞은 코드를 작성하는 것이 우선이다.
- 네이밍에서 의미를 유추할 수 있도록 컨벤션을 따르는 것도 중요하다.
설계에서 중요한 변수 등을 한 번 강조하기
- 자칫 대수롭지 않게 넘어갈 수 있는 부분이 있다면 주석을 통해 전달하는것이 좋다.

지양해야 할 주석

주석처리 된 코드
- 팀원들이 삭제하기를 주저하도록 만든다.
잘못 작성 된 주석
- 오래되거나 더 이상 필요 없는 주석은 빠르게 삭제하자.
- 간결하지 못하거나 잘못된 단어 선택, 유려하지 못하게 작성된 주석은 옳지 않다.
다른 시스템에 저장되어야 할 정보인 경우
- 변경 이력, 버그 추적, 소스코드 관리 등 따로 저장되어야 할 정보는 주석으로 적절치 않다
- 주석은 코드와 설계를 위한 기술적인 설명이 자리해야할 공간이다