602호_클라우드기반 자바풀스택_중앙정보처리학원_국비교육

후보선정

springpark — Mon, 4 May 2026 00:42:52 +0900

https://bestmobileappawards.com/app-submission/holic?utm_source=badge&utm_medium=badge&utm_campaign=nominee_badge

제가 만든 앱입니다

springpark — Sun, 3 May 2026 05:25:46 +0900

https://play.google.com/store/apps/details?id=com.herokuapp.dvdholic_01a66e19fbd3.twa

holic - Google Play 앱

영화 & DVD 정보 제공과 연결된 국내여행지 정보 제공

play.google.com

https://apps.apple.com/app/dvdholic/id6759291889

DVDholic App - App Store

Download DVDholic by junho park on the App Store. See screenshots, ratings and reviews, user tips, and more apps like DVDholic.

apps.apple.com

kafka-command

springpark — Sat, 8 Nov 2025 14:07:26 +0900

## 도커 컴포우즈로 카프카 컨테이너 실행
```
docker compose -f docker-compose-single-kafka.yaml up -d         
```

## 실행 중인 카프카 컨테이너 중지
```
docker compose -f docker-compose-single-kafka.yaml stop  
```

## 실행 중인 카프카 컨테이너 삭제
```
docker compose -f docker-compose-single-kafka.yaml down  
```

## 카프카 컨테이너 내부 접속 (로컬 PC에 카프카가 설치되어있지 않다면 꼭 해주기!)
로컬 PC에 카프카가 설치되어있지 않다면 kafka-topics 등 카프카 명령어를 사용할 수 없습니다.
카프카 컨테이너에 내부 접속하여 아래 나오는 명령어들을 실행합니다.
단, 로컬 PC에 카프카 바이너리를 설치하면, 설치된 경로에서 명령어를 실행할 수 있습니다.
```
docker exec -it <kafka-container-id> /bin/bash
```


## 토픽 리스트 보기
어플리케이션 실행 후 토픽이 자동 생성된 것을 확인합니다.
```
kafka-topics --list --bootstrap-server localhost:9092
```

## 알림센터 토픽 생성 (생략 가능)
어플리케이션 실행 후 토픽이 자동으로 생성되었다면 생략 가능합니다.

### comment 토픽 생성
```
kafka-topics --create --bootstrap-server localhost:9092 --replication-factor 1 --partitions 1 --topic comment
```
### like 토픽 생성
```
kafka-topics --create --bootstrap-server localhost:9092 --replication-factor 1 --partitions 1 --topic like
```

### follow 토픽 생성
```
kafka-topics --create --bootstrap-server localhost:9092 --replication-factor 1 --partitions 1 --topic follow
```


## 알림센터 이벤트 발행

### 댓글 이벤트
```
echo '{"type":"ADD","postId":1,"userId":2,"commentId":1}' | kafka-console-producer --broker-list localhost:9092 --topic comment
```

### 좋아요 이벤트
```
echo '{"type":"ADD","postId":1,"userId":2,"createdAt":"2024-01-28T18:35:24.01Z"}' | kafka-console-producer --broker-list localhost:9092 --topic like
```

### 팔로우 이벤트
```
echo '{"type":"ADD","userId":1,"targetUserId":2,"createdAt":"2024-01-28T18:35:24.01Z"}' | kafka-console-producer --broker-list localhost:9092 --topic follow
```


## 참고) 테스트 해보기

### 테스트 토픽 생성
컨테이너 내부에서 카프카 주제를 생성합니다.

```
kafka-topics --create --topic test --bootstrap-server localhost:9092 --partitions 1 --replication-factor 1
```

### 테스트 토픽에 이벤트 발행
테스트 토픽에 이벤트를 발생시킵니다.
```
kafka-console-producer --topic test --bootstrap-server localhost:9092
```

### 테스트 토픽에서 이벤트 수신
다른 터미널에서 카프카 컨테이너에 접속하여 이벤트를 수신합니다.

```
kafka-console-consumer --topic test --bootstrap-server localhost:9092 --from-beginning
```

배달앱 기사글

springpark — Thu, 2 Oct 2025 23:51:07 +0900

Cursor AI로 실현한 배달앱 개발의 새로운 패러다임

프론트엔드와 백엔드 분리로 발견한 AI 협업의 최적해

◈ 서론

AI가 개발자의 일상으로 깊숙이 파고들면서, 우리는 새로운 개발 방법론을 모색해야 하는 시점에 서 있다. 특히 Cursor AI와 같은 AI 코딩 도구의 등장은 개인 개발자도 복잡한 서비스를 구축할 수 있는 가능성을 열어주었다. 하지만 많은 개발자들이 AI에게 모든 것을 맡기려다 오히려 더 복잡한 문제에 직면하고 있다.
이 글의 핵심 인사이트는 명확하다. AI와의 협업에서 가장 중요한 것은 역할 분담이다. 필자가 3개월간 고군분투하며 완성한 배달앱 'Foodie(먹깨비)' 프로젝트를 통해, AI 도구를 활용한 효율적인 개발 프로세스와 그 과정에서 얻은 실질적 노하우를 공유하고자 한다.
이 경험담이 AI 시대의 개발자들에게 실무적 가이드라인을 제시하고, 무엇보다 '어떻게 AI와 협업할 것인가'에 대한 구체적 답변을 제공하는 것이 이 글의 목적이다.

▣ 본론

1. 아키텍처 분리의 결정적 순간

프로젝트 초기, 필자는 많은 개발자들과 같은 실수를 범했다. Cursor AI에게 React로 백엔드 기능까지 모두 구현하도록 요청한 것이다. 결과는 예상대로 참담했다. 프론트엔드와 백엔드가 뒤엉킨 코드는 디버깅조차 어려운 상태가 되었고, 결국 "배가 산으로 가는" 상황에 직면했다.
전환점은 아키텍처를 명확히 분리한 순간이었다. Java 11과 Spring Boot 2.7.9 기반의 백엔드를 PostgreSQL 데이터베이스와 함께 구축하고, 12개의 RESTful API를 Swagger로 문서화하여 200 OK 응답을 확인했다. 이때 중요한 것은 백엔드에서 할 수 있는 모든 일을 완료했다는 확신이었다.
현재 운영 중인 백엔드 API(https://mukkai-backend-api-f9dc2d5aad02.herokuapp.com/)은 안정적으로 작동하며, 이는 3개월간의 밤샘 작업의 결실이었다. 하지만 이 고통스러운 과정이 있었기에 이후 AI와의 협업이 순조로울 수 있었다.

2. AI 도구 조합의 시너지 효과

백엔드가 안정화된 후, 프론트엔드 개발에서 AI 도구의 진가가 드러났다. 초기에는 ChatGPT와 Bootstrap, Vanilla JavaScript로 시작했지만, 결과물은 조잡하기 그지없었다. Ajax와 fetch 함수들이 뒤섞인 코드는 기능은 작동했지만, 시각적 완성도가 떨어져 전문 프론트엔드 개발자에게 맡기고 싶을 정도였다.
게임 체인저는 Cursor AI와 Claude Desktop의 조합이었다. 특히 Magic MCP(월 20달러)를 활용한 디자인 선택 과정은 인상적이었다. 5가지 디자인 옵션 중 하나를 선택하는 방식으로 UI/UX의 품질을 대폭 향상시킬 수 있었다.
현재 서비스 중인 프론트엔드(

https://mukkai-delivery-fe-0bdb8680ab0d.herokuapp.com)는 모바일 우선 반응형 디자인으로 구현되어, 스마트폰과 PC 모두에서 최적화된 사용자 경험을 제공한다.

Foodie - 맛있는 음식을 빠르게

mukkai-delivery-fe-0bdb8680ab0d.herokuapp.com

3. AI 협업의 핵심 원칙들

경험을 통해 도출한 AI 협업의 핵심 원칙들은 다음과 같다:
명확한 경계 설정: Cursor AI가 백엔드 코드를 수정하려 할 때는 오직 Heroku 배포 환경 설정만 허용하고, 나머지는 즉시 원복시켰다. 이는 시스템의 안정성을 보장하는 동시에 AI의 작업 범위를 명확히 한정하는 효과를 가져왔다.
반복 학습의 활용: AI는 아직 발전 초기 단계로, 같은 실수를 몇 번 반복하는 경향이 있다. 하지만 이를 부정적으로 보지 않고, 패턴을 파악하여 더 정확한 지시를 내리는 방향으로 접근했다.
단순한 질문의 힘: 복잡한 AI 사용법이나 특별한 단축키를 익히지 않아도, 명확하고 단순한 질문만으로도 원하는 결과를 얻을 수 있었다. 이는 AI 도구의 접근성을 크게 높여주는 요소였다.

4. 실제 서비스 구현과 결과

완성된 배달앱은 회원가입, 로그인, 메뉴 선택, 주문 등 핵심 기능을 모두 갖추고 있다. 특히 주목할 점은 개발 과정에서의 학습 곡선이다. 백엔드 개발에 3개월이 소요된 반면, 프론트엔드는 AI의 도움으로 훨씬 짧은 시간 내에 완성할 수 있었다.
기술적 구현 측면에서는 Java 11과 Spring Boot 2.7.9의 안정성, PostgreSQL의 데이터 무결성, 그리고 React 기반 프론트엔드의 반응성이 조화를 이루어 완전한 서비스를 구축할 수 있었다. 특히 Swagger를 통한 API 문서화는 프론트엔드와 백엔드 간의 명확한 인터페이스를 제공하여 개발 효율성을 크게 높였다.

5. AI 개발의 미래 전망

이 프로젝트를 통해 확인할 수 있었던 것은 AI가 개발자를 대체하는 것이 아니라, 개발자의 역량을 증폭시키는 도구라는 점이다. 중요한 것은 AI에게 무엇을 맡기고, 무엇을 직접 관리할지 결정하는 개발자의 판단력이다.
특히 복잡한 비즈니스 로직이나 데이터베이스 설계는 여전히 개발자의 깊이 있는 이해가 필요한 영역이며, AI는 반복적인 코드 작성이나 UI 구현에서 그 진가를 발휘한다는 것을 확인했다.

결론

3개월간의 배달앱 개발 여정을 통해 얻은 가장 중요한 교훈은 AI와의 협업에서 성공의 열쇠는 명확한 역할 분담에 있다는 점이다. 백엔드는 개발자가 직접 설계하고 구현하여 안정성을 확보하고, 프론트엔드는 AI의 도움을 받아 효율적으로 개발하는 방식이 현재로서는 가장 실용적인 접근법임을 확인했다.
또한 AI 도구의 조합(Cursor AI + Claude Desktop + Magic MCP)을 통해 개인 개발자도 전문적 수준의 애플리케이션을 개발할 수 있다는 가능성을 실증했다. 특히 디자인 영역에서 AI의 도움은 개발자의 약점을 보완하는 강력한 도구가 될 수 있음을 보여주었다.
독자들에게 전하고 싶은 핵심 메시지는 이것이다: AI 시대의 개발자는 모든 것을 AI에게 맡기려 하지 말고, AI와 협업할 수 있는 최적의 지점을 찾아야 한다. 기술적 복잡성은 개발자가 담당하고, 반복적이고 패턴화된 작업은 AI가 담당하는 역할 분담이 현재로서는 가장 효과적인 개발 방법론이다.
이러한 접근법을 통해 개인 개발자도 과거에는 팀 단위에서나 가능했던 완성도 높은 서비스를 구축할 수 있으며, 이는 소프트웨어 개발 생태계에 새로운 가능성을 제시한다고 할 수 있다. AI는 우리의 경쟁자가 아니라 가장 강력한 협업 파트너임을, 이 프로젝트를 통해 다시 한 번 확인할 수 있었다.

본 원고의 프로젝트는 현재 운영 중이며, 실제 회원가입과 주문 테스트가 가능합니다. 관심 있는 독자분들은

https://mukkai-delivery-fe-0bdb8680ab0d.herokuapp.com/에서 직접 경험해보실 수 있습니다.

Foodie - 맛있는 음식을 빠르게

mukkai-delivery-fe-0bdb8680ab0d.herokuapp.com

타입스크립트의 타입

springpark — Fri, 8 Aug 2025 03:03:33 +0900

참고문헌 :

typescriptlangHandbook - The TypeScript Handbook

Handbook - The TypeScript Handbook

Your first step to learn TypeScript

www.typescriptlang.org

typescriptlangHandbook - The TypeScript Handbook

https://www.typescriptlang.org/ko/docs/handbook/2/basic-types.html

Documentation - The Basics

TypeScript를 배우는 첫 걸음: 기본 타입.

www.typescriptlang.org

검색 : 타입스크립트의 타입 계층 구조 - 이미지 검색

★ 기본 타입

1. 원시 타입(Primitive Type)

a. 통시에 한 개의 값만(숫자만 숫자, 문자열 이면 문자열만,..) 저장할 수 있는 타입틀

b. number, sring, boolean

1-1.number 타입

let num1:number = 123;     // 타입 주석 사용
let num2:number = -123;
let num3:number = 0.123;
let num4:number = -0.123;
let num5:number = Infinity;
let num6:number = -Infinity;
let num7:number = NaN;

num1.toFixed(2);  //소수이하 2자리
num1.toFixed(); //소수 없이, 정수만
num1 = "hi";  //에러 발생
num2.toLowerCase(); //에러 발생

● 타입 주석 또는 타입어노테이션 : 변수 이름 뒤에 콜론(:)과 함께 변수의 타입을 정의하는

1-2.string 타입

문자열 타입, "",",백틱,템플릿 리터럴로 만든 모든 문자열을 포함

//string
let str1 : string ="hello";
let str2 : string ='hello';
let str3 : string =`hello`;
let str4 : string =`hello ${num1}`;

1-3. boolean 타입

//boolean
let bool1 :boolean = true;
let bool2 :boolean = false;

1-4. null 타입

//null
let nullable : null = null;

//let numA : number = null;  //타입스크립트는 null 타입이 따로 있어 오류
              // 이를 해결하기 위해 tsconfig.json에  "strictNullChecks": false 추가
              // strictNullChecks 는 strict의 하위 옵션으로  strict 가 true로
              // 설정되어 있으면 이것도 true가 되며 false 로 설정되어 있으면 
              // 자동 false가 됨
              // 현재는 strict 모두를 true로 해 놓았기에 strictNullChecks 도  true 임

● strictNullChecks 는 strict의 하위 옵션으로 strict 가 true로 설정되어 있으면 이것도 true가 되며 false 로 설정되어 있으면 자동 false가 됨, 현재는 strict 모두를 true로 해 놓았기에 strictNullChecks 도 true 임

● strict 를 활성화 해 놓으면 strict~~ 모든 플래그를 동시에 활성화하게

1-5. undefined 타입

//undifined
let undefinded_test : undefined = undefined;

2. 리터럴 타입

● 하나의 값만 포함하도록 값 자체로 만들어진 타입

● 값 그 자체로 정의

● 해당 값 이외에는 담을 수 없

//리터럴 타입 : 값 그 자체로 정의
let numA :10 = 10;
//numA = 20;  // 10외는 넣을 수 없음

let strA :"hello" = "hello";

let boolA : true = true;

※ 배열과 튜플

1. 배열(Array)

● 변수 : 배열 요소 타입[] = [값,...];

● Array<배열_요소_타입> : 제레닉

● 다양한 타입을 갖는 배열 요소 => 변수:(타입1|타입2|..) = [타입1값,타입2값,....)

○ 유니온 타입 : 바(|), 여러 요소 중 하나를 만족하는 타입을 의미

● 다차원 배열

○ 변수:타입[][] = [[요소1,요소2,.. ],[ 요소1,요소2,....]];

//배열
let numArr: number[]=[1,2,3];
let strArr: string[]=["사과","딸기","복숭아"];

let boolArr:Array<boolean> =[true,false,true]; //제레닉

//배열에 들어가는 요소들의 타입이 다양할 경우  - 유니온(Union) 타입
let multiArr:(number | string)[] = [1, "hello"];

//다차원 배열의 타입을 정의하는 방법
let doubleArr:number[][] =[
  [1,2,3],
  [4,5]
];

//--------------------
let numArr : number[] = [1,2,3,4];
console.log(numArr[2]);

let num_str:(number | string)[ ] = [1, "사과"];
num_str.push(3);
num_str.push(5);
num_str.push("딸기");
num_str.push("복숭아");
console.log(num_str);

- tsx src/파일명. ts

- tsc src/파일명.ts -> node src/파일명.js

2. 튜플(Tuple) 타입

● 타입스크립트에서 만 제공

● 길이와 타입이 고정된 배열

● 다만 js로 변경되면 튜플도 일반 배열로 변환되어 처리됨

● 따라서 배열 메서드인 push나 pop을 이용해서 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 있음에 주의 필요

● 튜플을 사용하면 실수로 배열의 위치를 변경해서 저장하는 에러를 막을 수 있음

//튜플 타입 - 타입스크립트에서만 제공
//튜플 - 길이와 타입이 고정된 배열
let tup1:[number,number] =[1,2];
let tup2:[number,string] =[1,'hello'];

tup1 = [3, 4];
// tup1=[3,4,5]; //에러, 튜플
// tup1 = ["가나","다라"]; //에러

// tup2 = [3, 4]; //에러
// tup2 = ["가", 3]; //에러
tup2 = [5, "대한"];

let tup3:[number,string,boolean] = [1, "사과", true];
tup1.push(4);  //가능,  주의) 자바스크립트로 변환할 때 그냥 배열로 처리하기 때문에 가능
tup1.pop();
tup1.pop();
tup1.pop();

//튜플 상황-인덱스에 넣어야 할 타입이 정해져 있을 때
const user:[string,number][]=[
  ["홍길동",1],
  ["이가",2],
  ["홍동",3],
  ["박박",4],
  // [6, "최최"] //오류
];

※ 객체

1. object로 정의하기

a. object 타입은 단순 값이 객체임을 표현하는 것 외에는 아무런 정보도 제공하지 않는 타임

b. 이 타입은 객체의 프로퍼티(Property)에 대한 정보를 전혀 가지고 있지 않음

c. 따라서 프로퍼티(Property)에 접근하려고 하면 오류 발생

let user:object={
  id:1,
  name:"홍길동",
};

user.id;  //에러 발생, 단지 object는 객체임을 표현할 뿐
        // 객체의 프로퍼티에 대한 정보가 없음음

2. 객체 리터럴 타입

a. 중괄호({})를 열고 객체가 갖는 프로퍼티(Property)를 직접 나열해 만드는 타입

b. 변수의 타입을 객체의 리터럴 타입으로 정의하면 타입 내에 정의되어 있는 프로퍼티(Property)에 이상 없이 접근할 수 있음

c. 프로퍼티에 마우스 올려 놓으면 타입이 보임

d. 객체의 타입을 정의할 때 프로퍼티를 기준으로 객체의 구조를 정의하듯이 타입을 정의(구조적 타입 시스템)

let user: {   //객체 리터럴 타입, 구조적 타입 객체
  id:number; 
  name:string;
}={
  id:1,
  name:"홍길동",

};
console.log(user.id);
console.log(user.name);

user ={
  id : 2,
  name: "김자바",
}

console.log(user.id);
console.log(user.name);

3. 선택적 프로퍼티(Optional Property)

● 프로퍼티가 있어도 되고 없어도 되는 선택적 상황에서 사용

● 프로퍼티 이름 뒤에 ?를 붙여서 나타냄

let user: {   //객체 리터럴 타입, 구조적 타입 객체체
  id?:number; //? 있어도 되고 없어도 되는 프로퍼티, 옵셔널 프로퍼티
            // id를 지정할 것이면 숫자값이어야 함함
  name:string;
}
={
  id:1,
  name:"홍길동",

};
user.id;

user={
  name:"홍홍홍",
};

4. 읽기 전용 프로퍼티(Readonly Property)

● 프로퍼티 이름 앞에 'readonly' 키워드를 붙여 줌

● 의도치 않은 프로퍼티의 값 수정을 방지하기 위해 사용

let config:{
  readonly apiKey : string;
} ={
  apiKey : "My Test Api Key",
};

// config.apiKey ="aaaa "; //에러, 읽기 전용이므로

▶ 타입 별칭 및 인덱스 시그니처

1. 타입 별칭

● 타입 별칭을 이용하면 변수를 선언하듯 타입을 별도로 정의할 수 있음

● 형시) type 타입명 = { 타입선언};

type User={  //객체 타입 정의, type 타입명 ={ };
  id: number;   //프로퍼티:number
  name:string;
  nickname:string;
  birth:string;
  bio:string;
  location:string;
};

let user:User={ // 타입 별칭 사용  let 객체명:타입별칭={ }
  id: 1,
  name:"이바다",
  nickname:"바다신",
  birth: "1999-01-02",
  bio:"Hello",
  location:"서울 강남"
};

let user2:User={
  id: 2,
  name:"이하늘",
  nickname:"sky",
  birth: "1999-03-01",
  bio:"ㅋㅋㅋㅋㅋ",
  location:"역삼"
};

● 동일한 스코프 내에서는 중복된 이름으로 타입 별칭 선언하면 에러 변수 선언과 유사

● 그러나 함수 내에 정의된 별칭과 함수 외부에 정의된 타입 별칭 처럼 스코프가 다르면 동일해도 됨

2. 인덱스 시그니처

객체 타입을 유연하게 정의할 수 있도록 돕는 특수한 문법

형식) [key:type] : value_type;

ex) [key:string]:number ; ⇒ key는 string 타입이고 value는 number 타입인 모든 프로퍼티를 포함

type ContryCodes={
  [key : string] : string;
};

let countryCodes:ContryCodes={
  Korea : "ko",
  UnitedState:"us",
  Japan : "jp",
};

//아래와 같이 
// 인덱스 시그니처 타입은 규칙을 위반하지만 않으면 에러 안 생김
let countryNmberCodes :CountryNumberCodes ={};

let countryNmberCodes :CountryNumberCodes ={
  Korea:410,
  UnitedState: 840,
  Japan : 392,
};

만약 반드시 포함해야 할 프로퍼티가 있다면 다음과 같이 직접 명시해도 됨

type CountryNumberCodes={
  [key:string]:number;
  Korea:number;
};

let countryNmberCodes :CountryNumberCodes ={
  Korea:410,
};


// 그러나 위의 Korea:type과 value타입은 반드시 같아야 함
type CountryNumberCodes={
  [key:string]:number;
  //Korea:string; //에러, value 타입이 number이므로 여기도
  // number 타입이거나 호환되는 타입이어야 함
  Korea:number;
};

let countryNmberCodes :CountryNumberCodes ={
  //Korea:"ko" , //에러, number 타입이어야 함
  Korea:1;
};

☎  열거형 타입

● 자바스크립트에는 존재하지 않고 오직 타입스크립트에서만 사용할 수 있는 특별한 타입

● enum은 컴파일될 때 다른 타입들 처럼 사라지지 않고 자바스크립트 객체로 변환됨

● enum 타입에 값을 직접할당 하지 않으면 0부터 시작하고 1씩 증가함

// 숫자형 열거 타입
enum Role {
  ADMIN,  // 0 할당
  USER,  //1 할당
  GEUEST, //2 할당
};

//
// enum Role {
//   ADMIN=0,
//   USER=1,
//   GEUEST=2,
// };

//
// enum Role {
//   ADMIN=10, // 10 
//   USER,    // 11
//   GEUEST,   // 12
// };


//문자열 열거형
enum Language{
  korean = "ko",
  english = "en",
};

let user1 = {
  name:"홍길동",
  role:Role.ADMIN,

};

let user2 = {
  name:"김하늘",
  role:Role.USER,
  language : Language.korean,
};

let user3 = {
  name:"이바다",
  role:Role.GEUEST,
  language : Language.english,
};

● 위 코드를 js 파일로 변환 ( tsc src/test.ts )

var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["USER"] = 1] = "USER";
    Role[Role["GUEST"] = 2] = "GUEST";
})(Role || (Role = {}));
var Language;
(function (Language) {
    Language["korean"] = "ko";
    Language["english"] = "en";
})(Language || (Language = {}));
;
var user1 = {
    name: "홍길동",
    role: Role.ADMIN,
};
var user2 = {
    name: "김하늘",
    role: Role.USER,
    language: Language.korean,
};
var user3 = {
    name: "이바다",
    role: Role.GUEST,
    language: Language.english,
};

★ Any와 Unknown 타입

1. Any 타입

● 타입스크립트에서만 제공되는 특별한 타입으로 타입 검사를 받지 않는 특수한 치트키 타입

● any 타입은 어떠한 타입 검사도 받지 않기 때문에 아무 타입의 값이나 범용적으로 담아 사용할 수 있고, 다양한 타입의 메서 드도 마음대로 호출해서 사용해도 문제가 되지 않음

● any 타입의 값은 어떤 타입으로 정의된 변수던 문제 없이 다 할당할 수 있음

● any는 되도록 사용하지 않은 것이 좋음, 상당히 위험한 타입임, 타입 검사는 하지 않지만 runtime에 오류를 발생시킴

//any
// 특정 변수의 타입을 확실히 모를 때 사용
let anyVar:any=10;
anyVar = "hello";

anyVar = true;
anyVar ={};
anyVar=() => { };

anyVar.toUpperCase();
anyVar.toFixed();

let num :number = 10;
num = anyVar;

2. Unknown 타입

● any 타입과 비슷하지만 보다 안전한 타입

● unknown 타입의 변수는 어떤 타입의 값이든 다 저장할 수 있음

● 그러나 unknown 타입의 값은 어떤 타입의 변수에도 저장할 수 없음

● unknown 타입의 값은 어떤 연산에도 참여할 수 없으며, 어떤 메서드로 사용할 수 없음

● 모든 값을 할당 받을 수 있지만, 어떤 타입의 변수에도 할당할 수 없고, 모든 연산에 참가할 수 없게 됨

● 즉 모든 값을 저장만 할 수 있음

//unknown
let unknownVar:unknown;
unknownVar = "";
unknownVar = 11;
unknownVar = () => {};

// num = unknownVar;
// unknownVar.toUpperCase();

if(typeof unknownVar === "number"){
  //타입 정제 = 타입 좁히기 시는 사용 가능
  num=unknownVar;
}

▶ Void 타입과 Never 타입

1. void 타입

a. 아무런 값도 없음을 의미하는 타입

b. 아무런 값도 반환하지 않는 함수의 반환값 타입을 정의할 때 사용

c. void타입의 변수에는 undefiend 이외의 다른 타입의 값은 담을 수 없음, void 타입이 undefiend 타입을 포함하는 타입이기 때문

//void

function func1():string{
  return "hello";
}

function func2():void{
  console.log("hello");
};

let a:void;
// a=1;
// a="hello";
// a={};
a=undefined;
//a=null;  //tsconfig.json에 엄격한 null 검사 옵션을 false로 설정하면 가능
        // "strictNullChecks":false

2. never 타입

a. 불가능을 의미하는 타입

b. 함수가 어떠한 값도 반환할 수 없는 상황일 때 해당 함수의 반환값 타입을 정의할 때 사용

c. 무한 루프 이외에 의도적으로 오류를 발생시키는 함수도 never 타입으로 반환값 타입을 정의할 수 있음

d. 변수의 타입을 never로 정의하면 any를 포함해 그 어떠한 타입의 값도 이 변수에 담을 수 없게 됨

//never 
//존재하지 않는 불가능한 타입
// 함수에 반환값 자체가 모순이라고 생각할 수 있는 상황에도 never타입 사용
function func3():never{
  while(true){ }
}

function func4():never{
  throw new Error();
}

let anyVar:any;
let a1 : never;
// a1=1;
// a1={};
// a1="";
// a1=undefined;
// a1=null;  //tsconfig.json에 엄격한 null 검사 옵션을 false로 설정해도
//         //null을 담을 수 없음
// // "strictNullChecks":false
// a1=anyVar;

타입스크립트란(TypeScript)

springpark — Thu, 7 Aug 2025 17:56:29 +0900

1. 필요 개발 환경

a. Node.js : 자바스크립트 구동기, 어디서든 자바스크립트를 실행할 수 있게 해 줌

b. vs code

2. 타입스크린트는 자바스크립트의 확장판

자바스크립트를 더 안전하게 사용할 수 있도록 "타입 관련 기능들을 추가한" 언어

3. 타입 시스템 :

● 프로그램 언어를 사용할 때 타입과 관련해서 지켜야 할 규칙 체계(= 문법 체계)

■ 정적 타입(static type) 시스템

● 코드 실행 이전 모든 변수의 타입을 고정적으로 결정함

● 모든 변수의 타입이 컴파일타임에 결정

● 코드 수준에서 개발자가 타입을 명시해줘야 해서 타이핑 양이 매우 증가

● C, JAVA, 타입스크립트

String name = "홍길동";
int age = 20;
String grade = "A";

---
int age = grade + 20; //바로 컴파일 오류 발생 
	// 정적시스템은 실행전 오류 검사까지 함

//-- 타입 시스템 : 동적 타입 시스템 + 정적타입시스템
// 변수의 타입을 실행전에 결정,  
//  타입 오류를 실행전에 검사
let age: number = 20;
age.toUpperCase();  ->오류 발생 

let age = 20;
age.toUpperCase();   ->오류 발생
		모든 변수에 타입을 일일이 지정할 필요 없음
		(점진적 타입 시스템(Gradual Type System) )

▶ 점진적 타입 검사 :

컴파일 타임에 타입을 검사하면서 필요에 따라 타입 선언 생략을 허용하는 방식, 타입을 지정한 변수와 표현식은 정적으로 타입 을 검사하지만 타입 선언이 생략되면 동적으로 검사를 수행

타입 선언을 생략하면 암시적 타입 변환이 일어남

▶ 타입스크립트의 타입 시스템은 정적 타입의 정확성을

100% 보장해 주지 않음

모든 변수와 표현식의 타입을 컴파일타임에 검사하지 않아도 되기 때문에 타입이 올바르게 정해지지 않으면 런타임에서 에러가 발생할 수도 있음

■ 동적 타입(dynamic type) 시스템

● 코드를 실행하고 나서 그때 그때마다 유동적으로 변수의 타입으르 결정

● 변수 타입이 런타임에서 결정

● 개발자가 직접 타임을 정의해 줄 필요가 없음

● 프로그램을 실행할 때 타입 에러가 발견되기 때문에 개발 과정에서 에러 없이 마음껏 코드를 작성할 수 있지만 언제 프로그램 에 오류가 생길지 모름

● 파이썬,자바스크립트

let name = "홍길동";
name = 1234567;

name.toUpperCase();  // Type Error 발생, 그러나 실행은

▷ 정리

● 정적 타입 시스템 : 코드를 실행하기 전에 정적으로 변수의 타입을 결정, 단점으로는 모든 변수에 일일이 타입을 지정해주어 야 하며, 유연하지 못함

● 점진적 타입 시스템 : 실행 전 검사를 통한 타입 안전성 확보, 자동으로 변수의 타입을 추론함

● 동적 타입 시스템 : 코드를 실행하면서 유동적으로 변수의 타입을 결정, 단점으로는 코드의 타입 오류를 미리 검사할 수 없어 예기치 않은 오류가 발생할 수 있음

▣ 타입스크립트 공식 문서

typescriptlangDocumentation - TypeScript for the New Programmer

Documentation - TypeScript for the New Programmer

Learn TypeScript from scratch

www.typescriptlang.org

https://www.typescriptlang.org/ko/docs/handbook/typescript-from-scratch.html

Documentation - TypeScript for the New Programmer

Learn TypeScript from scratch

www.typescriptlang.org

■ 타입스크립트 실행

1. Node.js 패키지 초기화

npm init

2. @types/node 설치

Node.js가 제공하는 기본 기능(내장 함수, 클래스 등)등에 대한 타입 정보

만약 설치하지 않으면 컴파일 과정에서 타입 검사가 실패하여 오류가 발생할 수 있으며, 기본적임 명령인

console.log 같은 명령을 알아 듣지 못하게 됨

npm install @types/node
또는
npm i @types/node

//package.json  -> dependencies : @types/node - 버전
/* "dependencies": {
    "@types/node": "^24.2.0"
  }
 */

3. 타입스크립트 컴파일러 설치

타입스크립트 컴파일러(TSC)는 npm의 TypeScript 패키지에 동봉되어 있음

타입스크립트는 컴파일러에 의해 자바스크립트로 변환한 다음 실행하기에 자바스크립트를 실행하기 위해

(타입스크립트를 컴파일하기 위해)서 타입스크립트 패키지를 설치

//windows 
//만약 에러가 발생하면 관리자 권한으로 설치
// -g  : 전역으로 설치, 이렇게 해야 터미널에서 패키지 이름을 호출 하여 사용할 수 있
npm install -g typescript

//mac os
sudo npm install -g typescript

//타입스크립트 컴파일러 설치 확인- 현재 타입스크립트의 버전 
tsc -v

//Version 5.9.2 - 현재 타입스크립트의 버전

4. 타입스크립트 파일 만들기

패키지 루트 아래에 src 폴더를 생성한 다음

index.ts파일을 생성

// 타입 스크립트의 확장자는 'ts'

console.log("Hello TypeScript");
const num: number = 10;

● 컴파일하고 실행

tsc src/index.ts

//컴파일이 완료되면 index.js 파일이 생성됨

● 컴파일된 자바스크립트 코드 node를 이용해 실행

node src/index.js

// Hello Typescript

▤ 정리 )

● 타입스크립트 코드를 실행하기 위해 tsc 를 이용해 타입스크립트 코드를 자바스크립트로 변환한 다음 변환된 자바스크립트 코드를 Node.js 로 실행 시킴

● index.js 파일 삭제

▣ TSX(TypeScript Execute)로 실행하기

타입스크립트 컴파일러와 node.js가 함께 있는 것

한번에 타입스크립트 파일을 실행할 수 있음

npm install -g tsx

또는 npm i -g tsx

//설치 확인
tsx -v

● 설치 확인 후 타입스크립트 파일 실행

◎ 자바스크립트 파일을 생성하지 않고 한번에 타입스크립트 파일 실행

tsx -v

tsx src/index.ts

♬ 정리)

● tsx는 단 한번의 명령어로 타입스크립트 코드를 실행 시킴

● 즉 자바스크립트 파일을 생성하지 않고 한번에 타입스크립트 파일을 실

▣ 타입스크립트 컴파일러 옵션

타입스크립트의 컴파일은 우리가 작성한 코드에 타입 오류가 없는지 검사하고 오류가 없다면 자바스크립트 코드로 변화

이러한 컴파일 과정에서 아주 세부적인 사항들(얼마나 엄격하게 타입 오류를 검사할지, 자바스크립트 코드의 버전은 어떻게 할 지....)을 컴파일러 옵션이라고 함

타입 스크립트는 다른 언어에 비해서 컴파일러 옵션을 아주 자유롭게 쉽게 설정 가능

5-1. 컴파일러 옵션 자동 생성

패키지 루트 폴더 아래에 tsconfig.json이라는 파일에 설정할 수 있으며 Node.js 패키지 단위로 설정

● 컴파일러 옵션 자동 생성 도구 생성

tsc --init

5-2. 컴파일러 옵션 설정

//tsconfig.json 파일의 내용을 완전히 제거 한 후 아래와 같이 코딩

{
// 컴파일할 타입스크립트 파일의 범위와 위치
  "include": ["src"]  /* src 폴더를 포함해서 컴파일하기 */
}

//터미널에  tsc 만 입력하면 src 폴더 아래의 모든 .ts 파일이 컴파일

>tsc

● *.js 파일을 삭제하기 - 다음 실습 위해

{
  "compilerOptions": {
    "skipLibCheck": true, //타입 정의 파일의 타입 검사 생략, 20 버전 이상은 설정 바
    "target": "ESNext", // 자바스크립트 코드 버전
										    //이전 버전을 원하면 "ES5"
			                 // 구형브라우저나 서버 사용시 
			                 // 예전 버전 사용이 필요할 수 있음
    "module" :"ESNext",//모듈 시스템 설정
										 //ES 모듈 시스템, CommonJS 모듈 시스템
    "outDir": "dist", //자바스크립트(js)파일이 놓일 위치
									    //dist 디렉토리에 js파일이 놓임
    "moduleDetection": "force", // 모든 타입스크립트 파일이 로컬로 취급
    "strict": true,  //엄격한 타입 검사 실행, true/false 
   /* 타입스크립트에서는 특별히 매개변수의 타입은 
      프로그래머가 직접 지정하도록 권장      
      타입스크립트는 함수 매개변수의 타입을 자동 추론할 수 없기 때문에 
      타입을 프로그래머가 직접 지정하지 않을 경우 
      엄격한 타입 검사 모드에서는 오류가 발생
   */
  }, 
 
   // 컴파일할 타입스크립트 파일의 범위와 위치
  "include": ["src"] 
}

♥ CommonJS 모듈 시스템 참고 자료

Modules: CommonJS modules | Node.js v24.4.1 Documentation

Modules: CommonJS modules | Node.js v24.5.0 Documentation

Modules: CommonJS modules# CommonJS modules are the original way to package JavaScript code for Node.js. Node.js also supports the ECMAScript modules standard used by browsers and other JavaScript runtimes. In Node.js, each file is treated as a separate mo

nodejs.org

▶ ES 모듈 시스템 참고 자료

● ECMAScript 모듈 시스템의 약자로, 줄여서 ESM이라고 함

Modules: ECMAScript modules | Node.js v24.4.1 Documentation

Modules: ECMAScript modules | Node.js v24.5.0 Documentation

Modules: ECMAScript modules# Introduction# ECMAScript modules are the official standard format to package JavaScript code for reuse. Modules are defined using a variety of import and export statements. The following example of an ES module exports a functi

nodejs.org

▶ 위 설정이 제대로 동작되지 않으면 재시작 필요

Ctrl + Shift + P => restart => TypeScript:TS 서버 다시 시작

▶ package.json

"type" : "module", //설정

{
  "name": "test_2",
   "version": "1.0.0",
  "main": "index.js",
  
  "type":"module",  //ES 모듈 시스템 사용하기 위
  
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@types/node": "^24.2.0"
  }
}

CloudFront

springpark — Thu, 7 Aug 2025 15:01:15 +0900

● 파일이나 동영상 등의 콘텐츠를 빠르게 전송하도록 돕는 서비스

● 우리가 만든 웹 사이트에 익명의 사용자가 접속할 수 있도록 구성할 때 CloudFront를 사용

● AWS에서는 정적 웹 사이드를 배포할 때는 EC2와 ELB 대신 S3와 CloudFront를 사용할 수 있음

■ S3의 정적 웹 사이트 호스팅 기능

● S3는 파일을 저장하고 내려받을 수 있는 기능을 제공

● 이 기능을 활용하면 웹 사이트를 구성하는 HTML, CSS, 자바스크립트 파일을 S3에 저장하고, 웹브라우저가 이를 내려받아 서 실행할 수 있으며, 이렇게 하면 별도의 서버 없이도 인터넷에 웹 사이트를 배포할 수 있고, 마치 웹 서버를 운영하는 것과 같은 효과를 얻을 수 있다. 이러한 기능을 ‘정적 웹 사이트 호스팅’이라고 함

● 정적 웹 사이트 호스팅의 한계점은 사용자 위치에 따라 콘텐츠 전송 속도가 달라질 수 있음

■ CloudFront

● AWS에서는 위와 같은 문제를 해결하기 위해 전 세계 곳곳에 파일의 복사본을 저장하는 임시 저장소를 구축함

● 이러한 서비스를 CDN(Content Delivery Network)이라고 함

● AWS 에서는 CloudFront라는 CDN 서비스를 제공

● CloudFront는 HTTPS를 사용하여 데이터를 전송할 때 암호화를 제공하며, 사용자가 HTTPS를 쉽게 설정하고 관리할 수 있 는 도구를 제공하며, ACM( AWS Certificate Manager, 인증서를 관리해 주는 서비스)과 연동하여 SSL/TLS 인증서를 무료 로 발급하고 갱신할 수 있음

개념	설명
CDN	CloudFront는 CDN(Content Delivery Network)의 일종
엣지 로케이션	전 세계에 퍼져있는 CloudFront 서버 위치(서울에도 있음)
캐싱	자주 쓰는 콘텐츠를 가까운 서버에 저장해 빠르게 전달
오리진	원래 콘텐츠가 저장된 서버 (예:S3, EC2, 외부 서버 등)
TTL	얼마나 오래 캐시된 콘텐츠를 보관할 지 정하는 시간

개념	설명
ACM	AWS에서 SSL 인증서를 관리하는 서비스
SSL 인증서	사이트를 안전하게 해주는 디지털 증명서
HTTPS	암호화된 안전한 웹사이트 주소
도메인 검증	인증서 발급 전에 해당 도메인을 네가 진짜 갖고 있는지 확인하는 절차
자동 검증	ACM은 AWS에서 발급한 인증서를 자동으로 갱신해줌

■ CloudFront 구성

♨ CloudFront 콘솔

♨ CloudFront 배포 생성

♨ 원본 도메인 선택

● Get started : 배포 이름, 목적, 구조 선택을 입력

● Distribution name : 필수 입력, CloudFront 배포에 붙이는 이름(태그)

● Description : 선택 사항, 이 배포가 무엇인지 설명하는 간단한 메모

● Single website app : 하나의 웹사이트나 앱만 배포할 경우 Multi-tenant architecture : 여러 고객/도메인을 하나의 배포에 묶고 싶을 때 (SaaS 등 복잡한 구조)

● Custom domain - optional : 내 도메인(www.bara.shop) 을 CloundFront 에 붙이지 설정

● Specify origin : 원본 설정 단계

○ 어디에서 웹사이트 파일을 가져올지 원본(origin)을 설정

○ 우리는 Amazon S3 을 사용

■ Amazon S3 : HTML, CSS, 이미지 같은 정적 파일 저장소

● S3 origin : S3 버킷의 정식 도메인 이름을 입력

● Browse S3 : 현재 계정의 S3 버킷 목록이 보여 짐, 클릭 해서 선택

● [웹 사이트 앤드포인트 사용 ] 버튼 클릭 : S3 버킷을 정적 웹사이트로 만들었을 때 그 웹사이트에 접속할 수 있/는 주소(URL)

● Origin path : 선택 사항, S3 버킷 안에서 특정 폴더만 CloudFront에 연결하고 싶을 때 사용

● Settings

○ Allow private S3 bucket access tgo CloudFront : CloudFront가 비공개 S3 버킷에도 접근 가능하도록 허용할지 설정, 체 크하기

체크하면 CloundFront가 자동으로 필요한 권한을 설정해 줌

○ Use recommended origin settings : AWS가 안정적이고 일반적인 설정으로 자동 구성해줌

● Enable security : 보안 설정 단계

● WAF (Web Application Firewall) : 웹 애플리케이션 방화벽, 웹사이트를 해킹이나 악의적인 요청으로부터 막아주는 보안 기능

● Enable security : 보안 설정 단계

● WAF (Web Application Firewall) : 웹 애플리케이션 방화벽, 웹사이트를 해킹이나 악의적인 요청으로부터 막아주는 보안 기능

● 연습에서는 [보안 보호 비활성화] 선택

● 실무에서는 [보안 보호 활성화] 선택

참고)

♨ Get TLS certificate (도메인과 HTTPS 연결 관련 설정)과 Review and create은 여기서는 생략

중요한 단계, 실무에서는 꼭 설정

● [배포 도메인 이름 ] 복사 해서 웹사이트 주소에 붙여 넣기

♨ 배포 삭제

CloudFront는 바로 삭제할 수 없음

먼저 비활성화(Disable)해야 삭제 가능 (보통 몇 분 정도 소요됨)

비활성화 후 삭제 가

S3로 정적 웹 사이트 호스팅하기

springpark — Wed, 30 Jul 2025 02:03:50 +0900

● Amazon S3(Simple Storage Services)

■ S3로 웹 사이트 배포

● 배포할 파일 만들기 : index.html

♨ S3 버킷 만들기

♨ S3 버킷에 웹 사이트 파일 업로드 하기

♨ 버킷 권한 설정

● 허용할 기능 선택

○ GetObject - 특정 사용자, 역할, 그룹에게 S3 객체(파일)를 읽을 수 있는 권한 부여

○ AWS IAM(Identity and Access Management) 사용자나 특정 서비스에만 접근 허용하고 싶을 때 사용

○ 이 권한을 부여하면 이 정책이 적용된 사용자/역할은 지정된 S3 객체를 URL 또는 AWS CLI/API로 다운로드하거나 웹에서 볼 수 있게

● 리소스 유형과 ARN (Amazon Resource Name) 지정

○ {BucketName}에 접근을 허용할 버킷 이름 입력

○ {ObjectName}에 파일 접근할 수 있는 설정

■ {BucketName} ⇒ 본인의 버킷 명 입력

■ {ObjectName} ⇒ 모든 파일 접근할 수 있는 권한을 위해 *

● Principal 부분 수정하기

○ Principal 은 권한을 부여할 대상을 설정하는 속성

○ 여기서는 실습이므로 우리가 만든 서비스에서 모든 사용자가 이미지를 볼 수 있게 할 것이지만

○ 실무에서는 꼭 정확하게 권한을 부여할 대상을 설정할 것

○ "Principal": "*",

♨ S3에 정적 웹 사이트 호스팅 설정

● 버킷 상세 화면에서 [속성]탭을 선택

● 위 화면의 가장 아래쪽으로 이동

참고) AWS Amplify Hosting : 정적 웹사이트나 프론트엔드 앱을 “코드만 올리면 자동으로 배포”해주는 서비스

♨ 웹 사이트 접속

● 맨 아래 쪽 [정적 웹 사이트 호스팅] → [버킷 웹 사이트 엔드포인트]주소 클릭해서 웹 사이트로 이

ELB(Elastic Load Balancing)

springpark — Tue, 29 Jul 2025 23:21:44 +0900

● 웹 사이트로 보내는 요청을 연결된 서버로 적절히 나누는 서비스

● 즉, 트래픽(네트워크 요청)을 여러 서버에 자동으로 분산 시켜주는 서비스

● 사용자 수가 증가하여 많아지면 하나의 서버로는 감당이 불가하고, 서버에 따라 속도가 다르거나 죽는 경우가 생길 수 있음. 이 럴때 ELB가 자동으로 살아있는 서버로 분산 시켜 줌

▤ Load Balance :

● 트래픽을 여러 서버에 걸쳐 분산하는 장치로 특정 서버에 트래픽이 집중되는 것을 방지하고, 장애가 발생하더라도 정상적인 서버로 트래팩을 전달할 수 있도록 함

● ELB에서는 특정 포트에서 HTTPS 요청을 처리하도록 설정할 수 있으므로 보안이 필요한 웹 사이트나 API 서버에서도 많이 사용

▣ ELB의 종류

종류	설명	주요 사용처
ALB(Application Load Balancer)	HTTP/HTTPS 등 애플리케이션 계층 트랙픽 분산	웹서버, REST API
NLB(Network Load Balancer)	TCP/UDP 기반의 네트워크 트래픽 분산	게임 서버, IoT, 고속 통신
CLB(Classic Load Balancer)	옛날 방식, EC2-Classic 전용	지양(거의 사용 안함)

▣ ELB의 핵심 기능

기능	설명
상태 검사 (Health Check)	서버가 죽었는지 확인하고, 죽은 서버로는 트래픽 보내지 않음
오토 스케일링 연동 (Auto Scaling)	EC2 수 늘어나면 자동 반영 (ELB가 새 인스턴스로도 분배)
HTTPS 지원 (SSL/TTS)	HTTPS 통신도 지원 (SSL 인증서 연결 가능)
IP 기반 라우팅	지역, 클라이언트 IP 등 조건으로 라우팅 가능(ALB 기준)

● Health Check : 서버가 살아 있는지 죽었는지 자동으로 확인하는 기능

● Auto Scaling : 서버(EC2 인스턴스)를 자동으로 늘리고 줄여주는 기능

○ 접속자 많을 때 서버 부족하면 느려짐 → 자동으로 EC2 늘림

○ 접속자 적을 때 서버 낭비되면 → 자동으로 EC2 줄임

◁ 참고) Health Check와 Auto Scaling 비교

항목	상태 검사	오토스케일링
역할	죽은 서버 감지	살아있는 서버 수를 자동 조절
사용 위치	ELB, Route 53 상태 검사	Auto Scaling Group
결과	죽은 서버는 트래픽에서 제외	필요한 만큼 EC2 인스턴스 수 조절

◈ HTTP와 HTTPS

★ HTTP(Hypertext Transfer Protocol)

● 포트 번호 : 80

● 서버와 클라이언트 간에 주고 받는 데이터를 암호화하지 않고 통신하는 방식으로, 암호화가 되어 있지 않아 중간에 누군가 데 이터를 가로 챌 수 있음

● 브라우저 표시 : “보안 안 됨” 또는 그냥 표시됨

▶ HTTPS(HyperText Transfer Protocol Secure)

● 포트 번호 : 443

● 서버와 주고 받을 데이터를 암호화 함

● 클라이언트와 서버 간에 주고 받는 데이터를 암호화해서 통신하는 방식

● SSL/TLS 인증서 필요

♪ ELB 구성 요소

● 리스너

● ELB로 들어오는 요청을 어떻게 처리할지 결정하는 규칙을 관리

● 리스너는 특정 포트와 프로토콜을 사용하여 클라이언트의 요청을 기다리고, 해당 요청을 ELB에서 설정된 규칙에 따라 적 절한 대상 그룹으로 전달

● 리스너를 잘 못 설정할 경우 올바른 대상 그룹으로 전달하지 못할 수 있으므로 리스너 설정에 유의

● 대상 그룹

● ELB 가 수신한 트래픽을 전달할 서버들의 집합

● 고장 난 서버에게 의미 없이 요청을 전달하지 않기 위해 ELB는 대상 그룹에 포함된 EC2인스턴스에게 일정한 주기로 요청 을 보냄

● 요청을 보냈을 때 200번대 HTTP 상태 코드가 반환된다면 서버가 정상적으로 작동한다고 판단

● 200번 대 이외의 상태 코드가 반환된다면 서버에 이상이 있다고 판단하고 해당 EC2 인스턴스로 요청을 전달하지 않음

● 이렇게 상태를 확인하는 요청을 일정한 주기로 보내는 것을 상태 검사(helath check) 라고 함

● 대상 그룹을 만들 때 상태 검사를 할 경로와 포트를 지정

♣ 대상 그룹 만들기

● 인스턴스 만들기

● 대상 그룹은 한 번 만들면 변경 불가

● 트래픽 전달 방식 설정

○ ELB가 사용자로부터 받은 트래픽을 대상 그룹에게 전달하는 방식을 설정

○ 대상 그룹에 등록할 EC2 인스턴스는 IPv4의 주소를 가지고 있으며, 백엔드 서버는 80번 포트에서 실행되고, HTTP로 통신 하도록 구성되어 있으므로

○ 아래와 같이 설정

● 상태 검사

○ 대상에 일정한 주기로 전송할 상태 검사를 설정

○ HTTP, /health

● 위 처럼 설정하면 로드 밸런서가 대상 그룹의 EC2 인스턴스에 HTTP 프로토콜을 사용하여 GET/health 요청을 일정한 주기로 보냄

● 상태 검사를 하기 위해서는 설정한 경로에 맞는 상태 검사용 API를 구성해야 함

● 대상 등록

▣ ELB에서 로드 밸런서 생성

● 로드 밸런서는 사용한 만큼 요금 부과

● 리전 선택

● 로드 밸런서의 기본 구성

○ 로드 밸런서 이름만 입력하고 나머지는 기본으로 설정

● 네트워크 매핑

○ 로드 밸런서가 트래픽을 보낼 가용 영역을 선택

○ 가용 영역(Availability Zone) : 같은 리전에서 서로 다른 위치에 있는 데이터 센터를 의미하며, 한 데이터 센터에서 문제가 생 겨도 다른 가용 영역에서 계속 작동하므로 서비스를 중단 없이 운영할 수 있음

○ 실습에서만 모든 가용 영역으로 트래픽을 보내도록 설정

● 보안 그룹 생성

● HTTP , Anywhere-IPv4

● HTTPS, Anywhere-IPv4

● 작업하던 창의 보안 그룹으로 되돌아와

● 리스너 및 라우팅 설정

○ 로드 밸런서로 들어온 요청을 어떤 대상 그룹에 전달할 지 설정

○ 사용자가 HTTP를 활용하여 ELB의 80번 포트로 보낸 요청을 앞에서 선택한 대상 그룹으로 전달하겠다는 의미

■ HTTPS 적용

1. 1단계 : SSL/TLS 인증서 발급 받기

2. 2단계 : 로드 밸런서에 HTTPS 용 리스너 추가하기

3. 3단계 : HTTP에서 HTTPS로 리디렉션 설정

▣ SSL/TLS 인증서 발급 받기

● HTTPS를 적용하려면 가장 먼저 SSL/TLS 인증서 발급 받기

● 이 인증서는 웹사이트의 신뢰성을 검증하는 역할

● AWS는 ACM(AWS Certificate Manager)이라는 서비스를 활용해서 인증서를 발급 받을 수 있음

♨ ACM 콘솔 들어가기

● 검색 : Certificate Manager 서비스 클릭

● 리전 선택 및 확인

↓ 인증서 요청

● 퍼블릭 인증서 요청 화면에서 [완전히 정규화된 도메인 이름]에 SSL/TLS 인증서를 발급 받을 도메인 이름 작성

● 인증서 검증하기

● 요청한 인증서의 상태가 [검증 대기 중]이라고 표시되어 있음, 이는 인증서를 요청했다고 해서 바로 발급되지 않기 때문

● 해커가 아닌 실제 도메인 소유자가 인증서를 요청했는지 인증하는 절차가 필요

Route 53

springpark — Tue, 29 Jul 2025 00:43:41 +0900

● 도메인 주소를 발급하고 관리하는 서비스

● 즉, AWS에서 제공하는 DNS + 도메인 관리 서비스

● Route : 인터넷 트래픽 경로를 지정해 줌

● 53 : DNS는 기본적으로 포트 번호 53번을 사용

● 권한 있는 (authoritative) DNS 및 도메인 등록, 트래픽 라우팅 기능을 제공하는 highly available and scalabale DNS 웹 서비 스

♨ DNS(Domain Name System) 서비스

● 도메인 ↔ IP 주소로 변환

▣ Route 53의 주요 기능

● DNS 관리

○ Alias 레코드로 AWS 리소스(ELB, CloudFront, S3 정적 웹사이트 등) 연결 가능

● 도메인 등록

○ Route 53에서 도메인 직접 등록 가능

○ 별도로 등록한 도메인도 NS 레코드 변경으로 위임 가능

● 트래픽 라우팅 정책

○ 사용자 위치, 서버 상태에 따라 어디로 보낼지 결정

○ 단순(Simple), 지연 시간 기반(Latency), 지리적(Geolocation), 가중치(Weighted), 상태 기반(Failover) 등 다양한 정책 지원

○ Health Check(서버가 살아있는지 주기적으로 체)연계 가능

▣ 웹 서비스에 도메인을 적용하는 이유

여러가지 이유가 있지만 그 중에서도 보안 설정인 HTTPS 를 적용해야 하기 때문

일반적으로 IP 주소에는 HTTPS를 적용할 수 없음

▣ Route 53 사용하는 때

● EC2, S3, CloudFront 등 AWS 서비스와 도메인을 연결할 때

● 여러 지역에서 서버 운영할 때

● 웹사이트를 위해 도메인을 사고 연결할 때

▣ DNS 레코드

● 도메인 이름과 연결된 정보를 저장하는 단위

● 사용자가 도메인에 접속하면, DNS는 해당 도메인의 레코드를 조회하여 IP 주소 등 필요한 정보를 반환하고, 이를 통해 사용 자가 도메인만 입력해도 실제 서버로 연결할 수 있음

∴ 레코드 종류

● A 레코드 : 도메인 → IPv4 주소에 연결할 때 사용

● AAAA 레코드 : 도메인 → IPv6 주소에 연결할 때 사용

● CNAME 레코드 : 도메인 → 다른 도메인(즉, 도메인을 특정 도메인 주소에 연결할 때 사용)

● Alias 레코드 : AWS 리소스 전용. CNAME 처럼 동작하나 루트 도메인 지원

● 이외에도 다양

㉿ 실무에서는 Route 53만 고집하지는 않음,

설령 서비스를 전부 AWS로 구축했다고 하더라도 도메인 서비스는 외부 서비스를 사용하기도 함

■ Route 53에서 도메인 구입

㏇ Route 53을 글로벌 서비스 임

region을 지정하지 않음 ( IAM, CloudFront , Route 53)

1. Route 53 콘솔

2. 도메인 등록 화면

◎ DNS 관리

● 호스팅 영역 생성 버튼 → 특정 도메인(example.com 등)의 DNS 설정을 시작하는 버튼

◎ 가용성 모니터링

● 상태 검사 생성 → 웹사이트 정상 여부를 실시간 확인할 수 있는 기능

◎ 트래픽 관리

● 정책 생성 → 여러 서버나 리전에 분산할 때 쓰는 정책을 설정할 수 있음

◎ 도메인 등록

● 도메인 등록 버튼 → Route 53을 통해 도메인을 구매하거나 이전 가능

◎ 도메인 입력창

● 기존 도메인을 입력하고 Route 53으로 이전하거나 가용 여부 확인 가능

무료 계정에서는 도메인 등록이 되지 않음.

정식 요금제로 전환해야 함