의진이의 개발 어린이 탈출기

리뷰리스트 ul? div??

의진이다람쥐 — Tue, 25 Feb 2025 11:25:27 +0900

이번에 프로젝트를 진행하면서, 리뷰리스트를 ul와 div 중 어떤 태그를 선택할지 고민하다가, 화 x라는 사이트와 무 xx라는

사이트를 참고 하였는데 각각 사용하는 게 달라서 어떤 게 맞는지 알아보았습니다.

화x

무xx

우선 각각의 장점? 이 있습니다.

1️⃣ ul > li를 사용하는 게 더 좋은 경우

HTML 의미론인 시멘틱 마크업을 고려할 때 입니다.

ul은 관련된 항목들의 목록의 의미합니다.

리뷰 리스트는 여러 개의 리뷰 항목으로 구성된 목록이므로, ul > li 가 의미적으로는 더 적절합니다.

화면 낭독기(Screen Reader) 사용자의 경우에는 ul은 리스트로 인식되어서 더 명확하게 정보를 제공합니다.

정리하자면,

1. 웹 접근성(Accessibility) ul은 “리스트”임을 명확히 전달, 스크린 리더기가 더 잘 인식함.

2. SEO(Search Engine Optimization) 검색 엔진이 리뷰 항목들을 더 구조적으로 이해할 수 있음.

3. 디자인 일관성 유지 CSS에서 li 스타일링을 활용하여 쉽게 조정 가능.

2️⃣. div를 사용하는 게 더 좋은 경우

ul을 사용할 필요가 없는 경우이다. 리스트가 아닌 단순한 레이아웃 요소라면 div가 더 적절하고,

리뷰 항목들이 독립적인 UI로 구성되고 리스트가 아닌 레이아웃의 역할을 한다면 div를 사용할 수 있습니다.

정리하자면,

1. “리스트”가 아니라 “레이아웃”을 위한 요소일 때.

2. 리뷰 항목이 각각 독립적인 카드(Card) UI로 동작할 때.

3. CSS로 리스트 스타일링이 필요 없는 경우.

결론

“리뷰 리스트”처럼 여러 개의 동일한 유형의 콘텐츠를 나열하는 경우, ul > li를 사용하는 것이 더 의미론적으로 적절함.

하지만, “그리드 카드 UI”처럼 배치가 더 중요하면 div를 사용해도 무방합니다.

저는 이번 프로젝트에서는 시멘틱 태그를 적절히 활용하는 것을 목표로 하므로,

리뷰 리스트를 ul > li 구조로 구현할 계획이다.

React useState에 대해 자세히 알아보기

의진이다람쥐 — Wed, 19 Feb 2025 15:23:33 +0900

이번에 금정이와 React-TS 프로젝트를 진행하면서 React Hooks에 대해 더 깊이 알아볼 필요성을 느꼈습니다.

이전에도 React Hook에 대한 포스팅을 했지만, 각 훅이 무엇이고, 어떻게 동작하는지 깊이 있게 다루지는 않았던 것 같습니다.

이번 기회에 React Hooks를 하나씩 좀 더 깊이 공부하면서 정리하는 포스팅을 연재해 볼 예정입니다.

useState란 무엇인가 ??

useState는 React 훅 중 하나입니다. 함수형 컴포넌트에서 상태를 관리할 수 있게 해 주고, 함수형 컴포넌트는 단순히 입력을 받아

출력을 반환하는 함수라 상태라는 것을 갖지 않습니다. 그렇지만 useState를 사용하면 함수형 컴포넌트에도 상태라는 것을

추가할 수 있습니다.

여기서 함수형 컴포넌트가 무엇인지 잘 모르는 분들을 위해 함수형 컴포넌트에 대해서도 설명드릴 건데요.

함수형 컴포넌트란?

React에서 UI를 정의하는 가장 기본적인 컴포넌트 유형 중 하나입니다.

이 컴포넌트는 자바스크립트 함수로 정의가 되며, props를 받아 JSX를 반환합니다.

이 JSX는 React가 화면에 그릴 요소들을 정의하는 데 사용됩니다.

function introduce(props) {
	return <h1>Hello My name is {props.name}~!!</h1>;
}

여기서 introduce는 함수형 컴포넌트입니다.

이 컴포넌트는 name이라는 것을 예를 들어서 의진이란 데이터를 props로 받으면 Hello My name is 의진~!!이라는 문장을 반환합니다. React는 이 리턴된 JSX를 해석하여 DOM 요소로 변환한 후 화면에 렌더링 합니다.

함수형 컴포넌트의 특징

가장 큰 특징은 순수 함수 pure function 이라고도 하는데 이처럼 동작한다는 것입니다.

주어진 props에 따라 항상 동일하게 출력을 반환하고, 컴포넌트 자체에 내부 상태 부수 효과가 없다는 가정이 포함됩니다.

이 이유로 함수형 컴포넌트는 초기에 상태를 가질 수 없었고, 상태를 관리하거나, 컴포넌트 생명주기에 따라 작업을 수행하려면
클래스형 컴포넌트를 사용해야 했습니다.

하지만 함수형 컴포넌트가 상태를 가질 수 없다는 제약은 훅이 도입되면서 변경이 되었고, useState, useEffect와 같은 훅을 사용하여
함수형 컴포넌트에서도 상태를 관리하고, 부수 효과를 처리할 수 있게 되었습니다.!!

useState 사용법

const [name, setName] = useState('');

state : 현재 상태의 값이다. 예를 들어, 이름을 나타내는 상태라면, name은 현재 이름이다.

setName(setState) : 상태를 업데이트하는 함수이다. 이 함수를 호출하면 상태가 변경되고, React가 Ui를 다시 리렌더링 한다.

useState() 안에 있는 값은 상태의 초기값이다. 이름을 비어있는 상태를 초기값을 두면 위처럼 설정하면 된다.

⚙️ useState의 동작 원리

useState는 컴포넌트가 렌더링 될 때, 리액트의 내부 메모리에 상태를 저장합니다.
컴포넌트가 처음 렌더링될 때. useState는 초기 상태 값을 받아 내부적으로 관리하고, 이 상태 값은
컴포넌트가 다시 렌더링 되더라도 유지가 됩니다.

만약 상태를 업데이트하는 setName과 같은 setState 함수를 호출하게 되면, 리액트는 해당 컴포넌트를

리렌더링 하여 화면을 업데이트 합니다. 이 시점에 새로운 상태 값이 적용된 컴포넌트가 렌더링하여 최신 상태를
반영합니다. 리액트는 가상의 DOM을 사용하여 변경된 부분만 업데이트하기 때문에 성능적으로 효율적입니다.

또 한 가지 지식을 얻었던 부분이 있는데, useState 내부에는 JS의 클로저 개념이 적용되어 있어,
함수형 컴포넌트가 매번 호출될 때마다 상태가 유지가 되고, React의 가상 DOM과 결합하여 상태가 변경될 때마다
효율적으로 UI를 업데이트할 수 있다고 합니다.

* Closure : 함수가 생성될 때 함수 내부에서 참조하는 변수를 함수가 생성된 환경에서 기억하는 특성

useState를 사용할 때 고려사항

복잡한 상태 관리

useState는 간단한 상태를 관리하기에는 좋지만. 상태가 복잡해지면 여러 개의 useState를 사용해야 할 수 있습니다.

이 경우 코드가 복잡해지고 가독성이 떨어질 수 있습니다. 복잡한 상태관리가 필요할 때는 useReducer를
이용하는 게 적절할 수 있습니다.

상태 업데이트는 비동기성이다.

동기(Synchronous)

• 코드가 위에서 아래로 순차적으로 실행됨

• 하나의 작업이 끝나야 다음 작업이 실행됨

비동기(Asynchronous)

• 특정 작업이 끝나기를 기다리지 않고, 다음 코드가 실행됨

• 시간이 걸리는 작업(예: 네트워크 요청, 파일 읽기, 타이머)에서 사용됨

useState의 상태를 업데이트할 수 있는 함수는 setState는 비동기적으로 동작합니다.

상태가 업데이트된 그 값을 참조하려면 주의해야 합니다.

지금까지는 개별 컴포넌트 내부에서의 상태 관리(useState)에 대해서만 이야기했습니다.

하지만 여러 컴포넌트 간 상태를 공유하거나 대규모 애플리케이션에서 상태를 효과적으로 관리해야 할 때는 다른 방법이 필요합니다.

상태 관리 방법 선택 가이드

1. 간단한 상태 관리 → useState

• 한 개의 컴포넌트 내부에서만 사용되는 상태

• 예: 버튼 클릭 시 UI 변경, 입력 필드 값 관리

2. 여러 컴포넌트 간 상태 공유 → useContext + useReducer

• 부모 → 자식 컴포넌트 간 상태 전달 (props로 넘기기 어려운 경우)

• 예: 다크 모드 설정, 사용자 인증 정보 (로그인 상태)

3. 대규모 애플리케이션 상태 관리 → Redux, Recoil, Zustand, Jotai 등

• 전역 상태 관리 필요할 때

• 예: 장바구니, 사용자 정보, 테마 설정 등 여러 곳에서 동시에 필요한 상태

웹 접근성(A11Y) & WAI-ARIA

의진이다람쥐 — Mon, 17 Feb 2025 17:11:52 +0900

웹 접근성(A11Y) 이란?

모든 사용자가 장애 유무와 관계없이 웹사이트를 쉽게 이용할 수 있도록 보장하는 것을 의미합니다.

정상인뿐만 아니라, 장애를 가지고 있는 사용자들도 웹콘텐츠를 문제없이 이용할 수 있도록 웹사이트를 설계하는 것이 중요합니다.

웹 접근성을 개발하면, SEO, 사용자 경험(UX) 브랜드 이미지 개선에도 큰 도움이 된다고 합니다.!!

웹 접근성 핵심 개념

웹 접근성의 원칙은 4가지(POUR)로 정리할 수 있습니다.

1. 인식가능(Perceivable) : 시각적, 청각적으로 콘텐츠를 인식할 수 있어야 합니다.

2. 운용 가능(Operable) : 키보드 음성 스크린리더 등 다양한 방식으로 웹을 조작할 수 있어야 합니다.

3. 이해 가능(Understandable) : 사용자 인터페이스와 콘텐츠가 예측 가능해야 합니다.

4. 견고성(Robust) : 다양한 기기와 보조 기술에서 정상적으로 작동해야 합니다.

☑️ 웹 접근성은 장애인뿐만 아니라, 일반인도 포함입니다.

☑️ 노인, 색약 유저, 마우스 없이 키보드만 사용하는 유저까지 모두 포함

WAI-ARIA란? (Accessible Rich Internet Applications)

웹 애플리케이션에서 접근성을 향상하기 위한 표준입니다.

기본적으로 HTML의 alt, label, title 같은 태그만으로 충분하지 않은 경우,

ARIA 속성을 활용해 접근성을 향상할 수 있습니다.

WAI-ARIA 핵심 속성

속성	설명	EX
role	요소의 역할을 명확하게 정의	<div role="button">클릭</div>
aria-label	보조 기술이 읽을 수 있는 레이블을 제공	<button aria-label="메뉴 열기">☰</button> (햄버거바임)
aria-labelledby	기존 요소의 id를 참조하여 레이블 제공	<input id="name"><label for="name">이름</label>
aria-hidden	화면에 표시되지만 보조 기술이 읽지 않도록 설정	<span aria-hidden="true">X</span>
aria-live	동적 콘텐츠 업데이트 시 알림 제공	<div aria-live="notification">새로운 알림이 있습니다.</div>

HTML5에는 button, link, heading 같은 요소의 의미가 내장되어있지만, <div>나 <span> 같은 태그를 사용할 경우 보조기술은 이해할 수 없습니다. 이 문제를 해결할 때, WAI-ARIA에 role 속성을 추가하면 요소의 의미를 명확히 전달 가능합니다.

즉 role 속성은 HTML 요소의 의미를 명확히 설명하여 보조 기술이 이해할 수 있도록 도와줍니다.

접근성 개선 방법

1️⃣ alt 속성 활용 (이미지 대체 텍스트)

<img src="euijin.png" alt="의진 사진">

alt 속성을 활용하면 시각 장애인이 화면 낭독기로 웹을 사용할 때 alt 속성을 읽어줍니다.

2️⃣ label 속성 활용 (form 요소 연결)

<label for="username">이름</label>
<input type="text" id="username">

label과 input을 연결하면 클릭 영역이 넓어지고 스크린 리더가 내용을 읽을 수 있습니다.

3️⃣ aria-hidden="true" (보조 기술 무시)

<span aria-hidden="true"> </span> 새 알림이 있습니다.

아이콘이나 장식 요소는 보조 기술이 읽지 않도록 aria-hidden="true" 추가하여 의미 없는 내용을 읽지 않도록 합니다.

4️⃣ aria-live="polite" (실시간 알림 읽어주기)

<div aria-live="polite">새로운 메시지가 도착했습니다.</div>

화면이 업데이트되거나, 알림이 올 때 스크린 리더가 자연스럽게 읽어줍니다.

5️⃣ 키보드 접근성 개선(tabindex)

<div role="button" tabindex="0">키보드로 접근 가능</div>

tabindex="0" 키보드 tab 키로 초점 이동 가능

tabindex="-1" 초점은 안 가지만 JS로 포커스 가능

최종 정리

✅ 웹 접근성(A11Y) → 모든 사용자가 웹을 쉽게 이용할 수 있도록 보장하는 것

✅ WAI-ARIA → HTML 요소에 의미를 부여하고 보조 기술이 인식할 수 있도록 돕는 속성

✅ 실무에서 접근성을 개선하는 방법

✔ alt 속성 활용 (<img alt="..." />)

✔ aria-label, aria-hidden, aria-live 등 WAI-ARIA 속성 활용

✔ 키보드 접근성을 위한 tabindex 추가

React 훅(Hook) 이란..?

의진이다람쥐 — Sat, 15 Feb 2025 04:02:57 +0900

오늘은 리액트 훅에 대해서 포스팅해 보겠습니다.

React에서 훅은 함수형 컴포넌트에서 상태(state)와 생명주기 기능을 사용할 수 있도록 해주는 기능입니다.

원래 React에서는 클래스 컴포넌트에서만 상태 관리와 생명주기 메서드를 사용할 수 있었지만,

React 16.8부터 useStatue, useEffect 같은 훅을 사용하여 함수형 컴포넌트에서도 이를 활용 가능 하게 되었습니다.

1️⃣ React Hook의 종류

React Hook은 크게 기본 훅, 추가 훅, 그리고 커스텀 훅으로 나뉩니다.

기본 훅

useState : 컴포넌트 상태 관리(state)

useEffect : 컴포넌트 생명주기 관리(side effects, API 요청 등)

useContext : 전역 상태 관리 (React Context API 활용)

추가 훅

useReducer : 복잡한 상태 로직을 관리

useRef : DOM 요소 또는 값 유지

useMemo : 렌더링 성능 최적화

useCallback : 이벤트 핸들러 최적화

useLayoutEffect : useEffect와 유사하지만 렌더링 직후 동기적으로 실행

useImperativeHandle : 컴포넌트의 인스턴스를 직접조작

커스텀 훅 : 여러 훅을 조합하여 반복되는 로직을 재사용할 수 있음

주로 사용하는 대표적인 React Hook 3가지 설명 및 사용법을 적어보겠습니다.

2️⃣ 기본 React Hook 상세 설명 및 사용법

1️⃣. useState - 상태(state) 관리

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0); // <== 초기값
  return (
    <div>
      <p>버튼을 몇번 눌렀을까요? {count}</p>
      <button onClick={() => setCount(count + 1)}>+1 증가 ~ </button>
    </div>
  );
};

export default Counter;

useState(초기값)을 사용하여 상태를 정의

버튼을 눌러 setCount를 호출하면 컴포넌트가 다시 렌더링 됩니다.

✅ 2. useEffect - 상태(state) 관리 (저번 포스팅에서 axios를 사용하여 API 요청법을 포스팅했으므로 융합해서 써볼게요)

1️⃣. useEffect + axios 기본 예제

import { useEffect } from "react";
import axios from "axios";

const FetchData = () => {
  useEffect(() => {

    const fetchData = async () => {
      try {
        const response = await axios.get("https://요청주소기입하세요/test");
        console.log("API 데이터:", response.data);
      } catch (error) {
        console.error("API 요청 중 오류 발생:", error);
      }
    };

    fetchData();
  }, []); 

  return <h2>콘솔에서 데이터를 확인하세요!</h2>;
};

export default FetchData;

설명

1.useEffect(() => {...}, [])

컴포넌트가 처음 렌더링될 때 API를 한 번만 요청하도록 설정합니다.

✅ 3. useContext - 전역 상태 관리

import { createContext, useContext } from "react";

// 1️⃣ 컨텍스트 생성
const ThemeContext = createContext("light");

const ThemeComponent = () => {
  // 2️⃣ 컨텍스트 값 가져오기
  const theme = useContext(ThemeContext);
  return <p>현재 테마: {theme}</p>;
};

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemeComponent />
    </ThemeContext.Provider>
  );
};

useContext는 React의 Context API를 사용하여 전역적으로 상태를 공유할 때 유용합니다.(ex. 다크모드)

코드 설명은 ThemeContext.Provider로 value를 설정하고 하위 컴포넌트에서 useContext로 가져올 수 있음.

최종 정리

훅	설명
useState	컴포넌트 내부 상태 관리
useEffect	생명주기 관리, API 요청, 이벤트 핸들링
useContext	전역 상태 관리(Context API)
useReducer	복잡한 상태 로직 관리
useRef	DOM 요소 참조, 렌더링과 무관한 값 유지

SSR vs CSR: 언제, 왜 사용해야 할까?

의진이다람쥐 — Fri, 7 Feb 2025 19:00:03 +0900

이번에는 Next.js 프로젝트를 진행하기 전에, Next.js와 React의 차이점을 공부하면서 *SSR(서버 사이드 렌더링)*과 *CSR(클라이언트 사이드 렌더링)*이 주요 키워드로 많이 언급되는 것을 알게 되었습니다.

이에 대해 학습한 내용을 정리하여 포스팅해보려고 합니다.

️ SSR(Server-Side Rendering) – 서버 사이드 렌더링

SSR은 서버에서 HTML을 미리 렌더링 하여 클라이언트에 전달하는 방식입니다.

즉, 사용자가 요청을 보내면 서버에서 HTML을 생성한 후 브라우저로 전송하며, 이후 JavaScript가 실행되면서 인터랙티브 기능이 활성화됩니다.

위 그림 대로 정리를 하자면,

1. 사용자가 웹사이트에 요청을 보냅니다.

2. 서버는 렌더링이 가능한 HTML 파일을 만듭니다.

3. 브라우저는 빠르게 HTML을 읽을 수 있어 화면은 렌더링 되었지만, 조작은 불가능한 상태

4. 브라우저가 JS파일을 읽습니다.

5. 이제 유저는 콘텐츠를 볼수도 있고, 사용자의 조작도 기록이 됩니다.

6. 브라우저가 JS 프레임워크를 실행합니다.

7. 기록된 사용자 조작도 실행되고 페이지 상호작용도 가능해집니다.

✅ SSR 동작 과정 (요약)

1. 사용자가 웹사이트에 요청을 보냄

2. 서버가 해당 요청을 처리하고 HTML을 생성하여 클라이언트에 응답

3. 브라우저가 HTML을 렌더링 하고 JS 파일을 다운로드

4. JS가 실행되면 페이지의 인터랙티브 요소가 활성화됨

전체적으로 정리를 하자면, 서버사이드렌더링은 클라이언트가 서버에 매번 데이터를 요청하고 서버에서 처리하는 방식이라, 요청이 들어올 때마다 서버에서 새로운 화면을 만들어서 제공합니다. 이 뜻은 화면을 렌더링 하는 주체가 서버라는 뜻입니다.

이렇게 요청함으로써 많은 정보를 가진 웹이라면 성능적 문제가 생기게 되었습니다. 왜냐하면 서버에 정보를 요청할 때마다 새로고침을 하고, 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 화면에 렌더링 하는 방식이기 때문입니다.

SSR 장점

✅ 검색엔진 최적화(SEO)에 유리 – 완전한 HTML을 서버에서 제공하기 때문에 검색 엔진 크롤러가 쉽게 분석 가능

✅ 초기 페이지 로딩 속도 빠름 – 첫 번째 화면을 서버에서 렌더링 후 제공하기 때문에 사용자 경험이 향상됨

SSR 단점

❌ 페이지 이동 시 로딩 속도가 CSR보다 느림 – 새로운 페이지를 요청할 때마다 서버 렌더링을 다시 수행해야 함

❌ 서버 부하 증가 – 요청이 많을수록 서버의 부담이 커지고, 확장성이 떨어질 수 있음

❌ 클라이언트에서 JS가 실행되기 전까지 페이지 조작 불가능

⚡ CSR(Client-Side Rendering) – 클라이언트 사이드 렌더링

CSR은 초기에는 빈 HTML을 전달하고, 브라우저에서 JavaScript를 실행하여 화면을 렌더링하는 방식입니다.

즉, 클라이언트(브라우저)가 데이터를 받아 화면을 구성하며, React, Vue 등 SPA(Single Page Application) 프레임워크에서 주로 사용됩니다.

✅ CSR 동작 과정

1. 사용자가 웹사이트에 요청을 보냄

2. CDN이 빠르게 HTML과 JS 파일을 제공

3. 브라우저가 HTML 및 JS를 다운로드 (이 시점에서는 화면이 안 보일 수 있음)

4. JS가 실행되면서 API 요청을 보내고 데이터를 받아와 UI를 렌더링

5. 페이지가 완성되면 사용자 인터랙션 가능

정리하면, 클라이언트 사이드 렌더링은 클라이언트인 브라우저가 렌더링을 처리하는 방식입니다.

서버에서 필요한 데이터를 한 번에 받고 받은 데이터를 브라우저가 렌더링 하는 겁니다.

이는 화면 렌더링 방식인 SPA(Single Page Application) 이랑도 밀접한 연관이 있다고 합니다.

SPA는 CSR 방식이고, 처음 한번 페이지 전체를 로딩하고, 필요시 데이터만 바꿔서 화면을 그려줍니다.

최근 개발할 때 많이 사용되는 프레임워크인 React도 SPA입니다.

CSR은 CPU 성능 상승 + JS 표준화(리액트, 뷰, 앵귤러 프레임워크의 발전)와 함께 본격적으로 시작되었습니다.

CSR은 서버에서 데이터를 받아 모두 읽고 다시 화면에 페이지를 바꿔서 보여주는 것보다 훨씬 빠르게 화면을 그릴 수 있습니다.

이는 성능적으로도, 페이지를 새로 렌더링을 하지 않아, 서버자원을 덜 사용하며, 새로고침이 발생하지 않기 때문에, 화면이 바뀔 때도 화면 깜빡임이 없어 사용자 경험을 높일 수 있습니다.

장단점을 정리하자면

CSR 장점

✅ 사용자 경험(UX)이 향상됨 – 페이지 새로고침 없이 빠르게 화면을 변경할 수 있음

✅ 트래픽 감소 효과 – 변경된 데이터만 받아오기 때문에 네트워크 비용 절감

✅ 페이지 간 이동 속도 빠름 – 서버 요청 없이 프런트엔드에서 화면을 조작 가능

CSR 단점

❌ 초기 로딩 속도 느림 – JS가 실행되기 전까지 빈 HTML이 로드됨

❌ SEO에 불리 – 초기 HTML이 비어있어 검색 엔진이 콘텐츠를 제대로 읽지 못할 가능성 있음

그럼 SSR과 CSR은 언제 사용해야 할까요?

SSR은 네트워크가 느리거나, 검색엔진 최적화가 필요할 때, 페이지 상호작용이 별로 없을 때 사용을 합니다.

(블로그, 뉴스, 실시간 데이터)

CSR은 네트워크가 빠르고, 검색엔진 최적화가 필요 없고, 페이지 상호작용이 많이 필요할 때 사용합니다.

(대시보드, 웹앱, 로그인 필요 페이지)

결론

SSR과 CSR은 각각 장단점이 있으며, 서비스 특성에 따라 적절한 렌더링 방식을 선택하는 것이 중요합니다.

✅ SEO가 중요한 블로그, 뉴스 사이트 → SSR을 활용

✅ 대시보드, 웹앱처럼 빠른 화면 전환이 필요한 경우 → CSR을 활용

✅ SEO와 사용자 경험을 모두 고려해야 하는 경우 → Next.js의 Hybrid Rendering(SSR + CSR 조합) 사용

Next.js는 SSR, CSR뿐만 아니라 SSG(Static Site Generation), ISR(Incremental Static Regeneration)까지 지원하여 다양한 렌더링 방식의 장점을 활용할 수 있습니다.

다음 포스팅에서는 Next.js의 다양한 렌더링 방식과 활용 사례를 다뤄보겠습니다!

[TypeScript] 타입스크립트 타입, 타입 명시

의진이다람쥐 — Tue, 4 Feb 2025 17:11:22 +0900

오늘은 타입스크립트의 type에 대해서 포스팅해보겠습니다.

TypeScript는 Javascript compiler입니다.

TS는 Strongly type 언어이고, JS에서 발생할 수 있는 오류를 미리 감지하고 경고합니다.

이 말은 즉 TS에서 오류가 없다면 JS에서도 오류가 없다는 뜻입니다

TypeScript는 암묵적 Type와 명시적 Type를 모두 지원합니다.

Type는 변수를 선언할 때 명시적으로 지정해줘야 합니다. 만약 지정을 안 해준다면. 변수 선언 하고 난 뒤

"처음"으로 할당될 때를 기준으로 Type가 추론됩니다.

처음 할당된 변수의 Type와 다른 Type를 추후에 섞어서 쓰게 된다면 에러가 뜨게 됩니다.

변수의 Type은 기본적으로 클론(:) 뒤에 기재하는 방식을 통해 명시적으로 지정합니다.

예시)

const name : String

예시처럼 변수 name은 string이 아닌 다른 Type는 가질 수 없습니다.

TS는 JS의 리터럴 표현을 지원합니다. 숫자로 이루어진 Array를 정의하고 싶다면

number []와 같이 배열 리터럴을 통해 표현이 가능합니다.

하지만, 리터럴을 통해 표기하면 가동석이 떨어지는 경우가 있는데. type 명령어를 통해 나만의 Type를 생성 한 뒤 이를 활용하여

축약적으로 Type를 지정해 줄 수 있습니다. (Type Alias)

객체 리터럴로 Type 정의한 예시

const person : {
    name : string, age : number, sex : string 
  } = {
  name : euijin, age : 27, sex : male
  }

Person이라는 type를 생성하여 변수 person의 type이 Person 임을 보여주는 예시

type Person = {
    name : string, age : number, sex : string 
  } 
  
const person : Person = {
   name : 'euijin', age : 27, sex : male
}

위 예제에서 type을 통해 생성된 Person은 type에 관한 정보를 담고 있는, TypeScript에서만 쓰이는 변수의 일종이다.

이 말은 TypeScript에서 type 키워드는 JS에서 const, let, var 키워드와 똑같은 기능을 수행합니다

오늘은 TypeScript의 가장 기본 개념인 타입과 타입을 명시하는 방법에 대해 포스팅해보았습니다.

Lighthouse 검색엔진최적화(SEO) 100점 만들기

의진이다람쥐 — Fri, 31 Jan 2025 19:28:55 +0900

안녕하세요!

오늘은 LG 유플러스 유레카 SW 교육과정에서 진행했던 융합 프로젝트를 리팩토링하면서,

검색엔진최적화(SEO) 100점 달성 과정을 정리해보려고 합니다.

우리 4조 나쵸팝콘콜라 프로젝트는 본선에 진출한 만큼, 서비스 품질을 높이는 리팩토링 과정을 진행하고있습니다..(금정이와 둘이..)

그중에서도 SEO 점수를 100점으로 올리는 것이 목표였고,

Google Lighthouse 기준 SEO 100점 달성을 위해 여러 가지 최적화를 진행했습니다.

우선 리팩토링 하기전 LightHouse 검색 엔진 최적화 점수 입니다 ㅠㅠ..

개선 전

홈

마이페이지

개선 후

이미지가 너무 많으면 글이 조잡해보여서 조금만 이미지 첨부하겠습니다. 나머지 페이지에서도 전부 비슷한 점수가 나왔는데요. 어떻게 모든 페이지 100점을 적용 시켰는지 말씀 드리겠습니다.

우선 첫번째로

index.html head 태그안에

<meta name="description" content="쿠키 V2.0 - 영화 리뷰 플랫폼 버전2" />

처럼 디스크립션을 넣어 주는 방법이 있었습니다.

두번째,

검색 엔진 최적화를 위해 두 번째로 진행한 작업은 모든 페이지에 적절한 description 메타 태그를 추가하는 것이었습니다. 이를 위해 react-helmet-async 라이브러리를 활용하여, 페이지마다 고유한 설명을 제공하도록 설정했습니다.

설치

# npm 사용 시
npm install react-helmet-async

# yarn 사용 시
yarn add react-helmet-async

HelmetProvider로 전체 앱 감싸기

ReactDOM.createRoot(document.getElementById("root")).render(
  <HelmetProvider>
    <App />
  </HelmetProvider>

Helmet을 사용하여 페이지별 메타 태그 설정

   <Helmet>
        <title>마이페이지 | Cookie-V2.00</title>
        <meta name="description" content="쿠키 서비스의 마이페이지입니다." />
      </Helmet>

추가를 잘 하셨다면, 위 이미지처럼 탭에서 잘뜨는것을 확인하실 수 있습니다.

마지막으로,

페이지 내에서 글자 크기가 너무 작거나, 글자와 글자 간의 간격(라인 간격, 자간)이 너무 좁을 경우, 접근성(Accessibility) 점수와 SEO 점수가 낮아질 수 있습니다. 이는 사용자의 가독성을 저해하고 모바일 및 데스크톱 환경에서 불편함을 초래할 가능성이 있기 때문입니다.

SEO 최적화는 단순한 점수 올리기가 아니라, 더 많은 사용자에게 도달하고 보다 나은 경험을 제공하기 위한 과정입니다. 작은 변화가 큰 차이를 만들 수 있으니, 앞으로도 지속적으로 신경 쓰며 개선해 나가면 좋겠습니다!

자바스크립트의 DOM(Document Object Model)

의진이다람쥐 — Tue, 28 Jan 2025 23:36:32 +0900

안녕하세요

오늘은 자바스크립트의 기본 중에 기본인 DOM에 대해서

포스팅 해보겠습니다.

DOM(Document Object Model)

DOM(Document Object Model) 은 웹 문서의 구조화된 표현입니다.

이것은 프로그래밍 언어가 웹 페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스로 동작합니다.

자바스크립트에서 웹페이지의 요소를 선택, 수정, 추가 또는 제거할 때 사용됩니다.

DOM의 주요 특징

1. 트리 구조 : DOM은 트리 구조로 표현되며, 각 노드는 웹페이지에서 문서, 요소, 속성, 텍스트, 주석 을 나타냅니다.

2. 라이브 특성 : DOM은 라이브라는 특성이 있습니다. DOM에 대한 변경은 즉시 웹페이지에 반영됩니다.

3. 조작 가능 : 자바스크립트를 사용하여 DOM 요소를 선택 수정 추가 제거 할수 있습니다.

DOM 관련 메서드 및 속성

요소 선택

document.getElementById(id) : 주어진 id 가진 요소를 반환시킵니다.
document.getElementsByTagName(name) : 주어진 태그 이름을 가진 요소들의 목록을 반환합니다.
document.getElementsByClassName(name) : 주어진 클래스 이름을 가진 요소들의 목록을 반환합니다.
document.querySelector(selector) : 주어진 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다.
document.querySelectorAll(selector) : 주어진 CSS 선택자와 일치하는 모든 요소의 목록을 반환합니다.

요소 조작

element.textContent 또는 element.innerText: 요소의 텍스트 내용을 가져오거나 설정한다.
element.innerHTML: 요소의 내부 HTML을 가져오거나 설정한다.
element.setAttribute(name, value): 요소의 속성 값을 설정한다.
element.getAttribute(name): 요소의 속성 값을 가져온다.
element.appendChild(childElement): 요소에 자식 요소를 추가한다.
element.removeChild(childElement): 요소에서 자식 요소를 제거한다.

이벤트 리스너

element.addEventListener(event, function): 요소에 이벤트 리스너를 추가함
element.removeEventListener(event, function) : 요소에서 이벤트 리스너를 제거함

예시 )

let euijin = document.getElementById('euijin');

euijin.textcontent = 'euijin handsome';

euijin.addEventListener('onclick', function {
	alert('클릭 클릭!');
});

웹 페이지 빌드 과정(CRP)

CRP는 웹 브라우저가 HTML, CSS, JavaScript와 같은 웹 페이지의 리소스를 받아서

실제로 화면에 페이지를 표시하는 과정을 의미합니다.

이과정은 웹페이지의 로딩 시간과 성능에 중요한 영향을 미치므로 최적화하는 것이 매우 중요합니다.

주요 단계

1. DOM 트리 구축 (Constructing the DOM Tree)

브라우저는 HTML을 받아와서 DOM 트리라는 구조화된 표현을 만듭니다.

2. CSSOM 트리 구축 (Constructing the CSSOM Tree)

브라우저는 CSS를 받아와서 CSSOM 트리라는 구조화된 표현을 만듭니다.

3. 렌더 트리 생성 (Render Tree Construction)

DOM 트리와 CSSOM 트리는 합쳐서 렌더 트리를 생성합니다. 렌더 트리는 화면에 실제로 표시될

노드들만을 포함합니다.

4. 레이아웃 (Layout)

렌더 트리가 생성되면, 브라우저는 각 노드의 위치와 크기를 계산하는 레이아웃 과정을 거칩니다.

이를 reflow 라고 합니다.

5. 페인팅 (Painting)

레이아웃 단계 후 , 브라우저는 렌더 트리의 각 노드를 화면에 그리는 페인팅 과정을 시작합니다.

여기는 텍스트, 색상, 이미지, 그림자 등의 세부 요소 그리기가 포함됩니다.

CRP 최적화

CRP를 최적화를 하기 위한 목적은 웹페이지를 가능한 빠르게 렌더링 하기 위해서 입니다.

최적화 기법

CSS와 JavaScript의 최소화 및 압축 : 파일의 크기를 줄여 빠른 로딩을 도와줍니다.
인라인 CSS와 JavaScript의 사용 최소화 : 중요하지 않은 스타일이나 스크립트를 외부 파일로
분리하여 초기 렌더링을 가속화
비동기 스크립트 로딩 : async나 defer 속성을 이용하여 JavaScript의 실행을 지연시킴으로써 블로킹 방지
중요한 CSS를 위쪽에 위치 : 페이지의 위쪽 부분을 빠르게 렌더링하려면 중요한 스타일을 HTML 문서의 상단에 위치 시켜야함.
웹 폰트 최적화 : 웹 폰트의 로딩 지연을 방지하기 위해 필요한 스타일만 불러오거나, font-display 옵션을 사용

CSSOM

CSSOM은 DOM의 CSS 버전으로 생각할 수 있습니다.

DOM이 HTML 문서의 구조화된 표현을 제공하는 것처럼, CSSOM은 CSS 스타일 시트의 구조화된 표현을

제공합니다.

CSSOM의 주요 특징 및 개념

1. 트리 구조 : CSSOM도 트리구조로 구성됩니다. 이 트리의 각 노드는 CSS 규칙을 나타내고,
이 규칙들은 스타일 시트 내의 선택자. 속성 및 값에 해당됩니다.

2. 동적 : CSSOM도 DOM 처럼 동적입니다. 따라서 자바스크립트를 사용하여 실시간으로 CSSOM을 수정할 수 있고,
화면에 즉시 반영됩니다.

3. 렌더링 블록 : 웹 브라우저가 페이지를 렌더링 할 때, CSSOM은 필수적입니다. 브라우저는 DOM과
CSSOM을 합쳐서 렌더 트리를 생성하고, 이 트리를 기반으로 페이지의 레이아웃 및 페인트를 수행합니다.

이 과정에서 CSSOM이 완전히 생성되지 않으면 페이지 렌더링이 차단할수 있기 떄문에, CSS 자원 로딩 처리는 페이지의
성능에 큰 영향을 미칠 수 있습니다.

4. 자바스크립트으와의 상호 작용 : 자바스크립트를 사용하여 CSSOM에 접근하고 변경할 수 있습니다.

요약하면, DOM은 HTML 구조를, CSSOM은 스타일 구조를 나타내며, 두 요소는 페이지의 렌더링에 핵심적인 역할을 합니다. 효율적인 DOM/CSSOM 관리를 통해 성능 최적화가 가능합니다.

자바 스크립트의 원시타입 그리고 참조 타입

의진이다람쥐 — Tue, 28 Jan 2025 13:10:19 +0900

안녕하세요 오늘은 자바스크립트의 원시타입 그리고 참조 타입의 차이에 대해서

포스팅해보겠습니다.

JavaScript 변수 타입

자바스크립트의 변수 타입에는 크게 원시타입 그리고 참조타입으로 나뉩니다.

원시타입 변수는 데이터 복사가 일어나면 메모리 공간을 새로 확보해 독립적인 값을 저장하고,

참조타입은 메모리에 직접 접근이 아닌 메모리의 위치(주소)에 간접적인 참조를 통해 메모리에 접근을 합니다.

자바스크립트의 원시(Primitive) 타입

자바스크립트의 원시타입으로는 number, bigint, string, boolean, null, undefined, symbol

총 7개가 존재하며, 이들의 공통접은 object가 아니며 따로 메서드를 가지지 않습니다.

(여기서 symbol은 ES6에서 추가된 원시타입으로, 유일하고 변경 불가능한 값을 생성하는 데 사용됩니다.)

원시타입은 어떻게 작동할까요???

자바스크립트에서 원시타입을 선언하면, 이는 스택에 저장됩니다.
스택이란, LIFO(Last In First Out) 구조를 가진 자료구조입니다. 저장된 원시타입은

식별자를 통해 접근할 수 있고, 원시 데이터와 함께 스택에 저장됩니다.

const one = 10;

const two = 10;

같은 값을 가진 두 개의 변수가 선언 및 할당되었을 때, one 값과 함께 스택에 푸시되고, 그 위에 two 가 값과 함께 스택에 푸시된다. 같은 값이 있건 말건 전혀 상관없는 두 개의 공간이 생성된다.

자바스크립트의 참조 타입

참조타입은 원시 타입을 제외한 타입들을 말합니다.

객체(Object)
배열(Array)
함수(Fuction)
날짜(Date)

참조타입은 객체를 가리키는 메모리 주소를 변수에 저장합니다.

이 말은 변수에는 객체의 실제 값이 아닌 해당 객체를 가리키는 위치가 저장이 됩니다.

변수 간에 참조복사가 이루어지며, 두 변수가 같은 객체를 참조하게 됩니다.

HTML 시멘틱 태그

의진이다람쥐 — Sat, 25 Jan 2025 17:29:46 +0900

안녕하세요 오늘은 html 시멘틱 태그에 대해서

포스팅하겠습니다.

우선 포스팅을 하게 된 계기는

웹 개발 공부를 하면서 문서를 구조화하는 HTML 태그의 중요성을 느끼게 되었습니다. 특히 취업 준비를 위해 UI/UX 최적화와 접근성(Accessibility)에 대해 알아보던 중 **시맨틱 태그(Semantic Tag)**라는 개념이 눈에 들어왔습니다. HTML5에서 추가된 시맨틱 태그는 단순히 웹페이지의 구조를 정의하는 것뿐만 아니라, 검색 엔진 최적화(SEO), 접근성 향상, 유지 보수성에 있어서도 중요한 역할을 한다는 것을 알게 되었습니다. 그래서 시맨틱 태그의 필요성과 이를 활용하는 방법에 대해 깊이 알아보기로 했습니다.

우선 시멘틱 태그란?

태그 이름만으로 해당 태그가 담당하는 역할이나 의미를 명확히 알 수 있는 태그를 의미합니다.

이는 개발자 뿐만 아니라, 검색 엔진과 같은 도구들도 쉽게 해석할 수 있도록 설계되었습니다.

<주요 시멘틱 태그>

<header> : 문서나 섹션의 머리글
<footer> : 문서나 섹션의 바닥글
<nav> : 내비게이션 링크를 그룹화
<section> : 문서의 주제별 콘텐츠 섹션
<article>: 독립적으로 배포 가능한 콘텐츠
<aside>: 본문과 별개로 참조할 수 있는 콘텐츠
<main>:문서의 주요 콘텐츠 영역
<figure> 및 <figcaption> : 이미지, 차트 등과 그 설명을 그룹화

출처 : https://seo.tbwakorea.com/blog/what-is-semantic-tag/

https://www.semrush.com/blog/semantic-html5-guide/

시맨틱 태그가 중요한 이유

1. SEO 최적화

검색 엔진은 시맨틱 태그를 활용해 웹페이지의 콘텐츠 구조를 분석합니다. 적절한 시맨틱 태그를 사용하면 검색 엔진이 페이지의 내용을 더 잘 이해할 수 있어 검색 순위 상승에 유리합니다.

2. 웹 접근성(Accessibility)

스크린 리더와 같은 보조 기술은 시맨틱 태그를 통해 페이지의 구조를 사용자가 쉽게 이해할 수 있도록 돕습니다. 이는 장애를 가진 사용자들에게 웹을 더 친화적으로 만들어줍니다.

3. 코드 가독성

태그 자체가 의미를 가지므로, 협업 과정에서 다른 개발자가 코드를 읽고 이해하기 쉽습니다. 유지 보수에도 큰 도움이 됩니다.

4. 미래 확장성

시맨틱 태그는 웹 표준을 준수하므로, 브라우저의 업데이트나 새로운 기술 등장 시에도 비교적 오래 사용할 수 있는 구조를 제공합니다.