jeonghoe21 님의 블로그

저장 프로시저

jeonghoe21 — Fri, 21 Mar 2025 00:19:15 +0900

저장 프로시저 (Stored Procedure) 설명

저장 프로시저는 반복적으로 실행해야 하는 쿼리나 비즈니스 로직을 서버 측에서 미리 저장해놓고, 필요할 때마다 호출할 수 있는 SQL 코드입니다. 프로시저를 사용하면 성능 개선, 보안 강화, 코드 재사용 등의 이점이 있습니다.

저장 프로시저의 장점

성능 향상: 저장 프로시저는 컴파일되고 메모리에 저장되어 반복 실행 시 빠르게 동작합니다.
서버/클라이언트 트래픽 감소: 저장 프로시저를 호출하는 것만으로 필요한 작업을 처리하므로, 많은 양의 데이터를 전송할 필요가 없습니다.
보안 강화: 데이터베이스의 테이블을 직접 접근하는 대신, 프로시저를 통해 작업을 수행하므로, SQL 인젝션 등의 보안 위험을 줄일 수 있습니다.
유지보수 용이: SQL 문을 응용 프로그램 코드에서 분리하여 관리하므로, 수정 시 애플리케이션을 재배포하지 않고 프로시저만 수정하면 됩니다.

저장 프로시저 생성 예시

CREATE PROCEDURE [dbo].[USP_FINDPROCEDURE]
    @KEYWORD VARCHAR(100)  -- 입력 파라미터 정의
AS
BEGIN
    SET NOCOUNT ON;
    SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;

    -- 쿼리문 실행
    SELECT SO.[NAME], SC.[TEXT]
    FROM SYSCOMMENTS SC
    INNER JOIN SYSOBJECTS SO
    ON SO.ID = SC.ID
    WHERE SC.TEXT LIKE '%' + @KEYWORD + '%';
END

SET NOCOUNT ON;은 SQL Server에서 쿼리를 실행할 때, **행(row)**의 수를 결과로 반환하지 않도록 설정하는 명령입니다.

SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED; 이 명령은 트랜잭션 격리 수준을 설정하는 명령입니다.

이 격리 수준에서는 다른 트랜잭션에서 아직 커밋되지 않은 데이터를 읽을 수 있습니다

저장 프로시저 호출 예시

EXEC dbo.USP_FINDPROCEDURE 'SM_USER_MST'; -- 'SM_USER_MST'

EXEC dbo.USP_FINDPROCEDURE 'SM_USER_MST'; -- 'SM_USER_MST'

이렇게 저장 프로시저를 호출하면, 프로시저 내의 쿼리문이 실행되며 결과가 반환됩니다.

저장 프로시저와 보안

저장 프로시저는 SQL 인젝션 공격에 대비하는 중요한 방법입니다. 동적 SQL을 사용하는 경우에는 매개변수화된 쿼리를 사용하여 인젝션 공격을 예방할 수 있습니다. 예를 들어, LIKE 구문에서 사용되는 입력값은 반드시 파라미터로 전달하고, SQL문을 동적으로 생성하지 않는 것이 좋습니다.

CREATE PROCEDURE CREATE_BOOK (
    @NAME NVARCHAR(100),        -- 책 이름
    @PUBLISHER NVARCHAR(50),    -- 출판사
    @AUTHOR NVARCHAR(50),       -- 저자
    @RETURN_CODE VARCHAR(1) OUTPUT -- 성공 여부를 나타내는 출력 매개변수
)
AS
BEGIN
    SET NOCOUNT ON; -- 결과로 영향을 받은 행의 개수를 표시하지 않음

    BEGIN TRY -- 트랜잭션 시작
        BEGIN TRAN -- 트랜잭션 시작

        -- 책 정보를 TBL_BOOK 테이블에 삽입
        INSERT INTO TBL_BOOK (NAME, PUBLISHER, AUTHOR)
        VALUES (@NAME, @PUBLISHER, @AUTHOR)

        COMMIT TRAN -- 트랜잭션 커밋
        SET @RETURN_CODE = 'S' -- 성공 코드 설정
    END TRY

    BEGIN CATCH -- 오류가 발생한 경우 처리
        ROLLBACK TRAN -- 트랜잭션 롤백
        SET @RETURN_CODE = 'E' -- 오류 코드 설정
    END CATCH

    SET NOCOUNT OFF -- 영향을 받은 행의 개수를 다시 표시
END

1. 저장 프로시저의 정의:

CREATE PROCEDURE CREATE_BOOK (

@NAME NVARCHAR(100), -- 책 이름

@PUBLISHER NVARCHAR(50), -- 출판사

@AUTHOR NVARCHAR(50), -- 저자

@RETURN_CODE VARCHAR(1) OUTPUT -- 성공 여부를 나타내는 출력 매개변수 )

CREATE PROCEDURE는 새로운 저장 프로시저를 생성하는 명령어입니다.
@NAME, @PUBLISHER, @AUTHOR는 입력 매개변수입니다. 이 매개변수들은 책의 이름, 출판사, 저자를 받아옵니다.
@RETURN_CODE는 출력 매개변수입니다. 책 정보가 성공적으로 추가되면 'S', 실패하면 'E'를 반환합니다.

2. 프로시저 본문:

AS BEGIN SET NOCOUNT ON; -- 결과로 영향을 받은 행의 개수를 표시하지 않음

SET NOCOUNT ON은 SQL Server에서 결과로 반환되는 영향을 받은 행 수를 표시하지 않도록 설정합니다. 이는 성능을 개선하는데 유용합니다.

3. 트랜잭션 처리:

BEGIN TRY -- 트랜잭션 시작!

BEGIN TRAN -- 트랜잭션 시작

BEGIN TRY는 트랜잭션을 시작하기 위한 예외 처리를 위한 구문입니다.
트랜잭션이 정상적으로 수행될 경우, COMMIT이 실행되고, 예외가 발생하면 CATCH가 처리합니다.

INSERT INTO TBL_BOOK (NAME, PUBLISHER, AUTHOR)

VALUES (@NAME, @PUBLISHER, @AUTHOR) -- 책 정보를 TBL_BOOK 테이블에 삽입

INSERT INTO TBL_BOOK는 TBL_BOOK 테이블에 책 정보를 삽입하는 SQL 쿼리입니다. 입력된 매개변수 @NAME, @PUBLISHER, @AUTHOR를 사용하여 테이블에 데이터를 추가합니다.

COMMIT TRAN -- 트랜잭션 커밋 SET @RETURN_CODE = 'S' -- 성공 코드 설정

COMMIT TRAN은 트랜잭션을 성공적으로 종료하고 변경 사항을 확정하는 명령어입니다.
SET @RETURN_CODE = 'S'는 프로시저가 성공적으로 실행되었음을 나타내는 출력 값을 설정합니다.

4. 예외 처리 (CATCH):

END TRY BEGIN CATCH -- 오류가 발생한 경우 처리

ROLLBACK TRAN -- 트랜잭션 롤백 SET

@RETURN_CODE = 'E' -- 오류 코드 설정 END CATCH

BEGIN CATCH는 트랜잭션 중 오류가 발생할 경우 실행됩니다.
ROLLBACK TRAN은 오류가 발생했을 때, 이전의 모든 변경 사항을 취소하여 데이터 일관성을 유지합니다.
SET @RETURN_CODE = 'E'는 프로시저 실행이 실패했음을 나타내는 출력 값을 설정합니다.

5. 프로시저 종료:

SET NOCOUNT OFF END

SET NOCOUNT OFF는 영향을 받은 행의 수를 다시 표시하도록 설정하는 명령어입니다. 이 설정은 트랜잭션이 끝난 후 복원됩니다.
END는 저장 프로시저 본문을 끝내는 구문입니다.

자바스크립트 문법

jeonghoe21 — Wed, 19 Mar 2025 23:47:12 +0900

1. 자바스크립트 문법과 이벤트 처리

1.1. 자바스크립트 문법

자바스크립트에서 변수를 선언하는 방법은 let, const, var입니다. let은 재할당이 가능한 변수이고, const는 재할당이 불가능한 변수입니다. var는 ES6 이전 방식으로 사용되며, 최신 코드에서는 let과 const를 더 많이 사용합니다.

예시:

let x = 10; // 재할당 가능
const y = 20; // 재할당 불가

1.2. 함수 정의

함수는 function 키워드로 정의할 수 있습니다. ES6에서 도입된 화살표 함수는 더 짧고 간결하게 함수를 작성할 수 있게 해줍니다.

함수 선언 예시:

function greet(name) { return 'Hello, ' + name + '!'; }
console.log(greet('John')); // "Hello, John!"

화살표 함수 예시:

const add = (a, b) => a + b;
console.log(add(3, 4)); // 7

1.3. 조건문과 반복문

조건문(if, else if, else)과 반복문(for, while, forEach)을 사용하여 로직을 제어할 수 있습니다.

조건문 예시:

let age = 18;
if (age >= 18) { console.log('성인입니다.'); } else { console.log('미성년자입니다.'); }

반복문 예시:

for (let i = 0; i < 5; i++) { console.log(i); // 0, 1, 2, 3, 4 }

1.4. 배열과 객체

배열과 객체는 자바스크립트에서 자주 사용되는 데이터 구조입니다.

배열 예시:

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // 'apple'

객체 예시:

const person = { name: 'John', age: 30 };
console.log(person.name); // 'John'

2. 자바스크립트 이벤트 처리

2.1. 이벤트 리스너 기본 사용법

이벤트 리스너는 특정 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수를 실행하는 방식입니다.

HTML 예시:

<button id="clickButton">클릭해 주세요</button>

자바스크립트 예시:

const button = document.getElementById('clickButton');
button.addEventListener('click', function() { alert('버튼이 클릭되었습니다!'); });

2.2. 이벤트 객체

이벤트 처리 함수에서는 이벤트 객체를 매개변수로 받아 클릭한 위치나 키보드 입력 등의 상세 정보를 얻을 수 있습니다.

HTML 예시:

<button id="clickButton">클릭해 주세요</button>

자바스크립트 예시:

const button = document.getElementById('clickButton');
button.addEventListener('click', function(event) { console.log('클릭한 위치:', event.clientX, event.clientY); });

2.3. 이벤트 전파 제어

이벤트 버블링과 캡처링은 이벤트가 DOM 트리에서 전파되는 방식입니다. stopPropagation() 메서드를 사용하여 이벤트가 부모 요소로 전파되는 것을 막을 수 있습니다.

HTML 예시:

<div id="parent"><button id="child">클릭해 주세요</button></div>

자바스크립트 예시:

const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function() { alert('부모가 클릭되었습니다.'); });
child.addEventListener('click', function(event) { alert('자식이 클릭되었습니다.'); event.stopPropagation(); });

2.4. 이벤트 델리게이션

이벤트 델리게이션은 부모 요소에 이벤트 리스너를 등록하여 자식 요소에서 발생한 이벤트를 처리하는 기법입니다. 이는 동적으로 추가된 자식 요소에 대해서도 이벤트 처리가 가능합니다.

HTML 예시:

<div id="parent"><button class="child">버튼 1</button><button class="child">버튼 2</button><button class="child">버튼 3</button></div>

자바스크립트 예시:

const parent = document.getElementById('parent');
parent.addEventListener('click', function(event) { if (event.target && event.target.matches('button.child')) { alert('버튼이 클릭되었습니다: ' + event.target.textContent); } });

3. 실무에서 자주 사용되는 자바스크립트 이벤트 처리 예시

3.1. 폼 유효성 검사

사용자가 입력한 데이터가 유효한지 확인하는 폼 유효성 검사는 웹 애플리케이션에서 매우 중요합니다. 자바스크립트를 사용하여 폼 전송 전에 유효성 검사를 할 수 있습니다.

HTML 예시:

<form id="loginForm"><input type="text" id="username" placeholder="사용자 이름" required><input type="password" id="password" placeholder="비밀번호" required><button type="submit">로그인</button></form>

자바스크립트 예시:

const form = document.getElementById('loginForm');
form.addEventListener('submit', function(event) { const username = document.getElementById('username').value; const password = document.getElementById('password').value; if (username === '' || password === '') { alert('모든 필드를 채워주세요.'); event.preventDefault(); } });

3.2. 동적인 콘텐츠 로딩 (AJAX 사용)

웹 페이지에서 동적으로 데이터를 로드하는 예시로, AJAX를 사용하여 서버에서 데이터를 받아오고 페이지를 업데이트할 수 있습니다.

HTML 예시:

<button id="loadDataBtn">데이터 로드</button><div id="dataContainer"></div>

자바스크립트 예시:

const loadDataBtn = document.getElementById('loadDataBtn');
const dataContainer = document.getElementById('dataContainer');
loadDataBtn.addEventListener('click', function() { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { dataContainer.innerHTML = JSON.stringify(data); }) .catch(error => console.error('데이터 로딩 오류:', error)); });

4. AJAX로 데이터를 가져오는 백엔드 구현 예시

4.1. Controller (Spring Boot 예시)

@RestController

@RequestMapping("/api")
@GetMapping("/data"): 이 메서드는 /api/data 경로로 GET 요청을 처리하고, 데이터베이스에서 데이터를 조회하여 JSON 형식으로 응답합니다.

@RestController @RequestMapping("/api")

public class DataController { @GetMapping("/data")

public ResponseEntity<List<Data>> getData() {

List<Data> dataList = dataService.getAllData();

return ResponseEntity.ok(dataList); } }

4.2. Service (Spring Boot 예시)

@Service

DataService: 이 클래스는 데이터를 가져오는 비즈니스 로직을 처리합니다.

@Service public class DataService {

@Autowired private DataRepository dataRepository;

public List<Data> getAllData() {

return dataRepository.findAll();

} }

4.3. Repository (Spring Boot 예시)

@Repository

DataRepository: 이 인터페이스는 JPA Repository를 사용하여 데이터베이스에서 데이터를 조회합니다.

@Repository public interface DataRepository extends JpaRepository<Data, Long> { }

AJAX (Asynchronous JavaScript and XML)란?

AJAX는 비동기식으로 데이터를 서버와 주고받을 수 있는 기술입니다. 웹 페이지를 새로 고침하지 않고도 서버로부터 데이터를 요청하고, 받은 데이터를 동적으로 웹 페이지에 업데이트할 수 있게 해줍니다.

AJAX는 JavaScript, XMLHttpRequest 객체 또는 Fetch API를 사용하여 클라이언트(브라우저)와 서버 간의 비동기적인 데이터 교환을 가능하게 만듭니다. 오늘날 JSON 형식의 데이터가 많이 사용되며, XML 대신 JSON을 사용하는 경우가 많습니다.

AJAX의 동작 방식

**클라이언트(브라우저)**에서 데이터를 요청.
서버가 요청을 처리하고 데이터를 응답.
클라이언트는 응답 데이터를 받아 웹 페이지를 새로 고침하지 않고 업데이트.

AJAX를 사용하여 데이터 가져오기

AJAX에서 데이터를 가져오는 가장 기본적인 방법은 XMLHttpRequest 객체 또는 fetch API를 사용하는 것입니다. fetch API는 최신 자바스크립트에서 주로 사용되며, Promise를 지원합니다. 아래에서는 fetch API를 사용한 예시를 통해 AJAX 동작을 설명하겠습니다.

fetch API 사용법

**fetch**는 기본적으로 **Promise**를 반환합니다. Promise는 비동기 작업의 결과를 나타내는 객체로, 작업이 완료되면 처리 결과를 얻을 수 있도록 합니다. fetch는 GET과 POST와 같은 HTTP 요청을 보낼 수 있으며, 데이터 요청을 비동기적으로 처리합니다.

1. fetch로 데이터 요청하기

fetch('https://api.example.com/data') // 서버에 데이터를 요청
    .then(response => response.json()) // 응답을 JSON 형태로 변환
    .then(data => {                    // 변환된 데이터를 처리
        console.log(data);              // 데이터를 콘솔에 출력
    })
    .catch(error => console.error('Error:', error)); // 오류 처리

코드 설명

fetch('https://api.example.com/data'):
- fetch() 함수는 URL을 인자로 받습니다. 여기서는 'https://api.example.com/data'라는 URL로 GET 요청을 보냅니다.
- 이 호출은 비동기적으로 동작하므로, 서버로부터 응답이 오면 그때 결과를 처리합니다.
.then(response => response.json()):
- fetch()는 Promise 객체를 반환합니다. 서버로부터 응답이 오면 then() 메서드가 호출됩니다.
- 응답은 일반적으로 Response 객체로 전달됩니다. 이를 JSON 형식으로 변환하려면 .json() 메서드를 사용합니다.
- .json()은 비동기 작업이므로 또 다른 Promise를 반환하고, 이를 .then()으로 처리합니다.
.then(data => {...}):
- 두 번째 then()은 .json()으로 변환된 데이터를 처리하는 함수입니다. 여기서 data는 서버로부터 받은 JSON 데이터입니다.
- data를 사용하여 필요한 동작을 할 수 있습니다. 예를 들어, 데이터를 HTML에 표시하는 등의 작업이 가능합니다.
.catch(error => console.error('Error:', error)):
- catch()는 오류 처리를 담당합니다. 만약 요청 중에 오류가 발생하거나, fetch() 호출에서 문제가 생기면 이 구문이 실행됩니다.
- 오류는 콘솔에 출력되며, 개발자는 이를 통해 문제를 해결할 수 있습니다.

기본 사용법:

fetch(url, options)
    .then(response => response.json())  // 응답을 JSON 형식으로 변환
    .then(data => {
        console.log(data);  // 데이터를 처리
    })
    .catch(error => {
        console.error('Error:', error);  // 오류 처리
    });

url: 요청할 URL을 지정합니다.
options: 요청에 대한 선택적인 설정을 지정할 수 있습니다. (예: method, headers, body 등)

fetch 예시들

1. 기본 GET 요청

가장 간단한 GET 요청은 URL만 지정해주면 됩니다. 예를 들어, API 서버에서 데이터를 받아오는 코드입니다.

fetch('https://api.example.com/data')
    .then(response => response.json())  // 응답을 JSON으로 변환
    .then(data => {
        console.log(data);  // 데이터를 출력하거나 처리
    })
    .catch(error => console.error('Error:', error));

이 코드는 https://api.example.com/data URL에 GET 요청을 보내고, JSON 데이터를 받아와서 처리합니다.

실제 데이터가 어떻게 넘어오는지?

예를 들어, https://api.example.com/data에서 데이터를 GET으로 요청할 때 서버가 응답하는 JSON 형식의 데이터는 다음과 같을 수 있습니다:

서버 응답 데이터 예시 (JSON):

{
  "status": "success",
  "data": {
    "id": 1,
    "username": "exampleUser",
    "email": "user@example.com"
  }
}

2. POST 요청 (서버로 데이터 전송)

서버로 데이터를 전송하려면, POST 메서드를 사용합니다. 데이터는 **body**로 전송됩니다.

fetch('https://api.example.com/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        username: 'exampleUser',
        password: 'examplePass'
    })
})
    .then(response => response.json())  // 응답을 JSON으로 변환
    .then(data => {
        console.log(data);  // 서버에서 받은 데이터 처리
    })
    .catch(error => console.error('Error:', error));

method: 'POST': HTTP 메서드를 POST로 설정.
headers: 요청의 헤더를 설정. 여기서 Content-Type: application/json은 요청 본문이 JSON 형식임을 나타냅니다.
body: 서버로 보내는 데이터. JSON.stringify()로 객체를 문자열로 변환하여 전송합니다.

실제 데이터가 POST로 넘어가는 방식 (HTML 폼과 데이터)

HTML 폼 예시 (POST 요청으로 데이터 전송)

자바스크립트로 POST 요청을 보내는 예시 (폼 제출 시)

const form = document.getElementById('loginForm');
form.addEventListener('submit', function(event) {
    event.preventDefault();  // 폼 제출을 막고, 자바스크립트로 데이터를 전송

    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    fetch('https://api.example.com/submit', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            username: username,
            password: password
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);  // 서버에서 받은 응답 처리
    })
    .catch(error => console.error('Error:', error));
});

실제 데이터가 POST로 넘어가는 방식

HTML에서 전송된 데이터 예시:

사용자가 username에 exampleUser, password에 examplePass를 입력합니다.
**fetch()**로 서버로 요청을 보낼 때 **JSON.stringify()**를 사용하여 데이터는 다음과 같은 형태로 서버로 전송됩니다:

{
"username": "exampleUser",
"password": "examplePass"
}

서버에서는 이 데이터를 받아 로그인 절차를 처리하고, 응답을 반환합니다.

서버 응답 데이터 예시 (POST 요청에 대한 응답):

{
    "status": "success",
    "message": "로그인 성공!",
    "userData": {
        "id": 1,
        "username": "exampleUser",
        "email": "user@example.com"
    }
}

3. GET 요청에 쿼리 매개변수 추가

GET 요청에 URL 뒤에 쿼리 문자열을 추가하여 특정 데이터를 요청할 수 있습니다.

fetch('https://api.example.com/data?search=apple&limit=10')
    .then(response => response.json())
    .then(data => {
        console.log(data);  // 검색 결과 데이터 처리
    })
    .catch(error => console.error('Error:', error));

?search=apple&limit=10: 쿼리 문자열을 URL에 추가하여 서버에 특정 조건으로 요청합니다.

4. POST 요청에서 FormData 사용 (파일 업로드 포함)

파일 업로드와 같은 데이터를 POST 요청으로 전송할 때, FormData 객체를 사용합니다. 이를 통해 파일을 포함한 데이터를 서버에 보낼 수 있습니다.

const formData = new FormData();
formData.append('file', document.getElementById('fileInput').files[0]);

fetch('https://api.example.com/upload', {
    method: 'POST',
    body: formData  // FormData를 body로 전송
})
    .then(response => response.json())
    .then(data => {
        console.log(data);  // 업로드 결과 처리
    })
    .catch(error => console.error('Error:', error));
FormData.append('file', file)은 파일을 FormData 객체에 추가합니다.
body: formData: fetch에 FormData 객체를 전송하여 파일 업로드를 처리합니다.

5. PUT 요청 (리소스 업데이트)

서버에서 기존 데이터를 업데이트할 때는 PUT 메서드를 사용합니다.

fetch('https://api.example.com/updateData', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        id: 1,
        name: 'Updated Name'
    })
})
    .then(response => response.json())
    .then(data => {
        console.log(data);  // 업데이트된 데이터 처리
    })
    .catch(error => console.error('Error:', error));

method: 'PUT': HTTP 메서드를 PUT으로 설정.
body: 수정할 데이터를 JSON.stringify()로 변환하여 전송합니다.

6. DELETE 요청 (리소스 삭제)

서버에서 데이터를 삭제할 때는 DELETE 메서드를 사용합니다.

method: 'DELETE': HTTP 메서드를 DELETE로 설정.
URL에 삭제할 리소스를 지정하여 요청합니다.

7. fetch와 async/await 사용하기

async/await 문법을 사용하면 비동기 코드를 더 깔끔하고 읽기 쉽게 작성할 수 있습니다. fetch를 await와 함께 사용하면, then()을 체이닝하지 않고도 결과를 쉽게 처리할 수 있습니다.

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchData();
await는 fetch가 반환하는 Promise가 해결될 때까지 기다리고, response.json()도 비동기적으로 처리됩니다.
try/catch 블록을 사용하여 오류를 처리할 수 있습니다.

SQL(기초)

jeonghoe21 — Wed, 19 Mar 2025 22:33:03 +0900

1. DDL (Data Definition Language) - 데이터 정의

✔ 테이블, 인덱스, 뷰 등을 생성, 수정, 삭제하는 SQL 문법

(1) 기초 - 테이블 생성 및 삭제
✔ 테이블 생성 (CREATE TABLE)
CREATE TABLE users (
id INT IDENTITY(1,1) PRIMARY KEY, -- 자동 증가 기본 키
username VARCHAR(50) NOT NULL UNIQUE, -- 사용자 이름 (유일성 제약)
email VARCHAR(100) NOT NULL UNIQUE, -- 이메일 (유일성 제약)
password VARCHAR(255) NOT NULL, -- 비밀번호
created_at DATETIME DEFAULT CURRENT_TIMESTAMP -- 생성 시간 자동 입력
);

✔ 테이블 삭제 (DROP TABLE)
DROP TABLE users;

(2) 응용 - 테이블 변경 및 제약 조건 추가
✔ 기존 테이블에 컬럼 추가 (ALTER TABLE)
ALTER TABLE users ADD age INT DEFAULT 20;

✔ 컬럼 이름 변경
ALTER TABLE users RENAME COLUMN age TO user_age;

✔ 컬럼 데이터 타입 변경
ALTER TABLE users ALTER COLUMN user_age SMALLINT;

✔ 컬럼 삭제
ALTER TABLE users DROP COLUMN user_age;

(3) 고급 - 인덱스 및 뷰
✔ 인덱스 생성 (CREATE INDEX)
CREATE INDEX idx_username ON users(username);

✔ 뷰 생성 (CREATE VIEW)
CREATE VIEW user_info AS
SELECT id, username, email FROM users;

2. DML (Data Manipulation Language) - 데이터 조작

✔ 데이터를 조회(SELECT), 삽입(INSERT), 수정(UPDATE), 삭제(DELETE)하는 SQL 문법

(1) 기초 - 기본적인 CRUD (Create, Read, Update, Delete)
✔ 데이터 삽입 (INSERT INTO)
INSERT INTO users (username, email, password)
VALUES ('john_doe', 'john@example.com', 'hashedpassword123');

✔ 데이터 조회 (SELECT)
SELECT * FROM users;

✔ 데이터 수정 (UPDATE)
UPDATE users
SET password = 'newhashedpassword'
WHERE username = 'john_doe';

✔ 데이터 삭제 (DELETE)
DELETE FROM users WHERE username = 'john_doe';

(2) 응용 - WHERE, JOIN, GROUP BY
✔ 조건 조회 (WHERE)
SELECT * FROM users WHERE email LIKE '%@gmail.com';

✔ 조인 (JOIN)
SELECT users.username, orders.amount
FROM users
INNER JOIN orders ON users.id = orders.user_id;

✔ 그룹화 및 집계 (GROUP BY)
SELECT role, COUNT(*) as user_count
FROM users
GROUP BY role;

(3) 고급 - 서브쿼리, 윈도우 함수
✔ 서브쿼리 (Subquery)
SELECT username, email FROM users
WHERE id IN (SELECT user_id FROM orders WHERE amount > 100);

✔ 윈도우 함수 (RANK, ROW_NUMBER)
SELECT username, role,
RANK() OVER (PARTITION BY role ORDER BY created_at DESC) AS ranking
FROM users;

3. DCL (Data Control Language) - 권한 관리

✔ 데이터베이스 사용자 권한을 관리하는 SQL 문법

(1) 기본적인 권한 부여 (GRANT)
GRANT SELECT, INSERT ON users TO 'john'@'localhost';

(2) 권한 회수 (REVOKE)
REVOKE INSERT ON users FROM 'john'@'localhost';

4. TCL (Transaction Control Language) - 트랜잭션 관리

✔ 트랜잭션 단위로 데이터 변경을 관리하는 SQL 문법

(1) 트랜잭션 시작 및 커밋 (COMMIT)
BEGIN TRANSACTION;
UPDATE users SET role = 'ADMIN' WHERE username = 'john_doe';
COMMIT;

(2) 롤백 (ROLLBACK)
BEGIN TRANSACTION;
DELETE FROM users WHERE username = 'john_doe';
ROLLBACK;

(3) 저장점 (SAVEPOINT)
SAVEPOINT before_update;
UPDATE users SET role = 'ADMIN' WHERE username = 'john_doe';
ROLLBACK TO before_update;

SSR

jeonghoe21 — Tue, 18 Mar 2025 01:28:12 +0900

Spring Boot에서 서버 사이드 렌더링 (SSR) 구현 - JSP & Thymeleaf

1. 서버 사이드 렌더링(SSR)이란?

서버 사이드 렌더링(SSR, Server-Side Rendering)은 서버에서 HTML을 렌더링하여 클라이언트에게 전송하는 방식입니다.

✅ 클라이언트가 요청하면 서버에서 HTML을 생성하여 응답
✅ 초기 로딩 속도가 빠름 (HTML이 완전히 렌더링된 상태로 전달)
✅ SEO(Search Engine Optimization, 검색 엔진 최적화)에 유리
✅ JavaScript 없이도 페이지가 정상적으로 보임

Spring Boot에서는 SSR을 지원하는 두 가지 대표적인 템플릿 엔진

JSP (Java Server Pages)
Thymeleaf

2. JSP 기반 SSR 구현

JSP는 Java 코드와 HTML을 함께 사용할 수 있는 템플릿 엔진으로, Servlet과 함께 동작합니다.

1️⃣ JSP를 사용한 Spring Boot 프로젝트 설정

spring-boot-starter-web과 tomcat-embed-jasper 추가

pom.xml

<dependencies>
    
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    
    <dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
    </dependency>

    
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
    </dependency>
</dependencies>

✅ tomcat-embed-jasper가 있어야 Spring Boot에서 JSP를 사용할 수 있음
✅ JSTL은 JSP에서 <c:forEach> 등의 문법을 사용할 때 필요

2️⃣ application.properties 설정

src/main/resources/application.properties

spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

✅ JSP 파일은 /WEB-INF/views/ 디렉토리에 위치해야 함
✅ .jsp 파일 확장자를 자동으로 인식하도록 설정

3️⃣ JSP 기반 컨트롤러 구현

BoardController.java

package cohttp://m.example.board.controller;

import cohttp://m.example.board.model.Post;
import cohttp://m.example.board.service.PostService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

@Controller // JSP를 사용할 경우 @RestController가 아닌 @Controller 사용
@RequiredArgsConstructor
public class BoardController {
    private final PostService postService;

    // 게시글 목록 페이지
    @GetMapping("/board")
    public String boardPage(Model model) {
        List<Post> posts = postService.getAllPosts();
        model.addAttribute("posts", posts); // JSP에서 사용할 데이터 추가
        return "board"; // board.jsp로 이동
    }
}

✅ JSP 사용 시 @RestController가 아닌 @Controller 사용
✅ Model 객체를 사용하여 데이터를 JSP 파일에 전달
✅ return "board"; → WEB-INF/views/board.jsp를 찾음

4️⃣ JSP 파일 작성

src/main/webapp/WEB-INF/views/board.jsp

<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>게시판</title>
</head>
<body>
    <h2>게시판 목록</h2>
    <table border="1">
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>내용</th>
        </tr>
        <c:forEach var="post" items="${posts}">
            <tr>
                <td>${post.id}</td>
                <td>${post.title}</td>
                <td>${post.content}</td>
            </tr>
        </c:forEach>
    </table>
</body>
</html>

✅ JSP 문법

<%@ page contentType="text/html; charset=UTF-8" %> → 페이지 인코딩 설정
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> → JSTL 태그 라이브러리 추가
<c:forEach var="post" items="${posts}"> → posts 리스트를 반복하며 데이터 출력

5️⃣ JSP 실행 결과

✅ URL: http://localhost:8080/board로 접속하면 JSP 페이지에서 게시글이 렌더링됨
✅ Spring Boot에서 서버 사이드 렌더링을 JSP로 구현 완료

3. Thymeleaf 기반 SSR 구현

Thymeleaf는 JSP보다 더 현대적이고 강력한 템플릿 엔진입니다.
✅ Spring Boot와 완벽하게 통합 가능
✅ HTML 파일에서 직접 Thymeleaf 문법 사용 가능
✅ JSP와 다르게 @RestController에서도 사용 가능

1️⃣ Thymeleaf를 사용하기 위한 설정

pom.xml

✅ Spring Boot에서는 spring-boot-starter-thymeleaf만 추가하면 자동 설정됨

2️⃣ application.properties 설정

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

✅ Thymeleaf 템플릿 파일을 src/main/resources/templates/에서 찾도록 설정
✅ .html 확장자로 자동 인식

3️⃣ Thymeleaf 기반 컨트롤러 구현

BoardController.java

package cohttp://m.example.board.controller;

import cohttp://m.example.board.model.Post;
import cohttp://m.example.board.service.PostService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

@Controller // Thymeleaf를 사용할 경우 @RestController가 아닌 @Controller 사용
@RequiredArgsConstructor
public class BoardController {
    private final PostService postService;

    @GetMapping("/board")
    public String boardPage(Model model) {
        List<Post> posts = postService.getAllPosts();
        model.addAttribute("posts", posts);
        return "board"; // board.html을 반환
    }
}

✅ JSP와 동일한 방식으로 Model을 사용하여 데이터를 Thymeleaf로 전달
✅ 반환값이 board이면 src/main/resources/templates/board.html을 찾아 렌더링

4️⃣ Thymeleaf 파일 작성

src/main/resources/templates/board.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>게시판</title>
</head>
<body>
    <h2>게시판 목록</h2>
    <table border="1">
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>내용</th>
        </tr>
        <tr th:each="post : ${posts}">
            <td th:text="${post.id}"></td>
            <td th:text="${post.title}"></td>
            <td th:text="${post.content}"></td>
        </tr>
    </table>
</body>
</html>

✅ th:each="post : ${posts}" → posts 리스트를 반복하며 출력
✅ th:text="${post.title}" → 해당 값이 HTML에 삽입됨

4. 결론

설정 방법	tomcat-embed-jasper 필요	spring-boot-starter-thymeleaf만 필요
문법	JSTL 사용 (<c:forEach>)	th:each 사용
실행 위치	/WEB-INF/views/	/templates/

JSP 게시판 MS-SQL

jeonghoe21 — Mon, 17 Mar 2025 20:26:36 +0900

1. 요구사항 분석

리스트 출력: JSP에서 데이터 목록을 테이블 형식으로 출력.
CRUD 기능:
- 생성 (Create): 새 데이터를 추가하는 폼 제공.
- 조회 (Read): 저장된 데이터를 리스트로 출력.
- 수정 (Update): 기존 데이터를 수정하는 기능.
- 삭제 (Delete): 선택한 데이터를 삭제.

2. 프로젝트 구조

/WEB-INF/
├── views/
│   ├── list.jsp   (리스트 출력)
│   ├── form.jsp   (데이터 입력 폼)
│   ├── edit.jsp   (데이터 수정 폼)
│   ├── delete.jsp (데이터 삭제)
├── web.xml
├── controller/
│   ├── StudentServlet.java (전체 CRUD 처리)
├── model/
│   ├── Student.java (데이터 모델)
├── repository/
│   ├── StudentRepository.java (데이터 관리)

3. 코드 구현

(1) Student.java (데이터 모델)

package model;

public class Student {
    private int id;
    private String name;
    private String email;

    public Student(int id, String name, String email) {
        this.id = id;
        this.name = name;
        this.email = email;
    }

    public int getId() { return id; }
    public String getName() { return name; }
    public String getEmail() { return email; }

    public void setName(String name) { this.name = name; }
    public void setEmail(String email) { this.email = email; }
}

(2) StudentRepository.java (데이터 저장소)

MS-SQL 테이블 생성

먼저 MS-SQL에서 students 테이블을 생성합니다.

CREATE TABLE students ( id INT IDENTITY(1,1) PRIMARY KEY,

name NVARCHAR(100) NOT NULL,

email NVARCHAR(100) NOT NULL );

DbConnectionUtil.java (DB 연결 관리)

package repository;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DbConnectionUtil {
    private static final String URL = "jdbc:sqlserver://localhost:1433;databaseName=your_database;encrypt=true;trustServerCertificate=true";
    private static final String USERNAME = "your_username";
    private static final String PASSWORD = "your_password";

    static {
        try {
            Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
        } catch (ClassNotFoundException e) {
            throw new RuntimeException("SQL Server JDBC 드라이버를 찾을 수 없습니다.", e);
        }
    }

    public static Connection getConnection() throws SQLException {
        return DriverManager.getConnection(URL, USERNAME, PASSWORD);
    }
}

package repository;

import model.Student;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class StudentRepository {

    public List<Student> findAll() {
        List<Student> students = new ArrayList<>();
        String query = "SELECT id, name, email FROM students";

        try (Connection conn = DbConnectionUtil.getConnection();
             Statement stmt = conn.createStatement();
             ResultSet rs = stmt.executeQuery(query)) {

            while (rs.next()) {
                students.add(new Student(rs.getInt("id"), rs.getString("name"), rs.getString("email")));
            }
        } catch (SQLException e) {
            throw new RuntimeException("학생 목록 조회 중 오류 발생", e);
        }
        return students;
    }

    public Student findById(int id) {
        String query = "SELECT id, name, email FROM students WHERE id = ?";
        try (Connection conn = DbConnectionUtil.getConnection();
             PreparedStatement stmt = conn.prepareStatement(query)) {

            stmt.setInt(1, id);
            try (ResultSet rs = stmt.executeQuery()) {
                if (rs.next()) {
                    return new Student(rs.getInt("id"), rs.getString("name"), rs.getString("email"));
                }
            }
        } catch (SQLException e) {
            throw new RuntimeException("학생 조회 중 오류 발생", e);
        }
        return null;
    }

    public void save(Student student) {
        String query = "INSERT INTO students (name, email) VALUES (?, ?)";
        try (Connection conn = DbConnectionUtil.getConnection();
             PreparedStatement stmt = conn.prepareStatement(query, Statement.RETURN_GENERATED_KEYS)) {

            stmt.setString(1, student.getName());
            stmt.setString(2, student.getEmail());
            stmt.executeUpdate();

            try (ResultSet generatedKeys = stmt.getGeneratedKeys()) {
                if (generatedKeys.next()) {
                    student = new Student(generatedKeys.getInt(1), student.getName(), student.getEmail());
                }
            }
        } catch (SQLException e) {
            throw new RuntimeException("학생 등록 중 오류 발생", e);
        }
    }

    public void update(int id, String name, String email) {
        String query = "UPDATE students SET name = ?, email = ? WHERE id = ?";
        try (Connection conn = DbConnectionUtil.getConnection();
             PreparedStatement stmt = conn.prepareStatement(query)) {

            stmt.setString(1, name);
            stmt.setString(2, email);
            stmt.setInt(3, id);
            stmt.executeUpdate();
        } catch (SQLException e) {
            throw new RuntimeException("학생 수정 중 오류 발생", e);
        }
    }

    public void delete(int id) {
        String query = "DELETE FROM students WHERE id = ?";
        try (Connection conn = DbConnectionUtil.getConnection();
             PreparedStatement stmt = conn.prepareStatement(query)) {

            stmt.setInt(1, id);
            stmt.executeUpdate();
        } catch (SQLException e) {
            throw new RuntimeException("학생 삭제 중 오류 발생", e);
        }
    }
}

(3) StudentServlet.java (컨트롤러)

@WebServlet("/students")
public class StudentServlet extends HttpServlet {
    private final StudentRepository repository = new StudentRepository();

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String action = request.getParameter("action");

        if ("edit".equals(action)) {
            int id = Integer.parseInt(request.getParameter("id"));
            request.setAttribute("student", repository.findById(id));
            request.getRequestDispatcher("/WEB-INF/views/edit.jsp").forward(request, response);
        } else {
            List<Student> students = repository.findAll();
            request.setAttribute("students", students);
            request.getRequestDispatcher("/WEB-INF/views/list.jsp").forward(request, response);
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String action = request.getParameter("action");

        if ("add".equals(action)) {
            String name = request.getParameter("name");
            String email = request.getParameter("email");
            repository.save(new Student(0, name, email));
        } else if ("update".equals(action)) {
            int id = Integer.parseInt(request.getParameter("id"));
            String name = request.getParameter("name");
            String email = request.getParameter("email");
            repository.update(id, name, email);
        } else if ("delete".equals(action)) {
            int id = Integer.parseInt(request.getParameter("id"));
            repository.delete(id);
        }

        response.sendRedirect("students");
    }
}

4. JSP 페이지

(4) list.jsp (리스트 페이지)

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <title>학생 목록</title>
</head>
<body>
    <h2>학생 목록</h2>
    <table border="1">
        <tr><th>ID</th><th>이름</th><th>이메일</th><th>액션</th></tr>
        <c:forEach var="student" items="${students}">
            <tr>
                <td>${student.id}</td>
                <td>${student.name}</td>
                <td>${student.email}</td>
                <td>
                    <a href="students?action=edit&id=${student.id}">수정</a>
                    <form action="students" method="post" style="display:inline;">
                        <input type="hidden" name="id" value="${student.id}">
                        <input type="hidden" name="action" value="delete">
                        <button type="submit">삭제</button>
                    </form>
                </td>
            </tr>
        </c:forEach>
    </table>
    <a href="form.jsp">새 학생 추가</a>
</body>
</html>

(5) form.jsp (학생 추가 페이지)

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <title>학생 추가</title>
</head>
<body>
    <h2>학생 추가</h2>
    <form action="students" method="post">
        <input type="hidden" name="action" value="add">
        이름: <input type="text" name="name"><br>
        이메일: <input type="text" name="email"><br>
        <button type="submit">추가</button>
    </form>
</body>
</html>

(6) edit.jsp (학생 수정 페이지)

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <title>학생 수정</title>
</head>
<body>
    <h2>학생 수정</h2>
    <form action="students" method="post">
        <input type="hidden" name="action" value="update">
        <input type="hidden" name="id" value="${student.id}">
        이름: <input type="text" name="name" value="${student.name}"><br>
        이메일: <input type="text" name="email" value="${student.email}"><br>
        <button type="submit">수정</button>
    </form>
</body>
</html>

HTML/CSS/JS

jeonghoe21 — Thu, 13 Mar 2025 03:00:47 +0900

HTML은 웹 문서를 구성하는 마크업 언어.
기본 태그뿐만 아니라 폼 요소, 미디어 요소, 메타데이터, 인터랙티브 요소까지 모두 설명.

1-1. HTML 기본 문법

HTML은 태그(<>)로 이루어져 있으며, 열리는 태그와 닫히는 태그가 있어.

<p>이것은 단락입니다.</p>

1-2. HTML 요소 종류

HTML 요소는 크게 4가지로 나뉘어.

1) 블록 요소 (Block-level Elements)

화면 전체 너비를 차지하는 요소
자동으로 줄 바꿈됨 (<div>, <p>, <h1> ~ <h6>, <ul>, <li>, <form>, <table> 등)

<div>이것은 블록 요소입니다.</div>

<p>이것도 블록 요소입니다.</p>

2) 인라인 요소 (Inline Elements)

컨텐츠 크기만큼 차지하는 요소
줄 바꿈이 되지 않음 (<span>, <a>, <strong>, <em>, <img> 등)

<span>이것은 인라인 요소입니다.</span>

3) 인라인 블록 요소 (Inline-Block Elements)

크기를 조절할 수 있는 인라인 요소 (<button>, <input>, <img> 등)

1-3. HTML 문서 메타데이터 (<head> 요소)

HTML 문서의 <head> 태그 안에는 메타데이터가 들어가.
메타데이터는 브라우저에게 문서 정보를 제공하는 역할을 해.

<meta charset="UTF-8">	문자 인코딩 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">	반응형 웹 설정
<meta name="description" content="웹페이지 설명">	검색엔진을 위한 설명
<meta name="keywords" content="HTML, CSS, JavaScript">	SEO 키워드
<meta name="author" content="홍길동">	작성자 정보
<title>문서 제목</title>	웹페이지 제목 설정
<link rel="stylesheet" href="styles.css">	외부 CSS 파일 연결
<script src="script.js"></script>	외부 JS 파일 연결

1-4. HTML 폼 요소

HTML 폼 요소는 사용자 입력을 받는 역할을 해.

1) <form> 태그

사용자 입력을 서버로 전송하는 역할을 함.

2) <input> 태그 (입력 필드)

다양한 입력 타입을 가질 수 있어.

text	일반 텍스트 입력
password	비밀번호 입력
email	이메일 입력
number	숫자 입력
checkbox	체크박스
radio	라디오 버튼
file	파일 업로드

<input type="text" placeholder="이름 입력">
<input type="password" placeholder="비밀번호 입력">
<input type="email" placeholder="이메일 입력">
<input type="checkbox"> 동의합니다.
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성

3) <select> 태그 (드롭다운)

</select>

4) <textarea> 태그 (긴 글 입력)

1-5. HTML 테이블

HTML에서 데이터를 표 형태로 표현할 때 사용해.

<table>	테이블 생성
<tr>	행(row) 추가
<th>	제목 셀 (굵게 표시)
<td>	데이터 셀

1-6. HTML 미디어 요소

HTML은 오디오, 비디오를 삽입할 수 있어.

1) <audio> 태그 (오디오 삽입)

2) <video> 태그 (비디오 삽입)

1-7. HTML 인터랙티브 요소

HTML에는 사용자 인터랙션을 위한 다양한 요소가 있어.

태그설명

<details>	펼칠 수 있는 박스
<summary>	<details> 안의 제목
<dialog>	모달 대화상자
<progress>	진행률 표시

<details>
<summary>더 보기</summary>
<p>이것은 추가 정보입니다.</p>
</details>

<progress value="70" max="100"></progress>

이제 HTML에 스타일을 적용하는 CSS를 심화해서 다룰게.
CSS는 HTML을 꾸미는 언어로, 색상, 폰트, 크기, 레이아웃, 애니메이션 등을 정의할 수 있어.

2-1. CSS 적용 방법

CSS를 HTML에 적용하는 방법은 3가지가 있어.

1) 인라인 스타일 (Inline CSS)

HTML 태그 안에 style 속성을 이용해 적용하는 방식.

<p style="color: blue; font-size: 20px;">이것은 파란색 글씨입니다.</p>

장점: 특정 요소만 스타일 적용 가능
단점: 유지보수 어려움, 코드 가독성이 떨어짐

2) 내부 스타일 (Internal CSS)

HTML의 <head> 태그 안에 <style> 태그를 이용해 적용.

<head>

</style>

</head>

장점: 하나의 문서에서 여러 요소에 스타일 적용 가능
단점: HTML 문서 안에 CSS 코드가 포함되므로 관리가 어렵다.

3) 외부 스타일 (External CSS)

별도의 .css 파일을 만들어 <link> 태그로 연결.

styles.css 파일 내용:

p { color: green; font-size: 16px; }

장점: 여러 HTML 문서에서 공통으로 스타일을 적용 가능
단점: HTML 파일과 CSS 파일이 분리되어 있으므로 추가 요청이 필요

2-2. CSS 기본 문법

선택자 { 속성: 값; }

예제:

h1 { color: blue; font-size: 24px; }

2-3. CSS 선택자 (Selectors)

CSS에서 특정 HTML 요소를 선택하는 방법이야.

1) 기본 선택자

선택자설명예제

*	모든 요소 선택	* { margin: 0; }
태그명	특정 태그 선택	p { color: red; }
.클래스명	특정 클래스 선택	.box { background: gray; }
#아이디명	특정 ID 선택	#header { font-size: 20px; }

.text { color: blue; } #unique { color: green; }

2) 조합 선택자

선택자설명예제

A B	A 안의 B 요소 선택	div p { color: red; }
A > B	A의 직계 자식 B 선택	div > p { color: blue; }
A + B	A 바로 뒤의 B 선택	h1 + p { color: green; }
A ~ B	A 다음에 오는 모든 B 선택	h1 ~ p { color: gray; }

div > p { color: red; }

2-4. CSS 박스 모델

웹 요소의 크기를 결정하는 Box Model 개념을 이해해야 해.

content: 요소의 실제 내용
padding: content와 border 사이 여백
border: 테두리
margin: 요소와 요소 사이의 거리

.box { width: 200px; height: 100px; padding: 20px; border: 5px solid black; margin: 30px; }

2-5. CSS 포지셔닝

CSS에서 요소를 배치하는 방법이 여러 가지 있어.

static	기본값 (HTML 흐름대로 배치)
relative	현재 위치를 기준으로 이동
absolute	부모 요소를 기준으로 배치
fixed	화면을 기준으로 고정
sticky	스크롤에 따라 위치 변경

.box { position: absolute; top: 50px; left: 100px; }

2-6. CSS Flexbox (유연한 레이아웃)

Flexbox는 요소를 수평, 수직 정렬할 때 유용해.

.container {
    display: flex;
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
}

2-7. CSS Grid (그리드 레이아웃)

Grid는 복잡한 레이아웃을 만들 때 사용해.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 100px 200px;
}

2-8. CSS 애니메이션

애니메이션을 적용하는 방법이 있어.

1) transition (부드러운 변화)

.button {
    background-color: blue;
    transition: background-color 0.5s ease-in-out;
}
.button:hover {
    background-color: red;
}

2) @keyframes (애니메이션)

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.box {
    animation: fadeIn 2s ease-in-out;
}

<div class="box">애니메이션</div>

이제 JavaScript(JS)의 모든 문법을 심층적으로 설명할게.
JS는 HTML을 동적으로 조작하고, 사용자 이벤트를 처리하며, 서버와 데이터를 주고받는 역할을 해.

3-1. JavaScript 기본 문법

1) 변수 선언

변수 선언 방법에는 var, let, const가 있어.

var a = 10; // 함수 스코프, 재할당 가능
let b = 20; // 블록 스코프, 재할당 가능
const c = 30; // 블록 스코프, 재할당 불가능

var	함수 스코프	O	O
let	블록 스코프	O	X
const	블록 스코프	X	X

2) 데이터 타입

JS의 데이터 타입에는 기본형(Primitive)과 참조형(Reference)이 있어.

기본형 데이터 (Primitive)

데이터 타입예제

Number	let num = 100;
String	let text = "Hello";
Boolean	let isTrue = true;
Null	let empty = null;
Undefined	let notDefined;
Symbol	let unique = Symbol('id');
BigInt	let big = 12345678901234567890n;

참조형 데이터 (Reference)

데이터 타입예제

Object	let person = { name: "철수", age: 25 };
Array	let numbers = [1, 2, 3, 4, 5];
Function	function sayHello() { console.log("Hello!"); }

3) 연산자

산술 연산자

let a = 10;
let b = 3;
console.log(a + b);  // 더하기
console.log(a - b);  // 빼기
console.log(a * b);  // 곱하기
console.log(a / b);  // 나누기
console.log(a % b);  // 나머지
console.log(a ** b); // 제곱

비교 연산자

console.log(5 == "5"); // true (값만 비교)
console.log(5 === "5"); // false (타입까지 비교)
console.log(5 != "5"); // false
console.log(5 !== "5"); // true

논리 연산자

console.log(true && false); // false
console.log(true || false); // true
console.log(!true); // false

3-2. 조건문 & 반복문

1) 조건문 (if, switch)

let score = 85;

if (score >= 90) {
    console.log("A 학점");
} else if (score >= 80) {
    console.log("B 학점");
} else {
    console.log("C 학점");
}

let fruit = "사과";

switch (fruit) {
    case "사과":
        console.log("사과입니다.");
        break;
    case "바나나":
        console.log("바나나입니다.");
        break;
    default:
        console.log("과일을 찾을 수 없습니다.");
}

2) 반복문 (for, while)

for (let i = 0; i < 5; i++) {
    console.log(i);
}

let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

3-3. 함수 (Function)

1) 함수 선언식

function sayHello(name) {
return "Hello, " + name;
}
console.log(sayHello("철수"));

2) 함수 표현식

const sayHello = function(name) {
return "Hello, " + name;
};
console.log(sayHello("영희"));

3) 화살표 함수

const sayHello = (name) => `Hello, ${name}`;
console.log(sayHello("민수"));

3-4. 객체 & 배열

1) 객체 다루기

let person = {
    name: "철수",
    age: 25,
    greet: function() {
        console.log(`안녕하세요, 저는 ${this.name}입니다.`);
    }
};
person.greet();

2) 배열 다루기

let fruits = ["사과", "바나나", "포도"];
console.log(fruits[1]); // "바나나"
fruits.push("오렌지"); // 배열에 추가
fruits.pop(); // 마지막 요소 제거

3-5. DOM 조작 (Document Object Model)

**DOM(Document Object Model, 문서 객체 모델)**은 HTML 문서를 트리(tree) 구조로 표현하는 방식이야.
JavaScript를 사용하면 DOM을 조작하여 HTML 요소를 추가, 수정, 삭제할 수 있어.

1. DOM이란?

웹 페이지를 로딩하면 브라우저는 HTML 문서를 해석하여 트리 구조로 변환해.
이걸 DOM 트리라고 부르고, JavaScript를 사용해서 이 트리를 조작할 수 있어.

예를 들어, 아래 HTML이 있다고 가정하자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>DOM 예제</title>
</head>
<body>
    <h1 id="title">안녕하세요!</h1>
    <p class="text">첫 번째 문장입니다.</p>
    <p class="text">두 번째 문장입니다.</p>
    <button id="btn">클릭하세요</button>
    <script src="script.js"></script>
</body>
</html>

위 코드는 다음과 같은 DOM 트리를 생성해.

html
├── head
├── body
     ├── h1#title
     ├── p.text
     ├── p.text
     ├── button#btn

이제 JavaScript를 사용해서 DOM을 조작하는 방법을 자세히 살펴볼게.

2. DOM 요소 선택하기

getElementById(id)	특정 ID를 가진 요소 하나 선택
getElementsByClassName(class)	특정 클래스를 가진 모든 요소 선택
querySelector(선택자)	특정 선택자와 일치하는 첫 번째 요소 선택
querySelectorAll(선택자)	특정 선택자와 일치하는 모든 요소 선택

2-1. getElementById()

이 메서드는 ID 속성이 일치하는 요소를 하나만 반환해.

let title = document.getElementById("title");
console.log(title); // <h1 id="title">안녕하세요!</h1>

주의: getElementById()는 항상 하나의 요소만 반환해.
HTML에서 id는 고유해야 하므로 여러 개가 있을 경우 첫 번째 것만 가져와.

속성 변경 예제

let title = document.getElementById("title");
title.textContent = "안녕하세요! (변경됨)"; // 텍스트 변경
title.style.color = "red"; // 글자색 변경

결과:

<h1 id="title" style="color: red;">안녕하세요! (변경됨)</h1>

2-2. getElementsByClassName()

이 메서드는 클래스 이름이 일치하는 모든 요소를 선택해.
HTMLCollection(배열 같은 형태)을 반환하므로, 특정 요소를 선택하려면 인덱스를 사용해야 해.

let paragraphs = document.getElementsByClassName("text");
console.log(paragraphs);

위 코드를 실행하면 두 개의 <p> 요소가 포함된 HTMLCollection이 출력돼.

HTMLCollection(2) [p.text, p.text]

배열처럼 접근해서 변경하기

let paragraphs = document.getElementsByClassName("text");
paragraphs[0].textContent = "첫 번째 문장이 변경되었습니다!";
paragraphs[1].style.color = "blue"; // 두 번째 문장 색 변경

2-3. querySelector()

이 메서드는 CSS 선택자를 사용해서 요소를 찾을 수 있어.
그리고 일치하는 첫 번째 요소만 반환해.

let title = document.querySelector("#title"); // ID 선택
let firstParagraph = document.querySelector(".text"); // 클래스 선택
console.log(title, firstParagraph);

스타일 변경 예제

let firstParagraph = document.querySelector(".text");
firstParagraph.style.fontWeight = "bold"; // 글자 굵게

2-4. querySelectorAll()

이 메서드는 querySelector()와 비슷하지만 일치하는 모든 요소를 반환해.
그리고 NodeList라는 배열과 유사한 객체를 반환해.

let allParagraphs = document.querySelectorAll(".text");
console.log(allParagraphs);

querySelectorAll()은 forEach()를 사용할 수 있어.

모든 요소 스타일 변경

document.querySelectorAll(".text").forEach(paragraph => {
paragraph.style.backgroundColor = "yellow";
});

3. DOM 요소 조작하기

선택한 요소를 어떻게 변경할 수 있는지 살펴보자.

3-1. textContent vs innerHTML

HTML 요소의 내용을 변경할 때 두 가지 방법이 있어.

속성설명

textContent	요소 내부의 텍스트를 변경
innerHTML	요소 내부의 HTML 코드를 변경

let title = document.getElementById("title");
title.textContent = "새로운 제목"; // 텍스트만 변경

let firstParagraph = document.querySelector(".text");
firstParagraph.innerHTML = "<strong>굵은 글씨</strong>";

3-2. 속성 변경

요소의 id, class, href 같은 속성을 변경할 수 있어.

let link = document.querySelector("a");
link.href = "https://www.naver.com"; // 링크 변경
link.target = "_blank"; // 새 창에서 열기

3-3. 새로운 요소 추가

createElement(), appendChild(), insertBefore()를 사용해서 HTML 요소를 동적으로 추가할 수 있어.

let newParagraph = document.createElement("p"); // 새로운 <p> 요소 생성
newParagraph.textContent = "새로 추가된 문장입니다!"; // 텍스트 추가

document.body.appendChild(newParagraph); // <body>의 마지막에 추가

3-4. 요소 삭제

remove() 또는 removeChild()를 사용해서 요소를 삭제할 수 있어.

let title = document.getElementById("title");
title.remove(); // 제목 삭제

또는 부모 요소에서 제거 가능.

let list = document.getElementById("taskList");
let firstTask = list.firstElementChild;
list.removeChild(firstTask); // 첫 번째 리스트 항목 삭제

4. 실전 예제: 버튼 클릭 시 텍스트 변경

이제 실전 예제로 버튼을 클릭하면 제목을 변경하는 코드를 작성해보자.

HTML

JavaScript

document.getElementById("changeBtn").addEventListener("click", function() { document.getElementById("title").textContent = "변경된 제목!"; });

설명:

getElementById("changeBtn") → 버튼을 선택

addEventListener("click", function() { ... }) → 클릭 이벤트 추가

document.getElementById("title").textContent = "변경된 제목!"; → 제목 변경

3-6. 이벤트 핸들링

JS에서 사용자의 클릭, 키 입력, 마우스 움직임 등을 감지할 수 있어.

1) onclick 속성 사용

2) addEventListener 사용

document.getElementById("btn").addEventListener("click", function() { alert("이벤트 리스너 사용!"); });

3) mouseenter, mouseleave 이벤트

document.getElementById("box").addEventListener("mouseenter", function() { console.log("마우스 들어옴!"); });

3-7. 비동기 처리 (fetch & axios)

JS에서 데이터를 비동기적으로 가져오는 방법을 알아보자.

1) fetch 사용

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("에러 발생:", error));

2) axios 사용

axios.get("https://jsonplaceholder.typicode.com/posts/1")
.then(response => console.log(response.data))
.catch(error => console.error("에러 발생:", error));

실전 예제: HTML, CSS, JS 연동

지금까지 배운 내용을 모두 조합해서 완전한 웹 페이지를 만들어보자.

1) HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 예제</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 id="title">안녕하세요!</h1>
    <button id="btn">버튼 클릭</button>
    <p id="text">이 문장을 변경합니다.</p>
    <script src="script.js"></script>
</body>
</html>

2) CSS 코드

body { font-family: Arial, sans-serif; text-align: center; }
button { padding: 10px; background-color: blue; color: white; }

3) JS 코드

document.getElementById("btn").addEventListener("click", function() {
document.getElementById("text").textContent = "텍스트가 변경됨!";
});

지금까지 JavaScript의 기본 문법과 DOM 조작, 이벤트 핸들링을 배웠다면 이제는 고급 기능을 다루면서 더 깊이 있는 내용을 다룰 거야.

4-1. 고급 함수 (Higher Order Functions)

JavaScript에서는 함수를 인자로 받거나 반환할 수 있는 고차 함수(Higher Order Function)를 사용할 수 있어.

1) 콜백 함수 (Callback Function)

콜백 함수는 다른 함수의 인자로 전달되어 실행되는 함수를 의미해.

function greet(name, callback) {
    console.log("안녕하세요, " + name + "님!");
    callback();
}

function sayBye() {
    console.log("잘 가세요!");
}

greet("철수", sayBye);

출력:
안녕하세요, 철수님!
잘 가세요!

2) 배열의 고차 함수

JavaScript에서 배열을 다룰 때 map, filter, reduce 같은 고차 함수를 많이 사용해.

(1) map() - 배열 요소를 변형하여 새 배열을 반환

let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(num => num ** 2);
console.log(squared); // [1, 4, 9, 16, 25]

(2) filter() - 특정 조건을 만족하는 요소만 필터링

let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

(3) reduce() - 배열 요소를 하나의 값으로 축약

let sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

4-2. 비동기 처리 (Asynchronous JavaScript)

비동기 처리는 JavaScript에서 데이터를 서버에서 가져오거나, 일정 시간이 지난 후 작업을 실행할 때 사용돼.

1) setTimeout & setInterval

setTimeout(() => {
    console.log("3초 후 실행!");
}, 3000);

let count = 0;
let interval = setInterval(() => {
    console.log("1초마다 실행! " + count);
    count++;
    if (count === 5) clearInterval(interval); // 5번 실행 후 멈춤
}, 1000);

2) 프로미스 (Promise)

Promise는 비동기 작업이 성공했을 때 .then(), 실패했을 때 .catch()를 실행할 수 있어.

3) async / await

async 함수 안에서 await을 사용하면 비동기 작업을 동기적으로 실행할 수 있어.

async function getData() {
    try {
        let response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("데이터를 가져오는데 실패했습니다.", error);
    }
}

getData();

4-3. JavaScript와 웹 스토리지

웹 스토리지를 사용하면 브라우저에 데이터를 저장할 수 있어.

1) LocalStorage (영구 저장)

localStorage.setItem("username", "철수");
console.log(localStorage.getItem("username")); // "철수"
localStorage.removeItem("username");

2) SessionStorage (세션 동안만 저장)

sessionStorage.setItem("sessionData", "임시 데이터");
console.log(sessionStorage.getItem("sessionData"));
sessionStorage.removeItem("sessionData");

4-4. AJAX (비동기 데이터 요청)

AJAX를 사용하면 웹 페이지를 새로고침하지 않고 서버에서 데이터를 가져올 수 있어.

1) fetch API 사용

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("에러 발생:", error));

2) axios 사용

axios.get("https://jsonplaceholder.typicode.com/posts/1")
.then(response => console.log(response.data))
.catch(error => console.error("에러 발생:", error));

4-5. JavaScript 이벤트 심화

이제 다양한 이벤트 처리 방법을 알아볼게.

1) 이벤트 리스너 추가 방법

document.getElementById("myButton").addEventListener("click", function() {
alert("버튼 클릭됨!");
});

2) 여러 이벤트 한 번에 추가

function handleEvent(event) {
console.log(event.type + " 이벤트 발생!");
}

let button = document.getElementById("btn");
button.addEventListener("mouseenter", handleEvent);
button.addEventListener("mouseleave", handleEvent);

3) 키보드 이벤트

document.addEventListener("keydown", function(event) {
console.log("키 누름:", event.key);
});

4) 폼 제출 이벤트

document.getElementById("form").addEventListener("submit", function(event) {
event.preventDefault(); // 기본 동작 방지
console.log("폼 제출됨!");
});

실전 프로젝트: HTML, CSS, JS 통합

지금까지 배운 내용을 활용하여 간단한 할 일 목록 (To-Do List) 웹 앱을 만들어보자.

1) HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>To-Do List</h1>
    <input type="text" id="taskInput" placeholder="할 일 입력">
    <button id="addTask">추가</button>
    <ul id="taskList"></ul>
    <script src="script.js"></script>
</body>
</html>

2) CSS 코드

body { font-family: Arial, sans-serif; text-align: center; }
button { padding: 10px; background-color: green; color: white; }
ul { list-style: none; padding: 0; }
li { padding: 5px; background: lightgray; margin: 5px; cursor: pointer; }

3) JavaScript 코드

document.getElementById("addTask").addEventListener("click", function() {
    let taskInput = document.getElementById("taskInput");
    let taskText = taskInput.value;
    if (taskText.trim() === "") return;

    let li = document.createElement("li");
    li.textContent = taskText;
    li.addEventListener("click", function() {
        li.remove(); // 클릭하면 삭제
    });

    document.getElementById("taskList").appendChild(li);
    taskInput.value = "";
});

Lambda

jeonghoe21 — Tue, 4 Mar 2025 00:15:33 +0900

1️⃣ 람다 표현식(Lambda Expression) 기본 문법

✅ 람다 표현식 기본 구조

(parameters) -> { statements }

✅ 람다 표현식 주요 특징

익명 함수(Anonymous Function)
- 별도로 이름이 없는 함수를 선언하는 방식
간결한 문법
- 불필요한 코드 제거 가능
함수형 인터페이스와 함께 사용
- FunctionalInterface를 구현하는 메서드를 간략하게 표현 가능

Java 함수형 인터페이스(Functional Interface)란?

Java에서 람다 표현식을 사용할 때 필요한 인터페이스입니다.
함수형 인터페이스는 추상 메서드가 단 하나만 존재해야 합니다.
@FunctionalInterface 어노테이션을 붙이면 해당 인터페이스가 함수형 인터페이스임을 보장합니다.

✅ 함수형 인터페이스의 주요 종류

함수형 인터페이스메서드설명

Runnable	run()	매개변수 없음, 반환값 없음
Supplier<T>	get()	매개변수 없음, 반환값 있음
Consumer<T>	accept(T t)	매개변수 있음, 반환값 없음
Function<T, R>	apply(T t)	입력을 받아 변환 후 반환
Predicate<T>	test(T t)	입력을 받아 true 또는 false 반환
BiFunction<T, U, R>	apply(T t, U u)	두 개의 입력을 받아 변환 후 반환

1-1. Runnable - run()

매개변수 없음, 반환값 없음

별도의 인자를 받지 않고 단순히 실행하는 작업을 정의할 때 사용

예제

Runnable r = () -> System.out.println("Runnable 실행!");

r.run(); // 출력: Runnable 실행!

run() 메서드의 역할

Runnable 인터페이스에서 제공
스레드 실행 시 사용됨

1-2 Consumer<T> - accept(T t)

매개변수 있음, 반환값 없음

주어진 입력을 소비(사용)하고 반환값이 필요 없을 때 사용

예제

Consumer<String> consumer = name -> System.out.println("Hello, " + name);

consumer.accept("Alice"); // 출력: Hello, Alice

accept(T t) 메서드의 역할

입력을 받아서 처리하지만, 결과를 반환하지 않음
System.out.println()처럼 출력하는 경우 유용

3️⃣ Function<T, R> - apply(T t)

입력을 받아 변환 후 반환

입력값을 받아 다른 타입으로 변환해야 할 때 사용

예제

Function<Integer, String> function = num -> "숫자: " + num;

System.out.println(function.apply(10)); // 출력: 숫자: 10

apply(T t) 메서드의 역할

입력을 받아서 변환 후 반환하는 작업을 수행
스트림에서 map()과 함께 자주 사용됨

List<Integer> numbers = Arrays.asList(1, 2, 3, 4);

List<String> stringNumbers = numbers.stream()

.map(num -> "숫자: " + num) // Function<T, R> 적용

.collect(Collectors.toList());

System.out.println(stringNumbers); // 출력: [숫자: 1, 숫자: 2, 숫자: 3, 숫자: 4]

4️⃣ Predicate<T> - test(T t)

입력을 받아 true 또는 false 반환

조건 검사를 수행할 때 사용

예제

Predicate<Integer> isEven = num -> num % 2 == 0;

System.out.println(isEven.test(4)); // 출력: true

System.out.println(isEven.test(5)); // 출력: false

test(T t) 메서드의 역할

입력값이 특정 조건을 만족하는지 검사
스트림의 filter()와 함께 자주 사용됨

List<Integer> evenNumbers = numbers.stream()

.filter(num -> num % 2 == 0) // Predicate<T> 적용

.collect(Collectors.toList());

System.out.println(evenNumbers); // 출력: [2, 4]

5️⃣ BiFunction<T, U, R> - apply(T t, U u)

두 개의 입력을 받아 변환 후 반환

두 개의 값을 입력받아 결과를 반환해야 할 때 사용

예제

BiFunction<Integer, Integer, Integer> sum = (a, b) -> a + b;

System.out.println(sum.apply(3, 5)); // 출력: 8

apply(T t, U u) 메서드의 역할

두 개의 입력을 받아 하나의 결과를 반환
map()과 함께 복합 변환을 수행할 때 유용

6️⃣ Supplier<T> - get()

매개변수 없이 값을 반환

값을 제공하는 역할을 함

예제

Supplier<Double> randomSupplier = () -> Math.random();

System.out.println(randomSupplier.get()); // 랜덤 값 출력

get() 메서드의 역할

외부에서 값을 받아오지 않고 생성해야 할 때 사용
지연 초기화(lazy initialization)에 활용 가능

2️⃣ 람다 표현식 활용 예제

1) 기본적인 람다 표현식

// 1. 매개변수가 없는 경우
Runnable r = () -> System.out.println("Hello, Lambda!");
r.run();

// 2. 매개변수가 하나인 경우
Consumer<String> consumer = name -> System.out.println("Hello, " + name);
consumer.accept("Alice");

// 3. 매개변수가 여러 개인 경우
BiFunction<Integer, Integer, Integer> sum = (a, b) -> a + b;
System.out.println(sum.apply(3, 5)); // 출력: 8

// 4. 코드 블록이 있는 경우
BiConsumer<String, Integer> printer = (name, age) -> {
    System.out.println("이름: " + name);
    System.out.println("나이: " + age);
};
printer.accept("Alice", 25);

3️⃣ Java Stream과 람다 표현식

Java Stream API는 컬렉션(List, Set, Map) 데이터를 함수형 스타일로 조작할 수 있도록 도와줍니다.

✅ 스트림 기본 구조

collection.stream() // 컬렉션에서 스트림 생성

.filter(조건) // 특정 조건을 만족하는 요소만 필터링

.map(변환) // 요소 변환

.sorted() // 정렬

.collect(Collectors.toList()); // 리스트로 변환

4️⃣ filter()를 이용한 데이터 필터링

filter()는 특정 조건을 만족하는 요소만 추출하는 기능을 합니다.

예제 1: 리스트에서 짝수만 추출

List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

List<Integer> evenNumbers = numbers.stream()

.filter(num -> num % 2 == 0)

.collect(Collectors.toList());

System.out.println(evenNumbers); // 출력: [2, 4, 6, 8, 10]

예제 2: 이름 리스트에서 "A"로 시작하는 이름 필터링

List<String> names = Arrays.asList("Alice", "Bob", "Andrew", "Charlie");

List<String> filteredNames = names.stream()

.filter(name -> name.startsWith("A"))

.collect(Collectors.toList());

System.out.println(filteredNames); // 출력: [Alice, Andrew]

5️⃣ map()을 이용한 데이터 변환

map()은 스트림의 각 요소를 변환하여 새로운 스트림을 생성하는 기능을 합니다.

예제 3: 모든 숫자를 제곱 값으로 변환

List<Integer> squaredNumbers = numbers.stream()

.map(num -> num * num)

.collect(Collectors.toList());

System.out.println(squaredNumbers); // 출력: [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

예제 4: 문자열 리스트에서 길이 변환

List<Integer> nameLengths = names.stream()

.map(String::length)

.collect(Collectors.toList());

System.out.println(nameLengths); // 출력: [5, 3, 6, 7]

6️⃣ sorted()를 이용한 정렬

sorted()는 요소를 오름차순 또는 내림차순 정렬하는 기능을 합니다.

예제 5: 숫자 리스트 정렬

List<Integer> sortedNumbers = numbers.stream() .

sorted()

.collect(Collectors.toList());

System.out.println(sortedNumbers); // 출력: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

예제 6: 문자열 리스트를 사전순으로 정렬

List<String> sortedNames = names.stream()

.sorted()

.collect(Collectors.toList());

System.out.println(sortedNames); // 출력: [Alice, Andrew, Bob, Charlie]

예제 7: 내림차순 정렬

List<Integer> descendingNumbers = numbers.stream()

.sorted(Comparator.reverseOrder())

.collect(Collectors.toList());

System.out.println(descendingNumbers); // 출력: [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

7️⃣ collect()를 이용한 리스트 변환

collect()는 스트림의 결과를 리스트, 집합, 맵 등으로 변환하는 기능을 합니다.

예제 8: 리스트 변환

List<String> collectedNames = names.stream()

.filter(name -> name.length() > 3)

.collect(Collectors.toList());

System.out.println(collectedNames); // 출력: [Alice, Andrew, Charlie]

예제 9: Set으로 변환

Set<String> uniqueNames = names.stream()

.collect(Collectors.toSet());

예제 10: Map으로 변환

Map<String, Integer> nameLengthMap = names.stream()

.collect(Collectors.toMap(name -> name, String::length));

System.out.println(nameLengthMap); // 출력: {Alice=5, Bob=3, Andrew=6, Charlie=7}

8️⃣ reduce()를 이용한 데이터 축소

reduce()는 모든 요소를 하나로 축약하는 기능을 합니다.

예제 11: 숫자 리스트의 합 계산

int sum = numbers.stream()

.reduce(0, (a, b) -> a + b);

System.out.println(sum); // 출력: 55

예제 12: 가장 긴 문자열 찾기

Optional<String> longestName = names.stream()

.reduce((name1, name2) -> name1.length() > name2.length() ? name1 : name2);

longestName.ifPresent(System.out::println); // 출력: Charlie

람다 & 스트림 메서드 정리

메서드설명

stream()	리스트, 배열을 스트림으로 변환
filter()	특정 조건을 만족하는 요소만 필터링
map()	요소를 변환하여 새로운 스트림 생성
sorted()	정렬 수행
findAny()	아무 요소 하나 찾기 (병렬)
findFirst()	첫 번째 요소 찾기 (순차)
collect()	결과를 리스트, 집합, 맵 등으로 변환
reduce()	모든 요소를 하나로 축약

배열로 큐 구현

jeonghoe21 — Mon, 3 Mar 2025 23:32:34 +0900

import java.io.*;

public class Main {
    private int[] queue; // 큐를 저장할 배열
    private int front; // 큐의 맨 앞을 가리키는 인덱스
    private int rear; // 큐의 맨 뒤를 가리키는 인덱스
    private int size; // 현재 큐의 크기

    //   큐 초기화 (생성자)
    public Main(int capacity) {
        queue = new int[capacity]; // 주어진 크기의 배열 생성
        front = 0; // front를 0으로 초기화
        rear = 0; // rear도 0으로 초기화
        size = 0; // 초기 크기는 0
    }

    //   push 연산: 큐의 rear에 새로운 원소 추가
    public void push(int x) {
        if (size == queue.length) { // 큐가 꽉 찬 경우
            throw new IllegalStateException("Queue is full");
        }
        queue[rear] = x; // rear 위치에 x 저장
        rear = (rear + 1) % queue.length; // rear를 한 칸 이동 (원형 큐)
        size++; // 큐 크기 증가
    }

    //   pop 연산: 큐의 front에서 원소 제거 후 반환
    public int pop() {
        if (size == 0) { // 큐가 비어있으면 -1 반환
            return -1;
        }
        int result = queue[front]; // front 위치의 원소 저장
        front = (front + 1) % queue.length; // front를 한 칸 이동 (원형 큐)
        size--; // 큐 크기 감소
        return result;
    }

    //   size 연산: 큐에 있는 원소 개수 반환
    public int size() {
        return size;
    }

    //   empty 연산: 큐가 비어있는지 확인
    public int empty() {
        return size == 0 ? 1 : 0;
    }

    //   front 연산: 큐의 맨 앞 원소 반환 (제거하지 않음)
    public int front() {
        if (size == 0) {
            return -1;
        }
        return queue[front];
    }

    //   back 연산: 큐의 맨 뒤 원소 반환 (제거하지 않음)
    public int back() {
        if (size == 0) {
            return -1;
        }
        return queue[(rear - 1 + queue.length) % queue.length]; // 원형 큐의 마지막 원소 계산
    }

    public static void main(String[] args) throws IOException {
        //   빠른 입력을 위한 BufferedReader 사용
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        //   빠른 출력을 위한 BufferedWriter 사용
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

        int n = Integer.parseInt(br.readLine()); // 명령어 개수 입력

        Main queue = new Main(n); // 입력된 크기로 큐 생성

        for (int i = 0; i < n; i++) {
            String command = br.readLine(); // 한 줄 입력받기
            String[] parts = command.split(" "); // 공백 기준으로 명령어 분리
            String cmd = parts[0]; // 명령어 추출

            switch (cmd) {
                case "push": // push X
                    int x = Integer.parseInt(parts[1]);
                    queue.push(x);
                    break;
                case "pop":
                    bw.write(queue.pop() + "\n");
                    break;
                case "size":
                    bw.write(queue.size() + "\n");
                    break;
                case "empty":
                    bw.write(queue.empty() + "\n");
                    break;
                case "front":
                    bw.write(queue.front() + "\n");
                    break;
                case "back":
                    bw.write(queue.back() + "\n");
                    break;
                default:
                    throw new IllegalArgumentException("Invalid command: " + cmd);
            }
        }

        //   출력 버퍼 비우기
        bw.flush();
        //   BufferedReader & BufferedWriter 닫기
        br.close();
        bw.close();
    }
}

배열로 스택 구현

jeonghoe21 — Mon, 3 Mar 2025 05:44:35 +0900

import java.io.*;

public class Main {
    
    private int index = -1; // 스택의 최상단 인덱스 (초기값: -1, 즉 스택이 비어있는 상태)
    private int[] s = new int[10000]; // 최대 크기 10000의 스택 배열

    //   push 연산: 값을 스택에 추가
    public void push(int n) {
        s[++index] = n; // index를 증가시킨 후 해당 위치에 값 저장
    }

    //   pop 연산: 스택에서 최상단 값을 제거하고 반환
    public int pop() {
        if (empty()) 
            return -1; // 스택이 비어있다면 -1 반환
        return s[index--]; // 최상단 값을 반환하고 index를 감소
    }

    //   size 연산: 스택에 있는 요소 개수 반환
    public int size() {
        return index + 1; // index는 0부터 시작하므로, 개수는 index + 1
    }

    //   empty 연산: 스택이 비었는지 여부 반환
    public boolean empty() {
        return index == -1; // index가 -1이면 스택이 비어있는 상태
    }

    //   top 연산: 스택의 최상단 값을 반환 (제거하지 않음)
    public int top() {
        if (empty())
            return -1; // 스택이 비어있다면 -1 반환
        return s[index]; // 최상단 값 반환
    }

    public static void main(String[] args) throws IOException {
        //   빠른 입출력을 위한 BufferedReader & BufferedWriter 사용
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

        Main stack = new Main(); // 스택 객체 생성

        int n = Integer.parseInt(br.readLine()); // 명령어 개수 입력 받기

        for (int i = 0; i < n; i++) {
            String cmd = br.readLine(); // 한 줄 입력 받기

            //   push 연산: "push X" 형태의 입력 처리
            if (cmd.startsWith("push")) { // "push"로 시작하는 문자열 확인
                int x = Integer.parseInt(cmd.substring(5).trim()); // "push X"에서 X 값을 추출
                stack.push(x);
            }
            //   pop 연산
            else if (cmd.equals("pop")) {
                bw.write(stack.pop() + "\n");
            }
            //   size 연산
            else if (cmd.equals("size")) {
                bw.write(stack.size() + "\n");
            }
            //   empty 연산
            else if (cmd.equals("empty")) {
                bw.write((stack.empty() ? 1 : 0) + "\n");
            }
            //   top 연산
            else if (cmd.equals("top")) {
                bw.write(stack.top() + "\n");
            }
        }

        //   버퍼에 있는 내용을 모두 출력
        bw.flush();
        //   BufferedReader & BufferedWriter 닫기
        br.close();
        bw.close();
    }
}

DFS, BFS

jeonghoe21 — Mon, 3 Mar 2025 01:35:41 +0900

import java.io.*;
import java.util.*;

public class Main {

    static boolean[] visited;
    static ArrayList<Integer>[] adjList;
    static StringBuilder dfsResult = new StringBuilder();
    static StringBuilder bfsResult = new StringBuilder();

    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

        StringTokenizer st = new StringTokenizer(br.readLine());
        int N = Integer.parseInt(st.nextToken()); 
        int M = Integer.parseInt(st.nextToken()); 
        int V = Integer.parseInt(st.nextToken()); 

        adjList = new ArrayList[N + 1]; 
        for (int i = 1; i <= N; i++) {
            adjList[i] = new ArrayList<>();
        }

        for (int i = 0; i < M; i++) {
            st = new StringTokenizer(br.readLine());
            int u = Integer.parseInt(st.nextToken());
            int v = Integer.parseInt(st.nextToken());
            adjList[u].add(v);
            adjList[v].add(u);
        }

        for (int i = 1; i <= N; i++) {
            Collections.sort(adjList[i]);
        }

        visited = new boolean[N + 1];
        dfs(V);
        bw.write(dfsResult.toString() + "\n");

        visited = new boolean[N + 1];
        bfs(V);
        bw.write(bfsResult.toString() + "\n");

        bw.flush();
        bw.close();
        br.close();
    }

    static void dfs(int v) {
        visited[v] = true;
        dfsResult.append(v).append(" ");

        for (int next : adjList[v]) {
            if (!visited[next]) {
                dfs(next);
            }
        }
    }

    static void bfs(int start) {
        Queue<Integer> queue = new LinkedList<>();
        queue.offer(start);
        visited[start] = true;

        while (!queue.isEmpty()) {
            int v = queue.poll();
            bfsResult.append(v).append(" ");

            for (int next : adjList[v]) {
                if (!visited[next]) {
                    visited[next] = true;
                    queue.offer(next);
                }
            }
        }
    }
}

1. BufferedReader와 BufferedWriter

1) BufferedReader

BufferedReader는 Java에서 입력을 빠르게 읽어오는 클래스입니다.
System.in을 직접 사용하는 Scanner보다 속도가 빠릅니다.
입력을 한 줄씩 읽을 수 있기 때문에, readLine() 메서드를 사용합니다.
한 줄의 입력을 띄어쓰기로 구분된 여러 개의 값으로 나누기 위해 StringTokenizer를 활용합니다.

2) BufferedWriter

BufferedWriter는 출력 속도를 향상시키는 클래스입니다.
System.out.println()보다 성능이 우수합니다.
write() 메서드를 사용하여 출력 데이터를 버퍼에 저장하고, flush()로 한 번에 출력합니다.

2. DFS (Depth-First Search, 깊이 우선 탐색)

그래프 탐색 기법 중 하나로, 한 방향으로 끝까지 탐색한 후 다시 돌아와 다른 경로를 탐색하는 방식입니다.
스택(Stack) 또는 재귀(Recursion)를 활용하여 구현할 수 있습니다.

✅ DFS 동작 원리

시작 노드를 방문하고 출력한다.
현재 노드와 연결된 아직 방문하지 않은 노드로 이동한다.
더 이상 이동할 곳이 없으면 되돌아가며 다른 경로를 탐색한다.
모든 노드를 방문할 때까지 반복한다.

3. BFS (Breadth-First Search, 너비 우선 탐색)

그래프 탐색 기법 중 하나로, 시작 노드에서 가까운 노드부터 차례대로 탐색하는 방식입니다.
큐(Queue)를 활용하여 구현합니다.

✅ BFS 동작 원리

시작 노드를 방문하고 큐(Queue)에 삽입한다.
큐에서 노드를 꺼낸 후, 해당 노드와 연결된 방문하지 않은 노드를 큐에 추가한다.
큐가 빌 때까지 반복한다.

2️⃣ 코드 상세 분석

visited[] → 각 노드의 방문 여부를 저장하는 배열입니다.
adjList[] → 각 노드에 연결된 다른 노드들의 정보를 저장하는 인접 리스트입니다.
빠른 입출력을 위한 BufferedReader와 BufferedWriter 사용합니다.
StringTokenizer를 이용해 띄어쓰기 기준으로 입력 값을 분리합니다.
인접 리스트(ArrayList)를 생성하여 각 노드에 연결된 노드를 저장할 공간을 만듭니다.

입력된 간선을 인접 리스트에 저장합니다.
adjList[u].add(v) → u 노드에서 v 노드로 연결
adjList[v].add(u) → v 노드에서 u 노드로 연결
(양방향 그래프이므로 서로 연결)

for (int i = 1; i <= N; i++) { Collections.sort(adjList[i]); }

DFS와 BFS가 작은 숫자부터 방문하도록 리스트를 정렬합니다.

visited = new boolean[N + 1]; dfs(V); bw.write(dfsResult.toString() + "\n");

dfs(V)를 호출하여 DFS 탐색을 수행합니다.
결과를 StringBuilder에 저장하고, 마지막에 한 번에 출력합니다.

visited = new boolean[N + 1]; bfs(V); bw.write(bfsResult.toString() + "\n");

bfs(V)를 호출하여 BFS 탐색을 수행합니다.

bw.flush(); bw.close(); br.close();

버퍼에 남아 있는 데이터를 한 번에 출력하고 종료합니다.