개발 블로그

[React] CSS Modules

tero1115 — Thu, 12 Mar 2026 22:13:18 +0900

CSS Modules는 CSS 클래스 이름을 컴포넌트 단위로 고유하게 만들어주는 방식

다음과 같은 CSS가 있다고 가정

.btn {
  color: white;
  background: tomato;
}

빌드 후 실제 브라우저에서 사용되는 클래스 이름은 이런 형태로 바뀜

Button_btn__3X7a9

즉 클래스 이름에 파일 정보와 랜덤 문자열이 붙어서 고유한 이름이 됨

사용방법

1. CSS 파일 생성

CSS Module은 파일 이름에 .module.css를 붙여야함

Button.module.css

.btn {
    color: white;
    background: tomato;
}

2. 컴포넌트에서 import

import styles from "./Button.module.css";

여기서 styles는 CSS 클래스 이름을 담고 있는 객체

3. className에 적용

<button className={styles.btn}>
	버튼
</button>

실제로 브라우저에서는 다음과 같이 렌더링됨

<button class="Button_btn__3X7a9">

일반 CSS와 차이

일반 CSS

import "./Button.css";

<button className="btn">

특징

- CSS가 전역(Global) 으로 적용됨

- 같은 클래스 이름이 있으면 충돌 가능

CSS Modules

import styles from "./Button.module.css";

<button className={styles.btn}>

특징

- 클래스 이름을 자동으로 고유하게 생성

- 컴포넌트 단위 스타일 관리 가능

- CSS 충돌 방지

[JavaScript] classList

tero1115 — Tue, 9 Sep 2025 13:40:03 +0900

HTML 요소에 CSS 클래스를 추가, 제거, 확인할 때 자주 쓰는 것이 classList

자주 사용하는 메소드

classList.contains('클래스명') : 특정 클래스가 있는지 확인 (true / false 반환)
classList.add('클래스명') : 클래스 추가
classList.remove('클래스명') : 클래스 제거
classList.toggle('클래스명') : 클래스가 있으면 제거, 없으면 추가

toggle로 간단하게

<div class="box" id="box"></div>
<button id="btn">토글</button>

<script>
  const box = document.getElementById('box');
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    box.classList.toggle('active'); // 한 줄로 끝!
  });
</script>

contains + add/remove로 toggle 구현

<div class="box" id="box"></div>
<button id="btn">토글</button>

<script>
  const box = document.getElementById('box');
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    if (box.classList.contains('active')) {
      box.classList.remove('active'); // 있으면 제거
    } else {
      box.classList.add('active');    // 없으면 추가
    }
  });
</script>

toggle을 사용하면 편하지만 contains + add/remove로도 구현이 가능하다.

쿠키(Cookie), 세션(Session), 그리고 로컬 스토리지(Local Storage)

tero1115 — Wed, 13 Nov 2024 11:35:22 +0900

웹 개발을 하다 보면 쿠키(Cookie), 세션(Session), 로컬 스토리지(Local Storage)를 사용하는 경우가 많습니다. 이 세 가지는 모두 클라이언트와 서버 간의 상태를 유지하거나 데이터를 저장하는 방식이지만, 각기 다른 특성과 사용 목적이 있습니다.

1. 쿠키(Cookie)

쿠키는 웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 조각입니다. 서버가 사용자 브라우저에 쿠키를 생성해 저장하면, 이후 요청마다 브라우저는 해당 쿠키를 함께 전송하여 사용자를 식별할 수 있습니다.

주요 특징:
- 주로 로그인 정보나 사용자 선호 설정 등을 저장합니다.
- 만료 시간을 설정할 수 있으며, 지정된 시간이 지나면 자동으로 삭제됩니다.
- 용량이 작으며, 브라우저당 약 4KB로 제한됩니다.
- HTTP 요청마다 쿠키가 자동으로 전송되기 때문에 보안과 성능에 주의가 필요합니다.
사용 예시: 로그인 상태 유지, 사용자 맞춤 설정 유지, 장바구니 정보 저장 등.

2. 세션(Session)

세션은 서버에 사용자 정보를 저장하여 사용자가 웹사이트를 방문하는 동안 특정 상태를 유지하도록 하는 방식입니다. 세션은 클라이언트가 서버에 접속한 동안만 유지되며, 브라우저를 닫거나 일정 시간이 지나면 자동으로 만료됩니다.

주요 특징:
- 서버에서 관리되는 데이터이기 때문에 보안성이 높습니다.
- 쿠키와 달리 클라이언트가 직접 접근할 수 없어 민감한 정보 관리에 유리합니다.
- 세션 ID만 클라이언트 측에 저장하고, 실제 데이터는 서버에 저장됩니다.
- 일정 시간 동안 사용자 활동이 없으면 세션이 만료될 수 있습니다.
사용 예시: 로그인 인증 상태, 장바구니 관리, 사용자 정보 유지 등.

3. 로컬 스토리지(Local Storage)

로컬 스토리지는 브라우저에 영구적으로 데이터를 저장할 수 있는 공간입니다. 한 번 저장된 데이터는 사용자가 브라우저 데이터를 지우기 전까지 지속됩니다. 로컬 스토리지는 클라이언트 측에서만 접근할 수 있어 서버와의 통신 없이 데이터를 저장할 때 유용합니다.

주요 특징:
- 용량이 크다: 브라우저마다 다르지만, 일반적으로 약 5MB 이상의 데이터를 저장할 수 있습니다.
- 유효 기간이 없다: 사용자가 직접 삭제하기 전까지 데이터가 유지됩니다.
- 동기적 처리: 로컬 스토리지는 동기적으로 작동하므로 대량의 데이터를 저장하거나 호출할 때 성능에 주의해야 합니다.
- 보안에 주의: 브라우저에서 직접 접근 가능하므로, 민감한 정보는 암호화 없이 저장하지 않는 것이 중요합니다.
사용 예시: 사용자 설정 저장(테마, 언어 등), 캐싱 데이터, 애플리케이션 상태 저장 등.

쿠키, 세션, 로컬 스토리지 비교

특징	쿠키(Cookie)	세션(Session)	로컬 스토리지(Local Storage)
저장 위치	클라이언트(브라우저)	서버	클라이언트(브라우저)
데이터 유효 기간	설정 가능	브라우저 종료 또는 일정 시간 후 만료	사용자가 삭제할 때까지
주요 목적	로그인 상태, 사용자 식별	로그인 인증 상태, 민감 데이터 관리	설정 저장, 캐싱 데이터
용량	약 4KB	제한 없음(서버에 저장)	약 5MB 이상
보안성	낮음	상대적으로 높음	낮음
서버 요청 시 전송	자동으로 포함	서버가 직접 참조	전송되지 않음

언제 사용해야 할까?

쿠키: 로그인 상태나 사용자 식별이 필요할 때 주로 사용합니다. 다만, 보안에 주의해야 합니다.
세션: 민감한 데이터가 포함된 인증 정보나 사용자 상태를 서버에서 관리하고자 할 때 유리합니다.
로컬 스토리지: 사용자 설정을 유지하거나, 서버와 상관없이 브라우저에 데이터를 저장할 때 좋습니다. 하지만 보안에 주의해야 합니다.

마무리

쿠키, 세션, 로컬 스토리지는 각기 다른 특성과 목적을 가지고 있습니다. 웹 애플리케이션에서 데이터를 저장하거나 인증을 관리할 때 상황에 맞게 잘 선택하여 사용하는 것이 중요합니다. 예를 들어, 로그인 인증에는 보안이 중요한 세션을, 사용자 맞춤 설정에는 로컬 스토리지를, 그리고 상태 식별에는 쿠키를 사용할 수 있습니다.

DNS (Domain Name System)

tero1115 — Tue, 12 Nov 2024 16:55:41 +0900

DNS(Domain Name System)란?

인터넷을 사용하다 보면 누구나 www.example.com 같은 도메인 이름을 입력하게 됩니다. 그런데 컴퓨터는 이런 도메인 이름을 이해하지 못하고, 실제로는 IP 주소를 통해 통신합니다. 여기서 DNS(Domain Name System)는 도메인 이름을 IP 주소로 변환해주는 시스템입니다. 쉽게 말해, 사람이 이해하기 쉬운 도메인 이름을 입력하면, DNS는 해당 서버의 IP 주소로 변환해 줍니다. DNS는 우리가 인터넷을 쉽게 사용할 수 있게 도와주는 핵심적인 역할을 합니다.

DNS의 주요 역할

도메인 이름을 IP 주소로 변환: 사용자가 브라우저에 www.example.com을 입력하면, DNS는 이를 해당 서버의 IP 주소(예: 192.168.1.1)로 변환합니다. 이 덕분에 사용자는 복잡한 숫자 대신 도메인 이름만 기억하면 됩니다.
네트워크 경로 최적화: DNS는 사용자가 위치한 지역에 따라 가장 가까운 서버의 IP 주소로 연결해 줍니다. 이를 통해 사용자는 더 빠르고 효율적인 연결을 경험할 수 있습니다.
부하 분산: 대형 웹사이트의 경우 여러 서버를 운영하며, DNS를 통해 부하를 분산시켜 서버 성능을 최적화할 수 있습니다. 이를 통해 사이트의 안정성과 속도를 유지할 수 있습니다.

DNS의 동작 방식

사용자가 도메인 입력: 사용자가 브라우저에 www.example.com을 입력하면, 브라우저는 먼저 로컬 DNS 캐시에서 IP 주소를 찾습니다.
로컬 DNS 서버 문의: 캐시에 정보가 없으면, 로컬 DNS 서버에 도메인 이름의 IP 주소를 요청하게 됩니다.
DNS 계층 탐색: 로컬 DNS 서버가 해당 주소를 모르면, 최상위 도메인 서버(TLD, 예: .com)로 요청을 전달하며, 점차적으로 정확한 IP 주소를 찾습니다.
결과 반환 및 접속: 최종적으로 IP 주소가 반환되면, 브라우저는 이 IP 주소로 해당 서버에 연결하여 웹사이트를 표시합니다.

DNS의 구성 요소

도메인 네임(Domain Name): 사람이 읽기 쉬운 주소입니다. 예를 들어, example.com이 도메인 네임입니다.
IP 주소: 실제 서버 위치를 나타내는 주소입니다. 예를 들어, 192.168.1.1과 같은 숫자가 IP 주소입니다.
네임서버(Name Server): 도메인 이름과 IP 주소를 매칭하는 서버로, DNS 질의에 응답합니다.
DNS 레코드: 도메인과 연결된 정보입니다. A 레코드(IPv4), AAAA 레코드(IPv6), CNAME(별칭), MX(메일 서버) 등 다양한 유형이 있습니다.

DNS 캐싱

DNS는 검색 속도를 높이기 위해 캐싱을 사용합니다. 한 번 조회한 도메인-IP 정보는 일정 시간 동안 로컬에 저장됩니다. 이렇게 하면 같은 요청이 있을 때 빠르게 응답할 수 있습니다. 그러나 이 캐시 때문에 도메인 정보를 변경한 후, 새로운 정보가 모든 네트워크에 퍼지기까지 시간이 걸릴 수 있는데, 이를 DNS 전파 시간이라 부릅니다.

DNS 사용 시 주의할 점

DNS 전파 시간: 도메인 정보가 변경되면 모든 네트워크에 새로운 정보가 퍼지기까지 시간이 걸립니다. 이 때문에 도메인이나 서버 IP를 변경할 때 잠시 동안 구버전 정보로 접속될 수 있습니다.
DNS 보안: DNS를 변조하는 공격(DNS 스푸핑)으로 인해 사용자가 악의적인 사이트로 연결될 위험이 있습니다. 이를 방지하기 위해 DNSSEC 같은 보안 기술을 사용할 수 있습니다.

CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)

tero1115 — Mon, 11 Nov 2024 18:52:20 +0900

CSR(Client-Side Rendering)이란?

CSR은 클라이언트(사용자의 브라우저)에서 웹페이지를 렌더링하는 방식입니다. 웹사이트에 처음 접속하면 빈 HTML 파일과 JavaScript 파일을 다운로드한 후, JavaScript가 브라우저에서 실행되면서 콘텐츠를 화면에 그리게 됩니다. 대표적으로 React나 Vue와 같은 프론트엔드 프레임워크들이 CSR 방식을 사용합니다.

작동 방식: 서버에서 기본 HTML 파일과 필요한 JavaScript를 보내고, 클라이언트에서 JavaScript가 실행되면서 데이터를 받아 페이지를 구성합니다.
예시: SPA(Single Page Application) 구조의 웹앱이 대표적인 CSR 방식입니다.

CSR의 장점

빠른 상호작용: 페이지를 처음 로드한 이후에는 브라우저 내에서 페이지 간 전환이 일어나기 때문에 사용자 경험이 빠르고 매끄럽습니다.
서버 부하 감소: 대부분의 렌더링 작업이 클라이언트에서 이루어지기 때문에 서버에 대한 부하가 줄어듭니다.

CSR의 단점

SEO 최적화 어려움: 초기에는 빈 HTML만 제공되기 때문에 검색 엔진이 페이지를 제대로 크롤링하기 어려워 SEO에 불리합니다.
초기 로딩 시간 증가: JavaScript 파일을 다운로드하고 데이터를 가져와 렌더링해야 하므로 초기 로딩 속도가 느릴 수 있습니다.

SSR(Server-Side Rendering)이란?

SSR은 서버에서 웹 페이지를 렌더링한 후, 완성된 HTML을 클라이언트에게 보내주는 방식입니다. 사용자가 웹사이트에 접속하면 서버에서 콘텐츠를 포함한 HTML을 생성해 브라우저로 전달하므로, 사용자는 즉시 콘텐츠를 확인할 수 있습니다. 대표적으로 Next.js가 SSR을 지원하는 프레임워크입니다.

작동 방식: 서버에서 HTML을 생성해 사용자에게 전달하고, 브라우저는 이 HTML을 받아 즉시 렌더링합니다.
예시: 전통적인 다중 페이지 애플리케이션(MPA)이나, SSR을 지원하는 Next.js 같은 React 프레임워크가 있습니다.

SSR의 장점

SEO 친화적: 서버에서 생성된 HTML에 모든 콘텐츠가 포함되어 있어 검색 엔진이 페이지를 쉽게 크롤링할 수 있습니다.
빠른 초기 렌더링: 서버에서 HTML을 완성하여 보내므로 사용자는 더 빠르게 콘텐츠를 볼 수 있습니다.

SSR의 단점

서버 부하 증가: 모든 요청마다 서버가 HTML을 생성해야 하므로 트래픽이 많을 경우 서버에 큰 부하가 걸릴 수 있습니다.
상호작용 지연: JavaScript가 로드되기 전까지는 단순한 HTML만 보여주기 때문에 초기 상호작용이 지연될 수 있습니다.

CSR과 SSR의 비교

특징	CSR(Client-Side Rendering)	SSR(Server-Side Rendering)
렌더링 위치	클라이언트(브라우저)	서버
초기 로딩 속도	상대적으로 느림	빠름
SEO 적합성	낮음	높음
페이지 전환 속도	빠름	느릴 수 있음
사용 예	SPA(React, Vue)	MPA(다중 페이지), Next.js

CSR과 SSR의 혼합: 하이브리드 렌더링

최근에는 SSR과 CSR을 혼합한 하이브리드 렌더링 방식도 많이 사용됩니다. 예를 들어, Next.js는 초기 페이지 로딩 시에는 서버에서 렌더링하고, 이후에는 클라이언트에서 필요한 부분을 동적으로 렌더링하는 방식으로 초기 속도, SEO, 상호작용성을 모두 최적화할 수 있습니다.

언제 CSR, SSR을 선택할까?

SEO가 중요한 경우: 블로그나 전자상거래 사이트처럼 검색 엔진 노출이 중요한 경우 SSR이 유리합니다.
복잡한 사용자 인터페이스: 대시보드나 관리 도구처럼 빠르고 상호작용이 많은 페이지는 CSR이 더 적합합니다.
혼합이 필요한 경우: SEO와 사용자 상호작용 모두 중요한 경우에는 하이브리드 렌더링 방식을 고려할 수 있습니다.

CSR과 SSR은 각각 장단점이 있으므로, 프로젝트의 특성과 필요에 맞게 선택하는 것이 중요합니다. 웹사이트의 성능과 SEO 최적화, 사용자 경험을 향상시키기 위해 이 두 가지 렌더링 방식의 특성을 잘 이해하고 사용하는 것이 좋습니다.

지연 로딩 ( Lazy Loading )

tero1115 — Mon, 11 Nov 2024 17:06:42 +0900

Lazy Loading이란?

Lazy Loading은 웹 페이지에서 화면에 나타나기 전까지 이미지나 비디오 같은 리소스 로딩을 지연시키는 기술입니다. 이 기법은 처음부터 페이지의 모든 리소스를 불러오는 대신 사용자가 스크롤할 때 필요한 리소스만 불러오기 때문에 페이지 로딩 속도가 빨라지고, 사용자 경험이 개선됩니다.

Lazy Loading의 장점

빠른 페이지 로딩: 초기 로딩 시 필요한 리소스만 불러오기 때문에 페이지 로딩 속도가 빨라집니다.
데이터 절감: 사용자가 보지 않는 리소스는 로딩되지 않기 때문에 불필요한 데이터 사용을 줄일 수 있습니다.
사용자 경험 개선: 빠른 페이지 로딩은 이탈률을 줄이고 사용자 경험을 향상시킵니다.

구현 방법

1. HTML 속성 활용

HTML5의 loading="lazy" 속성으로 간단하게 이미지나 iframe에 Lazy Loading을 적용할 수 있습니다.

<img src="example.jpg" alt="Example" loading="lazy">
<iframe src="https://www.example.com" loading="lazy"></iframe>

2. JavaScript로 구현

Intersection Observer API를 사용하여 지연 로딩을 더욱 세밀하게 제어할 수 있습니다.

const images = document.querySelectorAll("img.lazy");

const lazyLoad = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // data-src에 실제 이미지 경로 저장
      img.classList.remove("lazy");
      observer.unobserve(img);
    }
  });
};

const observer = new IntersectionObserver(lazyLoad);

images.forEach(img => {
  observer.observe(img);
});

SEO와 Lazy Loading

Lazy Loading은 페이지 로딩 속도를 개선하기 때문에 SEO 성능을 높이는 데 도움이 됩니다. 그러나 모든 콘텐츠를 지연 로딩할 경우 검색엔진 최적화(SEO)에 부정적인 영향을 미칠 수 있습니다. 검색엔진 크롤러는 화면을 스크롤하지 않기 때문에 중요한 콘텐츠가 지연 로딩되면 탐색되지 않을 수 있습니다.

따라서 SEO 관점에서 중요한 사항은 다음과 같습니다.

핵심 콘텐츠는 Lazy Loading 피하기: 페이지의 중요한 텍스트 콘텐츠나 주요 키워드가 포함된 요소는 일반 로딩 방식을 사용해야 합니다. 예를 들어, 헤더나 메인 콘텐츠는 반드시 즉시 로딩하여 검색엔진이 빠르게 탐색할 수 있도록 해야 합니다.
이미지 Alt 태그 사용: 지연 로딩한 이미지에도 Alt 태그를 포함하여 검색엔진이 이미지의 의미를 이해할 수 있게 돕습니다.
Schema 및 Meta 태그 활용: 검색엔진이 페이지의 내용을 잘 이해할 수 있도록 Schema 태그나 Meta 태그를 포함하여 페이지를 최적화합니다.

결론

Lazy Loading은 웹 페이지의 성능을 높이기 위해 꼭 필요한 기술입니다. 다만 SEO 최적화를 위해 주요 콘텐츠는 지연 로딩하지 않는 것이 중요합니다. 이로써 페이지 속도와 SEO 성능을 모두 높일 수 있습니다.

트랜잭션 (Transaction)

tero1115 — Thu, 7 Nov 2024 18:01:40 +0900

트랜잭션이란?

트랜잭션은 데이터베이스에서 이루어지는 일련의 작업들을 하나의 단위로 묶어주는 것을 의미합니다. 여기서 중요한 개념은 트랜잭션이 "모두 성공하거나, 모두 실패해야 한다"는 것입니다.

즉, 트랜잭션의 모든 단계가 성공했을 때만 최종적으로 커밋(commit)되어 데이터베이스에 반영되고, 중간에 문제가 발생하면 트랜잭션 시작 전으로 되돌아가(롤백, rollback) 데이터의 일관성을 유지합니다.

친구에게 500원을 송금하는 과정을 예로 들어 설명해 보겠습니다.

트랜잭션 시작
내 계좌에서 500원 감소
친구 계좌에서 500원 추가
트랜잭션 완료 후 커밋

이 과정에서 트랜잭션은 내 계좌에서 500원을 감소시키고 친구의 계좌에 500원을 더하는 모든 작업이 완벽히 이루어졌을 때만 완료됩니다.

중간에 문제가 생기면?

그런데 만약 이 작업 도중에 정전이 발생했다고 가정해 봅시다.

트랜잭션 시작
내 계좌에서 500원 감소
정전 발생!

이 상태에서 서버가 갑자기 꺼진다면 어떻게 될까요? 친구의 계좌에는 500원이 추가되지 않았지만, 내 계좌에서는 이미 500원이 빠져나간 상황일 수 있습니다. 이 경우 데이터베이스는 트랜잭션의 특성 덕분에 작업을 롤백합니다. 즉, 트랜잭션을 시작하기 전 상태로 되돌려 놓아 데이터 불일치 문제를 방지합니다.

트랜잭션의 ACID 특성

트랜잭션은 데이터의 무결성을 보장하기 위해 ACID라는 네 가지 중요한 특성을 만족해야 합니다.

Atomicity(원자성): 트랜잭션 내의 모든 작업이 완전히 실행되거나, 전혀 실행되지 않아야 합니다.
Consistency(일관성): 트랜잭션이 성공적으로 완료되면 데이터베이스는 일관성 있는 상태로 유지되어야 합니다.
Isolation(고립성): 동시에 실행되는 트랜잭션들이 서로 영향을 미치지 않도록 보장해야 합니다.
Durability(지속성): 트랜잭션이 완료된 후에는 시스템 오류가 발생하더라도 그 결과가 데이터베이스에 영구적으로 반영되어야 합니다.

결론

트랜잭션은 우리가 일상적으로 사용하는 금융 서비스나 온라인 쇼핑 등 다양한 시스템에서 데이터의 일관성과 무결성을 보장하는 중요한 역할을 합니다. 정전과 같은 예기치 않은 상황에서도 데이터를 안전하게 보호하기 위해 트랜잭션의 원리와 ACID 특성을 잘 이해하는 것이 중요합니다.

[CSS] 그리드 레이아웃 ( Grid Layout )

tero1115 — Fri, 1 Nov 2024 17:56:29 +0900

<article>
    <header>헤더</header>
    <nav>메뉴</nav>
    <main>본문</main>
    <footer>푸터</footer>
</article>

article {
  color: #fff;
  height: 300px;
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "nav    footer";
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 50px;
}

header {
  background: #24c0a5;
  grid-area: header;
}

nav {
  background: #4011c5;
  grid-area: nav;
}

main {
  background: #b42809;
  grid-area: main;
}

footer {
  background: #24c0a5;
  grid-area: footer;
}

위 예제에서는 article 요소가 웹페이지 전체 레이아웃의 컨테이너 역할을 수행합니다.

display: grid를 사용하여 해당 요소를 그리드 컨테이너로 지정하고, 내부의 header, nav, main, footer 요소들이 각자의 그리드 영역을 차지하도록 설정합니다.

Grid Template

grid-template-areas 속성은 그리드 내 각 요소의 배치 영역을 명시적으로 정의하는 기능을 제공합니다.

article {
    display: grid;
    grid-template-areas:
        "header header"
        "nav    main"
        "nav    footer";
    grid-template-columns: 200px 1fr;
    grid-template-rows: 50px 1fr 50px;
}

위 코드에서 grid-template-areas는 각 요소가 레이아웃에서 차지하는 위치를 명시적으로 정의합니다.

첫 번째 행에는 header가 두 열을 차지합니다.
두 번째 행에는 nav와 main이 각각 배치됩니다.
세 번째 행에는 nav와 footer가 나란히 배치됩니다.

grid-template-columns와 grid-template-rows를 사용하여 그리드의 열과 행의 크기를 지정할 수 있습니다.

이 예제에서는 두 열이 각각 200px과 1fr로 설정되어 있습니다.
행은 첫 번째와 세 번째가 고정 크기 50px이고, 중간 행은 1fr로 나머지 공간을 차지합니다

Grid Area 설정

각 하위 요소는 grid-area 속성을 통해 그리드의 특정 영역에 배치됩니다.

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}

이처럼 각 요소에 grid-area를 명시함으로써 그리드에서 배치 위치를 명확하게 정의할 수 있습니다.

[DB] OFFSET과 LIMIT을 이용한 Pagination(페이징 처리)

tero1115 — Wed, 24 Jul 2024 13:15:52 +0900

OFFSET과 LIMIT을 사용한 SQL 페이징 예제

데이터베이스에서 많은 양의 데이터를 한 번에 가져오는 것은 비효율적일 수 있습니다. 이를 해결하기 위해 페이징(paging) 기법을 사용하여 필요한 만큼의 데이터만 가져오도록 할 수 있습니다. 이번 포스트에서는 OFFSET과 LIMIT을 사용하여 페이징을 구현하는 방법을 설명하겠습니다.

페이징의 기본 개념

페이징은 데이터를 여러 페이지로 나누어 한 페이지에 일정 개수의 데이터만 보여주는 방식입니다. 이를 통해 데이터베이스에 과부하를 줄이고, 사용자에게 더 나은 경험을 제공합니다.

OFFSET과 LIMIT의 역할

LIMIT: 한 번에 가져올 데이터의 최대 개수를 설정합니다. 예를 들어, 한 페이지에 10개의 데이터를 보여주고 싶다면 LIMIT 10을 사용합니다.
OFFSET: 가져올 데이터의 시작 위치를 설정합니다. 예를 들어, 첫 페이지는 처음 10개의 데이터를 가져오고, 두 번째 페이지는 그 다음 10개의 데이터를 가져와야 합니다. 이를 위해 OFFSET을 사용하여 시작 위치를 지정합니다.

SQL 페이징 예제

다음은 OFFSET과 LIMIT을 사용하여 페이징을 구현하는 예제입니다.

예제: 직원 목록 페이징

가정: 직원(employee) 테이블에서 직원 목록을 10개씩 페이지로 나누어 가져오고 싶습니다.

첫 번째 페이지:
- LIMIT 10 OFFSET 0: 처음 10개의 데이터를 가져옵니다.
sql
코드 복사

SELECT * FROM employee LIMIT 10 OFFSET 0;
두 번째 페이지:
- LIMIT 10 OFFSET 10: 11번째 데이터부터 20번째 데이터까지 가져옵니다.
sql
코드 복사

SELECT * FROM employee LIMIT 10 OFFSET 10;
세 번째 페이지:
- LIMIT 10 OFFSET 20: 21번째 데이터부터 30번째 데이터까지 가져옵니다.
sql
코드 복사

SELECT * FROM employee LIMIT 10 OFFSET 20;

PHP 코드에서의 페이징 구현

아래는 PHP 코드에서 페이지 번호와 한 페이지당 데이터 개수를 사용하여 OFFSET 값을 계산하고, 이를 SQL 쿼리에 적용하는 예제입니다.

<?php
// 데이터베이스 연결
$DB = new mysqli('localhost', 'username', 'password', 'database');

// 현재 페이지 번호와 페이지당 데이터 개수 설정
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$items_per_page = 10;
$offset = ($page - 1) * $items_per_page;

// 전체 직원 수 조회
$total_sql = "SELECT COUNT(*) as total FROM employee";
$total_result = $DB->query($total_sql);
$total_row = $total_result->fetch_assoc();
$total_count = $total_row['total'];
$total_pages = ceil($total_count / $items_per_page);

// 현재 페이지의 직원 목록 조회
$sql = "SELECT * FROM employee LIMIT $items_per_page OFFSET $offset";
$result = $DB->query($sql);

// 결과 출력
$employees = [];
while ($row = $result->fetch_assoc()) {
    $employees[] = $row;
}

// JSON 형식으로 출력
$output = [
    'current_page' => $page,
    'total_pages' => $total_pages,
    'employees' => $employees,
];

header('Content-Type: application/json');
echo json_encode($output);
?>

이제 이 PHP 코드는 page 파라미터에 따라 직원 목록을 페이지별로 잘라서 가져옵니다. 예를 들어, http://example.com/employees.php?page=2로 요청하면 두 번째 페이지의 직원 목록을 JSON 형식으로 반환합니다.

결론

OFFSET과 LIMIT을 사용하여 페이징을 구현하면 대용량 데이터를 효율적으로 처리하고, 사용자에게 필요한 만큼의 데이터만 제공할 수 있습니다

[JPA] 중간테이블

tero1115 — Fri, 31 May 2024 10:44:07 +0900

User와 Role테이블이 있다고 가정

User는 id, username, password

Role은 id, name

User는 여러 Role을 가질 수 있고 Role은 여러 User를 가질 수 있으니 Many-to-Many관계이다.

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String username;
    private String password;

    @ManyToMany(fetch = FetchType.EAGER)
    @JoinTable(
        name = "user_role",
        joinColumns = @JoinColumn(name = "user_id"),
        inverseJoinColumns = @JoinColumn(name = "role_id")
    )
    private Set<Role> roles;

}

@Entity
public class Role {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String name;

    @ManyToMany(mappedBy = "roles")
    private Set<User> users;

}

중간테이블

JPA가 user_role이라는 중간 테이블을 생성하여 User와 Role 간의 Many-to-Many 관계를 관리한다.

이 중간 테이블에는 user_id와 role_id 컬럼이 포함되어 있다.

User 테이블

id	username	password
1	user1	password1
2	user2	password2

Role 테이블

id	name
1	ROLE_USER
2	ROLE_ADMIN

user_role 중간 테이블

user_id	role_id
1	1
1	2
2	1

이 예시에서 user1은 ROLE_USER와 ROLE_ADMIN 역할을 모두 가지며, user2는 ROLE_USER 역할을 가진다.

JPA를 사용하면 중간 테이블을 직접 정의할 필요는 없고, 어노테이션을 통해 JPA가 자동으로 생성 및 관리하게 할 수 있다.

중간 테이블을 위한 JoinTable 설정

JPA의 @ManyToMany와 @JoinTable 어노테이션을 사용하여 중간 테이블을 자동으로 생성하고 관리한다.

중간 테이블 이름은 user_roles로 정의되고, user_id와 role_id가 외래 키로 사용된다.

각 엔티티에 ManyToMany 관계를 설정하면 JPA가 자동으로 user_roles 중간 테이블을 생성한다.

이 테이블은 사용자가 역할을 갖는 관계를 관리한다.

따라서, User와 Role 엔티티만 정의해주면 JPA가 나머지 작업을 처리한다.

이렇게 하면 데이터베이스에 필요한 세 가지 테이블이 생성되고, 각각의 관계가 올바르게 설정된다.