외곈 World 👽🌏

React와 Vite 프로젝트를 시작을 위한 셋팅하기

npm create vite@latest 프로젝트명 --template react

npm create vite@latest 프로젝트명 --template react-ts

cd 프로젝트명

npm install

npm run dev

🎈 Vite를 사용한 이유

Vite를 프로젝트에 사용한 이유는 빠르고 효율적인 개발 환경을 제공하기 때문이다. Vite는 특히 초기 로딩과 실시간 개발에서 탁월한 성능을 보이며, 이러한 장점이 프로젝트 진행을  원활하게 만들어준다. 구체적으로는 다음과 같은 이유에서 Vite를 선택했다.

1. 빠른 개발 서버 시작: Vite는 모듈 기반으로 필요한 파일만 로딩하므로, 개발 서버가 즉시 시작된다. 특히 프로젝트 규모가 커질수록 이러한 빠른 로딩 속도는 큰 차이를 만든다. 개발 초기부터 빠르게 테스트하고 피드백을 받을 수 있어 개발 속도가 향상된다.
2. 효율적인 Hot Module Replacement (HMR): Vite는 변경된 모듈만 갱신하는 방식의 HMR을 지원하여, 코드 수정 후 즉각적으로 화면에 반영된다. 이로 인해 코드 수정 사항을 실시간으로 확인하며 개발할 수 있어 작업 효율성이 높아진다.
3. 최적화된 빌드: Vite는 개발 환경과 빌드 환경을 각각 최적화하여 사용한다. 개발 중에는 ESM(ES 모듈)을 사용하고, 최종 빌드 시에는 Rollup을 통해 번들링을 최적화하여 성능 좋은 결과물을 만들 수 있다.
4. 설정의 간단함과 유연성: Vite는 설정이 간단해 빠르게 개발을 시작할 수 있도록 돕는다. vite.config.js를 통해 필요한 설정을 쉽게 변경할 수 있으며, React와 같은 프레임워크와도 자연스럽게 통합되어 추가 설정 없이도 개발을 진행하기 용이하다.

이러한 이유로 Vite는 프로젝트에서 빠르고 효율적인 개발 환경을 지원하며, 초기 로딩부터 빌드까지 개발자가 원하는 성능과 유연성을 제공한다. Vite를 통해 생산성을 높이고 개발 프로세스를 간소화하는 것이 주요 목적이었다.

🎈 기타 다른 번들러 도구들

함수 (Functions)

1. 함수 정의 (Defining a Function)

함수는 반복적인 작업을 모듈화하여 코드 재사용성을 높이는 방법이다. def 키워드를 사용해 함수를 정의하며, 함수 이름과 괄호 안에 매개변수를 작성할 수 있다. 함수는 호출되었을 때에만 실행된다.

def greet(name):
    print(f"안녕하세요, {name}님!")

greet("철수")  # 출력: 안녕하세요, 철수님!

2. 매개변수와 인자 (Parameters and Arguments)

함수는 매개변수를 사용해 외부에서 값을 전달받을 수 있다. 함수 호출 시 전달되는 값을 인자라고 한다. 매개변수는 함수 내부에서 변수를 선언한 것과 같은 역할을 한다.

def add(a, b):
    return a + b

result = add(3, 4)
print(result)  # 출력: 7

3. 기본 매개변수 (Default Parameters)

함수를 정의할 때 기본값을 설정할 수 있다. 함수 호출 시 해당 인자가 전달되지 않으면 기본값이 사용된다.

기본 매개변수는 매개변수의 순서가 중요하며, 기본값이 없는 매개변수보다 뒤에 위치해야 한다.

def greet(name="친구"):
    print(f"안녕하세요, {name}님!")

greet()  # 출력: 안녕하세요, 친구님!
greet("영희")  # 출력: 안녕하세요, 영희님!

1. 기본 매개변수 정의 및 규칙

기본값이 없는 매개변수는 먼저 작성되고, 기본값이 있는 매개변수는 뒤에 작성해야 한다.

기본값이 없는 매개변수는 반드시 기본값이 있는 매개변수보다 앞에 위치해야 합니다.

def add(a, b=3):
    return a + b
    
# a 값만 전달하면 b는 기본값 3을 사용
print(add(2))  # 출력: 5

이 함수는 a는 필수 매개변수로 받고, b는 기본값 3을 가진다. 함수 호출 시 b 값을 제공하지 않으면 기본값이 사용된다.

잘못된 매개변수 사용 예시:: 기본값이 없는 매개변수는 반드시 기본값이 있는 매개변수보다 앞에 위치해야 한다.

def add(a=1, b):
    return a + b

print(add(b=3))  
# 오류 발생: 기본값이 없는 매개변수 b가 기본값이 있는 매개변수 a 뒤에 위치해 있어 오류가 발생.
# 기본값이 없는 매개변수 b는 기본값이 있는 매개변수 a 앞에 위치해야 함.

# 수정된 함수
def add(b, a=1):
    return a + b

print(add(b=3))  # 출력: 4

4. 반환값 (Return Value)

함수는 return 키워드를 사용해 값을 반환할 수 있다. return을 만나면 함수는 실행을 종료하고, 값을 반환한다. 반환된 값은 함수 호출 시 변수에 저장되거나 다른 계산에 사용할 수 있다.

def multiply(a, b):
    return a * b

result = multiply(5, 6)
print(result)  # 출력: 30

5. 가변 인자 (Variable-length Arguments)

가변 인자는 함수가 몇 개의 인자를 받을지 미리 알 수 없을 때 사용된다.

*args는 위치 기반의 가변 인자를, **kwargs는 키워드 기반의 가변 인자를 의미한다.

하나의 함수에서 여러 개의 인자를 받을 수 있다.

*args

• *args는 여러 개의 위치 인자를 하나의 튜플로 받는다.
• 인자 개수가 정해져 있지 않을 때 사용한다.

def sum_all(*args):
    return sum(args)

result = sum_all(1, 2, 3, 4, 5)
print(result)  # 출력: 15

**kwargs

• **kwargs는 여러 개의 키워드 인자를 하나의 딕셔너리로 받는다.
• kwargs.items()는 딕셔너리의 키와 값을 가져올 때 사용한다.

def print_info(**kwargs):
    for key, value in kwargs.items():
        print(f"{key}: {value}")

print_info(name="영희", age=30)  
# 출력:
# name: 영희
# age: 30

+) JavaScript에서도 유사하게 가변 인자를 사용할 수 있다. 

스프레드 연산자(...)는 Python의 *args와 유사하게 동작하며, 객체로 받은 인자는 kwargs와 비슷하다.

// JavaScript에서 가변 인자
function sumAll(...args) {
    return args.reduce((acc, cur) => acc + cur, 0);
}

console.log(sumAll(1, 2, 3, 4, 5));  // 출력: 15

// JavaScript에서 객체 키-값 받기
function printInfo(obj) {
    for (let key in obj) {
        console.log(`${key}: ${obj[key]}`);
    }
}

printInfo({ name: "영희", age: 30 });
// 출력:// name: 영희// age: 30

6. 람다 함수 (Lambda Functions)

람다 함수는 익명 함수로, 이름 없이 사용할 수 있는 간단한 함수이다. 주로 일회성 함수나 코드가 짧을 때 사용한다. lambda 키워드를 사용하며, 함수의 매개변수와 반환값을 간단히 정의할 수 있다.

# 람다 함수 예시
square = lambda x: x ** 2
print(square(5))  # 출력: 25

# 일반 함수로 작성한 경우
def square_fn(x):
    return x ** 2

print(square_fn(5))  # 출력: 25

• lambda x : x는 매개변수. 함수의 인자를 의미한다.
• x ** 2 : **는 제곱 연산자로, x의 제곱을 계산한다. 따라서 x가 5라면 x ** 2는 5 ** 2가 되어 25가 된다.
• x ** 3은 x의 세제곱을 의미합니다. 즉, x를 3번 곱한 결과를 반환합니다. x**3은 125(5의 세제곱)가 된다.

1. If문

if문은 주어진 조건이 참일 경우에만 코드 블록을 실행한다. 조건이 True일 때만 들여쓰기된 코드가 실행된다.

x = 10
if x > 5:
    print("x는 5보다 큽니다.")  # 출력: x는 5보다 큽니다.
else:
    print("x는 5 이하입니다.")

2. For문

fruits = ["사과", "바나나", "체리"]
for fruit in fruits:
    print(fruit)  # 출력: 사과, 바나나, 체리

# range()를 사용해 숫자 시퀀스를 반복
for i in range(3):
    print(i)  # 출력: 0, 1, 2

3. While문 

while문은 조건이 참인 동안 코드를 반복 실행한다. 조건이 False가 되거나 break를 만나면 반복이 종료된다.

x = 0
while x < 5:
    print(x)  # 출력: 0, 1, 2, 3, 4
    x += 1

import random

target = random.randint(1, 10)  # 1부터 10 사이의 랜덤 숫자를 생성

while True:
    guess = int(input("1-10 사이의 숫자를 입력하세요: "))  # 사용자 입력을 받음
    if guess == target:
        print("정답😆")
        break  # 정답을 맞췄으므로 반복 종료
    elif guess < target:
        print("up😉") # 입력한 숫자가 목표 숫자보다 작을 때
    elif guess > target:
        print("down😉") # 입력한 숫자가 목표 숫자보다 클 때

1. 문자열 (String)

• 문자열은 문자열 데이터를 표현하는 자료형.
• 큰따옴표(") 또는 작은따옴표(')로 문자열을 정의한다.
• 문자열은 변경할 수 없으며(immutable), 인덱싱과 슬라이싱을 통해 문자열의 개별 문자에 접근할 수 있다.

text = "Hello, World!"
print(text)  # 출력: Hello, World!

# 인덱싱을 통해 문자 접근
print(text[0])  # 출력: H

# 슬라이싱을 통해 부분 문자열 접근
print(text[0:5])  # 출력: Hello

2. 숫자 (Number)

•  숫자가 정수(int)와 소수(float)로 나뉜다.
• cf) 자바스크립트의 경우 정수와 소수 모두 number 타입으로 구분이 없다.

num = 10  # 정수
pi = 3.14  # 소수
print(num, pi)  # 출력: 10 3.14

# 산술 연산
result = num + pi
print(result)  # 출력: 13.14

3. 불린 (Boolean)

• 불린은 True 또는 False 두 가지 값만 가질 수 있는 데이터 타입이다.
• 주로 조건문에서 사용된다.
• Python에서는 대소문자를 구분하며, 반드시 True, False로 작성해야 한다.

is_active = True
print(is_active)  # 출력: True

# 조건문에서 사용
if is_active:
    print("활성 상태입니다.")  # 출력: 활성 상태입니다.

4. 리스트 (List) :: [ ]

• 리스트는 순서가 있는 데이터 타입으로, 중복된 값을 허용한다.
• 리스트는 대괄호[ ]로 정의된다.
• 리스트는 변경 가능하며, 인덱싱과 슬라이싱을 통해 요소에 접근할 수 있고 값을 추가하거나 제거할 수 있다.
• JavaScript의 배열과 유사

fruits = ["사과", "바나나", "체리"]
print(fruits)  # 출력: ['사과', '바나나', '체리']

# 값을 변경
fruits[1] = "딸기"
print(fruits)  # 출력: ['사과', '딸기', '체리']

# 값을 추가
fruits.append("포도")
print(fruits)  # 출력: ['사과', '딸기', '체리', '포도']

5. 튜플 (Tuple) :: ( ) 

• 튜플은 변경할 수 없는(immutable) 순서가 있는 데이터 타입이다.
• 소괄호( )로 정의되며, 중복된 값을 허용한다.
• 한 번 생성된 튜플의 값은 수정, 추가 또는 삭제할 수 없다.

coordinates = (10, 20)
print(coordinates)  # 출력: (10, 20)

# 인덱싱을 통해 요소 접근
print(coordinates[0])  # 출력: 10

# 튜플은 변경 불가능하므로 다음 줄은 오류 발생
# coordinates[0] = 30  # TypeError

6. 집합 (Set) :: { }

• 집합은 중복된 값을 허용하지 않는, 순서가 없는 데이터 타입이다.
• 중괄호{ )로 정의되며, 값을 추가하거나 제거할 수 있다.
• 집합의 요소는 순서가 없기 때문에 인덱싱으로 접근할 수 없다.

numbers = {1, 2, 3, 4, 5, 1, 2}
print(numbers)  # 출력: {1, 2, 3, 4, 5} (중복 값은 제거됨)

# 값을 추가
numbers.add(6)
print(numbers)  # 출력: {1, 2, 3, 4, 5, 6}

7. 딕셔너리 (Dictionary) :: { }

• 딕셔너리는 키-값 쌍으로 구성된 데이터 타입이다.
• 중괄호{ }로 정의되며, 키를 통해 값에 접근할 수 있다.
• 중복된 키는 허용되지 않지만, 값은 수정할 수 있다.
• JavaScript의 객체와 유사

person = {"name": "Alice", "age": 25}
print(person)  # 출력: {'name': 'Alice', 'age': 25}

# 키를 통해 값 접근
print(person["name"])  # 출력: Alice

# 값을 수정
person["age"] = 26
print(person)  # 출력: {'name': 'Alice', 'age': 26}

정처기 준비할 때 정리해뒀던 파이썬 자료형 4개 비교!

다시 공부하면서 예전에 정리해뒀던 자료 찾았는데 별 내용이 없...네...ㅎㅎㅎㅎ

사실 벼력치기로 셤공부 할 때는 내멋대로 array, object!! 하면서 풀다가 (1,2,3) 이렇게 생긴 튜플보고 뇌정지 왔었음..헿

똑바로 정리해두고 제대로 공부해보자~~~~~~~~~~~~~~~~~~~~~~~

✅ 파이썬 자료형(list, tuple, set, dict)

✅ 자료형 별 값 추가, 수정, 삭제

🔥 튜플은 불변 객체!!!! 값 수정 / 추가 / 삭제 불가

우선 파이썬 설치 방법에는 3가지 방법이 있다.

파이썬 공홈 다운로드 / 아나콘다 다운로드 / 미니콘다 다운로드

• 파이썬 공식 홈페이지 :: https://www.python.org

 • anaconda  :: https://www.anaconda.com 

• miniconda ::  https://docs.anaconda.com/miniconda/

파이썬 공식 홈페이지에서 파이썬을 다운로드하면, 기본적인 파이썬 인터프리터와 표준 라이브러리만 설치된다.

반면, Anaconda나 Miniconda는 파이썬 뿐만 아니라 패키지 관리 시스템(conda)도 포함되어 있어, 데이터 과학 및 머신 러닝에 필요한 다양한 패키지를 쉽게 설치하고 관리할 수 있다 :)

Anaconda

• 전체 패키지: Anaconda는 많은 패키지를 포함하여 제공하는 배포판으로 기본적으로 1,500개 이상의 패키지가 사전 설치되어 있다.
• 사용자 친화적: GUI(Anaconda Navigator)를 제공하여 패키지 관리와 환경 관리를 쉽게 할 수 있습니다.
• 대규모: 설치 파일 크기가 크고, 많은 공간을 차지할 수 있다.

Miniconda

• 경량 배포판: Miniconda는 Anaconda의 경량 버전으로, 기본적으로 Python과 conda 패키지 관리자만 포함되어 있다. 사용자가 필요한 패키지를 직접 설치해야 한다.
• 유연성: 필요에 따라 원하는 패키지만 설치할 수 있어 공간을 절약할 수 있다.
• 빠른 설치: 기본 설치가 작고 간단하여, 신속하게 설치할 수 있다.

리액트 프로젝트에서의 npm이나 yarn과 같은 역할을 하는 것 같다.

우선 미니콘다를 설치해보기로!

 https://docs.anaconda.com/miniconda/ 접속하여 스크롤을 쭉- 내려 운영체제에 맞는 걸로 다운로드.

윈도우 사용하기 때문에 맨 처음걸로 클릭클릭

쭉쭉 계속 next 클릭하다보면 설치 완료!

미루고 미루고 미뤄왔던 파이썬 

갑작스럽게 냅다 설치해부렀다. 시작이 반이랬으니까 👻  우하하핳

정처기 문풀로만 접한게 다지만.. 일단 맛보기라도 해보잣!! 10월 파이썬 고고씽 '~'

다 까먹어버린 자바스크립트를 다시 복기시키기 위해 시작한 투두 리스트 만들기!

만들다 보니 자바스크립트 처음 배울 때 써내려갔던 코드와 별반 차이가 없다..

처음이랑 똑같이 작성하면 단순 복습 단순 노가다일뿐..!!!!

뭐라도 발전된게 있어야 하지 않을까.......???????????란 생각에

반복되는 코드를 줄여보기로 했다!

👻 이전 코드

전에는 냅다 필요한 요소들 끊임없이 생성 후

냅다 붙여버리기..

부모요소 생성, 자식요소 생성, 자식요소 부모요소에 붙이기..

자꾸 늘어만 가는 createElement, appendChild......지긋지긋햐..

✨ 리팩토링

function createElement({
  tagName,
  properties,
  parent,
  children,
  count = 1,
}) {
  function create() {
    const element = document.createElement(tagName);  // 태그 생성
    Object.assign(element, properties);               // 속성 할당
    parent?.appendChild(element);                     // 부모에 추가

    // 자식 요소가 있을 경우 재귀적으로 자식 생성
    children?.map((child) => {
      child.parent = element;   // 현재 생성된 요소를 부모로 설정
      createElement(child);     // 자식 요소를 위한 createElement 재귀 호출
    });

    return element;
  }

  if (count > 1) {
    const results = [];
    for (let i = 0; i < count; i++) {
      results.push(create());
    }
    return results;
  } else {
    return create();
  }
}

• createElement와 appendChild를 재사용 가능한 createElement 함수로 변경하여 반복되는 코드를 제거하였다.
• createElement 함수는 여러 요소를 한 번에 생성할 수 있도록 count 파라미터를 추가하였다. 이를 통해 여러 요소를 동적으로 쉽게 추가할 수 있게 되었다.
• 부모-자식 관계의 DOM 구조를 쉽게 만들기 위해 children 파라미터와 재귀 호출을 사용했다. 이로써 부모 요소가 자식 요소를 갖는 복잡한 DOM 트리도 간단하게 구성할 수 있다.
• Object.assign을 사용하여 요소에 속성들을 유연하게 할당할 수 있도록 하였다. 이를 통해 여러 속성을 한 번에 설정할 수 있고, 추가적인 속성이 생기더라도 함수 수정 없이 처리할 수 있다.

Object.assign()은 객체의 속성들을 다른 객체에 복사하는 역할을 한다.
여기서는 properties 객체의 속성들을 생성된 태그(element)에 복사하여, 태그의 속성을 설정한다.

✨ 리팩토링한 createElement 사용하기

children 요소가 끊임 없이 생겨 무한 들여쓰기가 발생..

가독성을 위해 header, inputContainer, itemContainer의 큰 덩어리로 나누어서 생성해주었다.

      const app = createElement({
        tagName: "div",
        properties: { id: "app" },
        parent: document.body,
      });

      const header = createElement({
        tagName: "header",
        properties: { id: "header" },
        parent: app,
        children: [
          {
            tagName: "div",
            properties: { className: "counter" },
            children: [
              {
                tagName: "span",
                properties: { textContent: "total" },
              },
              {
                tagName: "span",
                properties: { textContent: "0" },
              },
              {
                tagName: "span",
                properties: { textContent: "completed" },
              },
              {
                tagName: "span",
                properties: { textContent: "0" },
              },
            ],
          },
          {
            tagName: "h1",
            properties: { textContent: "T🌞 D🎯 LIST", className: "title" },
          },

          {
            tagName: "span",
            properties: { textContent: "할 일을 기록하세요🌱" },
          },
        ],
      });
      
      // 이후 생략..

참고🧐

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

리액트만 하다보니 자바스크립트 지식이 모두 증발해버린 느낌....

메서드명들을 죄다 까먹어버린 것 같다. 급하게 투두 리스트를 만들어보며 기억해내보기로 했다.

DOM을 조작하기 위한 다양한 메서드 중 어떤 것을 선택해야 할 지 고민이 되었다.

매번 까먹어서 매번 고민하고 매번 검색하고!!! 지겨워... 이번엔 정리해놔야지.

텍스트 콘텐츠를 다루기:  innerText,textContent

📚 innerText

• 요소의 렌더링된 텍스트만 다루기 때문에 스타일이 적용된 후의 텍스트만 가져온다.
• display: none이나 visibility: hidden으로 숨겨진 요소의 텍스트도 textContent로는 접근할 수 있지만, innerText는 숨겨진 요소의 텍스트를 무시한다.
• textContent보다 렌더링 결과에 의존하므로 복잡한 구조에서는 조금 더 까다로울 수 있다.
• innerText는 DOM의 스타일을 계산하므로 textContent보다 약간 느릴 수 있지만, 일반적인 상황에서는 큰 차이가 없다.

📚 textContent

•  요소의 텍스트 내용을 추가하거나 가져온다. HTML 태그는 텍스트로 처리되며, 태그가 렌더링되지 않는다.
• 따라서 태그 없이 순수한 텍스트만 다룰 때 적합하다.
• 성능 측면에서 매우 빠르며, DOM을 다시 렌더링하지 않고 텍스트만 업데이트 하기 때문에 오버헤드가 거의 없다.
• 텍스트만 다루기 때문에 HTML 구조를 고려할 필요가 없어 유지 보수가 쉽다.

HTML 요소를 추가하거나 삽입: innerHTML, appendChild, insertAdjacentHTML

📚 innerHTML 

• 요소 내부의 HTML이나 XML 마크업을 가져오거나 설정한다.
• HTML 마크업을 포함한 문자열을 쉽게 삽입할 수 있다. 속도가 빠르다.
• 대량의 데이터를 처리할 때 성능 저하가 발생할 수 있으며,  크로스 사이트 스크립팅(XSS) 공격에 취약하다.
  • 내용을 변경하지 않고 추가적으로 HTML을 삽입하고자 할 때는 insertAdjacentHTML() 메서드를 사용하는 것이 더 적합하다.
    ..Why🧐?
    innerHTML은 요소의 모든 내용을 다시 렌더링하기 때문에 성능 저하가 발생할 수 있고, 기존의 자식 요소가 손상될 수 있다. 반면, insertAdjacentHTML()은 기존의 DOM 구조를 유지하면서 새로운 HTML을 효율적으로 삽입할 수 있어 성능과 안정성 면에서 유리하다.

📚  insertAdjacentHTML() 

• element.insertAdjacentHTML(position, text)
• 기존 요소를 유지한 채로 지정된 위치(position)에 HTML 문자열을 파싱하여 요소로 삽입한다.
• insertAdjacentHTML은 요소를 다시 파싱하지 않으므로 해당 요소 안의 기존 자식 요소를 손상시키지 않는다.
• HTML을 한 번에 추가하므로 성능이 빠를 수 있지만 보안 문제(XSS: Cross-site scripting)로 인해 외부 입력을 삽입할 때는 주의해야 한다.

const el = document.getElementById('el')
el.insertAdjacentHTML('beforebegin', '<span>Before Begin</span>');// el 이전에 삽입
el.insertAdjacentHTML('afterbegin', '<span>After Begin</span>'); // el의 첫 번째 자식 이전에 삽입
el.insertAdjacentHTML('beforeend', '<span>Before End</span>'); // el의 마지막 자식 이후에 삽입 
el.insertAdjacentHTML('afterend', '<span>After End</span>'); // el 이후에 삽입

<span> --A-- </span>
<span>Before Begin</span> 
<span id="el"> 
	<span>After Begin</span> 
    <span> --B-- </span>
    --C-- 
    <span> --D-- </span> 
    <span>Before End</span> 
 </span> 
 <span>After End</span> 
 <span> --E-- </span>

📚 appendChild()

• 새로 생성된 요소를 기존 DOM의 자식으로 추가한다.
• 코드가 명확하고 직관적이기 때문에 유지 보수와 가독성이 뛰어나다.
• 여러 요소를 한 번에 추가하는 경우 약간의 성능 오버헤드가 있지만, 일반적으로 성능이 양호하다.

✨ 결론

innerText vs textContent

innerText는 렌더링된 텍스트만 다루기 때문에 스타일에 의존적이다. 또한 숨겨진 요소의 텍스트는 무시되므로, 순수한 텍스트 처리에서는 textContent를 사용하는 것이 더욱 빠르고 단순하다. DOM 구조를 다시 렌더링하지 않고 순수 텍스트를 추가하거나 수정할 수 있기 때문에, 성능 오버헤드가 거의 없다. 

innerHTML vs insertAdjacentHTML vs appendChild

innerHTML은 기존의 모든 내용을 덮어쓰기 때문에, 성능이 저하될 수 있다. insertAdjacentHTML은 기존 요소를 유지하면서 새로운 HTML을 추가하므로 더 나은 성능을 제공한다. (자식요소의 파싱과정이 생략되어 더 빠르고 성능⬆)

하지만 insertAdjacentHTML과 innerHTML은 XSS 공격에 취약하기 때문에 가능하다면 appendChild를 사용하는 것이 더 안전하다고 판단하였다. 성능 면에서도 일반적인 사용에서는 충분하다고 생각된다.

🧐 참고
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild