영발이의 개발 일기

Servlet & Dispatcher-Servlet(서블릿 & 디스패처 서블릿)

영발개발 — Fri, 28 Nov 2025 17:09:43 +0900

사용자가 서버에 요청을 보내면 서버 내부에서 어떤 경로와 방식으로 처리되는지 궁금해진다. 오늘은 그 중심에 있는 서블릿에 대해서 이해하기 쉽고 아주 간단하게 정리해 보고자 한다.

목차
- Servlet(서블릿)이란?
- Dispatcher Servlet(디스패처 서블릿)이란?
- Dispatcher Servlet(디스패처 서블릿) 동작 과정

Servlet(서블릿)이란?

서블릿은 Java 기반 웹 서버(WAS)가 HTTP 요청을 처리하기 위해 사용하는 자바 클래스다. 쉽게 말하면 '브라우저가 보낸 요청을 받아서 그에 대한 응답을 만드는 자바 프로그램'이다.

서블릿 특징

HTTP 요청을 받아서 처리 가능
요청/응답 객체(HttpServletRequest, HttpServletResponse) 사용
doGet(), doPost() 같은 메서드로 HTTP 메서드 처리
서블릿은 하나 생성되면 계속 재사용됨 (싱글톤과 비슷)

Dispatcher-Servlet(디스패처 서블릿)이란?

디스패처 서블릿은 스프링이 만든 서블릿으로, 스프링 MVC의 모든 요청을 받아서 처리하는 'Front Controller(프론트 컨트롤러)' 역할을 한다. 즉 사용자가 보낸 모든 요청을 받아서 어떤 컨트롤러가 처리할지 결정한다.

Dispatcher-Servlet(디스패처 서블릿) 동작 과정

위에서 언급한 바와 같이, 디스패처 서블릿은 적합한 컨트롤러와 메서드를 찾아 요청을 위임해야 한다. 동작 과정을 보면 아래 그림과 같다.

출처 : https://mangkyu.tistory.com

1️⃣ 사용자로부터 디스패처 서블릿이 요청을 받는다.

2️⃣ HandlerMapping이 어떤 Controller가 처리할지 검색한다.

3️⃣ 요청을 Controller로 위임할 Handler Adapter를 찾아서 전달한다.

4️⃣ Handler Adapter가 Controller로 요청을 위임한다.

5️⃣ Controller랑 Service에서 비즈니스 로직을 처리한다.

6️⃣ Controller가 응답값을 리턴한다.

7️⃣ Handler Adapter가 응답값을 처리한다.

8️⃣ 서버의 응답을 사용자에게 전달한다.

위의 내용은 사실 굉장히 많은 부분을 생략하고 처음 서블릿을 공부하는 사람들이 알기 쉽게 작성했다. 아마 실제 과정은 훨씬 복잡할 것이지만 아직 나역시 이해와 공부가 필요한 부분이기에 이번에는 이 정도로만 정리를 하고자 한다.

예외 처리(Exception Handling)

영발개발 — Fri, 14 Nov 2025 08:00:07 +0900

JAVA에서 예외가 무엇인지부터 예외 처리를 어떻게 하는지, 또 이게 실무에서 왜 중요한지에 대해서 정리해볼까 한다.

목차

- 에러와 예외의 차이

- 예외의 종류

- 예외 처리 방법

- 예외 처리의 중요성

에러와 예외의 차이

에러(Error)

메모리 부족이나 시스템 오류처럼 복구 불가능한 심각한 문제를 뜻한다. 시스템 수준에서 발생하여 프로그램 종료로 이어지는 경우가 많고, 에러는 컴파일 시점에 확인할 수 없으며 주로 실행 중에 발생한다. 즉 예측이 불가능해 개발자가 따로 코드 수정과 같은 것들로 처리할 수 없다.

ex) OutOfMemoryError, StackOverflowError

예외(Exception)

개발자가 코드를 통해 처리할 수 있는 비교적 덜 심각한 오류를 뜻한다. 정상적인 프로그램 흐름을 방해하는 이벤트로 컴파일 시점에 체크되는 경우와 실행 중에 발견되는 경우가 있다. 에러와 다르게 예측이 가능하기 때문에 'try-catch'와 같은 예외처리 구문을 통해 코드를 수정하여 수습이 가능하다.

ex ) NullPointerException, IOException, IllegalArgumentException

예외의 종류

출처 : https://sorjfkrh5078.tistory.com/104

Exception은 크게 RuntimeException과 그 외 다른 Exception으로 나눌 수 있는데, OtherException은 컴파일 시점에 확인되는 Checked Exception이고 RuntimeException은 컴파일 시점이 아닌 런타임 시점에 발생하는 Unchecked Exception이다.

즉 Checked Exception은 컴파일 시점에 확인되기 떄문에 예외 처리를 해주지 않으면 컴파일 자체가 실패해서 프로그램 실행이 되지 않고, Unchecked Exception은 컴파일 시점에는 확인이 안되기 때문에 실행 중에 에러가 터질 수 있다.

<요약>

	Checked Exception	Unchecked Exception
발생 시점	컴파일 시점	런타임 시점
예외 처리 필요 여부	반드시 필요	선택 사항
대표 클래스	IOException, SQLException	NullPointerException, ArithmeticException
원인	외부 요인 (파일, 네트워크 등)	개발자 실수 (논리 오류 등)

예외 처리 방법

그렇다면 시스템이 비정상적으로 종료되지 않게 하려면 이 예외를 처리해야 하는데 코드에서 어떻게 처리할 수 있을까? Java에서는 try-catch, throw, throws를 통해 예외를 처리한다.

try-catch

try-catch는 가장 기본적인 예외 처리 방식으로, 예외가 발생할 수 있는 코드를 try 블록 안에 작성하고 예외가 발생했을 때 수행할 동작을 catch 블록에 작성한다.

try {
    int result = 10 / 0;  // ArithmeticException 발생
} catch (ArithmeticException e) {
    System.out.println("0으로 나눌 수 없습니다.");
}

try 블록 내에서 예외가 발생하면, 해당 예외를 처리할 수 있는 catch 블록으로 제어가 이동하며 프로그램은 정상적으로 이어진다.

throw

throw는 직접 예외를 발생시킬 때 사용한다.

public void checkAge(int age) {
    if (age < 19) {
        throw new IllegalArgumentException("성인만 접근 가능합니다.");
    }
}

즉, throw는 예외 객체를 던지는 역할을 한다. 던져진 예외는 현재 메서드를 호출한 쪽에서 처리해야 한다.

보통 실제 프로젝트에서는 @RestControllerAdvice라는 어노테이션이 선언된 Exception Handler 클래스에서 던져진 예외를 받아 화면으로 return하는 식으로 예외를 처리한다.

throws

throws는 메서드 선언부에서 이 메서드가 어떤 예외를 던질 수 있는지 명시하는 키워드다.

public void readFile(String filePath) throws IOException {
    FileReader reader = new FileReader(filePath);  // CheckedException
    reader.read();
}

throws는 이 메서드를 사용할 때 이런 예외가 발생할 수도 있다라는 사전 경고 역할을 한다. 해당 메서드를 호출한 곳에서 반드시 예외를 처리해야 컴파일이 통과된다.

try-catch + throw

실무에서는 try-catch 안에서 throw로 예외를 던지는 경우를 많이 볼 수 있다. 아래에서 얘기할 거지만 실제 설계 단계에서 예외를 어떻게 구분할지를 정하고 개발 단계에 들어가기 때문에, catch로 일단 예외를 잡고 throw로 개발자가 던지고자 하는 예외로 변환해서 던지는 것이다.

try {
    userRepository.save(user);
} catch (DataIntegrityViolationException e) {
    // DB 제약조건 위반 등 Spring 내부 예외를 감싸서
    // 비즈니스 예외로 바꿔 던짐
    throw new BusinessException("USER_DUPLICATE", "이미 존재하는 사용자입니다.");
}

예외 처리의 중요성

실제 프로젝트를 개발하다 보면 단순히 예외를 잡는 것 이상으로, 예외를 어떻게 설계하고 구분할지가 시스템 안정성과 유지보수성에 큰 영향을 미친다.

예를들어 실제 프로젝트에서는 단일 애플리케이션만 있는게 아니라 프레임워크, ESB, EDMS, 그 외 외부 연계 시스템 등 서로 다른 다수의 시스템이 연결되어 있는데, 이런 환경에서는 한 곳에서 발생한 예외가 다른 시스템에까지 영향을 줄 수 있기 때문에, 예외를 명확하게 구분하고 설계하는게 매우 중요하다.

ex)

FrameworkException → 내부 공통 모듈에서 발생한 예외
IntegrationException → ESB나 외부 연계 구간에서 발생한 예외
BusinessException → 사용자의 잘못된 요청으로 발생한 예외
SystemException → DB, 서버 자원, 네트워크 등의 시스템 문제

이렇게 예외를 구분해두면 문제가 발생했을 때 로그만 봐도 “이건 프레임워크 담당이 봐야 하는 문제구나”, “이건 외부 연계 쪽 에러니까 ESB 담당한테 전달해야겠네” 하는 식으로 담당 영역을 빠르게 특정하고 조치를 취할 수 있다.

세션(Session), 쿠키(Cookie), 토큰(Token), JWT 완벽 정리

영발개발 — Tue, 28 Oct 2025 17:43:26 +0900

로그인과 사용자 인증 관련 단골 용어인 세션, 쿠키, 토큰, JWT에 대해서 정리해 보고자 한다.

이 용어들을 정리하기 전에 로그인과 사용자 인증에 대해서 먼저 얘기해보자.

사용자 인증?

사용자 인증은 쉽게 말해 '이 요청을 보낸 사람이 누구인지 확인하는 과정'이다. 크게 나눠 설명해 보자면 '로그인 인증'과 '지속 인증'으로 나눌 수 있을 거 같다.

평상시에 어떤 서비스를 이용하기 위해 로그인 할 때를 생각해보자. 우리는 처음에 어떤 페이지에 들어가서 아이디와 패스워드를 입력하는 '로그인 인증'을 한다. 이는 사용자가 아이디와 비밀번호를 입력했을때 가입이 되어있는 사용자인지 확인하는 과정이다. 여기까지는 누구나 알고 있을 것이다. 하지만 사용자를 인증하는 과정은 여기서 끝이 아니다. 로그인을 하고 나서 여러 서비스를 이용할때마다 우리는 모르게 뒤에서 지속적으로 사용자 인증을 하고 있다. 내가 올바른 사용자인지 말이다.

이걸 처음 듣는 사람은 '지속적인 인증이 왜 필요하지? 로그인만 하면 끝 아닌가?'라고 생각할 수 있을 거 같다. 하지만 서버는 로그인 후에도 이 사용자가 올바른 사용자인지 알아야한다. 회사나 직장으로 비유를 해보자면 사용자가 로그인하는 것은 마치 회사 입구에서 사원증을 찍고 들어가는 것과 같다. 그리고 직장 내에서 사원증을 목에 걸고 다니거나, 직원복을 입고 다니면서 직원임을 인증하는 것을 지속 인증이라고 생각하면 쉬울 것이다.

세션 vs 토큰

대표적인 지속 인증 방법으로는 세션 인증 방식과 토큰 인증 방식이 있다.

세션 인증 방식

세션 인증 방식으로 로그인 하는 흐름을 먼저 보자.

화면에서 ID/PW 입력 ➡️ 서버에서 ID/PW 확인하고 유효하면 세션을 생성하고 세션을 가지고 있음 ➡️ 서버에서 세션 id만 쿠키에 담아서 화면에 전달 ➡️ 화면에서 클라이언트는 매 요청마다 요청과 함께 쿠키를 보냄 ➡️ 서버는 쿠키에서 세션 id가 유효한지 판단하고 요청을 처리

흐름에서 볼 수 있듯이 세션 인증 방식은 서버가 로그인 상태를 기억하는 방식이다. 서버가 실제 사용자 정보를 안전하게 관리할 수 있다는 장점이 있지만, 서버가 세션을 계속 저장해야 하므로 확장성이 떨어진다. 보통 사용자가 장시간 자리를 비운다면 세션이 만료되면서 자동 로그아웃이 되는 것도 세션 인증 방식을 사용중이기 때문이다.

토큰 인증 방식

토큰 인증 방식도 흐름을 먼저 보자.

화면에서 ID/PW 입력 ➡️ 서버에서 ID/PW 확인하고 유효하면 토큰을 만들어서 화면에 전달 ➡️ 화면에서 클라이언트는 매 요청마다 헤더에 해당 토큰 정보를 담아서 보냄 ➡️ 서버는 토큰이 유효한지 확인하고 요청을 처리

이와 같이 토큰 인증 방식은 서버가 로그인 상태를 기억하지 않고, 클라이언트가 인증 정보를 들고 다니는 방식이다. 서버가 상태를 저장하지 않아도 되기 때문에 확장성이 좋다는 장점이 있지만, 토큰은 만료 시간이 되기 전까진 유효하기 때문에 중간에 누군가가 탈취해도 무효화 시킬 수 없고 로그아웃 처리도 어렵다는 단점이 있다.

좀 더 설명을 덧붙이자면, 세션 인증 방식에서는 서버에서 세션을 저장하기 때문에 서버에서 세션을 삭제해 버리면 누군가가 세션 id를 가지고 요청을 해도 더 이상 서비스를 이용할 수 없다. 또한 'session.invalidate();'와 같은 방법으로 즉시 로그아웃도 가능하지만, 토큰 인증 방식은 로그인 정보를 서버에서 따로 저장하지 않기 때문에 이러한 것들이 불가능하다.

쿠키, JWT

쿠키(Cookie)

쿠키는 위에서 언급을 한 번 했지만, 정의하자면 브라우저에 저장되는 작은 데이터(key - value)다. 주로 서버가 브라우저에 식별자(ex. 세션 id)나 설정을 저장할 때 사용되고, HTTP 요청마다 자동으로 전송된다.

JWT

JWT는 JSON Web Token의 약자로 토큰의 구체적 포맷 중 하나다. JWT는 다음과 같이 세 부분으로 구성된다.

예:
eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJ1c2VyMTIzIn0.abc123signature

Header: 어떤 알고리즘으로 서명했는지
Payload: 사용자 정보 (ex. userId, role 등)
Signature: 비밀키로 서명한 값 → 위조 방지

서버에서는 JWT api를 사용해 토큰을 만들고, 들어온 토큰이 유효한 토큰인지 확인하는 식으로 사용자 인증 처리를 한다.

정리

간략하게 사용자 인증과 관련 용어들에 대해서 알아봤다. 관련 용어들을 한 줄 정리하면서 이번 글을 마무리 한다.

세션(session): 서버가 관리하는 사용자 상태 저장소. 보통 세션ID만 쿠키로 브라우저에 두고, 실제 사용자 상태(로그인 정보 등)는 서버에 저장.
토큰(token): 인증을 위해 발급되는 문자열(=자격증명). 서버가 상태를 들고있을 수도 있고(세션 기반 토큰), 클라이언트에 자체적으로 정보를 담을 수도 있음(예: JWT).
쿠키(cookie): 브라우저에 저장되는 작은 데이터(키-값). 주로 서버가 브라우저에 식별자(예: 세션ID)나 설정을 저장할 때 사용. HTTP 요청마다 자동으로 전송됨(도메인/경로 일치 시).
JWT(JSON Web Token): 토큰의 구체적 포맷 중 하나. 헤더.페이로드.서명 구조로, 페이로드에 클레임(사용자ID, 만료시간 등)을 담아 서명해서 변조 여부 검증 가능. 기본적으로 암호화하지는 않음(인증/무결성 보장, 기밀성 X).

Spring Batch(Tasklet)에서 트랜잭션 롤백(rollback)이 되지 않는 경우와 해결 방법

영발개발 — Fri, 12 Sep 2025 10:55:38 +0900

최근에 프로젝트에서 개발자들이 배치 작업 중 에러가 발생해도 rollback이 되지 않는다는 문의가 들어왔다. 문제의 원인과 해결 방법을 찾아냈고, 그것을 기록해둘까 한다.

원인

코드를 살펴보니 배치에서는 예외를 catch만 하고 throw는 하지 않고 있었다. 온라인 서비스에서는 예외를 throw하면 상위 계층(Controller, @ControllerAdvice 등)에서 받아서 후처리할 수 있지만, 배치는 예외를 throw하면 Step이 실패 처리되며 Job 실행이 중단되고 예외를 받아서 후처리해줄 곳이 없기 때문이다.

해결 방법 & 예시 코드

롤백되지 않는 코드

@Slf4j
@Component
public class SampleTasklet implements Tasklet {

    @Autowired
    private UserRepository userRepository;

    @Override
    @Transactional
    public RepeatStatus execute(StepContribution contribution, ChunkContext chunkContext) throws Exception {
        try {
            User user = new User("beforeRollback");
            userRepository.save(user); // DB insert

            // 강제로 에러 발생
            int error = 1 / 0;

        } catch (Exception e) {
            log.error("에러 발생: {}", e.getMessage());
            // ❌ 여기서 단순히 로그만 찍으면 트랜잭션은 롤백되지 않음
        }

        return RepeatStatus.FINISHED;
    }
}

위 코드에서 1/0 연산으로 예외가 발생하지만, catch 블록에서 예외를 다시 throw 하지 않았기 때문에 트랜잭션이 정상 종료된 것으로 인식되어 DB에 user 데이터가 그대로 insert 된다. 즉, rollback이 일어나지 않는다.

롤백 강제 지정한 코드(해결 방법)

@Slf4j
@Component
public class SampleTasklet implements Tasklet {

    @Autowired
    private UserRepository userRepository;

    @Override
    @Transactional
    public RepeatStatus execute(StepContribution contribution, ChunkContext chunkContext) throws Exception {
        try {
            User user = new User("beforeRollback");
            userRepository.save(user); // DB insert

            // 강제로 에러 발생
            int error = 1 / 0;

        } catch (Exception e) {
            log.error("에러 발생: {}", e.getMessage());

            // ✅ 현재 트랜잭션을 롤백 상태로 표시
            TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();
        }

        return RepeatStatus.FINISHED;
    }
}

우선 삽입된 코드를 풀어서 설명하자면,

- TransactionAspectSupport

Spring 프레임워크에서 제공하는 유틸리티 클래스
AOP 기반 트랜잭션 관리 기능을 지원하며, 현재 트랜잭션에 접근할 수 있게 해줌

- currentTransactionStatus()

현재 진행 중인 트랜잭션의 상태(TransactionStatus) 객체를 반환
이 객체를 통해 트랜잭션의 진행 여부, rollback-only 여부 등을 확인/제어할 수 있음

- setRollbackOnly()

트랜잭션 상태를 "rollback 전용"으로 표시
이렇게 표시되면 트랜잭션이 commit 시도가 되더라도 무조건 rollback 됨

때문에, 'setRollbackOnly()'를 호출하면 현재 진행 중인 트랜잭션이 rollback-only 상태로 바뀐다. 이후 트랜잭션 commit 시도가 들어오면 무조건 rollback 되고, 덕분에 throw를 하지 않고도 DB 변경 내역이 rollback 된다.

정리

단순히 catch 후 로그만 찍으면 rollback되지 않는다.
예외를 throw 하면 Step 자체가 실패 처리된다.
rollback만 하고 Step은 성공 처리하고 싶을 때는 'TransactionAspectSupport.currentTransactionStatus().setRollbackOnly()' 사용한다.

Reflection과 Class 객체

영발개발 — Thu, 31 Jul 2025 13:53:49 +0900

Reflection에 대해 쓰기 전에 먼저 Class 객체에 대해서 먼저 정리해보자.

Class 객체

정의

Class는 모든 자바 클래스의 '메타데이터(설계도)'를 담는 그릇
일반 객체(new Person())는 실제 사람 인스턴스
Class<Person>은 사람이라는 설계도 자체

왜 Class<?>를 쓰는가?

어떤 클래스가 올지 모를때 사용한다.

(추가로, 어떤 객체가 올지 모를때 사용된다는 점은 비슷하지만 Object는 실제 객체를 담는 것이고, Class는 클래스의 메타데이터를 담는다.)

Object obj = new Person(); // 실제 Person 객체가 들어감
			
Class<?> clazz = Person.class;   // Person의 설계도
Object obj = clazz.getDeclaredConstructor().newInstance(); // 설계도로 객체 생성

실제 프로젝트에서 봤던 코드

Class<?> clazz = vo.getClass();
Field[] fields = clazz.getDeclaredFields();

여기서 나오는 '.getDeclaredFields()'는 Class<?> 객체가 가진 모든 필드(멤버 변수)를 Field 객체 배열로 반환하는 메서드다.

예를 들어,

class Person {
	private String name;
	public int age;
}

public class FieldDetailExample {
	public static void main(String[] args) throws Exception {
		Class<?> clazz = Person.class;
		Field[] fields = clazz.getDeclaredFields();
        
		for (Field field : fields) {
			System.out.println("toString(): " + field);  // Field 객체의 문자열 표현
			System.out.println("이름: " + field.getName());
			System.out.println("타입: " + field.getType());
			System.out.println("접근제어자: " + java.lang.reflect.Modifier.toString(field.getModifiers()));
			System.out.println("------");
		}
	}
}

위와 같이 코딩하면,

toString(): private java.lang.String Person.name
이름: name
타입: class java.lang.String
접근제어자: private
------
toString(): public int Person.age
이름: age
타입: int
접근제어자: public
------

이런 식으로 객체의 멤버 변수(필드) 하나하나의 정보를 담은 객체가 출력되는 걸 확인 할 수 있다.

Reflection

정의

Java에서 제공하는 표준 API로, 런타임에 클래스, 메서드, 필드, 생성자 등에 접근하고 조작할 수 있는 기능이다.

- 중요 포인트

컴파일 시점이 아니라 프로그램 실행 중(런타임)에 클래스의 구조를 읽고 조작
클래스 이름, 어노테이션, 메서드 시그니처 등을 문자열로 찾아 동적으로 로직 실행 가능

** 컴파일(Compile-time)과 런타임(Runtime) 차이

[소스코드] --(컴파일)--> [바이트코드(.class)] --(실행)--> [런타임: JVM 메모리 위에서 동작]

- 컴파일:
javac가 .java → .class(바이트코드)로 변환
문법 검사 + 타입 체크만 함
클래스가 실제로 실행되거나 메모리에 올라오진 않음

- 런타임:
java로 JVM이 .class를 읽어서 메모리에 로드
메서드 호출, 객체 생성, 변수 값 변경 등 실제 동작이 이루어짐
Reflection은 이 시점에서 클래스 정보를 읽어옴

코드로 보는 차이

<일반 호출(컴파일 시점에 확정)>

Person p = new Person(); // 컴파일러가 Person 클래스 존재 확인
p.sayHello();           // 메서드 존재 여부도 컴파일 시점에 체크됨

Class<?> clazz = Class.forName("Person");   // 문자열 기반 → 컴파일러는 확인 못함
Object obj = clazz.getDeclaredConstructor().newInstance();
Method m = clazz.getMethod("sayHello");     // 없는 메서드면 여기서 런타임 예외
m.invoke(obj);

static

영발개발 — Fri, 2 May 2025 17:03:34 +0900

자바 소스를 보다보면 자주 보이는 녀석. 오늘은 static 변수와 메서드에 대해서 글을 쓴다.

static?

static은 '정적인', '고정된'이라는 뜻을 가지고 있는 만큼, 클래스 안에서 static으로 선언된 변수나 메서드는 객체 없이 클래스 자체에 고정되어 공유되는 형태로 동작한다.

보통 우리가 어떤 클래스 안에 변수나 메서드를 다른 곳에서 사용하려면 객체 생성을 해줘야 한다.

예를 들어,

public class MathUtil {
    public int square(int x) {
        return x * x;
    }
}

MathUtil util = new MathUtil();
int result = util.square(5);

이런 식으로 귀찮게 객체 생성을 한 번 해주고 메서드를 사용해야한다. 매번 이렇게 사용하면 귀찮고 코드도 많아질 것이다. 하지만 static을 사용한다면,

public class MathUtil {
    public static int square(int x) {
        return x * x;
    }
}

int result = MathUtil.square(5);

간단하게 사용이 가능하다. 이걸 보고나면 우리가 보통 코딩을 처음 배우면 Main class에다가 main메서드를 만들어서 사용할 때 main 메서드에 static이 항상 붙는 이유를 알 수 있을 것이다.

static 사용시 주의할 점

static은 인스턴스 변수에 접근이 불가하다는 특징이 있다. 이게 무슨 말인지 간단한 코드를 보자.

public class Person {
    String name;

    public static void sayHello() {
        System.out.println("Hello, " + name); // ⚠ 오류 발생!
    }
}

위와 같이 코드를 짜면 오류가 난다. 왜 일어날까?

'name'은 인스턴스 변수이다. 즉, 'new Person()' 해서 만들어진 객체 안에 있는 값이다. 하지만 'sayHello()'는 static 메서드이므로 객체 없이도 호출이 가능하다. 그렇다면 객체 생성이 되지 않은 상태에서 인스턴스 변수를 쓰려고 하니 오류가 나는 것이다.

public class Person {
    String name;

    public void sayHello() {
        System.out.println("Hello, " + name); // this.name 가능
    }
}

여기서는 'sayHello()'가 static이 아니므로 객체가 있어야 호출되고, 그 객체의 'name'을 쓸 수 있다.

언제 static을 쓰면 좋을까?

객체의 상태에 의존하지 않는 기능 (ex. 덧셈, 날짜 계산 등)

Person p1 = new Person("영발");
p1.sayHello();  // 출력: Hello, 영발

Person마다 name이라는 상태(정보)를 갖는 경우, 해당 메서드는 p1이라는 객체가 어떤 이름을 갖고 있는지(상태)에 따라 결과가 바뀐다. 이런 경우에는 static을 사용하면 당연히 적절하지 못할 것이다.

public static int add(int a, int b) {
    return a + b;
}

반대로 위와 같은 add 메서드는 누가 호출하든 결과가 같을 것이고 이와 같은 경우(입력만 있으면 결과가 항상 같은 계산, 변환 등)에 static을 사용하기 적절하다고 볼 수 있다.

유틸 클래스(Utils, Converter, Math)

유틸리티 클래스는 보통 여러 객체가 공통으로 사용할 수 있는 기능만 모아놓은 클래스다.

public class MathUtils {
    public static int square(int x) {
        return x * x;
    }

    public static int max(int a, int b) {
        return a > b ? a : b;
    }
}

예시 코드인 MathUtils를 보면 상태를 가지지 않고, 필드도 없다. 오직 기능만 있으므로 전부 static으로 만들어도 문제가 없다.

메인 함수('public static void main')처럼 프로그램 진입점

프로그램의 진입점은 클래스의 인스턴스 없이 실행되어야 하므로 static으로 선언되어야 한다.

-끝-

트랜잭션(Transaction)

영발개발 — Mon, 28 Apr 2025 14:17:35 +0900

대학생 시절에 정보처리기사 공부하다가 트랜잭션의 특성을 외웠던 게 기억난다. 사실 그때 개발을 아예 안해봐서 뭔 뜻인지도 모르고 그냥 달달 외웠던 게 기억난다. 현재 프로젝트에서 개발 가이드 문서를 보다가 트랜잭션 처리하는 쪽이 나와서 보다가 오랜만에 찾아보게 되었고 그런 김에 간단하게 트랜잭션에 대해서 글을 써본다.

트랜잭션(Transaction)이란?

트랜잭션은 데이터베이스 작업을 하나의 묶음으로 처리하는 단위다. 트랜잭션은 반드시 모두 성공하거나, 모두 실패해야 한다. 중간에 오류가 발생하면 이전까지의 작업도 모두 취소되어 데이터가 꼬이지 않게 해야한다.

트랜잭션이 필요한 이유

예를 들어, 콘서트 좌석 예약 시스템에서는 좌석을 동시에 여러 명이 선택할 수 있다. 만약 트랜잭션이 없다면 같은 좌석이 중복 예약될 수 있다. 트랜잭션을 적용하면 한 명만 좌석 예약에 성공하고, 다른 시도는 실패하게 할 수 있다.

트랜잭션의 4가지 특성(ACID)

원자성(Atomicity) : 작업이 전부 완료되거나 전부 실패해야 한다.
일관성(Consistency) : 트랜잭션 전후로 데이터 무결성이 유지되어야 한다.
격리성(Isolation) : 동시에 여러 트랜잭션이 실행돼도 서로 간섭하지 않아야 한다.
지속성(Durability) : 트랜잭션이 성공하면 그 결과는 영구적으로 보존된다.

Spring Boot에서 트랜잭션 다루기

Spring Boot에서는 @Transactional 어노테이션을 사용해 메서드 단위로 트랜잭션을 관리할 수 있다. 메서드 안에서 여러 DB 작업을 수행하다가 예외가 발생하면, 자동으로 모든 변경사항이 롤백된다.

어떤 물품을 구매했을 때 상황을 예시로 들어보자.

@Transactional
public void createOrder() {
    orderRepository.save(order);       // 주문 저장
    stockRepository.decreaseStock();   // 재고 감소
    paymentService.pay();              // 결제 처리 (여기서 예외 발생!)
    notificationService.sendEmail();   // 이건 실행 안 됨
}

주문이 저장되고 재고 감소처리까지 된 상황에서 결제 처리에서 예외가 발생하면 맨 마지막에 결제완료 메일을 보내는 작업은 실행이 되지 않고, 앞서 진행되었던 주문 저장과 재고 감소도 전부 롤백 처리된다. 이런 식으로 트랜잭션 처리를 하면 중간에 오류가 발생해도 데이터가 꼬이지 않게 된다.

JavaScript 기본

영발개발 — Mon, 24 Mar 2025 15:30:32 +0900

script 태그

자바 스크립트는 html 위에서 동작하는 언어다. 자바 스크립트를 html 안에 작성하기 위해서는 script 태그를 사용하는 방법이 있다.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        document.write("Hello");
    </script>
</body>
</html>

실행 결과

Event

웹 브라우저 위에서 일어나는 사건을 Event(이벤트)라고 한다. 마우스를 클릭했을때, 키보드를 눌렀을때, 스크롤 바를 움직였을때 등 모두 이벤트라고 할 수 있다. 사용자가 어떤 이벤트를 발생시켰을 해당 이벤트에 대응하여 처리하는 것을 'Event Handler(이벤트 핸들러)'라고 하는데, 이벤트 이름 앞에 'on'을 붙이고 이벤트에 대한 동작(함수)을 처리해주면 된다. 아래 코드에서처럼 on______ 뒤에는 자바스크립트 문법이 와야한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="hello" onclick="alert('Hello')">
</body>
</html>

제어할 태그 선택하기

'querySelector()', 'getElementById()' 등을 사용해서 내가 제어할 태그를 선택할 수 있다.

<!DOCTYPE html>
<html>
    <head>
        <title>BLOG - git & github</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <h1>
            <a href="index.html">BLOG</a>
            <span>
                <button>night</button>
                <button>day</button>
            </span>
        </h1>
        
        <div id="grid">
            <ol>
                <li><a href="1.html">http</a></li>
                <li><a href="2.html">API & REST API</a></li>
                <li><a href="3.html">Git & Github</a></li>
            </ol>
            <div id="text">
                <p> 개발자라면 깃과 깃허브에 대해서 알고 있을 것이다. 써본 적도 있고 알고는 있는데 뭔가 제대로 알고 쓰는 거 같은 느낌이 들지 않아 유튜브에 있는 유노코딩 님의 강의를 보았다. 깃을 모르는 초보자들이나 나처럼 대충 알고 쓰고 있던 사람들이 아주 보기 좋도록 잘 정리되어 있고 도움이 많이 되었다. 그래서 해당 내용을 정리하고자 공부한 내용과 영상 내용을 요약하여 글로 남겨볼까 한다. (해당 글 안에 내용들의 출처는 유노코딩님으로, 강의 내용들을 요약한 것이다.)<br><br><a href="https://youtu.be/PwIei1tdHSU?si=2hphqG_O8tWuhLbE" target="_blank">유노코딩님의 강의 링크</a><br><br> 우선 강의에서 알려주는 깃과 깃허브, 브랜치 등 주요 내용들을 먼저 정리하고, 그에 관한 명령어들을 한 번에 정리하는 식으로 글을 작성하려 한다.</p>
                <h2>git에 관한 주요 내용 정리</h2>
                <h3><a href="https://zerofootblog.tistory.com/4" target="_blank" title="git specification">깃(Git)이란?</a></h3>
                <p> 깃은 소규모 프로젝트에서 초대형 프로젝트에 이르기까지 모든 것을 신속하고 효율적으로 처리하도록 설계된 오픈 소스 버전 제어 시스템이다. (쉽게 생각하면 우리가 컴퓨터에 설치하는 다양한 종류의 소프트웨어 중 한 가지이다.)</p>
            </div>
        </div>
    </body>
</html>

해당 코드는 간단한 블로그 화면을 만들어본 것인데, 위에 night와 day버튼을 눌렀을때, 다크모드와 라이트모드로 각각 변할 수 있게 자바스크립트 코드를 넣어볼 것이다.

<!DOCTYPE html>
<html>
    <head>
        <title>BLOG - git & github</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <h1>
            <a href="index.html">BLOG</a>
            <span>
                <button onclick="
                document.querySelector('body').style.backgroundColor='black';
                document.querySelector('body').style.color='white';
                ">night</button>
                <button onclick="
                document.querySelector('body').style.backgroundColor='white';
                document.querySelector('body').style.color='black';
                ">day</button>
            </span>
        </h1>
        
        <div id="grid">
            <ol>
                <li><a href="1.html">http</a></li>
                <li><a href="2.html">API & REST API</a></li>
                <li><a href="3.html">Git & Github</a></li>
            </ol>
            <div id="text">
                <p> 개발자라면 깃과 깃허브에 대해서 알고 있을 것이다. 써본 적도 있고 알고는 있는데 뭔가 제대로 알고 쓰는 거 같은 느낌이 들지 않아 유튜브에 있는 유노코딩 님의 강의를 보았다. 깃을 모르는 초보자들이나 나처럼 대충 알고 쓰고 있던 사람들이 아주 보기 좋도록 잘 정리되어 있고 도움이 많이 되었다. 그래서 해당 내용을 정리하고자 공부한 내용과 영상 내용을 요약하여 글로 남겨볼까 한다. (해당 글 안에 내용들의 출처는 유노코딩님으로, 강의 내용들을 요약한 것이다.)<br><br><a href="https://youtu.be/PwIei1tdHSU?si=2hphqG_O8tWuhLbE" target="_blank">유노코딩님의 강의 링크</a><br><br> 우선 강의에서 알려주는 깃과 깃허브, 브랜치 등 주요 내용들을 먼저 정리하고, 그에 관한 명령어들을 한 번에 정리하는 식으로 글을 작성하려 한다.</p>
                <h2>git에 관한 주요 내용 정리</h2>
                <h3><a href="https://zerofootblog.tistory.com/4" target="_blank" title="git specification">깃(Git)이란?</a></h3>
                <p> 깃은 소규모 프로젝트에서 초대형 프로젝트에 이르기까지 모든 것을 신속하고 효율적으로 처리하도록 설계된 오픈 소스 버전 제어 시스템이다. (쉽게 생각하면 우리가 컴퓨터에 설치하는 다양한 종류의 소프트웨어 중 한 가지이다.)</p>
            </div>
        </div>
    </body>
</html>

'querySelector'를 이용한 자바스크립트 코드를 통해 night버튼을 눌렀을 때, body태그의 백그라운드 컬러와 글씨 색을 변경할 수 있도록 만들었다. 하지만 a태그에는 css 효과가 따로 적용되어 있었기 때문에 우선 순위가 밀려 적용이 되지 않았다. 그러면 따로 a태그도 선택해서 효과를 주어야 하는데

<!DOCTYPE html>
<html>
    <head>
        <title>BLOG - git & github</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <h1>
            <a href="index.html">BLOG</a>
            <span>
                <button onclick="
                document.querySelector('body').style.backgroundColor='black';
                document.querySelector('body').style.color='white';
                document.querySelector('a').style.color='white';
                ">night</button>
                <button onclick="
                document.querySelector('body').style.backgroundColor='white';
                document.querySelector('body').style.color='black';
                document.querySelector('a').style.color='black';
                ">day</button>
        </h1>
        <!-- 생략 -->

보는 것과 같이 h1안에 있는 a태그는 변경이 됐지만, ol 태그 안에 있던 3개의 a태그는 변경이 안됐다. 그 이유는 'querySelector'는 선택한 태그의 오직 첫번째 태그만 적용이 되기 때문이다. 여러개의 a태그를 선택하기 위해서는 'querySelectorAll'을 사용해야 한다.

<!DOCTYPE html>
<html>
    <head>
        <title>BLOG - git & github</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <h1>
            <a href="index.html">BLOG</a>
            <span>
                <button onclick="
                document.querySelector('body').style.backgroundColor='black';
                document.querySelector('body').style.color='white';

                document.querySelectorAll('a').forEach(list => {
                    list.style.color='white';
                })
                ">night</button>
                <button onclick="
                document.querySelector('body').style.backgroundColor='white';
                document.querySelector('body').style.color='black';
                
                document.querySelectorAll('a').forEach(list => {
                    list.style.color='black';
                })
                ">day</button>
        </h1>
        <!-- 생략 -->

이와같이 정상적으로 모두 적용되는 것을 볼 수 있다.

'===' or '==' ?

동등 비교 연산자인 '=='은 값이 같으지만 비교를 하고, '==='은 값과 데이터 타입까지 같으지 비교한다.

var, let, const ?

세 가지 모두 javascript에서 변수를 선언할 때 사용되는 키워드이다. 여러가지 특성들이 있지만 요약하자면

var : 가능하면 쓰지 않기
let : 값이 변하는 변수를 선언할 때 사용하기
const : 값이 변하지 않는 변수를 선언할 때 사용하기

객체

객체 선언

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>Object</h1>
    <script>
        const numbers = {
            "one" : "1",
            "two" : "2",
        }
        document.write("one : " + numbers.one + "<br>");
        document.write("two : " + numbers.two)
    </script>
</body>
</html>

객체 추가

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>Object</h1>
    <script>
        const numbers = {
            "one" : "1",
            "two" : "2",
        }
        document.write("one : " + numbers.one + "<br>");
        document.write("two : " + numbers.two + "<br>");
        numbers.three = "3";
        document.write("three : " + numbers.three + "<br>");
        numbers["number four"] = "4";
        document.write("four : " + numbers["number four"] + "<br>"); 
    </script>
</body>
</html>

'number four'와 같은 경우에는 중간에 띄어쓰기가 포함되어 있기 때문에 ' numbers["number four"] = "4" '라는 식으로 코딩을 해야한다.

for...in 과 for...of

for...in은 주로 객체의 속성(키)을 반복할 때, for...of는 배열, 문자열, Set, Map과 같은 이터러블 객체를 반복할 때 사용한다.

for...in

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
	document.write(key + " : " + obj[key] + "<br>");
}

for...of

const arr = [10, 20, 30];

for (let value of arr) {
  document.write(value + "<br>");
}

객체에 함수 선언해서 사용하기

객체 안에 함수를 선언해서 코드를 더 간략하게 만들 수 있다.

const Body = {
    setColor:function(color) {
        document.querySelector('body').style.color = color;
    },
    setBackgroundColor:function(color) {
        document.querySelector('body').style.backgroundColor = color;
    }
}
const Links = {
    setColor:function(color) {
        const alist = document.querySelectorAll('a');
        let i = 0;
        while(i < alist.length) {
            alist[i].style.color = color;
            i++;
        }
    }
}
const Borders = {
    setColor:function(color) {
        document.querySelector('#grid ol').style.borderRight = `1px solid ${color}`;
        document.querySelector('h1').style.borderBottom = `1px solid ${color}`;
    }
}
function nightDayHandler(self) {
    if(self.innerText === 'night'){
        Body.setColor('white');
        Body.setBackgroundColor('black');
        self.innerText = 'day';

        Links.setColor('white');

        Borders.setColor('white');
    } else {
        Body.setColor('black');
        Body.setBackgroundColor('white');
        self.innerText = 'night';

        Links.setColor('black');

        Borders.setColor('black');
    }
}

<!DOCTYPE html>
<html>
    <head>
        <title>BLOG - git & github</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <script src="color.js"></script>
    </head>
    
    <body>
        <h1>
            <a href="index.html">BLOG</a>
            <span>
                <button onclick="nightDayHandler(this)">night</button>
            </span>
        </h1>
        <div id="grid">
            <ol>
                <li><a href="1.html">http</a></li>
                <li><a href="2.html">API & REST API</a></li>
                <li><a href="3.html">Git & Github</a></li>
            </ol>
            <div id="text">
                <p> 개발자라면 깃과 깃허브에 대해서 알고 있을 것이다. 써본 적도 있고 알고는 있는데 뭔가 제대로 알고 쓰는 거 같은 느낌이 들지 않아 유튜브에 있는 유노코딩 님의 강의를 보았다. 깃을 모르는 초보자들이나 나처럼 대충 알고 쓰고 있던 사람들이 아주 보기 좋도록 잘 정리되어 있고 도움이 많이 되었다. 그래서 해당 내용을 정리하고자 공부한 내용과 영상 내용을 요약하여 글로 남겨볼까 한다. (해당 글 안에 내용들의 출처는 유노코딩님으로, 강의 내용들을 요약한 것이다.)<br><br><a href="https://youtu.be/PwIei1tdHSU?si=2hphqG_O8tWuhLbE" target="_blank">유노코딩님의 강의 링크</a><br><br> 우선 강의에서 알려주는 깃과 깃허브, 브랜치 등 주요 내용들을 먼저 정리하고, 그에 관한 명령어들을 한 번에 정리하는 식으로 글을 작성하려 한다.</p>
                <h2>git에 관한 주요 내용 정리</h2>
                <h3><a href="https://zerofootblog.tistory.com/4" target="_blank" title="git specification">깃(Git)이란?</a></h3>
                <p> 깃은 소규모 프로젝트에서 초대형 프로젝트에 이르기까지 모든 것을 신속하고 효율적으로 처리하도록 설계된 오픈 소스 버전 제어 시스템이다. (쉽게 생각하면 우리가 컴퓨터에 설치하는 다양한 종류의 소프트웨어 중 한 가지이다.)</p>
            </div>
        </div>
    </body>
</html>

Web Server와 WAS

영발개발 — Mon, 17 Mar 2025 15:24:34 +0900

Web Server와 WAS, 그들의 역할

Web Server

웹 서버는 정적인 요청(HTML, CSS, JavaScript, image 등)을 처리하는 서버다. 대표적인 웹 서버로는 Apache HTTP Server, NginX, Microsoft IIS 등이 있다.

WAS(Web Application Server)

WAS는 동적인 요청(서버에서 처리해야 하는 로직이 필요한 요청)을 처리하는 서버로, Servlet과 JSP를 처리할 수 있는 Web Container를 제공한다. 대표적인 WAS로는 Tomcat, JBoss, WebLogic, WebSphere 등이 있다.

출처 : https://taes-k.github.io/2019/05/24/webserver/

클라이언트로부터 요청이 Web Server로 들어오면 정적인 요청일 경우 WAS까지 가지 않고 Web Server에서 처리한다. 하지만 동적인 요청이 들어올 경우 Web Server는 해당 요청을 WAS에게 전달한다. WAS는 해당 요청을 처리 후에 Web Server에게 전달하고 Web Server는 클라이언트에게 응답을 주는 것이다.

홈페이지의 목록을 조회하는 상황을 예시로 보자.

✅ 홈페이지 목록 조회 요청의 처리 과정 (WAS & Web Server 역할 정리)

가정: 사용자가 https://example.com/list 페이지에서 목록을 조회한다고 해보자.

1️⃣ 사용자 요청 (클라이언트 → 웹 서버)

사용자가 브라우저에서 https://example.com/list 페이지를 요청
이 요청이 웹 서버(Apache, Nginx 등) 에 도착

2️⃣ 웹 서버 → WAS 요청 전달

웹 서버는 정적 리소스(HTML, CSS, JS 등)가 아니라 동적인 데이터 조회 요청이므로,
이 요청을 WAS(Tomcat, JBoss 등) 에게 전달

3️⃣ WAS가 서블릿을 실행하고 DB 조회

WAS 내부의 웹 컨테이너(Web Container) 가 요청을 받을 서블릿을 실행
서블릿은 비즈니스 로직(Service) 을 호출하여 DB에서 데이터 조회
조회된 데이터(예: 게시글 목록)를 JSP/Thymeleaf 같은 템플릿 엔진과 결합해서 HTML 생성

4️⃣WAS → 웹 서버 → 사용자에게 응답 반환

WAS가 생성한 동적인 HTML 페이지를 웹 서버에 전달
웹 서버는 클라이언트(브라우저)에게 응답을 반환
사용자는 목록이 출력된 웹 페이지를 확인

Web Server와 WAS를 따로 두는 이유

웹 서버와 WAS에 대해서 찾아보다가 궁금한 점이 생겼다.

출처 : https://ecsimsw.tistory.com/

해당 그림에서 보이는 것처럼 WAS 안에는 WS(웹서버) 기능이 포함되어 있다. 그럼에도 독립된 WS를 두는 이유가 궁금했다.

✅ WebServer와 WAS를 따로 두는 이유

1️⃣ 정적 리소스 처리 최적화

웹 서버(Apache, Nginx)는 정적 리소스(HTML, CSS, JS, 이미지 등)를 빠르게 처리할 수 있도록 최적화되어 있음.
하지만 WAS는 이런 정적 리소스 처리를 최적화하는 데 초점이 맞춰져 있지 않음.

2️⃣ 부하 분산 (로드 밸런싱)

웹 서버가 먼저 요청을 받고, 여러 개의 WAS로 부하를 분산(Load Balancing)할 수 있음.
예: Nginx → 여러 개의 Tomcat

3️⃣ 보안 강화

WAS를 직접 외부에 노출하지 않고 웹 서버를 프록시 역할로 둬서 보안을 강화할 수 있음.
예: WAS는 내부 네트워크에서만 접근 가능하도록 하고, 웹 서버가 외부 요청을 필터링한 후 전달

4️⃣ WAS 성능 향상

WAS는 비즈니스 로직(DB 조회, 연산 등)만 집중적으로 처리할 수 있도록 최적화됨.
웹 서버에서 정적 요청을 걸러주기 때문에 불필요한 요청을 줄여 성능이 향상됨.

그럼 여기서 추가로 궁금한 점이 생긴다. 이렇게 WS와 WAS를 따로 둘 경우, WAS에 있는 WS는 작동을 안하고 따로 둔 WS만 작동할까? 기본적으로는 WAS 안에 있는 WS 기능을 비활성화하고, NginX나 아파치 같은 외부 웹 서버에서만 요청을 처리하도록 구성한다.

그렇다고 WAS에 있는 WS 기능을 아예 안 쓰는 것은 아니다. 보통 트래픽이 상대적으로 적고 부하가 크지 않은 소규모 프로젝트에서는 웹 서버와 WAS를 따로 둘 필요가 굳이 없기 때문에 WAS만 단독 사용한다. 반대로 트래픽이 많고 부하가 큰 대규모 프로젝트에서는 위에서 말한 이점들을 위해 웹 서버와 WAS를 따로 두어 실행한다.

CSS 기본 - 2

영발개발 — Thu, 13 Mar 2025 16:40:35 +0900

Grid(그리드)

<!DOCTYPE html>
<html>
<head>
    <style>
        #grid {
            border: 5px solid pink;
            display: grid;
            grid-template-columns: 150px 1fr;
        }
        div {
            border: 5px solid gray;
        }
    </style>
</head>
<body>
    <div id="grid">
        <div>NAVIGATION</div>
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Totam odit dignissimos expedita voluptas repellendus beatae doloribus inventore? 
        Totam quis rem aspernatur repellat harum error.
        Odio vel atque quos recusandae dolore.</div>
    </div>
</body>
</html>

나누고자 하는 태그들을 id가 grid라는 하나의 div태그로 묶고, css에서 display 속성을 grid로 설정해준다. 그리고 grid-template-colums로 grid의 가로열 크기를 조정해준다. 위 코드는 NAVIGATION을 150px로 설정하고 나머지 크기는 다른 하나의 div태그가 갖는다.

<!DOCTYPE html>
<html>
<head>
    <style>
        #grid {
            border: 5px solid pink;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 200px 200px;
        }
        div {
            border: 5px solid gray;
        }
    </style>
</head>
<body>
    <div id="grid">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>
</html>

위 코드처럼 grid-template-rows로 세로 크기도 지정해 줄 수 있다.

미디어 쿼리

css에서는 특정 조건에서만 css style을 적용시킬 수도 있다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            border: 10px solid green;
            font-size: 60px;
        }
        @media(max-width:800px) {
            div {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div>
        Responsive
    </div>
</body>
</html>

위 코드처럼 @media를 사용해 조건을 달아준다. max-width:800px는 최대 너비가 800px라는 것으로 너비가 800px보다 작으면 div 태그가 보이지 않게 해준다는 것이다.

해당 사진들처럼 너비가 줄어들면 div가 보이지 않게 설정되는 것을 볼 수 있다.