1. 반응형 웹 vs 적응형 웹

반응형 웹

디바이스의 종류와 화면 크기에 실시간으로 반응하여 웹 페이지를 최적화된 화면 구성으로 보여주는 웹

적응형 웹

웹 페이지에서 감지된 기기를 기반으로 미리 만들어진 정적인 레이아웃을 불러오는 웹

반응형 vs 적응형

반응형은 "유동적으로 흐른다", 적응형은 "정해진 형태로 갈아끼운다".

적응형은 naver.com

2. viewport

브라우저 화면 상에서 보여지는 웹페이지의 직사각형 영역

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

뷰포트를 설정하지 않으면 모바일 프라우저는 해당 페이지를 pc전용 페이지라고 인식한다.

3. 절대단위 vs 상대단위

절대단위

화면의 크기와 상관없이 일정한 크기를 유지한다. -> px

상대단위

크기가 기준에 따라 유동적인 값을 가짐. -> %, em, rem, vw, vh

• em(부모 요소), rem(루트, 보통html): font-size 기준으로 크기나 길이를 지정하는 상대적 길이 단위

  <p style="font-size: 1em">1em</p>
  <p style="font-size: 2em">2em</p>
  <p style="font-size: 3em">3em</p>

• em은 margin, padding, width, height 부모가 아닌 자기 자신의 폰트 크기에 기반한다. 폰트 사이즈와 같이 커진다.
• rem은 기본 폰트 사이즈는 16px이다. em과 다르게 모두 root를 참조

4. 가변 그리드

• 그리드 레이아웃을 화면사이즈에 따라 자유롭게 변형이 가능한 형태로 제작하는 방법
• 부모의 크기에 따라 자식의 크기를 조절할 수있음. -> %로 조절 그리드 크기가 조절될 거임.

5. 미디어 쿼리

기기의 환경마다 다른 css를 적용시켜주는 문법 -> 조건문 느낌

@media screen and(max-width: 1023px) and (min-width: 768px)
@media (max-width:1023px)
@media all and(min-width: 768px)

all이나 screen 많이 사용함

https://platform.openai.com/home

로그인 → 오른쪽 상단 프로필 클릭 → "API keys" 클릭 → "Create new secret key" 클릭 → 키 복사 (sk-... 로 시작하는 문자열)

.env에 붙여넣기

sk로 시작

2. 주의사항

1. API키는 유료임 (사용량만큼 과금됨)

2. Gemini

https://aistudio.google.com/apps

왼쪽 메뉴에서 "Get API key" 클릭 "Create API key" 클릭 → 복사

.env

API 키

프로젝트 번호

프로젝트 번호

주의사항

무료 티어는 분당 5~15회, 하루 최대 1,000회 요청 제한

사용량

사용량 가서 얼마나 사용했는지 볼 수 있음.

• 도커 컨테이너에서 데이터를 영속적으로 저장하기 위한 방법.
• 볼륨: 컨테이너 자체의 저장 공간을 사용하지 않고, 호스트 자체의 저장 공간을 공유해서 사용하는 형태이다.

사용자
  ↓
Nginx (80, 443)
  ↓
Spring Boot (9001)

사용자가 요청한 것을 어느 서버로 보낼지 결정하는 것

Nginx → blue 서버
     → green 서버

1.1 docker pull nginx

docker pull nginx

docker pull nginx:latest

이거랑 같음.

1.2 nginx 실행

docker run --name webserver -d -p 80:80 nginx

1.3 nginx 삭제

중단된 컨테이너에서 사용하고 있는 image 삭제하는 방법

docker image rm -f 705

컨테이너에서 사용하고 있지 않는 이미지 삭제

docker image rm $(docker images -q)

2. Reverse Proxy

• Proxy: 인터넷 접속을 할 때 보안상의 문제로 직접 통신을 주고받을 수 없을 때, 그 사이의 중계기로서 대리로 통신을 수행하는 기능

  사용자 → Nginx → Spring Boot → Nginx → 사용자

3. 로드 밸런싱

Nginx → 서버1
     → 서버2

트래픽 북산

4. HTTPS(SSL처리)

https:// → Nginx → 내부 서버(http)

Spring은 http만 돌리고, Nginx가 https 처리

5. 포그라운드 / 백그라운드

• 포그라운드: 내가 실행시킨 프로그램의 내용이 화면에서 실행되고 출력되는 상태
• 백그라운드: 내가 실행시킨 프로그램이 컴퓨터 내부적으로 실행되는 상태

이미지는 레시피, 컨테이너는 요리하는 것이다. 이미지를 실행하여 만든 것이 컨테이너 이다.

만들어야 할 것

1. Dockerfile -> 이미지 생성
2. docker-compose.yml -> 실행

1.1 SQL, ORM, SQLAlchemy

1.2 SQL vs ORM 차이

1.3 한 줄 정리

• SQL: 데이터베이스를 직접 다루는 방식
• ORM: 객체를 통해 간접적으로 다루는 방식
• SQLAlchemy: Python에서 두 방식을 모두 지원하는 도구

1.4 SQLAlchemy

SQLAlchemy는 Python에서 데이터베이스를 다루기 위한 라이브러리이다.
데이터베이스 연결, SQL 실행, ORM 기능까지 모두 제공한다.

사용 하는 이유

• 데이터베이스 연결을 쉽게 관리할 수 있다
• SQL을 직접 쓰거나 ORM을 선택해서 사용할 수 있다
• Python 코드 기반으로 DB를 다룰 수 있어 유지보수가 편하다

2. DB 설치

pip install flask flask_sqlalchemy pymysql

3. SQLAlchemy 기본 문법

3.1 DB 연결

from sqlalchemy import create_engine
engine = create_engine("mysql+pymysql://root:0000@localhost:3306/flask_db")

3.2 base 생성

from sqlalchemy.orm import declarative_base
Base = declarative_base()

3.3 모델 정의

• 테이블 = 클래스

  Base.metadata.create_all(engine)

실행하면 이렇게 나온다.

• table.py

  from sqlalchemy import Column, Integer, String, create_engine
  from sqlalchemy.orm import declarative_base
  

Base = declarative_base() engine = create_engine("mysql+pymysql://root:0000@localhost:3306/flask_db")

class User(Base): tablename = "user"

id = Column(Integer, primary_key=True)
name = Column(String(50))
age = Column(Integer)

Base.metadata.create_all(engine)

## 3.4 세션 생성

DB 작업을 실제로 실행하는 통로이다.

- engine: 연결 준비
- session: 실제 작업 실행

from sqlalchemy.orm import sessionmaker Session = sessionmaker(bind=engine) session = Session()

## 3.5 database crud

from sqlalchemy import create_engine, Column, Integer, String from sqlalchemy.orm import declarative_base, sessionmaker

engine = create_engine("mysql+pymysql://root:0000@localhost:3306/flask_db") Base = declarative_base() class User(Base): tablename = "user"

id = Column(Integer, primary_key=True)
name = Column(String(50))
age = Column(Integer)

테이블 생성

Base.metadata.create_all(engine)

세션 생성

Session = sessionmaker(bind=engine) session = Session()

Create

user = User(name="짱구", age=20) session.add(user) session.commit()

Read

users = session.query(User).all()

for u in users: print(u.name)

조건 조회

user = session.query(User).filter(User.name == "짱구").first()

Update

if user: user.name="수정된 이름" session.commit()

Delete

if user: session.delete(user) session.commit()

세션 종료

session.close()

```

commit을 해야 실제로 반영이 된다.

from flask import Flask
app = Flask(__name__)

@app.route("/api/hello")
def hello():
    return {
        "message": "Hello, Flask!",
        "status": "success"
    }

if __name__ == "__main__":
    app.run(debug=True)

• Json 또한 key, value 형식이다.

하지만 Flask 공식 문서에서는 jsonify를 권장한다.

# 추가해주기
from flask import Flask, jsonify

# jsonify 사용하는 방법
def hello():
    return jsonify({
    "message": "success"
})

한글로 성공 입력시 아스키로 변환되어 나타난다.

한국어로 그래도 나타내는 방법

app.json.ensure_ascii = False

app = Flask(name) 여기에 붙여준다.

2. swagger 문서 작성하기

pip install flasgger

flasgger은 swagger앱이다.

from flask import Flask, jsonify
from flasgger import Swagger

app = Flask(__name__)
app.json.ensure_ascii = False

Swagger(app)

@app.route("/api/hello")
def hello():
    """
    간단한 Hello API
    ---
    responses:
      200:
        description: 성공 메시지 반환
        examples:
          application/json:
            message: 성공
    """

    return jsonify({
    "message": "성공"
})

if __name__ == "__main__":
    app.run(debug=True)

block은 템플릿 상속에서 특정 영역을 채우기 위한 공간이다. 즉, 공통 레이아웃(base.html) 만들어 두고 페이지마다 바뀌는 부분만 block으로 채워 넣는 방식이다.

사용 하는 방법

{% block title %}{% endblock %}
{% block content %}{% endblock %}
{% block style %}{% endblock %}
{% block script %}{% endblock %}

실습

• templates/base.html

  <body>
    <h1>🔥 공통 header</h1>
  
    <div>
        {% block content %}
        기본 내용
        {% endblock %}
    </div>
  
    <h1>🔥 공통 footer</h1>
  </body>

• templates/home.html

  {% extends 'base.html' %}
  

{% block content %}

🏠 홈 화면

환영합니다! 이 페이지는 메인 페이지입니다.

• 공지사항 확인하기
• 최근 게시글 보기
• 마이페이지 이동

로그인 회원가입 {% endblock %}

- result.html

{% extends 'base.html' %}

{% block content %}

📊 결과 화면

입력한 데이터에 대한 결과입니다.

평균 점수: 88.5

다시 홈으로 {% endblock %}

- main.py

from flask import Flask, render_template

app = Flask(name)

@app.route('/') def base(): return render_template('base.html')

홈 페이지

@app.route('/home') def home(): return render_template('home.html')

결과 페이지

@app.route('/result') def result(): return render_template('result.html')

if name == 'main': app.run(debug=True)

# 2. 코드 설명
### base.html

전체 페이지의 공통 레이아웃을 담당한다. **거의 변하지 않는** 정적인 구조이다. 부모 html이므로, extends 'base.html'을 통하여 상속한다. 레이아웃 상속이다.

### block의 의미

{% block content %}

![](https://velog.velcdn.com/images/cloud_kbm/post/2c097472-6b1e-49ca-bef0-12e683f276a2/image.png)


이 부분은 나중에 **다른 템플릿**이 바꿀 수 있는 영역이다.
즉, **동적**으로 내용이 들어갈 자리(빈칸)이다.

block은 더어쓰기 가능한 영역이다.

### 기본 내용은 쓰는 이유는?

{% block content %} 기본 내용 {% endblock %}

- 자식이 block을 안 쓰면 -> 기본 내용이 출력됨
- 자식이 block을 쓰면(/home 또는 /result) -> 기본 내용 대신 그 내용으로 교체됨
- 기본 내용 = fallback(기본값)

![](https://velog.velcdn.com/images/cloud_kbm/post/72ce9c5e-8756-4320-a8db-5379bde9eeea/image.png)

![](https://velog.velcdn.com/images/cloud_kbm/post/6f767703-872a-4307-8279-f07f3bc34598/image.png)


# 3. request.args.getlist

- main.py

@app.route('/hobby', methods=['GET']) def hobby(): hobbies = request.args.getlist('hobby') return render_template('hobby.html', hobbies=hobbies)

- request.args → GET 요청의 쿼리스트링 데이터를 가져옴
- getlist('hobby') → 같은 이름의 파라미터를 여러 개 리스트로 가져옴


- hobby.html

{% extends 'base.html' %} {% block content %}

취미 선택

<button type="submit">전송</button>

선택한 취미

{% for h in hobbies %}
• {{ loop.index }}. {{ h }}
{% endfor %}

{% endblock %}

```

• form 태그에 있는 메소드 GET을 통하여 게임, 운동, 독서, 코딩이 List형태로 나열된다.
• name에 있는 부분이 key가 된다.

hobby=게임&hobby=운동 이런식으로 들어옴.

웹을 개발하다 보면 템플릿 엔진 이라는 개념을 자주 접하게 된다.

1.1 템플릿 엔진이란?

HTML에 데이터를 넣어 동적으로 페이지를 생성해주는 도구이다. 기존의 HTML은 정적인 구조를 가진다.

<h1>안녕하세요 kim님</h1>

이름이 고정되어 있어 사용자마다 다른 값을 출력할 수 없다. 이때, Flask에서 템플릿 엔진인 Jinja2를 사용한다.

1.2 Jinja2

https://blog.naver.com/dldlstn6695/224204255318

• app2.py

  from flask import Flask, render_template
  

app = Flask(name)

@app.route('hello/') def hello(name): return render_template('index.html', username=name)

- templates/idex.html

안녕하세요 {{ username }}님

출력완료시, 서버 로그에도 뜬다.

코드 설명

return render_template('index.html', username=name)

index.html에 있는 username에 name값을 넣어서 반환한다.

2. 조건문

• index.html

  {% if username == "kim" %}
    <h3>관리자입니다.</h3>
  {% else %}
    <h3>관리자가 아닙니다.</h3>
  {% endif %}

• 조건문 작성할 때는 if, else, endif로 끝맺음을 한다.

3. 반복문

• index.html

  {% for user in users %}
  <p>{{ user }}</p>
  {% endfor %}

• app2.py

  @app.route('/users')
  def users():
    user_list = ["kim", "lee", "park"]
    return render_template('index.html', users=user_list)

• 반복문 작성할 때는 for, endfor로 끝맺음을 한다.

4. 실습

브라우저 접속 (/) ↓ form.html (입력 화면) ↓ 이름 입력 후 전송 ↓ POST /result ↓ Flask가 데이터 받음 ↓ result.html로 전달 ↓ 화면 출력

• 코드 구조

chap1/ ├── app.py ├── static/ │ └── style.css └── templates/ ├── form.html └── result.html

• app.py

  from flask import Flask, render_template, request
  app = Flask(__name__)
  

@app.route("/") def home(): return render_template("form.html")

@app.route('/result', methods = ['POST']) def result(): name = request.form['username'] users = ["kim", "lee", "park", name]

return render_template(
    'result.html',
    username = name,
    users=users
)

if name == 'main': app.run(debug=True)

- form.html

이름 입력

관리자 입니다.

{{username}}님. 환영합니다.

<h3>유저 목록</h3>
{% for user in users %}
    <p>{{ loop.index }}. {{ user }}</p>
{% endfor %}

• style.css

  body {
    font-family: Arial;
    text-align: center;
  }
  

h1 { color: blue; }

h2 { color: green; }

p { font-size: 18px; }

```

실행하면 admin이면 관리자입니다 하고 유저목록 나오고, admin이 아니면 유저입니다 하고 유저목록 나온다.

from flask import Flask, app

app = Flask(__name__)
@app.route('/user/<name>')
def user(name):
    return f"Hello {name}"

@app.route("/user/<nickname>")
def user(nickname):
    return f"안녕하세요, {nickname}님. 소환사에 협곡에 오신것을 환영합니다."

if __name__ == '__main__':
     app.run(debug=True)

실행

2. 코드 설명

return f"Hello {name}

• 여기서 f는 f-string(문자열 포맷팅)이다.
• f는 float가 아닌, format의 문자열을 의미한다.

• format은 문자열에 값을 넣어서 원하는 형태로 만드는 것을 의미한다.

3. format 문법

name = "kim"
age = 25

print("이름: {}, 나이: {}".format(name, age))

출력 결과

이름: kim, 나이: 25

1.1 Routing(라우팅)

Routing: 요청을 어디로 보낼지 결정하는 (규칙)이다.

@app.route('/user')
def user():
    return "User Page"

-> 라우팅 부분은 @app.route("/")이다. /user라는 URL로 요청이 들어오면 user 함수를 실행한다.

즉, 라우팅은 URL과 실행될 코드(함수)를 연결하는 설정이다!

1.2 Router(라우터)

Router: Routing 규칙을 실제로 적용하여 요청을 처리하는 주체이다.

app = Flask(__name__)

-> app = Flask(name) 네트워크의 라우터랑은 다른 개념이다.

1.3 요청 처리 흐름

1. Client가 특정 URL로 요청
2. Router가 요청을 받아서
3. Routing 규칙 확인하고
4. 매칭되는 함수 실행한다.
5. 결과를 클라이언트에게 반환

Flask/
│
├── venv/              ← 가상환경 (건들기 x)
│
└── myapp/             ← 여기서 작업
    ├── app.py
    ├── templates/
    └── static/

코드 작성하기

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello Flask!'

@app.route("/home")
def home():
    return "홈페이지"

if __name__ == '__main__':
    print(__name__)
    app.run(debug=True)

실행: python app.py

정상작동시, Running on http://127.0.0.1:5000이 뜰 것이다. 들어가면 Hello Flask가 뜬다. URL에 /home 입력시, 홈페이지라는 문구가 페이지에 나타난다.

2. 코드 설명

• app = Flask(name) Flask 객체를 하나 만들고, app이라는 변수에 넣는다.

• name = 이 파일이 어떻게 실행됐는지를 알려주는 변수

  print(__name__)

출력: main

• @app.route('/') URL주소와 함수 연결.

• @란? 데코레이터. 바로 아래 함수는 / 주소로 들어왔을 때 실행하라는 의미이다.

• app.run(debug=True) 실행하는데, 디버그 보드 키고 실행하기

Flask는 Python으로 웹 애플리케이션을 만들 수 있게 해주는 아주 가벼운 웹 프레임워크다.

1. 웹 서버 띄우기
2. URL 요청을 받고
3. 그 요청에 맞는 응답을 보내고
4. HTML 페이지를 보여주거나 / JSON 데이터를 반환

프레임워크란?

프레임워크는 개발할 때 기본 뼈대를 제공해주는 도구라고 생각하면 된다.

예를 들어 웹 서버를 직접 만든다고 하면: 요청 받는 기능, 응답 보내는 기능, URL 구분하는 기능, HTML 렌더링 등 직접 작성해야 한다.

Flask는 이런 기본 뼈대를 제공해 준다. 이로써, “무슨 기능을 만들지”에 집중할 수 있다.

2. Flask는 언제 쓸까?

1. 웹 입문 처음 웹 개발 배울 때 구조가 단순해서 이해하기 좋다.

2. 간단한 웹 서비스 작은 프로젝트, 과제, 실습, 프로토타입 만들 때 편하다.

3. REST API 서버 React, Vue, 앱 프론트엔드와 연결할 백엔드 API를 만들 때 좋다.

4. AI / 데이터 프로젝트 백엔드 Python 기반이라서 머신러닝, 데이터 분석 코드와 붙이기 쉽다.

3. Flask vs Spring boot

4. 여러 프레임워크들

# venv 폴더 생성
python -m venv venv

# venv 폴더 실행하기
venv\Scripts\activate

-> 완료시 (venv)

# flask 모듈 설치하기
pip install flask

venv란?

프로젝트 전용 파이썬 환경이다. 가상환경

내 컴퓨터
 ├── Python (기본)
 ├── 프로젝트A (venv)
 │     └── Flask 2.0
 ├── 프로젝트B (venv)
       └── Flask 3.0

1. 라벨링

• 추가
• 라벨 색상 정하기

2. filter

• 보낸 사람: github.com
• 필터 만들기
• 받은편지함 건너뛰기, 일치하는 대화 필터 적용, 라벨 선택

3. 별표 맨 위 표시

• 설정 -> 받은편지함 유형 -> 별표 맨 위에 표시하기

4. OJT (on-the-job-training)

OTJ란 이메일을 작성할 때 본문 아래에 이름, 직급, 회사 이름, 회사 주소, 연락처, 이메일 주소 등의 정보가 자동으로 추가되는 기능이다.

• 설정 -> 모든 설정 보기 -> 기본설정
• 아래로 내려서 서명란에 +새로 만들기 클릭
• email, tel
• 편지쓰기 -> 오른쪽에 펜 모양으로 서명 클릭

5. 페이지 100개로 늘리기

설정 -> 모든 설정 보기 -> 기본 설정 -> 페이지 개수 늘리기

6. 대화 형식 사용 중지

설정 -> 모든 설정 보기 -> 기본 설정 -> 대화 형식 사용 중지

7. 자주 사용 or 반복되는 답장

템플릿으로 저장하기.

• 설정 -> 모든 설정 보기 -> 고급 -> 템플릿 사용 허용
• 메일 작성하기 -> 더 보기 -> 템플릿 -> 저장하기.
• 템플릿 사용하기

8. 메시지 전송 취소 시간 20~30초 늘리기

1. gmail은 보내기 누르고 나서 곧바로 실행 취소 누르면 전송이 취소된다.
2. 설정 -> 모든 설정 보기 -> 기본 설정 -> 전송 취소가 가능한 기간 늘리기
3. 꼭 알아두기!!!!

   해당 편지함에서 취소 해야한다.

예를 들어서 받은편지함 -> 보낸 편지함으로 옮기면 안됨.

9. 예약 기능

• 내용 다 작성하고 -> 보내기 오른쪽 버튼 눌러서 하기.

• 수정하고 싶으면 예약됨 항목으로 가서 수정하기.
• 취소하고 싶으면 예약됨 항목으로 가서 취소하기.

10. 비밀모드

• 이메일 만료 기간 설정
• 비밀번호 입력
• 본분 내용 복사x
• 인쇄, 내려받기 안됨

내용 작성하고 오른쪽 아래에 자물쇠 설정하기

주의! 보내는 사람의 전화번호로 해야됨.

1. 동기화

크롬 -> 설정 -> 나의 Google의 관계 -> 동기화 관리 -> 검색 및 탐색 기능 개선

2. 북마크

나의 Google관계에서 북마크 가져올 수 있음.

3. 시크릿 모드

ctrl + shift + N

4. 검색엔진

• ""
• and, or
• filetype:docx
• site
• intitle (제목으로 찾기)
• 2015..2020

5. 주소창 바로 가기

URL에 가서 naver.com / youtube.com -> tab

6. google SaaS

• drive.google.com
• photos.google.com
• gmail.google.com

1️⃣ React란?

🔹 React의 뜻

React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다.
특히 SPA(Single Page Application) 개발에 많이 사용된다.

react는 화면을 여러 단위로 쪼개고 재사용하는 방식이다.

✔ 웹 개발을 쉽게 할 수 있도록 도와주는 JavaScript 라이브러리

💡 프레임워크 vs 라이브러리

• 프레임워크: 개발을 위한 기본 틀
• 라이브러리: 개발에 필요한 도구 또는 기능들의 집합

👉 React는 프레임워크가 아니라 UI 개발에 집중된 라이브러리이다.

그 전에는 서버에서 A 리소스 다운로드 -> B 리소스 다운로드 했었음.

SPA로 서버에서 처음에 이미 A,B라는 다운로드 받고 B로 가면 새로고침이 아닌 js로 인해 새로운 페이지로 바뀌는거임.

🔹 React의 장점

1. 트렌드성

• 대중적으로 많이 사용됨
• 기업 수요가 많음
• 방대한 생태계 보유

2. 편리성

• 화면을 여러 단위(컴포넌트)로 나누어 관리 가능
• 재사용이 가능하여 유지보수가 쉬움
• 다양한 외부 라이브러리 활용 가능

🔹 React가 트렌드화된 이유

• 전통적인 웹 서비스의 문제점을 해결
• SPA 방식(브라우저에서 화면을 그리는 방식) 도입
• 빠른 렌더링과 부드러운 사용자 경험 제공

2️⃣ React의 특징

🔹 1. 컴포넌트 기반 설계

컴포넌트는 웹 페이지를 구성하는 하나의 요소이다.

• 의미 단위로 화면을 분리
• 재사용 가능
• 유지보수성 증가

👉 화면을 조각처럼 나누어 조립하는 방식

🔹 2. 가상 DOM (Virtual DOM)

React는 실제 DOM의 복사본인 가상 DOM을 사용한다.

• SPA에서 동적인 변화를 효율적으로 관리
• DOM을 직접 조작하면서 생기는 비효율 해결
• 변경된 부분만 비교(diff) 후 업데이트

👉 성능 최적화에 매우 중요한 개념

🔹 3. 그 외 특징

• CSR(Client Side Rendering) 방식 사용
• 웹뿐만 아니라 앱 개발(React Native)도 가능

CloudLog의 메뉴 구조는 단순한 화면 나열이 아니라,
“로그를 수집 → 분석 → 알림 → 운영 → 인프라 확인”이라는
운영 흐름을 기준으로 나눈 구조이다.

1. Dashboard

용도
전체 시스템 상태를 한눈에 확인하는 화면이다.

주요 내용

• 오늘 전체 로그 수
• 에러 비율
• P95 응답 시간
• 현재 활성 알림 수
• 로그 트렌드 그래프

운영자가 접속했을 때 “지금 문제가 있는가?”를 가장 먼저 확인하는 화면이다.

2. Log Explorer

용도
개별 로그를 직접 검색하고 분석하는 화면이다.

주요 기능

• error 로그 필터링
• 특정 서비스 로그 조회
• 특정 시간대 검색
• StackTrace 확인

장애 발생 시 가장 많이 사용하는 핵심 분석 화면이다.

3. Analytics

용도
로그를 통계적으로 분석하는 화면이다.

주요 내용

• 에러 유형 분포
• 평균 응답 시간
• 시간대별 활동량
• 가장 많이 발생한 이벤트 유형

단기 장애 분석이 아니라, 장기적인 패턴과 추세를 분석하기 위한 화면이다.

4. Alerts

용도
조건 기반 알림을 설정하는 기능이다.

예시

• 5분 동안 error 50개 이상 발생 시 알림
• 응답 시간 2초 이상일 경우 알림

운영 자동화를 위한 핵심 기능이다.

5. Infrastructure

용도
서버 및 인프라 상태를 모니터링하는 화면이다.

주요 내용

• EC2 CPU 사용량
• 메모리 사용량
• 네트워크 트래픽
• 서버 상태

애플리케이션 문제가 아닌, 인프라 문제인지 구분하기 위한 화면이다.

6. Integrations

용도
외부 서비스와 연동하는 기능이다.

예시

• AWS CloudWatch
• Slack 알림
• Webhook
• MongoDB 연결

로그 수집 경로 및 알림 채널을 확장하기 위한 기능이다.

7. Saved Views

용도
자주 사용하는 로그 검색 조건을 저장하는 기능이다.

예시

• "error AND service:payment"
• "last 1h auth service"

반복적인 검색을 줄이고 분석 효율을 높이기 위한 기능이다.

8. Users & Roles

용도
팀원 및 권한을 관리하는 기능이다.

주요 내용

• Admin / Editor / Viewer 권한 구분
• 사용자 초대
• 접근 권한 관리

SaaS 형태의 서비스라면 필수적인 관리 기능이다.

9. Settings

용도
플랫폼 전반 설정을 관리하는 기능이다.

주요 내용

• 로그 보관 기간 설정
• 인덱스 전략 관리
• API 키 발급
• 조직 정보 관리

시스템 환경을 제어하기 위한 기본 설정 영역이다.

정리

CloudLog의 메뉴 구조는 단순한 화면 분리가 아니라,
운영 관점에서 로그를 수집하고 분석하며 대응하는 전체 흐름을 반영한 구조이다.

1. 프로젝트 개요

CloudLog는 이벤트 기반 로그를 수집하고 분석하는 클라우드 지향 플랫폼입니다.

단순 CRUD 서비스가 아니라,
운영 환경에서 발생하는 로그를 수집하고 분석하는 구조를 직접 설계해보고자 시작한 프로젝트입니다.

이 프로젝트의 목표는 기능 구현이 아니라,
클라우드 환경에서 로그를 수집·저장·분석·운영해보는 경험을 쌓는 것이었습니다.

2. 프로젝트를 시작한 이유

클라우드 엔지니어는 단순히 서버를 배포하는 역할이 아니라,
운영 중 발생하는 로그를 기반으로 시스템 상태를 파악하고 장애를 분석하는 역할이라고 생각했습니다.

그래서 다음을 직접 경험해보고 싶었습니다:

• 이벤트 기반 데이터 설계
• 로그 수집 및 분석 구조 설계
• NoSQL 데이터 모델링
• 마이크로서비스 아키텍처 구성
• AWS 환경 실제 배포

기존 CRUD 프로젝트와 다르게,
“운영 도구”를 만들어보고자 했습니다.

3. 전체 아키텍처

Client ↓ Spring Boot (로그 수집 API) ↓ MongoDB (이벤트 저장) ↓ FastAPI (로그 분석) ↓ Dashboard (시각화)

역할 분리

🔹 Spring Boot

• 이벤트 로그 수집 API
• 로그 조회 API
• 사용자 인증 처리

🔹 MongoDB

• 로그를 Document 형태로 저장
• Aggregation 기반 집계 처리
• TTL Index를 통한 로그 보관 정책 실험

🔹 FastAPI

• 로그 통계 분석
• 에러 비율 계산
• 시간대별 활동 분석
• 분석 결과 API 제공

4. MongoDB를 선택한 이유

로그 데이터는 다음과 같은 특성이 있습니다:

• 비정형 구조
• 필드 변경 가능성 높음
• 이벤트 중심 저장 방식
• 집계 연산 빈번

이러한 특성 때문에 RDB보다 Document 기반 구조가 더 적합하다고 판단했습니다.

또한 다음을 실험해보고 싶었습니다:

• Compound Index 설계
• TTL Index 활용
• Aggregation Pipeline 최적화
• 대량 로그 집계 성능 테스트

5. 주요 기능

1️⃣ Dashboard

• 하루 전체 로그 수
• 에러 비율
• 시간대별 로그 그래프
• 최근 에러 로그 표시

2️⃣ Log Explorer

• 로그 필터링 (Level / Service / Date)
• 검색 기능
• 상세 로그 조회
• StackTrace 확인

3️⃣ Analytics

• 에러 유형 분포
• 평균 응답 시간
• 시간대별 활동 분석
• 가장 많이 발생한 이벤트 유형

4️⃣ Infrastructure Monitor

• EC2 CPU 사용량
• 메모리 사용량
• 네트워크 트래픽
• CloudWatch 기반 모니터링

6. AWS 인프라 구성

• EC2 인스턴스에 Docker 기반 배포
• Nginx Reverse Proxy 구성
• MongoDB 컨테이너 운영
• CloudWatch 연동
• Security Group 및 포트 정책 구성

단순 로컬 프로젝트가 아니라,
실제 클라우드 환경에서 동작하도록 설계했습니다.

7. 기술적으로 고민했던 부분

• 로그 인덱스 전략 설계
• 대량 데이터 집계 시 성능 문제
• MongoDB Aggregation 최적화
• Docker 네트워크 충돌 이슈
• CORS 설정 문제

단순 구현이 아니라,
“왜 이렇게 설계했는지”를 설명할 수 있도록 고민했습니다.

8. 프로젝트를 통해 얻은 것

• 이벤트 기반 사고방식
• NoSQL 데이터 모델링 경험
• 마이크로서비스 구조 이해
• AWS 배포 경험
• 운영 관점에서의 시스템 분석

CloudLog는 단순 기능 구현 프로젝트가 아니라,
클라우드 엔지니어로 성장하기 위한 실험이었습니다.

9. 앞으로의 계획

• 대량 로그 적재 후 성능 테스트
• Auto Scaling 실험
• Multi-AZ 구성 실험
• CI/CD 자동 배포 구성
• 장애 시나리오 테스트

인프라 중심으로 계속 확장해볼 계획입니다.