파랑새를 냉장고에 넣는 방법

[ Spring] 스프링 없이 의존성 주입하기: 순수 자바로 DI 직접 만들어보기

파스트잇 — Sun, 13 Apr 2025 19:52:53 +0900

스프링을 공부하다 보면 의존성 주입(DI, Dependency Injection)이라는 개념을 만나게 됩니다. DI는 객체 간의 관계를 외부에서 주입해주는 방식으로 코드의 유연성과 테스트 편의성을 높여주는 중요한 설계 기법입니다. 하지만 DI를 먼저 배우다보면 "왜 굳이 DI가 필요한 거지?"하는 의문이 들기도 합니다. 이번 글에서는 DI의 소중함을 직접 느끼기 위해 순수 자바 코드로 DI를 구현해보려 합니다. 지금 시작합니다.

**1️⃣ 객체 직접 생성(new)의 문제점**

스프링 없이 객체를 사용할 때 가장 흔히 사용하는 방법은 `new` 키워드를 사용해 직접 인스턴스를 생성하는 것입니다. 예를 들어 서비스 코드 안에 리포지토리(=저장소)를 직접 생성하는 식입니다.

public class MemberService {
	private final MemberRepository memberRepository = new MemoryMemberRepository();
}

물론 이 방법은 매우 일반적이고 보기에는 문제가 없어 보입니다. (별 문제 없이 잘 돌아가니까요) 하지만 상황이 바뀌어 저장소를 다른 구현체로 바꾸어야 하는 상황이 온다면 어떻게 될까요?

public class MemberService {
    private final MemberRepository memberRepository = new DbMemberRepository(); 
}

이처럼 구현체가 바뀔 때마다 서비스 코드까지 직접 수정해야 합니다. 이는 객체 간의 강한 결합을 만들어내고 결과적으로 코드의 유연성을 해치게 됩니다. 좋은 객체 지향 설계 방식이 아닌 것이죠. 새로운 리포지토리 구현체를 추가하거나, 테스트를 위해 가짜 리포지토리(Mock)를 사용해야 할 때마다 서비스 코드를 수정해야 합니다. 이러한 방식은 소프트웨어 설계 원칙 중 하나인 OCP(개방-폐쇄 원칙, Open-Closed Principle)를 위반하는 것입니다. OCP는 "확장에는 열려 있고, 수정에는 닫혀 있어야 한다"는 원칙입니다. 그래서 우리는 객체 생성과 의존성 관리를 별도로 분리할 필요가 있습니다. 이러한 이유에서 의존성 주입이라는 개념이 등장했습니다.

소프트웨어 설계 원칙

유지보수성과 확장성을 높이기 위한 SOLID 원칙

- SRP (단일 책임 원칙, Single Responsibility Principle) ➔ 하나의 클래스는 하나의 책임만 가져야 한다.

- OCP (개방-폐쇄 원칙, Open-Closed Principle) ➔ 확장에는 열려 있고 수정에는 닫혀 있어야 한다.

- LSP (리스코프 치환 원칙, Liskov Substitution Principle) ➔ 하위 타입은 언제나 상위 타입을 대체할 수 있어야 한다.

- ISP (인터페이스 분리 원칙, Interface Segregation Principle) ➔ 하나의 큰 인터페이스보다는 여러 개의 구체적인 인터페이스가 낫다.

- DIP (의존 역전 원칙, Dependency Inversion Principle) ➔ 고수준 모듈은 저수준 모듈에 의존하면 안 되고 둘 다 추상화에 의존해야 한다.

2️⃣ 순수 자바로 DI 직접 구현하기

그러면 이제 객체 생성과 의존성 주입을 별도로 분리하는 방법을 적용해보겠습니다. 우리는 서비스 객체가 직접 리포지토리 구현체를 생성하는 대신 외부에서 리포지토리를 생성하고 주입해주는 구조를 만들 것입니다. 이 역할을 담당하는 클래스를 흔히 조립기(Assembler) 또는 `AppConfig`라고 부릅니다.

public class AppConfig {

    public MemberService memberService() {
        return new MemberService(memberRepository());
    }

    public MemberRepository memberRepository() {
        return new MemoryMemberRepository();
    }
}

`AppConfig` 클래스는 `MemberService` 객체를 생성할 때 `MemberRepository` 객체를 주입해줍니다. 이를 통해 `MemberService`는 저장소 구현체가 무엇인지 알 필요 없이, 오직 `MemberRepository` 인터페이스에만 의존할 수 있습니다. 만약 `MemoryMemberRepository`가 아닌 다른 구현체를 사용하고 싶다면 `memberRepository()`의 `return`문만 바꿔주면 됩니다.

public class AppConfig {

    public MemberService memberService() {
        return new MemberService(memberRepository());
    }

    public MemberRepository memberRepository() {
        // return new MemoryMemberRepository();
        return new DbMemberRepository();
    }
}

이렇게 말이죠. 이렇게 하면 다른 구현체로 교체하는 것도 훨씬 쉬워집니다.

public class MemberService {
    private final MemberRepository memberRepository;

    public MemberService(MemberRepository memberRepository) {
        this.memberRepository = memberRepository;
    }
}

서비스 코드의 경우 새로운 저장소 구현체를 추가하거나 테스트용 가짜 저장소를 주입하거나 할 때 서비스 코드 자체를 수정할 필요가 없어집니다. 결국 객체 생성과 의존성 관리를 명확히 분리하는 것. 이것이 바로 DI의 핵심입니다.

3️⃣ 순수 자바 DI 구현의 한계

순수 자바 코드만으로 객체 생성과 의존성 주입을 분리해보면서 DI의 개념을 더 명확히 알게 되었으나 몇 가지 한계와 불편함도 함께 느낄 수 있었습니다. 가장 큰 문제는 객체 관리가 불편하다는 것입니다. AppConfig와 같은 조립기를 사용한다고 해도 1) 어떤 객체가 생성되었는지 2) 어떤 객체가 어디에 주입되었는지 같은 것들을 사람이 직접 관리하고 조립해줘야 합니다. 객체가 적을 때는 수동 관리가 그리 힘들지 않지만 규모가 커져서 객체가 수십, 수백 개가 된다면 객체 생성과 의존성 주입을 일일이 코드로 관리하는 것은 현실적으로 어렵습니다. 또 다른 문제는 싱글톤 관리입니다. 서비스 객체나 저장소 객체는 보통 하나만 생성해서 재사용하고 싶지만 순수 자바만으로는 이러한 싱글톤 보장을 별도로 신경써야 합니다. (매번 new를 하면 새로운 인스턴스가 만들어지기 때문) 결국 객체 생명주기 관리, 싱글톤 보장, 의존성 주입 자동화 등의 문제를 편리하게 해결해줄 무언가가 필요하다고 느끼게 됩니다. 그것이 바로 스프링 프레임워크입니다. 스프링은 객체를 생성하고 관리하는 컨테이너를 제공하여 개발자가 직접 객체를 관리하는 수고를 덜어줍니다.

4️⃣ 우리에게는 스프링이 필요하다

순수 자바로 의존성 주입을 직접 구현해보며 우리는 객체 관리와 의존성 조립이 생각보다 복잡하고 번거롭다는 사실을 깨달았습니다. 스프링은 객체를 생성하고 의존성을 주입하며 싱글톤처럼 객체를 효율적으로 관리하는 DI(Dependency Injection) 컨테이너를 제공합니다. 이를 활용하면 직접 객체를 관리할 필요 없이 스프링이 대신 객체를 관리해주고 필요한 곳에 주입해주는 구조를 활용할 수 있습니다. 더 깔끔하고 유지보수하기 좋은 구조로 애플리케이션을 개발할 수 있는 것이죠. 다음 글에서는 스프링을 이용해 DI를 어떻게 적용하는지 알아보도록 하겠습니다! ☺️

[ CSS] 반응형 웹 실전 패턴 정리 — 미디어쿼리 + 레이아웃 대응법

파스트잇 — Sun, 6 Apr 2025 17:46:24 +0900

반응형 웹은 단순히 화면 크기에 맞춰 줄이는 것만으로 완성되지 않습니다. 진짜 반응형 웹을 만들기 위해서는 화면 크기에 따라 레이아웃이 자연스럽게 재배치되고, 불필요한 요소를 숨기거나 보여주는 대응 전략이 필요합니다. 이번 글에서는 미디어쿼리를 활용하여 실제로 레이아웃을 어떻게 변화시키는지, 자주 쓰이는 실전 패턴들을 정리해보겠습니다.

반응형 웹이 뭔지 아직 헷갈린다면? 아래의 글을 먼저 보고 오는 걸 추천합니다

[ CSS] 반응형 웹 시작하기 — viewport, 미디어쿼리, flex-wrap까지

요즘 웹사이트는 PC, 태블릿, 모바일처럼 다양한 화면 크기에서 모두 자연스럽게 보이도록 설계해야 합니다. 이때 꼭 필요한 개념이 바로 반응형 웹(Responsive Web) 입니다. 반응형 웹을 제대로 만들

sim-plism.tistory.com

✅ 반응형 실전 패턴 8가지

1️⃣ 네비게이션 바 줄이기

- 큰 화면: 로고 + 전체 메뉴 다 보이게

- 작은 화면: 햄버거 버튼으로 메뉴 숨기기

반응형 네비게이션 예제

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>반응형 네비게이션 예제</title>
    <link rel="stylesheet" href="style.css" />

    <style>
      /* 기본 스타일 */
      .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: lightblue;
        padding: 10px 20px;
      }

      .nav-links {
        display: flex;
        list-style: none;
        gap: 20px;
      }

      .nav-links a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
      }

      /* 햄버거 아이콘은 기본적으로 숨김 */
      .menu-icon {
        display: none;
        font-size: 24px;
        cursor: pointer;
      }

      /* 작은 화면 (768px 이하) */
      @media (max-width: 768px) {
        .nav-links {
          display: none; /* 메뉴 숨김 */
        }
        .menu-icon {
          display: block; /* 햄버거 아이콘 표시 */
        }
      }
    </style>
  </head>
  <body>
    <nav class="navbar">
      <div class="logo">로고</div>
      <ul class="nav-links">
        <li><a href="#">홈</a></li>
        <li><a href="#">소개</a></li>
        <li><a href="#">서비스</a></li>
        <li><a href="#">문의</a></li>
      </ul>
      <div class="menu-icon">☰</div>
    </nav>
  </body>
</html>

기본 스타일 화면

768px 이하 화면

2️⃣ 카드형 레이아웃

- 큰 화면: 3~4개씩 가로로 나열

- 작은 화면: 한 줄에 1개씩

반응형 카드 레이아웃 만들기 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>반응형 카드 레이아웃 예제</title>
  <style>
    .card-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      background-color: #f9f9f9;
      padding: 20px;
    }

    .card {
      flex: 1 1 300px; /* grow: 1, shrink: 1, basis: 300px */
      background-color: white;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* 작은 화면 대응 */
    @media (max-width: 768px) {
      .card {
        flex: 1 1 100%;
      }
    }
  </style>
</head>
<body>

<div class="card-container">
  <div class="card">카드 1</div>
  <div class="card">카드 2</div>
  <div class="card">카드 3</div>
  <div class="card">카드 4</div>
</div>

</body>
</html>

화면이 넓을 때 카드 3개가 가로로 배치되고, 공간이 부족한 카드 4번은 아래 줄로 내려감

화면이 더 좁아지면서 카드가 2개씩 두 줄에 정렬된 모습

화면 폭이 매우 좁아져 카드가 1개씩 세로로 쌓이는 모습

3️⃣ 이미지 비율 유지하면서 축소

- 브라우저 크기에 맞춰 이미지 자동 축소

- 가로 너비 100%로 설정

이미지 비율 유지 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>이미지 비율 유지 예제</title>
  <style>
    .image-container {
      width: 80%;
      max-width: 400px;
      margin: 20px auto;
    }

    .image-container img {
      width: 100%;
      height: auto; /*   핵심: 가로폭에 맞춰 세로비율 자동 유지 */
      display: block;
      border: 2px solid #333;
      border-radius: 8px;
    }
  </style>
</head>
<body>

<div class="image-container">
  <img src="https://picsum.photos/800/500" alt="비율 유지 이미지">
</div>

</body>
</html>

4️⃣ 글자 크기 조정 (반응형 폰트 만들기)

- 화면 크기에 따라 글자 크기도 자연스럽게 조정

☑️ 대표 방법

방법	특징	설명
px	고정 크기	화면 크기에 상관없이 항상 같은 크기
vw	화면 너비 기준 비율	브라우저 가로 크기에 따라 글자가 커지고 작아짐
clamp()	최소~최대 범위 지정	모바일, 태블릿, PC 각각 자연스럽게 크기 조정 가능

반응형 폰트 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>반응형 폰트 예제</title>
  <style>
    .container {
      padding: 20px;
      background-color: #f5f5f5;
      text-align: center;
    }

    .title-px {
      font-size: 24px; /* 고정 크기 */
      color: #333;
    }

    .title-vw {
      font-size: 5vw; /* 화면 너비 기준 비율 */
      color: #555;
      margin-top: 30px;
    }

    .title-clamp {
      font-size: clamp(16px, 5vw, 32px); /* 최소 16px ~ 최대 32px */
      color: #777;
      margin-top: 30px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="title-px">고정(px) 폰트 크기</div>
  <div class="title-vw">화면 너비(vw) 기반 폰트 크기</div>
  <div class="title-clamp">clamp()로 자연스럽게 조정된 폰트 크기</div>
</div>

</body>
</html>

title-px: 항상 24px / title-vw: 화면 너비 따라 변하는 폰트 / title-clamp: 자연스럽게 크기 제한을 걸면서 반응형 지원 (⭐추천)

5️⃣ 그리드 레이아웃 전환

- 큰 화면에서는 카드들을 가로/세로로 배치하고 작은 화면에서는 세로 한 줄로 정렬하는 방식

- flex만으로 한계가 있을 때 grid를 써서 좀 더 정확하게 제어

반응형 그리드 전환 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>반응형 그리드 레이아웃 예제</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3등분 */
      gap: 20px;
      padding: 20px;
      background-color: #f9f9f9;
    }

    .grid-item {
      background-color: lightblue;
      border: 1px solid #ccc;
      padding: 20px;
      text-align: center;
      font-weight: bold;
      font-size: 18px;
    }

    /* 작은 화면에서는 한 줄로 */
    @media (max-width: 768px) {
      .grid-container {
        grid-template-columns: 1fr; /* 1열로 변경 */
      }
    }
  </style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">아이템 1</div>
  <div class="grid-item">아이템 2</div>
  <div class="grid-item">아이템 3</div>
  <div class="grid-item">아이템 4</div>
</div>

</body>
</html>

3등분

작은 화면에서는 1열로 변경

6️⃣ 요소 순서 변경 (flex order 사용)

- 반응형 웹에서는 화면 크기에 따라 요소의 순서를 바꿔야 하는 경우가 존재함

- 예를 들어 큰 화면에서 텍스트 먼저, 이미지가 뒤에 나오고 작은 화면에서는 이미지 먼저, 텍스트 나중에 나오는 경우

- HTML 구조를 바꾸지 않고 CSS 만으로 순서를 바꾸는 방법이 `order` 속성

반응형 순서 변경 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>반응형 순서 변경 예제</title>
  <style>
    .container {
      display: flex;
      gap: 20px;
      background-color: #eee;
      padding: 20px;
    }
    .item {
      flex: 1 1 200px;
      padding: 20px;
      font-weight: bold;
      text-align: center;
    }
    .image {
      background-color: lightblue;
    }
    .text {
      background-color: rgb(249, 249, 145);
    }
    
    /* 작은 화면에서 순서 변경 */
    @media (max-width: 768px) {
      .image {
        order: -1; /* 이미지를 위로 보냄 */
      }
    }
  </style>
</head>
<body>

<div class="container">
  <div class="item text">텍스트</div>
  <div class="item image">이미지</div>
</div>

</body>
</html>

PC 화면: 텍스트 -> 이미지 (기본 순서)

모바일 화면: 이미지 -> 텍스트 (order: -1로 변경)

7️⃣ 숨기기 / 보이기 (display 속성)

- 특정 화면 크기에서만 요소를 숨기거나 보이게 할 수 있음

- 예를 들어 큰 화면에서는 큰 메뉴를 보여주고 작은 화면에서는 작은 메뉴나 햄버거 버튼만 보여주기

☑️ 기본 개념

속성	설명
display: none	화면에서 아예 숨김 (공간도 차지 ❌)
display: block (또는 flex 등)	요소를 다시 보이게 함

✔️ display: none 하면 진짜 없는 것처럼 돼서 스크린 리더나 접근성에도 영향 줄 수 있음

✔️ 단순히 투명하게 하고 싶으면 opacity: 0 같은 걸 쓰는데 공간까지 없애려면 display: none 써야 함

반응형 웹에서 숨기기/보이기 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>반응형 숨기기/보이기 예제</title>
  <style>
    .desktop-menu {
      display: block;
      background-color: lightblue;
      padding: 20px;
      text-align: center;
      font-weight: bold;
    }

    .mobile-menu {
      display: none;
      background-color: rgb(252, 252, 146);
      padding: 20px;
      text-align: center;
      font-weight: bold;
    }

    /* 작은 화면 (768px 이하) */
    @media (max-width: 768px) {
      .desktop-menu {
        display: none;
      }
      .mobile-menu {
        display: block;
      }
    }
  </style>
</head>
<body>

<div class="desktop-menu">데스크탑 메뉴</div>
<div class="mobile-menu">모바일 메뉴</div>

</body>
</html>

8️⃣ 버튼·메뉴 크기 조정 (width, padding 반응형 대응)

- 화면 크기에 맞춰서 버튼이나 메뉴 크기를 부드럽게 조정

- 특히 모바일에서는 버튼이 너무 작으면 터치하기 힘들기 때문에 크기나 여백을 조정해서 UX를 맞춰줘야 함

- 큰 화면: 넉넉한 패딩과 큰 글자

- 작은 화면: 패딩과 글자 크기를 줄여서 터치하기 좋게 최적화

버튼 크기 조정 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>반응형 버튼 크기 조정</title>
  <style>
    .btn {
      background-color: royalblue;
      color: white;
      border: none;
      padding: 12px 24px; /* 위아래 12px, 좌우 24px */
      font-size: 18px;
      border-radius: 8px;
      cursor: pointer;
    }

    /* 중간 화면-태블릿- 대응 */
    @media (max-width: 768px) {
      .btn {
        padding: 10px 20px; /* 여백 줄임 */
        font-size: 16px; /* 글자 크기도 조금 작게 */
      }
    }

    /* 작은 화면-모바일- 대응 */
    @media (max-width: 480px) {
      .btn {
        padding: 8px 16px;
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

<button class="btn">클릭하세요</button>

</body>
</html>

반응형 웹은 단순히 화면 크기에 맞춰 줄이는 것만으로 끝나지 않습니다. 진짜 반응형 웹을 만들기 위해서는 레이아웃을 재배치하고 요소를 숨기거나 순서를 바꾸거나 버튼 크기 같은 세부 사항까지 섬세하게 대응하는 것이 중요합니다. 이 실전 패턴들을 상황에 맞게 자유롭게 조합하며 PC, 태블릿, 모바일 어디서든 자연스럽고 세련된 레이아웃을 구현해 봅시다.

[ CSS] 반응형 웹 시작하기 — viewport, 미디어쿼리, flex-wrap까지

파스트잇 — Sun, 6 Apr 2025 15:49:14 +0900

요즘 웹사이트는 PC, 태블릿, 모바일처럼 다양한 화면 크기에서 모두 자연스럽게 보이도록 설계해야 합니다. 이때 꼭 필요한 개념이 바로 반응형 웹(Responsive Web) 입니다. 반응형 웹을 제대로 만들기 위해서는 단순히 화면 크기에 맞춰 크기만 조정하는 게 아니라 레이아웃이 유연하게 변하고 요소들이 자연스럽게 재배치되도록 설계해야 합니다. 이 글에서는 반응형 웹을 구성하는 핵심 요소인 viewport 설정, 미디어쿼리(media query), flex-wrap 같은 기본 기술들을 차근차근 정리해보겠습니다.

1️⃣ 반응형 웹(Responsive Web)이란?

반응형 웹이란 하나의 HTML 코드로 다양한 화면 크기(PC, 태블릿, 모바일)에 자동으로 대응하는 웹 디자인 형식을 말합니다. 핵심은 한 번 개발해서 여러 디바이스에 맞게 자연스럽게 변하는 것입니다. 유연한 그리드 레이아웃, 유동적인 이미지 크기, 미디어쿼리(Media Query)를 이용합니다.

반응형 웹 = 유연한 레이아웃 + 자동 크기 조정 + 다양한 디바이스 지원

2️⃣ Viewport 설정이란?

viewport는 사용자가 보는 브라우저 화면의 보이는 영역을 의미합니다. 즉, 화면 창 크기입니다. 일반적으로 PC와 모바일은 화면 크기가 다르기 때문에 모바일에서도 레이아웃이 제대로 보이게 하려면 viewport를 올바르게 설정해야 합니다. 반응형 웹은 바로 이 viewport를 설정하는 것에서 시작됩니다.

기본 Viewport 메타 태그 (HTML head 안에 꼭 넣어주기)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

(※ width=device-width: 디바이스 화면 크기에 맞춤 / initial-scale=1.0: 기본 줌-배율-설정, 1배)

3️⃣ 미디어쿼리(Media Query) 기본 구조

미디어쿼리는 화면 크기, 해상도, 디바이스 종류 같은 조건에 따라 CSS 스타일을 다르게 적용하는 기능입니다.

@media (조건) { /* 적용할 스타일 */ }

/* 화면 너비가 768px 이하일 때 배경색이 lightblue로 바뀜 */
@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

자주 쓰는 조건 종류

조건	의미
max-width	화면 너비가 이 값보다 작거나 같을 때
min-width	화면 너비가 이 값보다 크거나 같을 때
max-height / min-height	화면 높이 조건
orientation: portrait	세로 모드
orientation: landscape	가로 모드

✔️ 반응형 웹은 거의 `max-width` 중심으로 짬

✔️ 큰 화면 -> 작은 화면 순서로 내려가면서 스타일을 덮어씀

✔️ 주로 768px(태블릿 기준), 480px(모바일 기준) 으로 끊음

4️⃣ flex-wrap과 shrink를 활용한 반응형 레이아웃 만들기 예제

`flex-wrap`은 `flex-container` 안에서 아이템들이 공간이 부족할 때 줄바꿈을 허용하는 속성 입니다. 이로 인해 좁은 화면에서도 레이아웃이 깨지지 않고 자연스럽게 정렬됩니다. 한편 `flex-shrink`는 flex 아이템이 공간이 모자랄 때 얼마나 줄어들 수 있는지를 결정하는 속성입니다. 예를 들어 `flex-shrink: 0`으로 설정하면, 화면이 작아져도 해당 아이템의 크기를 유지할 수 있습니다. 반응형 레이아웃에서는 이 두 가지 속성을 함께 사용해 화면 크기에 따라 레이아웃은 유연하게 변하지만 중요한 요소는 크기를 고정하는 전략을 사용할 수 있습니다.

flex-wrap + shrink 반응형 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>flex-wrap 반응형 예제</title>
  <style>
    .flex-container {
      display: flex;
      flex-wrap: wrap; /* 공간이 부족한 경우 줄바꿈 허용*/
      background-color: #eee;
      padding: 10px;
    }

    .flex-item {
      flex: 0 0 200px; /* flex-grow 0, flex-shrink 0, flex-basis 200px */
      height: 100px;
      margin: 10px;
      background-color: lightcoral;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 20px;
    }
  </style>
</head>
<body>

<h3>flex-wrap + shrink 반응형 예제</h3>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>

</body>
</html>

반응형 웹을 만들 때 가장 기본이 되는 세 가지는 viewport 설정, 미디어쿼리 작성, 그리고 flex-wrap을 통한 자연스러운 줄바꿈 처리입니다. 이번 글에서는 반응형 레이아웃을 시작하기 위한 핵심 요소를 정리했습니다. 다음 글에서는 반응형 웹에서 자주 사용하는 레이아웃 패턴과 구체적인 미디어쿼리 실전 적용법까지 이어서 정리해보겠습니다!

[ CSS] CSS overflow 속성 총정리

파스트잇 — Sun, 6 Apr 2025 05:32:21 +0900

레이아웃을 구성하다 보면 콘텐츠가 부모 요소의 크기를 넘어버리는 상황을 자주 만나게 됩니다. 이때 요소가 넘치는 걸 어떻게 처리할지를 결정하는 속성이 overflow입니다. 이 글에서는 overflow 기본 개념부터 visible, hidden, scroll, auto까지 하나씩 정리해보겠습니다.

1️⃣ overflow란?

`overflow`는 요소 안에 콘텐츠가 요소 크기를 초과했을 때 그 초과된 부분을 어떻게 처리할지를 결정하는 CSS 속성입니다. 기본적으로 모든 요소는 콘텐츠를 다 담아야 하지만 부모 요소 크기보다 내용이 커질 경우 `overflow` 설정에 따라 1)초과된 내용을 그냥 보여줄지 2)잘라버릴지 3)스크롤을 만들어줄지 4)상황에 따라 자동 처리할지를 결정할 수 있습니다.

속성 이름	처리 방식
visible (기본값)	넘쳐도 그대로 표시
hidden	넘친 부분 잘라냄
scroll	항상 스크롤바 생성
auto	필요할 때만 스크롤바 생성

2️⃣ overflow 종류별 특징

1. overflow: visible (기본값)

- 콘텐츠가 박스 크기를 넘쳐도 잘리지 않고 그대로 표시

- 별다른 제한 없이 부모 영역을 넘어 확장됨

- 스크롤이 생성되지 않음

- 주로 제한이 필요 없는 텍스트나 자연스러운 레이아웃에 사용

2. overflow: hidden

- 박스를 벗어난 콘텐츠는 잘라버림

- 벗어난 부분은 화면에 아예 보이지 않음

- 스크롤이 생성되지 않음

- 주로 레이아웃을 깔끔하게 정리하거나 모션(슬라이드 애니메이션) 구현할 때 많이 사용

3. overflow: scroll

- 콘텐츠의 넘침 여부와 상관없이 항상 스크롤바를 보여줌

- 가로/세로 스크롤 모두 강제로 만들어질 수 있음

- 주로 특정 영역을 고정 크기로 제한하고 그 안에서 스크롤 시키고 싶을 때 사용

4. overflow: auto

- 콘텐츠가 넘칠 때만 자동으로 스크롤바 생성

- 가장 자연스럽고 자주 쓰이는 설정

- 주로 반응형 웹, 텍스트 영역 등에 사용

3️⃣ overflow 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>overflow 종류 비교</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      margin-bottom: 30px;
      border: 2px solid #333;
      position: relative;
    }
    .content {
      width: 300px;
      height: 150px;
      background-color: rgb(246, 198, 255);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 18px;
    }
    .hidden-text {margin-top:60px;}
    .visible { overflow: visible; background-color: lightblue; }
    .hidden { overflow: hidden; background-color: lightgreen; }
    .scroll { overflow: scroll; background-color: lightyellow; }
    .auto { overflow: auto; background-color: lightpink; }
  </style>
</head>
<body>

<h3>overflow: visible</h3>
<div class="box visible">
  <div class="content">넘치는 콘텐츠</div>
</div>

<h3 class="hidden-text">overflow: hidden</h3>
<div class="box hidden">
  <div class="content">넘치는 콘텐츠</div>
</div>

<h3>overflow: scroll</h3>
<div class="box scroll">
  <div class="content">넘치는 콘텐츠</div>
</div>

<h3>overflow: auto</h3>
<div class="box auto">
  <div class="content">넘치는 콘텐츠</div>
</div>

</body>
</html>

4️⃣ 자주 틀리는 포인트 정리

overflow 기본값은 visible

CSS에서 overflow를 따로 설정 안 하면 기본은 visible
콘텐츠가 넘치면 그냥 삐져나와서 다 보임
레이아웃 깨질 때 overflow: hidden 꼭 체크

✅ 기본은 visible! 잊지 말기

overflow: hidden은 자르기만 함 (스크롤 없음)

hidden은 넘친 부분을 잘라서 보이지 않게 할 뿐
스크롤바가 생기지 않음
스크롤하려면 scroll 또는 auto를 써야 함

✅ "잘리고 스크롤도 하고 싶다" ➔ hidden ❌, scroll/auto ⭕️

overflow: scroll은 무조건 스크롤바 표시

콘텐츠가 넘치든 안 넘치든 항상 스크롤바가 생김
넘치지 않으면 스크롤할 내용이 없어도 스크롤바만 덩그러니

✅ "무조건 스크롤바 필요하다" ➔ scroll

overflow: auto는 넘칠 때만 스크롤

넘칠 때만 자동으로 스크롤바가 생김
넘치지 않으면 깔끔하게 스크롤바 없이 표시
실무에서 가장 많이 쓰는 overflow 값이 auto

✅ "필요할 때만 스크롤" ➔ auto

overflow는 수평/수직 따로 제어도 가능

overflow-x → 가로 스크롤
overflow-y → 세로 스크롤

overflow-x: scroll;
overflow-y: hidden;

✅ 예를 들어 가로로만 긴 테이블 같은 것을 만들 때 사용

CSS에서 overflow 속성은 작지만 레이아웃의 안정성과 사용자 경험(UX)을 좌우하는 핵심 기능입니다. 따라서 기본 개념을 제대로 익히고 상황에 따라 올바르게 선택하는 습관이 중요합니다 ☺️

[ CSS] CSS z-index + stacking context 총정리

파스트잇 — Sun, 6 Apr 2025 05:04:04 +0900

CSS에서 요소를 겹칠 때 어떤 요소가 위로 올라올지를 결정하는 것이 z-index입니다. 하지만 실제 레이아웃에서는 단순히 z-index 숫자만 비교하는 게 아니라 stacking context라는 보이지 않는 독립 그룹 구조까지 함께 이해해야 정확한 결과를 만들 수 있습니다.
이 글에서는 z-index 기본 개념과, 실전에서 반드시 알아야 할 stacking context까지 한 번에 정리해보겠습니다.

position이 아직 헷갈린다면 z-index와 stacking context을 배우기 전에 이 글부터 보고 오는 걸 추천할게요!

[ CSS] CSS position 속성 총정리

display 속성으로 레이아웃을 구성하는 방법을 익힌 뒤는 요소를 세밀하게 배치하고 조정할 수 있는 position 속성을 제대로 이해해야 합니다. 이 글에서는 position 속성의 기본 개념부터 static, relative

sim-plism.tistory.com

1️⃣ z-index

z-index는 요소가 겹칠 때, 어떤 요소를 더 위로 표시할지를 결정하는 CSS 속성입니다. 숫자가 클 수록 화면에서 더 위에 보이며 기본적으로 position이 relative, absolute, fixed, sticky 중 하나인 요소에 적용됩니다. position이 없으면 z-index를 주어도 적용되지 않습니다.

2️⃣ stacking context

stacking context는 요소들이 z-index를 기준으로 겹침 순서를 계산하는 독립된 그룹입니다. 하나의 stacking context 안에서는 z-index 숫자로 요소들의 순서를 비교하지만, 서로 다른 stacking context끼리는 그룹 자체의 순서를 먼저 비교합니다. position과 z-index, opacity, transform 같은 속성에 의해 생성됩니다.

stacking context가 생성되는 조건 예시

position: relative, absolute, fixed, sticky 이면서 z-index 값이 있을 때
opacity: 1 미만일 때
transform, filter, perspective 속성이 있을 때
will-change, mix-blend-mode 사용 시

✔️ 이 중 가장 많이 만나는 건 position + z-index 조합

[ 부모 stacking context ]
 ├── z-index: 1 (요소 A)
 ├── z-index: 2 (요소 B)
 │    └── [ 새로운 stacking context 시작 ]
 │        ├── z-index: 5 (자식 요소 B1)
 │        └── z-index: 10 (자식 요소 B2)
 └── z-index: 3 (요소 C)

(※ B2가 z-index 10이어도 부모 B의 그룹 안에서만 비교. 부모끼리 순서가 먼저고 그 다음 자식끼리 순서를 따짐)

3️⃣ z-index + stacking context 실전 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>z-index & stacking context 예제</title>
  <style>
    .outer {
      position: relative;
      z-index: 1;
      background-color: lightgray;
      padding: 30px;
      width: 300px;
      height: 300px;
    }

    .inner1 {
      position: relative;
      z-index: 2;
      background-color: lightblue;
      width: 150px;
      height: 150px;
    }

    .inner2 {
      position: relative;
      z-index: 3;
      background-color: lightcoral;
      width: 150px;
      height: 150px;
      margin-top: -100px;
      margin-left: 50px;
    }

    .another {
      position: relative;
      z-index: 5;
      background-color: lightgreen;
      width: 200px;
      height: 200px;
      margin-top: -250px;
      margin-left: 200px;
    }
  </style>
</head>
<body>

<div class="outer">
  <div class="inner1">Inner 1 (z-index:2)</div>
  <div class="inner2">Inner 2 (z-index:3)</div>
</div>

<div class="another">Another Box (z-index:5)</div>

</body>
</html>

- outer 박스는 z-index 1 → 제일 아래 그룹

- outer가 position: relative; z-index:1 이니까 자체 stacking context 생성

- inner1과 inner2는 outer 안에 있는 요소들 (같은 stacking context), outer 안에서만 z-index 비교

- another 박스는 outer 바깥에 있는 요소(전체 레벨)이고 z-index가 5 → 제일 위에 뜸

5️⃣ 자주 틀리는 포인트 정리

✔️ position 없는 static 요소에 z-index 줘도 소용없다. position이 기본값(static)일 때는 z-index가 아예 적용 ❌

✅ "z-index 안 먹네?" → 일단 position 있는지 확인!

✔️ stacking context가 다르면 z-index 비교가 안 된다. 서로 다른 stacking context끼리는 부모 그룹끼리 z-index를 먼저 비교

✅ "z-index 숫자 큰데 왜 밑에 있지?" → "다른 stacking context 아니야?" 바로 의심!

✔️ opacity, transform, filter 등도 stacking context를 만든다
✅ "position: relative 없는데도 stacking context가 있네?" → "opacity, transform 썼나?" 체크!

✔️ stacking context 안에서는 내부 요소끼리만 z-index 비교한다

✅ "부모끼리 먼저, 자식끼리는 나중!" 순서를 생각할 것!

CSS에서 요소의 겹침 순서를 제어할 때는 단순히 z-index 숫자만 조정하는 것으로 끝나지 않습니다. 요소가 어떤 stacking context 안에 있는지 그리고 어떤 기준으로 겹침이 계산되는지를 이해해야 의도한 대로 레이아웃을 정확하게 제어할 수 있습니다. 이번 글에서는 z-index와 stacking context 개념을 살펴보았습니다. 다음 글에서는 overflow 속성을 정리하여 콘텐츠가 영역을 넘칠 때 어떻게 처리하는지까지 확인해보겠습니다.

[ CSS] CSS position 속성 총정리

파스트잇 — Sun, 6 Apr 2025 04:14:05 +0900

display 속성으로 레이아웃을 구성하는 방법을 익힌 뒤는 요소를 세밀하게 배치하고 조정할 수 있는 position 속성을 제대로 이해해야 합니다. 이 글에서는 position 속성의 기본 개념부터 static, relative, absolute, fixed, sticky 각각의 차이와 특징을 살펴보겠습니다.

display가 아직 헷갈린다면 position을 배우기 전에 이 글부터 보고 오는 걸 추천할게요!

[ CSS] CSS display 속성 총정리

CSS는 기본 개념을 제대로 정리하지 않으면 나중에 flex나 grid 같은 레이아웃을 다룰 때 계속 헷갈리게 됩니다. 다르게 말하면 한 번만 제대로 정리하면 그 이후로는 어떤 레이아웃도 훨씬 쉽게 이

sim-plism.tistory.com

1️⃣ position이란 무엇인가?

`position` 속성은 HTML 요소가 페이지 안에서 어디에 어떻게 위치할지를 결정하는 CSS 속성입니다. 즉, positon을 설정함으로써 요소를 원하는 위치에 세밀하게 배치하거나 다른 기준을 잡아줄 수 있습니다. 기본적으로 모든 요소는 `position: static` 상태로 배치됩니다. position 속성은 레이아웃을 제어할 때 top, right, bottom, left 같은 방향 속성과 함께 사용되며 어떤 position 값을 주느냐에 따라 방향 속성의 동작 방식도 달라집니다.

요소가 어느 기준으로, 어디에 위치할지를 정하는 속성

✅ position의 기능

위치 지정	요소를 문서 흐름(static)에서 벗어나 자유롭게 위치시킬 수 있다.
기준 설정	relative나 absolute를 통해 다른 요소의 기준점을 설정할 수 있다.
고정 배치	fixed를 이용해 스크롤에도 움직이지 않는 요소를 만들 수 있다.
스크롤 반응	sticky를 통해 특정 위치에서 고정되도록 할 수 있다.

2️⃣ 주요 position 종류

1. static (기본값)

- 모든 요소는 기본적으로 `position: static` 상태

- `top`, `right`, `bottom`, `left` 같은 위치 조정 속성이 적용되지 않음

- 문서 흐름에 따라 자연스럽게 배치됨

- 따로 position 설정이 필요 없을 때 사용

2. relative (상대 위치)

- 요소를 자기 자신 기준으로 이동시킴

- 원래 위치를 기준으로 `top`, `left` 등을 이용해 살짝 이동할 수 있음

- 이동하더라도 문서 흐름상 원래 자리를 그대로 차지

- 부모 요소로서 `absolute`요소의 기준이 될 수도 있음

3. absolute (절대 위치)

- 가장 가까운 `position`이 `relative`, `absolute`, `fixed`로 설정된 조상 요소를 기준으로 위치가 결정됨

- 만약 조상 요소 중에 그런 게 없다면 `body`(문서 전체)를 기준으로 삼음

- `top`, `left` 같은 속성으로 자유롭게 배치할 수 있음

- 문서 흐름에서 벗어나기 때문에 원래 자리는 사라짐

- 레이아웃 안에 독립적인 박스를 만들 때 많이 사용

4. fixed (고정 위치)

- 브라우저 화면을 기준으로 위치를 고정

- 스크롤을 해도 위치가 변하지 않음

- 광고 배너, 상단 고정 메뉴 등에 자주 사용

- 항상 화면에 떠 있어야 하는 요소에 적합

5. sticky (스크롤 따라가다 고정)

- 기본적으로는 문서 흐름(`static`)처럼 배치되다가

- 지정한 `top`, `left` 위치에 도달하면 그 위치에 고정되는 속성

- 스크롤하면서 특정 위치에 딱 붙는 UI를 만들 때 사용

- 최근 반응형 웹, 모바일 UI에서 많이 쓰임

핵심 요약

종류	기준	특징
static	없음 (문서 흐름)	기본 위치, 이동 불가
relative	자기 자신	원래 자리 유지 + 살짝 이동 가능
absolute	가장 가까운 relative/absolute/fixed 조상 요소	문서 흐름 벗어나 자유 위치
fixed	브라우저(viewport)	스크롤해도 고정
sticky	스크롤 + 위치 도달	위치 도달 후 고정

3️⃣ position 속성별 예제 코드

1. static 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>position: static 예제</title>
  <style>
    .static-box {
      width: 150px;
      height: 100px;
      background-color: lightblue;
      margin: 10px;
      position: static; /* 기본값 (사실 생략해도 됨) */
    }
  </style>
</head>
<body>

<h2>position: static</h2>
<div class="static-box">Static Box</div>
<div class="static-box">Static Box</div>

</body>
</html>

static 구현 화면

- 아무런 위치 조정 없이 그냥 HTML 문서 흐름(위에서 아래로)에 따라 배치

- top, left 같은 방향 조정 속성을 써도 아무 효과가 없음

- 생략해도 기본 적용

2. relative (상대 위치) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>position: relative 예제</title>
  <style>
    .relative-box {
      width: 150px;
      height: 100px;
      background-color: lightgreen;
      margin: 10px;
      position: relative;
      top: 20px;
      left: 30px;
    }
  </style>
</head>
<body>

<h2>position: relative</h2>
<div class="relative-box">Relative Box</div>

</body>
</html>

- 요소가 원래 있어야 할 자리를 기준으로 top, left 값만큼 이동

- 위 코드에서는 아래로 20px(top: 20px), 오른쪽으로 30px(left:30px) 이동

- 문서 흐름에서 차지하는 자리(공간)은 그대로 유지

- 따라서 아래쪽에 다른 요소가 있으면 겹칠 수 있음

3. absolute (절대 위치) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>position: absolute 예제</title>
  <style>
    .parent-box {
      position: relative; /* 기준이 되는 부모 */
      width: 300px;
      height: 200px;
      background-color: lightgray;
      margin: 20px;
    }

    .absolute-box {
      position: absolute;
      top: 20px;
      left: 30px;
      width: 100px;
      height: 50px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>

<h2>position: absolute</h2>

<div class="parent-box">
  <div class="absolute-box">Absolute Box</div>
</div>

</body>
</html>

- 가장 가까운 position이 relative/absolute/fixed로 설정된 부모 요소를 기준으로 위치가 결정

- parent-box에 postion: relative가 설정되어 있으므로 parent-box의 왼쪽 위(0,0)을 기준으로 오른쪽으로 30px, 아래로 20px 이동한 것

- 만약 parent-box에 position이 없었다면 문서 전체를 기준으로 잡음

- 기준이 되는 부모를 기준으로 완전히 새로운 위치에 배치

- 문서 흐름(자리 차지)에서 완전히 빠지게 됨 (문서 흐름상 다른 요소들이 absolute 박스가 없는 것처럼 배치되므로 다른 요소와 겹치기 쉬움)

4. fixed (고정 위치) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>position: fixed 예제</title>
  <style>
    .fixed-box {
      position: fixed;
      top: 20px;
      right: 20px;
      width: 120px;
      height: 60px;
      background-color: lightseagreen;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }

    .content {
      height: 1500px; /* 스크롤 생기게 만듦 */
      background: linear-gradient(#f0f0f0, #ccc);
    }
  </style>
</head>
<body>

<h2>position: fixed</h2>

<div class="fixed-box">Fixed Box</div>

<div class="content">
  스크롤 테스트용 긴 콘텐츠
</div>

</body>
</html>

- 브라우저 화면 기준으로 위치가 고정

- 스크롤을 내려도 항상 같은 자리에 표시

- 부모 요소와 관계 없음

5. sticky (스크롤 따라가다 고정)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>position: sticky 예제</title>
  <style>
    .sticky-box {
      position: sticky;
      top: 20px;
      background-color: lightsalmon;
      padding: 10px;
      font-weight: bold;
      font-size: 18px;
    }

    .content {
      height: 1500px; /* 스크롤을 만들어줌 */
      background: linear-gradient(white, lightgray);
      padding-top: 100px;
    }
  </style>
</head>
<body>

<h2>position: sticky</h2>

<div class="content">
  <div class="sticky-box">Sticky Box</div>
  긴 스크롤 콘텐츠
</div>

</body>
</html>

- 처음엔 일반 static처럼 문서 흐름에 따라 배치되다가 스크롤을 내리면서 top: 20px 위치에 도달하면 고정됨

- 부모 요소 영역(content)안에서만 sticky가 작동

- 공간 차지함

- 상단 고정 헤더, 목차 메뉴 고정 등에 쓰임

4️⃣ 자주 틀리는 포인트 정리

☑️ static은 "기본값"이라는 점을 잊지 말자

position을 따로 설정하지 않으면 기본값은 항상 static
top, left, bottom, right 같은 속성은 static 상태에서는 아무 효과가 없다

✅ position을 지정하지 않았는데 이동하려 한다? → position 먼저 확인!

☑️ relative는 "공간 유지"한다

relative는 내 자리(공간)는 유지하면서 눈에 보이는 박스만 이동한다
그래서 아래쪽 요소와 겹칠 수 있다

✅ "문서 흐름은 그대로 + 눈에 보이는 것만 이동" 기억!

☑️ absolute는 기준 부모를 찾는다

absolute는 가장 가까운 relative/absolute/fixed 부모를 기준으로 위치를 잡는다
만약 기준 부모가 없으면, 브라우저 전체(body) 를 기준 삼는다

✅ absolute 쓸 때는 항상 부모 position 설정 여부를 먼저 확인!

☑️ fixed는 화면(viewport) 기준이다

fixed는 부모 요소가 뭐든 상관없이 항상 브라우저 화면을 기준으로 고정된다
스크롤해도 절대 움직이지 않는다

✅ 부모? 그런 거 없고 화면 기준!

☑️ sticky는 스크롤하다가 "도착하면 고정"된다

sticky는 처음엔 static처럼 흐름을 따라 배치된다
스크롤로 지정한 top 위치에 도달하면 거기서 멈춰서 고정된다
부모 요소 영역 안에서만 sticky가 작동한다

✅ 스크롤→도착→고정!

CSS에서 position 속성은 단순히 요소를 어디에 둘까를 넘어 레이아웃 전체의 흐름과 구조를 결정하는 매우 중요한 개념입니다.

특히 static, relative, absolute, fixed, sticky 각각의 차이와 동작 방식을 제대로 이해하면 디자인을 세밀하게 컨트롤할 수 있습니다. position을 사용할 때는 기준과 흐름 유지 여부를 항상 의식하면서 설계하는 습관이 중요합니다.

[ CSS] CSS display 속성 총정리

파스트잇 — Sun, 6 Apr 2025 02:13:51 +0900

CSS는 기본 개념을 제대로 정리하지 않으면 flex나 grid 같은 레이아웃을 다룰 때 계속 헷갈리게 됩니다. 다르게 말하면 한 번만 제대로 정리하면 그 이후로는 어떤 레이아웃도 훨씬 쉽게 이해하고 다룰 수 있습니다. 이 글에서는 display 속성의 기본부터 flex와 grid 같은 레이아웃 방식까지 한 번에 깔끔하게 정리해보겠습니다.

1️⃣ display란 무엇인가?

`display` 속성은 HTML 요소가 페이지에서 어떻게 보일지를 결정하는 CSS 속성입니다. 즉 이 요소를 박스처럼 보이게 할지, 줄 안에 끼워 넣을지 등을 설정하는 것이죠. HTML 태그마다 기본적으로 지정된 display 값이 있지만 우리는 CSS display 속성을 이용하여 기본 동작을 마음대로 바꿀 수 있습니다.

2️⃣ 주요(기존) display 종류

1. block

- 한 줄 전체를 차지하는 요소

- 항상 새 줄에서 시작하며 `width`, `height` 를 지정할 수 있음

- 레이아웃을 구성할 때 주로 사용

- 대표 태그: <div>, <p>, <h1> ~ <h6>, <section>, <article>

2. inline

- 내용만큼만 공간을 차지하는 요소

- 줄 안에 다른 요소들과 함께 배치

- `width`, `height` 값을 적용할 수 없음

- 텍스트처럼 흐름에 따라 배치

- 대표 태그: <span>, <a>, <strong>, <em>

3. inline-block

- `inline` 처럼 줄 안에 배치되지만

- `block`처럼 `width`, `height`를 지정할 수 있는 형태

- 줄 안에 있으면서 크기를 조정할 수 있어 버튼, 작은 카드 요소에 주로 사용함

4. none

- 요소를 화면에서 숨김

- 렌더링 자체를 하지 않아 화면에도 안 보이고 공간도 차지하지 않음

(※ `inline-block`과 `none`은 기본 태그가 없고, CSS로 설정하여 사용하는 display 속성입니다. )

display 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>display 종류 비교</title>
  <style>
    .block {
      display: block;
      background-color: lightblue;
      margin: 10px 0;
    }
    .inline {
      display: inline;
      background-color: lightgreen;
      margin: 10px;
    }
    .inline-block {
      display: inline-block;
      background-color: lightpink;
      width: 150px;
      height: 50px;
      margin: 10px;
    }
    .none {
      display: none;
      background-color: gray;
      margin: 10px;
    }
  </style>
</head>
<body>

<h2>block</h2>
<div class="block">block 요소</div>
<div class="block">block 요소</div>

<h2>inline</h2>
<span class="inline">inline 요소</span>
<span class="inline">inline 요소</span>

<h2>inline-block</h2>
<div class="inline-block">inline-block 요소</div>
<div class="inline-block">inline-block 요소</div>

<h2>none</h2>
<div class="none">숨겨진 요소(보이지 않음)</div>

</body>
</html>

display 구현 화면

inline-block 사이에 초록색이 보이는 이유

inline-block 요소는 글자처럼 취급되기 때문에 코드에 있는 띄어쓰기(공백)가 실제로 빈 텍스트로 렌더링됩니다. 현재 inline 요소에 적용된 background-color: lightgreen 스타일이 이 공백에도 적용되어 초록색으로 보이는 것입니다. 즉, 공백 자체에 스타일이 칠해진 결과입니다.

3️⃣ 신버전 display

( ※ '신버전 display'는 공식 용어는 아니며, flex/grid를 구분하기 위해 사용한 표현입니다)

`display: flex`와 `display: grid`는 기존의 `block`, `inline`과 다르게 레이아웃 자체를 제어할 수 있는 display 방식입니다. 둘 다 부모 요소에 적용해서 자식 요소들의 배치를 쉽게 조정할 수 있게 해줍니다.

1. flex

- 부모 요소를 flex container로 만들어줌

- 자식 요소들은 자동으로 flex item이 됨

- 수평/수직 정렬, 공간 나누기, 간격 조정 등이 매우 쉬워짐

✅ 주요 속성

flex-direction	주축 방향 설정 (row, column 등)
justify-content	주축 정렬 (flex-direction 방향으로 정렬)
align-items	교차축 정렬 (주축이 가로면 세로 정렬)
gap	아이템 간격 설정
flex-grow	남은 공간 분배 비율
flex-shrink	공간 줄어들 때 비율 조정
flex-basis	기본 크기 설정

이제 flex 주요 속성 예제를 살펴보겠습니다. 아래 예제에서는 부모 요소인 flex-container에 justify-content, align-items, gap, flex-grow, flex-shrink, flex-basis 같은 다양한 속성들을 적용하여 3개의 flex-item이 어떻게 배치되고 변하는지를 확인할 수 있습니다.

flex 주요 속성 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>flex 주요 속성 예제</title>
  <style>
    .flex-container {
      display: flex;
      background-color: #eee;
      height: 100px;
      margin-bottom: 20px;
    }
    .flex-item {
      background-color: lightblue;
      margin: 5px;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 18px;
    }
  </style>
</head>
<body>

<h2>1. 기본 flex-container</h2>
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<h2>2. justify-content: center</h2>
<div class="flex-container" style="justify-content: center;">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<h2>3. align-items: center</h2>
<div class="flex-container" style="align-items: center;">
  <div class="flex-item" style="height: 90px;">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item" style="height: 30px;">3</div>
</div>

<h2>4. gap: 20px</h2>
<div class="flex-container" style="gap: 20px;">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<h2>5. flex-grow 적용</h2>
<div class="flex-container">
  <div class="flex-item" style="flex-grow: 1;">1</div>
  <div class="flex-item" style="flex-grow: 2;">2</div>
  <div class="flex-item" style="flex-grow: 1;">3</div>
</div>

<h2>6. flex-shrink 적용</h2>
<div class="flex-container" style="width: 300px;">
  <div class="flex-item" style="flex-shrink: 1; width: 200px;">1</div>
  <div class="flex-item" style="flex-shrink: 2; width: 200px;">2</div>
  <div class="flex-item" style="flex-shrink: 1; width: 200px;">3</div>
</div>

<h2>7. flex-basis 적용</h2>
<div class="flex-container">
  <div class="flex-item" style="flex-basis: 150px;">1</div>
  <div class="flex-item" style="flex-basis: 100px;">2</div>
  <div class="flex-item" style="flex-basis: 200px;">3</div>
</div>

</body>
</html>

flex 주요 속성 구현 화면

2. grid

- 부모 요소를 grid container로 만들어줌

- 자식 요소들을 행과 열로 나누어 배치할 수 있음

- 복잡한 2차원 레이아웃을 만들 때 특히 강력함

✅ 주요 속성

grid-template-columns	열 너비 설정
grid-template-rows	행 높이 설정
gap	아이템 간격 설정
grid-column	아이템이 차지하는 열 영역 지정
grid-row	아이템이 차지하는 행 영역 지정
grid-area	영역 이름으로 배치 지정

이제 grid 주요 속성 예제를 살펴보겠습니다. 아래 예제에서는 부모 요소인 grid-container에 grid-template-columns, grid-template-rows, gap, grid-column, grid-row, grid-area 같은 다양한 속성들을 적용하여 요소들이 어떻게 배치되고 변하는지를 확인할 수 있습니다. grid는 칸(cell)이 아니라 선(line) 기준으로 영역을 설정한다는 점에 주의해야 합니다.

grid 주요 속성 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>grid 주요 속성 예제</title>
  <style>
    .grid-container {
      display: grid;
      background-color: #eee;
      height: 260px;
      margin-bottom: 20px;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: 100px 100px;
      gap: 10px;
      grid-template-areas:
        "header header header"
        "sidebar main main";
    }
    .grid-item {
      background-color: lightcoral;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 14px;
    }
    .header {
      grid-area: header;
      background-color: lightseagreen;
    }
    .sidebar {
      grid-area: sidebar;
      background-color: lightpink;
    }
    .main {
      grid-area: main;
      background-color: lightyellow;
    }
  </style>
</head>
<body>

<h3>1. 기본 grid-container</h3>
<div class="grid-container">
  <div class="grid-item header">Header</div>
  <div class="grid-item sidebar">Sidebar</div>
  <div class="grid-item main">Main</div>
</div>

<h3>2. grid-column, grid-row 직접 지정</h3>
<div class="grid-container">
  <div class="grid-item" style="grid-column: 1 / 3;">1 (가로로 2칸 차지)</div>
  <div class="grid-item">2</div>
  <div class="grid-item" style="grid-row: 2 / 3;">3 (두 번째 줄)</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

</body>
</html>

grid 주요 속성 구현 화면

grid-area와 grid-template-areas의 연결

`grid-template-areas`는 부모 요소(`grid-container`) 안의 레이아웃을 <이름> 으로 설계하는 방법

1. HTML 요소에 클래스 이름 지정:

- 구분을 쉽게 하기 위해 이름을 붙임 (※반드시 필요한 것은 아니나 보통 깔끔하게 맞춰줌)

- ex) <div class="header">Header</div>

2. CSS에서 `grid-area` 속성 지정:

- `grid-area`의 값은 어떤 영역의 이름에 연결될지를 지정하는 것

- ex) .header { grid-area: header; }

3. 부모(grid-container)에서 `grid-template-areas` 설정

- 자식 요소들의 `grid-area` 값이 일치해야 제대로 매칭됨

- ex) grid-template-areas: "header header header" "sidebar main main";

4️⃣ 자주 틀리는 포인트 정리

☑️ block vs inline vs inline-block

항목	block	inline	inline-block
기본 배치	새 줄에서 시작, 한 줄 전체 차지	줄 안에 다른 요소와 함께 흐름 유지	줄 안에 배치되지만 크기 지정 가능
width, height	가능	불가능	가능
대표 예시	<div>, <p>, <section>	<span>, <a>, <strong>	(기본 태그 없음, CSS로 설정)

☑️ flex vs grid

항목	flex	grid
주 사용 방향	한 방향(가로 또는 세로)	가로 + 세로 동시에
정렬 방식	주축 방향 정렬	격자 기반 배치
쓰임새	메뉴바, 버튼 묶음	전체 페이지 레이아웃, 대시보드
영역 지정	흐름(flow) 따라	명시적으로 (grid-template-areas) 지정 가능

(※ flex는 "흐름" 기반이라 주축/교차축을, grid는 "격자" 기반이라 열/행, 선(line)을 신경 써야 한다)

☑️ flex-grow, flex-shrink 오해

항목	설명
flex-grow	남은 공간을 비율대로 나눈다 (flex-grow:2를 준다고 해서 요소 크기가 2배가 되는 게 아님)
flex-shrink	공간이 부족할 때 줄어드는 비율을 설정한다

☑️ grid-column, grid-row는 칸이 아니라 선 기준!

항목	설명
grid-column: 1 / 3	1번 선부터 3번 선까지 차지 → 가로 2칸 차지
grid-row: 2 / 3	2번 선부터 3번 선까지 차지 → 두 번째 줄

flex는 한 방향(수평/수직) 정렬에 강하고, grid는 가로와 세로를 동시에 제어하는 데 최적화되어 있기 때문에, 어떤 레이아웃을 만들고 싶은지에 따라 적절히 선택하는 것이 중요합니다. 이번 글에서는 display 기본 개념부터 시작해서 flex, grid의 주요 속성과 실전 사용 방법까지 한 번에 정리했습니다. 핵심은 어렵게 외우려고 하지 말고, 흐름(flow)을 제어하는 건 flex, 격자(layout)를 설계하는 건 grid라고 감각을 잡는 것입니다. 한 번 제대로 개념을 정리해두면, 그 이후로는 어떤 레이아웃도 훨씬 쉽게 이해하고 구현할 수 있을 것입니다.

[ Spring] 10분 안에 끝내는 스프링 vs 스프링 부트 핵심 비교

파스트잇 — Mon, 24 Mar 2025 18:58:08 +0900

`Spring`과 `Spring Boot`는 둘 다 `Java` 기반의 웹 애플리케이션 개발에 사용되는 프레임워크입니다. 이름도 비슷하고 기능도 유사해서 많은 개발자들이 어떤 것을 선택해야 할지 고민하곤 합니다. 이 글에서는 여러분이 이해하기 쉽도록 두 프레임워크을 비교 분석해 보겠습니다.

1️⃣ 스프링(Spring)이란?

Java는 오랫동안 사랑받아온 대표적인 프로그래밍 언어이지만 개발된 지 오래되어 몇 가지 불편한 점도 있습니다. 예를 들어, 다른 언어에 비해 속도가 느리고, 객체를 생성하고 주입하거나, 웹 요청을 처리하는 컨트롤러, 트랜잭션, 예외 처리, DAO 연결 등 모든 기능을 개발자가 일일이 구현해야 한다는 점이 있죠. 이런 작업을 매번 반복하다 보면, 코드는 점점 복잡해지고 재사용도 어려워집니다. 이 문제를 해결하기 위해 등장한 것이 바로 스프링 프레임워크입니다. 스프링은 이런 반복적인 작업을 자동화하고, 보다 구조적인 애플리케이션을 만들 수 있게 도와줍니다.

✔️ 스프링이 제공하는 대표적인 기능

DI (의존성 주입)	객체 생성과 주입을 스프링 컨테이너가 자동으로 처리
AOP (관점 지향 프로그래밍)	공통 로직(로그, 보안 등)을 깔끔하게 분리
MVC 아키텍처	컨트롤러, 서비스, DAO 계층 구조로 역할을 분리
트랜잭션 처리 / 예외 처리 / 유효성 검증	실무에 필요한 핵심 기능 제공

하지만, 스프링에도 한 가지 큰 단점이 있었습니다. 바로 초기 설정이 너무 복잡했다는 것이죠. 예를 들어, XML로 의존성을 연결하고, 서블릿을 설정하고, 톰캣 서버를 붙이고, 필요한 라이브러리들을 수동으로 하나하나 추가해야 했습니다. 복잡한 초기 설정은 스프링을 처음 접하는 입문자에게 진입장벽으로 느껴질 수 있는 요소였습니다.

2️⃣ 스프링 부트(Spring Boot)란?

스프링의 초기 설정이 복잡하다는 단점을 해결하기 위해 등장한 것이 바로 스프링 부트입니다. 스프링 부트는 복잡한 설정 없이도 스프링 애플리케이션을 빠르게 시작할 수 있도록 도와주는 프레임워크입니다. 스프링 부트를 사용하면 이전에 스프링에서 수동으로 추가해야 했던 많은 설정들이 대부분 자동으로 구성됩니다.

✔️ 스프링 부트의 주요 기능

자동 설정(Auto Configuration)	필요한 라이브러리를 추가하면 그에 맞는 설정을 자동으로 적용
내장 톰캣 제공	따로 톰캣을 설치하거나 설정하지 않아도 바로 실행 가능
간편한 프로젝트 생성 도구 지원	start.spring.io 를 통해 필요한 기능을 선택해서 바로 프로젝트 생성 가능
간결한 의존성 관리	spring-boot-starter-web, spring-boot-starter-security 등 스타터 의존성으로 기능 추가가 쉬움

즉, 스프링 부트는 스프링의 복잡한 진입장벽을 낮추고 실제 개발에 집중할 수 있도록 만들어주는 도구입니다. 최신 프로젝트나 학습 자료는 기본적으로 스프링 부트를 기반으로 진행되고 있습니다.

3️⃣ 스프링 vs 스프링 부트

항목	Spring (순수 스프링)	Spring Boot (스프링 부트)
설정 방식	수동 설정 (XML, JavaConfig)	자동 설정 (어노테이션 기반)
서버 구동	외부 WAS (톰캣 등) 필요	내장 톰캣 제공, 바로 실행 가능
의존성 관리	직접 버전 지정 및 설정	Starter로 간편하게 구성
프로젝트 생성	구조 수동 구성	`start.spring.io` 등으로 쉽게 생성
러닝 커브	높음 (설정부터 직접 이해해야 함)	낮음 (바로 개발에 집중 가능)
사용처	전자정부프레임워크, 공공SI, 레거시 시스템	스타트업, 신기술 프로젝트, 대부분 실무 환경
개발 속도	느림 (초기 설정 많음)	빠름 (설정 자동화)

4️⃣ 마무리

Spring과 Spring Boot는 같은 기반 위에서 만들어졌지만, 사용하는 목적과 방식에는 분명한 차이가 있습니다. 순수 스프링은 설정과 구성이 자유롭고 유연하다는 장점이 있지만, 초기 설정이 복잡하고 진입장벽이 높은 편입니다. 반면 스프링 부트는 복잡한 설정 없이 빠르게 개발을 시작할 수 있어 실무나 개인 프로젝트, 학습용으로 적합한 선택지입니다. 처음 스프링을 배우는 입문자라면 스프링 부트로 시작한 뒤 차근차근 순수 스프링의 구성 방식도 함께 익혀보는 것을 추천합니다!

[ AWS] EC2 서버 구축 & 초기 보안 설정 (SSH, 보안 그룹) 완벽 가이드

파스트잇 — Sat, 15 Feb 2025 00:25:54 +0900

AWS에서 애플리케이션을 실행하려면 EC2 인스턴스(가상 서버)를 생성해야 합니다. 글에서는 AWS EC2 서버를 처음부터 설정하고, 보안 그룹(방화벽)까지 설정하는 방법을 알아보겠습니다.

1. IAM 사용자 생성

(*AWS 계정이 없다면 [AWS 공식 사이트] `https://aws.amazon.com/` 에서 회원가입 후 진행하세요.)

AWS EC2 인스턴스를 생성하기 전에, 보안 강화를 위해 IAM 사용자 계정을 먼저 생성해야 합니다. 루트 계정은 모든 AWS 서비스에 대한 무제한 권한을 가지고 있기 때문에 직접 사용하지 않는 것이 보안상 안전합니다.

따라서 IAM 계정을 생성하여, 최소 권한 원칙 기반으로 EC2 작업을 수행하겠습니다.

☑️ IAM 사용자 계정 만들기

1️⃣ AWS 콘솔에 루트 계정으로 로그인합니다.
2️⃣ 상단 검색창에서 `IAM`을 검색 후 이동합니다.
3️⃣ 좌측 메뉴에서 "사용자" 를 클릭한 뒤 사용자 생성을 눌러줍니다.

4️⃣ 사용자 세부 정보 단계에서 사용할 IAM 사용자 이름을 입력합니다.

- 박스는 IAM 사용자가 AWS 콘솔에 직접 로그인해야 하는 경우(웹 콘솔에서 EC2 관리, 배포 작업을 수행할 경우)에 체크합니다.

- CLI 또는 API로만 접근할 경우 이 옵션을 체크하지 않아도 됩니다.

IAM 사용자 생성 화면

5️⃣ 다음을 눌러 권한 설정 단계로 이동합니다. 직접 정책 연결을 선택하고 AmazonEC2FullAccess를 검색해 권한을 연결해줍니다.

- 기존 IAM 그룹을 사용하지 않고, 직접 정책을 연결하는 이유 → 개별 사용자에게 직접 정책을 적용하면 관리가 불편해질 수 있지만, 특정 사용자에게 빠르게 권한을 부여할 때 유용합니다.

- EC2만 관리할 사용자라면 AmazonEC2FullAccess를 부여하면 되지만, 기업 환경에서는 최소 권한 원칙을 따르는 것이 좋습니다. 예를 들어, 특정 프로젝트만 접근해야 한다면 커스텀 정책을 생성하여 특정 리소스에만 접근 권한을 부여할 수도 있습니다.

권한 설정 화면

6️⃣ 다음을 누르고 3단계 검토 및 생성 단계에서 적절한 권한이 선택된 것을 확인했다면 사용자를 생성합니다.

- 생성이 완료되면 IAM 사용자 로그인 정보(암호 파일 .csv)를 다운로드합니다.

- 보안이 중요한 정보이므로 클라우드나 공용 PC에 저장하지 말고, 안전한 장소에 보관합니다.

- 이후 IAM 사용자로 로그인 후 반드시 암호를 변경합니다.

2. EC2 인스턴스 생성

☑️ IAM 으로 로그인 후 EC2 인스턴스 생성

1️⃣ AWS 콘솔 상단 검색창에서 `EC2`를 검색 후 이동합니다.

EC2 대시보드 화면

2️⃣ 인스턴스 시작 버튼을 클릭합니다.

인스턴스 시작 화면

3️⃣ 이름을 입력한 후 운영체제(AMI)를 선택합니다. `AMI(Amazon Machine Image)`는 EC2 인스턴스가 사용할 운영체제(OS) 이미지를 의미합니다. EC2 인스턴스는 `AMI`를 기반으로 운영됩니다.

- 기본적으로 Amazon Linux가 선택되어 있지만, Ubuntu 22.04 LTS를 선택합니다.

- 프리 티어 사용 가능이 표시된 옵션을 선택하면 추가 비용 없이 사용할 수 있습니다.

운영체제 선택 화면

4️⃣ 다음으로 인스턴스 유형을 선택합니다

- 처음 사용하는 경우 프리티어(free-tier) t2.micro를 선택합니다. t2.micro는 AWS 프리 티어에서 제공하는 최소 사양의 인스턴스입니다.

- 인스턴스 유형에 따라 CPU, 메모리(RAM), 네트워크 속도 등이 결정됩니다.

인스턴스 유형 선택 화면

5️⃣ 이제 키 페어(SSH 접속)를 설정합니다.

- AWS에서 생성된 EC2 서버에 SSH로 접속하려면 키 페어(Key Pair)를 설정해야 합니다.

- 기존 키 페어가 없다면 새 키 페어를 생성하고 다운로드해야 합니다. 저는 새 키 페어를 생성해보겠습니다. 키 페어 이름을 입력하고 RSA, .pem를 선택하고 키 페어 생성 버튼을 누른 후 다운로드합니다.

- 키 파일(.pem)은 안전한 곳에 보관해야 하며, 한 번만 다운로드할 수 있습니다.

키 페어 생성 화면

SSH

1. SSH란?

Secure Shell(보안 셸)의 약자로, 네트워크를 통해 원격 서버에 안전하게 접속할 수 있도록 해주는 프로토콜. AWS EC2 인스턴스에 직접 접속하려면 SSH를 사용해서 서버에 로그인해야 합니다.

2. SSH를 사용하는 이유

1. 보안 강화 → 데이터를 암호화하여 안전하게 전송

2. 원격 접속 가능 → 로컬 PC에서 AWS 서버를 제어할 수 있음

3. 명령어 실행 가능 → 서버에서 직접 명령어를 입력하여 환경을 설정할 수 있음

3. SSH를 사용한 EC2 접속 방법

AWS EC2 인스턴스에 SSH로 접속하려면 SSH 키 페어 (.pem 파일)이 필요합니다. 인스턴스를 생성할 때 키 페어 생성 단계에서 다운로드한 키 파일을 사용하여 접속합니다.

6️⃣ 다음으로 보안 그룹을 설정합니다. 다른 설정은 기본값으로 두고 방화벽(보안 그룹)과 인바운드 보안 그룹 규칙만 추가하겠습니다. 먼저 편집을 눌러 보안 그룹을 생성한 뒤 그룹 이름과 설명을 작성해줍니다.

방화벽(보안 그룹) 생성 화면

보안 그룹 규칙으로 HTTP (포트 80), HTTPS (포트 443)은 위치 무관, SSH (포트 22)는 보안을 위해 내 IP만 허용으로 설정해주겠습니다. 웹 애플리케이션을 운영하려면 HTTP와 HTTPS를 모든 사용자에게 열어야 합니다.

보안 그룹 규칙 설정 화면

7️⃣ 스토리지 구성은 기본값으로 두고 넘어갑니다. 인스턴스 시작을 클릭해 인스턴스를 생성합니다.

- 향후 더 많은 데이터를 저장해야 한다면, 인스턴스를 생성한 후 추가로 볼륨을 연결할 수 있습니다.

3. EC2 인스턴스 접속 및 초기 보안 설정

☑️ EC2 인스턴스에 SSH 접속하기 (Windows)

AWS EC2 인스턴스를 생성한 후, SSH를 사용하여 원격 접속을 해야 서버를 직접 관리할 수 있습니다.

윈도우에서는 기본적으로 `PuTTY` 또는 Windows 터미널 (`PowerShell`, `CMD`)을 사용할 수 있는데 해당 글에서는 `PowerShell`을 사용한 접속 방법을 설명하겠습니다.

1️⃣ SSH 키 파일 (.pem) 권한 조정

- EC2 인스턴스를 생성할 때 다운로드한 키 파일(.pem)의 저장경로를 확인합니다.

- 권한 설정 변경: AWS에서는 키 파일이 너무 개방적이면나 SSH 접속을 허용하지 않으므로 아래 명령어를 실행하여 보안 설정을 조정합니다.

icacls "C:\Users\사용자이름\Downloads\my-key.pem" /inheritance:r
icacls "C:\Users\사용자이름\Downloads\my-key.pem" /grant:r "%USERNAME%:R"

2️⃣ EC2 인스턴스 퍼블릭 IP 확인

- AWS 콘솔 → EC2 → 인스턴스 목록으로 이동하여 생성한 인스턴스를 선택한 뒤 퍼블릭 IPv4 주소를 확인합니다.

3️⃣ PowerShell을 사용하여 SSH 접속

- 아래의 SSH 명령어를 입력하여 접속합니다.

ssh -i "C:\Users\사용자이름\Downloads\my-key.pem" ubuntu@퍼블릭IPv4주소

- 처음 접속하는 경우 다음과 같은 메시지가 나타납니다.

The authenticity of host '퍼블릭IPv4주소 (퍼블릭IPv4주소)' can't be established.

- yes 입력 후 Enter 키를 눌러 접속을 진행합니다

Welcome to Ubuntu 22.04.5 LTS (GNU/Linux 6.8.0-1021-aws x86_64)

☑️ EC2 인스턴스에 SSH 접속하기 (Mac & Linux)

Mac과 Linux는 기본적으로 SSH 클라이언트가 내장되어 있으므로, 터미널을 열고 아래 명령어로 접속합니다.

ssh -i /path/to/keyfile.pem ubuntu@퍼블릭IPv4주소

(*/path/to/keyfile.pem: .pem 파일 경로)

그리고 chmod 400 명령어로 키 파일의 권한을 설정합니다.

chmod 400 /path/to/keyfile.pem

☑️ 패키지 업데이트 (공통)

EC2 인스턴스를 최신 상태로 유지하기 위한 패키지 업데이트 방법입니다.

1️⃣ EC2 인스턴스에 접속한 뒤 다음 명령어를 입력합니다.

- 시스템에 설치된 패키지 목록을 최신으로 업데이트합니다.

sudo apt update

2️⃣ 모든 패키지 업그레이드

- -y 옵션은 업데이트를 자동으로 승인하게 해주며 시스템에 설치된 모든 패키지를 최신 버전으로 업데이트합니다.

sudo apt upgrade -y

3️⃣ 불필요한 패키지 삭제 (필요한 경우)

- 사용하지 않는 패키지를 삭제하여 디스크 공간을 절약합니다.

sudo apt autoremove

AWS EC2 설정은 여기까지! 이제 이 서버를 활용해 원하는 애플리케이션을 배포할 차례입니다.
다음 글에서는 웹 서버 구축, 데이터베이스 설치, 그리고 도커(Docker) 환경 설정까지 차근차근 알아보겠습니다.

[⚛️React] Rc-Tree로 메신저 조직도 쉽게 구현하기

파스트잇 — Wed, 23 Oct 2024 16:31:20 +0900

이번 글에서는 Rc-Tree 라이브러리를 사용하여 메신저 내 직원 조직도를 트리 구조로 시각화하는 방법을 단계별로 알아보겠습니다.

https://www.npmjs.com/package/rc-tree

rc-tree

tree ui component for react. Latest version: 5.10.1, last published: 7 days ago. Start using rc-tree in your project by running `npm i rc-tree`. There are 654 other projects in the npm registry using rc-tree.

www.npmjs.com

1️⃣ Rc-Tree 개념과 사용 방법

`Rc-Tree`는 부모와 자식, 즉 폴더와 문서 같은 부모-자식 관계를 가진 데이터 구조를 시각화할 수 있는 React 트리 구성 요소입니다. 해당 라이브러리는 트리 구조를 쉽게 시각화하고 조작할 수 있는 기능을 제공합니다.

Rc-Tree의 예시 - 출처: 상단 공식문서

✔️ 기본 사용 방법

먼저 `rc-tree` 라이브러리를 설치합니다.

npm install rc-tree

이제 트리 구조를 만들기 위해 key, title, children 속성을 설정한 트리 데이터를 준비합니다. `key`는 각 노드의 고유 식별자, `title`은 노드의 이름, `children`은 자식 노드를 나타냅니다.

import Tree from "rc-tree"; // react-tree 라이브러리
import "rc-tree/assets/index.css"

const treeData = [ // 계층 구조의 트리 데이터
  {
    key: "1",
    title: "folder 1",
    children: [
      { key: "1-1", title: "file 1-1" },
      { key: "1-2", title: "file 1-2" },
      {
        key: "3",
        title: "folder 3",
        children: [
          { key: "3-1", title: "file 3-1" },
          { key: "3-2", title: "file 3-2" },
        ],
      },
    ],
  },
  {
    key: "2",
    title: "folder 2",
    children: [
      { key: "2-1", title: "file 2-1" },
      { key: "2-2", title: "file 2-2" },
    ],
  },
];

<Tree treeData={treeData}></Tree>

위 예시에서는 폴더와 파일을 트리 구조로 나타냈습니다. 이 구조에서 Tree 컴포넌트에 `treeData`를 전달하여 트리 구조를 시각화할 수 있습니다.

2️⃣ Rc-Tree의 활용 - 메신저 조직도 구현

메신저에서 부서와 직원을 계층 구조로 시각화하여 조직도를 만들 수 있습니다. 부서는 상위 노드로, 직원은 하위 노드로 나타낼 수 있으며, 자식 노드가 없는 부서는 `isLeaf: false`로 설정할 수 있습니다.

✔️ 부서와 직원 관계 설정

아래는 부서와 직원의 관계를 트리 구조로 정의한 예시입니다. . 상위 노드에 부서 이름을 넣어주고 하위 노드에 부서의 직원 이름을 넣어주겠습니다. 트리 구조에서 children 배열을 사용하여 부서와 직원의 관계를 정의합니다. 그리고 `<Tree>` 컴포넌트 속성에 `treeData`를 넣어줍니다.

const treeData = [ // 트리 데이터
    {
        key: "1",
        title: "Erpre",
        children: [
            {
                key: "1-1",
                title: "영업부",
                children: [
                    {key: "1-1-1", title: "안유진"},
                    {key: "1-1-2", title: "김민주"}
                ]
            },
            {
                key: "1-2",
                title: "개발부",
                children: [
                    {key: "1-2-1", title: "장원영"},
                    {key: "1-2-2", title: "최예나"},
                    {key: "1-2-3", title: "조유리"}
                ]
            }
        ]
    }
];

<Tree treeData={treeData}></Tree>

기본적인 트리 모양의 조직도가 만들어진 것을 확인할 수 있습니다. 이렇게 트리 구조로 조직도를 만들면 메신저에서 조직도 조회와 관리가 훨씬 편리해집니다. 만약 부서는 있는데 직원이 없는 경우는 어떻게 될까요?

{
    key: "1-3",
    title: "인사부",
    isLeaf: false, // 자식 노드가 없는 경우 isLeaf: false 속성을 넣어준다
    children: [] 
}

자식 노드로 인식됨

부서는 있지만 직원이 없는 경우에는 부서가 자식 노드로 인식되는 것을 확인할 수 있습니다. 이 경우 속성에 `isLeaf: false` 값을 넣어주면 해당 노드가 자식 노드가 아닌 부모 노드로 인식됩니다.

부모 노드로 인식됨

✔️ 체크 박스 기능 추가

메신저에서 여러 사람에게 쪽지나 채팅을 보내기 위해 체크박스 기능을 추가해 보겠습니다. Rc-Tree에서 지원하는 `checkable` 속성을 사용하여 체크박스를 활성화할 수 있습니다. 저는 메신저에 로그인 했을 때 모든 노드가 기본적으로 확장되기를 원하므로 `defaultExpandAll` 속성도 넣어 주었습니다. 체크박스가 활성화된 트리 구조를 만들 수 있으며, 체크된 항목은 `onCheck` 핸들러로 처리할 수 있습니다. 예를 들어, 선택된 직원 목록을 업데이트할 수 있습니다.

<Tree
    treeData={treeData}
    defaultExpandAll={true}  // 모든 노드를 기본적으로 확장
    checkable                // 체크박스 설정
    onCheck={handleCheck}    // 체크 시 이벤트 (체크가 true인 노드의 title을 저장하는 이벤트함수)
/>

const handleCheck = (checkedKeys, { checkedNodes }) => {
    const recipientNames = checkedNodes
        .filter(node =>  !node.children) 
        .map(node => node.title); 

    setSelectedRecipients(recipientNames);
}

체크박스 활성화

✔️ 아이콘 커스터마이징

다음으로는 투박한 폴더와 파일 아이콘을 좀 더 보기좋게 변경해보겠습니다. 아이콘 커스텀도 속성을 통해 해결할 수 있습니다. 트리 노드에 `icon` 속성을 추가해 원하는 이모티콘을 지정해보도록 하겠습니다.

{
    key: "1",
    title: "Erpre",
    icon: <span className="parent-icon"> </span>,
    children: [
        {
            key: "1-1",
            title: "영업부",
            icon: <span> </span>,
            children: [
                {key: "1-1-1", title: "안유진"},
                {key: "1-1-2", title: "김민주"}
            ]
 },
// 생략

이렇게 원하는 아이콘을 지정하면 다음처럼 아이콘이 적용됩니다. 직원에는 추후 각자 지정한 메신저 온라인 상태를 표시할 것이므로 따로 아이콘을 지정하지 않고 그대로 두었습니다.

✔️ 서버에서 직원 데이터 가져오기

마지막으로, 서버에서 직원 데이터를 받아와서 트리 구조로 시각화하는 방법을 살펴보겠습니다. 데이터를 `API`로 받아와서 트리 구조로 변환한 후, `treeData`에 전달합니다.

useEffect(() => {
  async function fetchData() {
    try {
      const response = await axios.get('/api/messengers/employeeList');
      const employeeList = response.data;
      const treeStructure = buildTreeData(employeeList);
      setTreeData(treeStructure);
    } catch (error) {
      console.error('Failed to fetch employee data:', error);
    }
  }
  fetchData();
}, []);

const buildTreeData = (data) => {
        const departmentMap = {};
        const tree = [
            {
                key: "0",
                title: "Erpre",
                icon: <span> </span>,
                children: []
            }
        ];

        // 각 직원 데이터를 부서별로 그룹화
        data.forEach(employee => {
            const departmentName = employee.departmentName;
            const employeeNode = {
                key: employee. employeeId,
                title: employee.employeeName,
                isLeaf: true
            };

            // 해당 부서가 이미 존재하는지 확인
            if(!departmentMap[departmentName]) {
                const departmentNode = {
                    key: employee.departmentId,
                    title: departmentName,
                    children: []
                };
                departmentMap[departmentName] = departmentNode;
                tree[0].children.push(departmentNode);
            }

            departmentMap[departmentName].children.push(employeeNode);
        });

        return tree;
    }

실제 데이터가 적용이 된 모습을 보실 수 있습니다.

3️⃣ 마무리

Rc-Tree는 다양한 계층적 데이터를 시각화하는 데 매우 유용합니다. 이 글에서는 메신저 조직도 구현 방법을 다루었으며, 체크박스 기능, 아이콘 변경, 서버 데이터 연동 등 다양한 커스터마이징 옵션을 사용했습니다. Rc-Tree 공식 문서를 참고하여 더 많은 기능을 활용해보세요!