~시연이의 우주~

AI 워크로드는 전력을 '다르게' 먹는다 - CPU·GPU 전력 비선형성 측정 시스템 Track A 구현기

us2xince — Mon, 25 May 2026 22:38:28 +0900

Preview) 들어가며 -- 왜 이게 문제일까?

ChatGPT 하나 쓰는 데 구글 검색 10번치 전력이 든다.

이런 말 들어본 적 있는가?

AI 서비스가 폭발적으로 성장하면서 데이터센터 전력 소비가 전 세계 에너지 이슈로 떠올랐다.

그런데 기존의 에너지 관리 모델들은 하나같이 같은 가정을 깔고 있다.

CPU 사용률이 두 배가 되면 전력도 두 배가 된다.

정말 그럴까?

우리 팀은 이 가정이 틀렸다는 것을 실험으로 증명하고, 비선형적 전력 소비 패턴을 정밀하게 측정하는 시스템을 구현했다.

이 글에서는 Track A가 무엇을 하는 시스템인지, 어떻게 만들었는지, 그리고 어떤 결과를 얻었는지를 공유한다.

전체 소스코드:

https://github.com/Team37-OptimusPrime/TrackA

GitHub - Team37-OptimusPrime/TrackA: 전통적인워크로드와 AI워크로드 전력소비 패턴 비교

전통적인워크로드와 AI워크로드 전력소비 패턴 비교. Contribute to Team37-OptimusPrime/TrackA development by creating an account on GitHub.

github.com

이 글은 캡스톤디자인과창업프로젝트B (그로쓰) 37팀 Optimus Prime 팀의 Track A에 해당하며, 프로젝트 전체는 컴퓨터 자원 이용률과 에너지 소비량 간의 관계를 다각도로 분석하는 것을 목표로 한다.

1. Track A란?

Track A의 정식 명칭은 "컴퓨터 자원 이용률과 에너지 소비량 사이의 비선형성 분석"이다.

한 줄로 요약하면: 전통적인 워크로드 (정렬, 압축 등)와 AI 워크로드 (행렬 연산, 추론 등)가 CPU,GPU를 사용하는 방식이 다르고, 그 결과 전력 소비 곡선의 모양도 완전히 다르다는 것을 측정하고, 시각화하는 자동화 실험 시스템이다.

2. 시스템 구조 한눈에 보기

Track A는 4개의 핵심 모듈로 구성된다. 전체 흐름은 다음과 같다.

[R1: 환경 자동 검증]
[R2: 실시간 메트릭 수집] <--- 실험 실행 중 지속 동작
[R3: 실험 오케스트레이션] <--- 워크로드 실행 제어
[R4: 데이터 분석 및 시각화]

언어는 대부분 Python을 사용했으며 아주 일부 (전체 코드의 0.9%)로 Shell script를 사용했다.

코드는 scripts/ 와 workloads/ 디렉토리에 위치한다. 결과 그래프는 figures_v4/, 원시 데이터는 results_v4/에 저장된다.

3. 모듈 상세 설명

R1 -- 실험 전 환경 자동 검증

실험을 싲가하기 전에 환경이 올바르게 갖춰졌는지를 자동으로 점검하는 모듈이다.

잘못된 환경에서 수십 분짜리 실험을 돌리고 나서야 결과가 오염됐다는 것을 아는 사태를 막기 위해 설계됐다.

검증 항목은 세 가지다:

워크로드 스크립트 파일 존재 여부 및 Python 의존성 확인
- check_workload_scripts()
- check_python_libs()
- check_binaries()
CPU와 GPU의 통제 조건 검증 (예: frequency scaling 설정)
- check_cpu_control()
- check_gpu_control()
perf, nvidia-smi 등 계측 도구 가용성 확인
- check_load_tools()
- check_metric_tools()

check_workload_scripts

check_python_libs()

check_cpu_control()

check_gpu_control()

check_metric_tools()

‼️Note: R1이 실패하면 이후 모듈은 실행되지 않는다. 실험의 재현성을 높이기 위한 안전장치다.

R2 -- 실시간 메트릭 수집

워크로드가 실행되는 동안 CPU와 GPU 전력,사용률을 동시에, 지속적으로 수집한다.

수집 메트릭:

CPU 전력: perf 또는 RAPL (Running Average Power Limit) 인터페이스
GPU 전력: nvidia-smi --query-gpu=power.draw
CPU 사용률: /proc/stat 파싱
GPU SM 점유율: nvidia-smi --query-gpu=utilization.gpu
메모리 대역폭: Memory bandwidth utilization

# scripts/collector.py (핵심 로직 발췌)
import subprocess, time, csv

SAMPLE_INTERVAL = 0.5  # 초 단위 샘플링

def get_gpu_metrics():
    out = subprocess.check_output([
        "nvidia-smi",
        "--query-gpu=power.draw,utilization.gpu,utilization.memory",
        "--format=csv,noheader,nounits"
    ]).decode().strip()
    power, util_gpu, util_mem = out.split(", ")
    return float(power), float(util_gpu), float(util_mem)

def get_cpu_utilization():
    with open("/proc/stat") as f:
        line = f.readline()
    fields = list(map(int, line.split()[1:]))
    idle = fields[3]
    total = sum(fields)
    return 100.0 * (1.0 - idle / total)

def collect(duration_sec, output_path):
    with open(output_path, "w", newline="") as f:
        writer = csv.writer(f)
        writer.writerow(["timestamp", "cpu_util", "gpu_power", "gpu_util", "gpu_mem_util"])
        start = time.time()
        while time.time() - start < duration_sec:
            ts = time.time() - start
            cpu = get_cpu_utilization()
            gpu_pwr, gpu_util, gpu_mem = get_gpu_metrics()
            writer.writerow([ts, cpu, gpu_pwr, gpu_util, gpu_mem])
            time.sleep(SAMPLE_INTERVAL)

R3 -- 실험 오케스트레이션

Track A의 심장부다. 각 부하율 (utilization level) 별로 워크로드를 자동 실행하고, 실험 간 간섭을 최소화한다.

실험 사이클:

Warm-up (부하 측정 제외, 하드웨어 안정화)
->부하율별 워크로드 실행 (R2 수집 동시 진행)
->Cool-down (온도 기반 idle 진입 판정)
->다음 부하율로 이동

‼️핵심 제어 기법 두가지

1. CPU 워크로드: taskset으로 코어 수 제한
CPU 부하율을 단계적으로 올리기 위해 활성 코어 수를 조절한다.

전체 16코어 머신에서 2,4,8,16 코어 순으로 실행하면 약 12.5%, 25%, 50%, 100% 부하를 만들 수 있다.

2.GPU 워크로드: batch size로 SM 점유율 제어

GPU는 batch size를 키울수록 더 많은 SM(Streaming Multiprocessor)이 활성화된다.

GEMM(General Matrix Multiplication) 연산의 행렬 크기를 단계적으로 조절하여 GPU 점유율을 제어한다.

‼️온도 기반 cool-down 판정

R4 -- 데이터 분석 및 시각화

수집된 데이터를 바탕으로 총 6종의 그래프를 자동 생성한다.

핵심 분석 코드:

# scripts/analyze.py (핵심 로직 발췌)
import pandas as pd
import matplotlib.pyplot as plt
from scipy.optimize import curve_fit
import numpy as np

def nonlinear_model(x, a, b, c):
    """비선형 전력 모델: P = a * x^b + c"""
    return a * np.power(x, b) + c

def plot_power_curve(csv_path, label, color):
    df = pd.read_csv(csv_path)
    x = df["gpu_util"].values
    y = df["gpu_power"].values

    # 비선형 피팅
    popt, _ = curve_fit(nonlinear_model, x, y, p0=[1, 2, 50])
    x_fit = np.linspace(0, 100, 200)
    y_fit = nonlinear_model(x_fit, *popt)

    plt.scatter(x, y, alpha=0.3, color=color, label=f"{label} (raw)")
    plt.plot(x_fit, y_fit, color=color, linewidth=2,
             label=f"{label} fit: a={popt[0]:.2f}, b={popt[1]:.2f}")

plt.figure(figsize=(10, 6))
plot_power_curve("results_v4/traditional.csv", "Traditional", "blue")
plot_power_curve("results_v4/ai_workload.csv", "AI Workload", "red")
plt.xlabel("Utilization (%)")
plt.ylabel("Power (W)")
plt.title("Nonlinear Power Model: Traditional vs AI Workload")
plt.legend()
plt.savefig("figures_v4/power_comparison.png", dpi=150, bbox_inches="tight")

생성된 그래프 예시:

CPU 이용률 vs CPU 전력 (전통 워크로드)
GPU 이용률 vs GPU 전력 (AI 워크로드)
전통 vs AI 워크로드 전력 패턴 비교
GEMM 행렬 크기별 전력 소비
메모리 대역폭 vs 전력
비선형성 모델 피팅 곡선

4. 전체 시스템 실행 방법

‼️환경 요구사항

OS: Linux (Ubuntu 20.04 이상 권장)
Python 3.8+
CUDA가 지원되는 NVIDIA GPU
nvidia-smi, perf, taskset 설치

‍ 설치 및 실행

# 1. 레포지토리 클론
git clone https://github.com/Team37-OptimusPrime/TrackA.git
cd TrackA

# 2. Python 의존성 설치
pip install -r requirements.txt   # torch, pandas, matplotlib, scipy 등

# 3. 환경 검증 (R1)
python scripts/precheck.py

# 4. 전체 실험 실행 (R2+R3 통합 진입점)
python scripts/run_experiment.py

# 5. 분석 및 시각화 (R4)
python scripts/analyze_data.py

# 결과 확인
ls figures_v4/   # 생성된 그래프 6종
ls results_v4/   # 원시 CSV 데이터

실행 흐름 전체 요약

run_experiment.py
    ├── precheck.py          (R1: 환경 검증)
    ├── collect_metric.py          (R2: 메트릭 수집, 백그라운드 스레드)
    ├── run_experiment.py       (R3: 워크로드 실행 제어)
    │     ├── workloads/gemm.py
    │     └── workloads/gpt2_infer.py
    |     └── workloads/gromacs_run.py
    |     |   └──/prepare_gromacs_input.py
    |     └── workloads/matmul.py
    |     └── workloads/resnet.py
    └── results_v4/*.csv      (수집 데이터 저장)
          ↓
    analyze_data.py                (R4: 분석 + 시각화)
          ↓
    figures_v4/*.png          (결과 그래프 6종)

부가기능 : watchdog.sh

장시간 실험 중 GPU 하드웨어를 보호하기 위해 watchdog.sh를 별도 tmux 세션에서 상시 실행한다.

이 스크립트는 nvidia-smi를 5초 간격으로 폴링하여 GPU 온도(상한 85°C)와 전력 소비(상한 260 W)를 감시하고, 어느 한쪽이라도 임계값에 도달하면 즉시 pkill로 워크로드 프로세스를 종료한 뒤 로그에 원인을 기록하고 스스로 종료한다.

메인 실험 스크립트(run_experiment.py)가 소프트웨어 레벨의 쿨다운 로직을 담당한다면, watchdog은 그보다 낮은 레이어에서 동작하는 하드웨어 안전망 역할을 하며, 두 프로세스가 서로 독립적으로 실행되기 때문에 실험 코드에 버그가 생기거나 쿨다운 판단이 지연되는 상황에서도 GPU를 보호할 수 있다.

(watchdog.sh와 실험스크립트를 tmux에서 동시 실행)

# 1. 새 세션 시작
tmux new-session -d -s exp

# 2. 왼쪽 창: 실험 스크립트
tmux send-keys -t exp 'python run_experiment.py --workload all' Enter

# 3. 오른쪽 창 분할
tmux split-window -h -t exp

# 4. 오른쪽 창: watchdog
tmux send-keys -t exp 'bash watchdog.sh' Enter

# 5. 세션 접속 (모니터링)
tmux attach -t exp

(종료 시)

# 세션 전체 종료
tmux kill-session -t exp

# 또는 세션 안에서
Ctrl+B, then D   # detach (프로세스는 유지)
Ctrl+B, then &   # 현재 창 종료

5. 실험 결과 -- 비선형성의 증거

CPU-centric 워크로드인 matrix multiplication과, GPU-centric 워크로드인 gemm_gpu를 비교했을때,

CPU-centric 워크로드는 CPU Busy (%)와 소비전력이 직선형태로 비례한다. 정비례에 가까운 형태이다.

하지만 GPU-centric 워크로드는 GPU Utilization (%)와 소비전력이 볼록 (convex) 형태로 비례한다. 즉, 정비례가 아니다.

이처럼 CPU 중심과 GPU 중심 워크로드의 소비전력 형태에도 차이가 있으며, 사용량과 비례하지 않는 경우가 있다는 것을 보여준다.

이는 전력 구성 비율을 보면 더욱 극명하게 차이가 난다.

GPU centric	gpt2, resnet, gemm_gpu
CPU centric	gromacs, matmul, gemm_cpu

당연하게도, CPU 중심 워크로드는 CPU 전력 사용량이 더 많고, GPU 중심 워크로드는 GPU 사용량이 더 많다.

따라서, 같은 CPU를 할당받았을때 어떤 워크로드는 할당받은 CPU로 많은 전력을 소비할 수도 있고, 반대로 어떤 워크로드는 비교적 적은 전력을 소비할 수도 있는 것이다.

따라서, 이러한 전력소비 특성을 고려한 전력 귀속 모델링이 필요하다는 것을 잘 보여준다.

Track B, C와의 연결

본 Track A에서 제시하고 증명한 문제인식을 바탕으로

Track B에서는 여러 워크로드를 동시 실행하여 각 워크로드의 소비 전력을 partitioning하고,

Track C에서는 Multi-tenant 환경에서 실제 도입 가능한 전력 귀속 모델을 제시한다.

6. 마치며

TrackA는 단순한 전력 측정 스크립트가 아니다.

실험 환경 검증부터 측정, 워크로드 제어, 분석, 시각화까지 End-to-End 실험 자동화 파이프라인이다.

AI 인프라의 에너지 효율이 갈수록 중요해지는 시대에, "얼마나 쓰느냐"만큼이나 "어떻게 쓰느냐"를 정확히 측정하는 것이 핵심이다. TrackA는 그 정밀한 측정의 첫 번째 단계다.

2025-2 캡스톤디자인과창업프로젝트A 기술블로그

us2xince — Thu, 27 Nov 2025 15:40:45 +0900

*이 글은 이전에 꾸준히 작성했던 기술블로그 컨텐츠들을 편집하여 하나로 묶은 것입니다.(URL 링크 1개 제출을 위해)

1.졸업프로젝트...뭐하지?: 중간발표 이전까지 준비한 것들

운이 좋게도 예전부터 관심분야가 같았던 같은 과 언니들과 졸업프로젝트를 함께 하게 되었다. 시스템 최적화, OS, 자원분배에 관심이 있었던 우리는 연구트랙으로, 어떤 주제를 할지 고민했다.

스타트37팀_연구주제.pdf

0.30MB

1차 연구 주제 리스트가 나왔고 교수님께 피드백을 받았다. 이에 대해

1.관심분야와의 일치

2.연구의 현실성

3.분야의 전망

을 고려해서 최종 연구주제를 정했다.

그렇게 해서 정해진 우리의 연구주제는

'VM 별 AI 워크로드 에너지 사용량 예측모델 설계 및 개선 방안'

이다.

우리의 Project Brief는 아래 깃헙에서 자세히 볼 수 있다.

https://github.com/Team37-OptimusPrime/optimusprime

GitHub - Team37-OptimusPrime/optimusprime: This is a team repository for Optimus Prime team.

This is a team repository for Optimus Prime team. Contribute to Team37-OptimusPrime/optimusprime development by creating an account on GitHub.

github.com

중간중간 연구 scope을 재정의했고, 나는 우선 전통적인 워크로드와 AI 워크로드 간 에너지 소모 패턴 분석을 맡아 진행하기로 했다.

2.[문제해결]서버 드라이버 이슈 해결

사실 연구트랙을 하면서 가장 우려스러웠던 것은 실험에 필요한 자원을 확보하는 것이었다. 우선 학교에서 GPU 등 기자재를 대여해줄 수 있는지부터 알아봤는데, 우리가 필요한 사양이 없었고 대여기간이 한정되어 있어서 사용이 어려울 것 같았다.

다행히도 지도교수님의 연구실에서 서버를 제공해주셔서 실험을 시작할 수 있었다.

서버계정을 받아서 기본적인 세팅을 완료하려고 했는데 로그에 비정상적인 정보가 찍혀나왔다.

분명 GPU가 부착된 서버를 받았는데 GPU를 전혀 인식하지 못 하고 있었다.

문제의 원인은 VM 환경을 위한 드라이버였다. 이전에 실험을 하고 원복해놓지 않아 VM환경 드라이버가 그대로 설치되어 있어 GPU를 인식하지 못 하는 문제가 생겼던 것이었다.

이를 해결하기 위해서

1.새로운 드라이버 설치

2.grub 파일 업데이트

3.업데이트 내용 적용을 위해 서버 재부팅

과정이 필요했다.

새로운 드라이버를 설치하려고 하니 이전 버전의 드라이버들 때문에 저장용량이 부족해서 우선 버전 지난 몇개를 지웠다.

그리고 필요한 드라이버(삭제한 드라이버들의 가장 최신 버전)을 설치했다. 설치하는 중에도 저장용량이 부족해서 설치과정이 몇번 중단됐고 용량확보-설치를 무한히 반복했다.

필요한 용량보다 조금 더 비워놔야했기 때문에 애초에 지울 수 있는걸 다 지워서 용량을 충분히 확보해두는게 좋을 것 같다.

변경된 내용을 업데이트 해줬는데, 그 중에도 계속 오류가 생겨서 캐시 삭제도 해보는 등, 서버를 청소(?) 하는 작업을 계속 했다.

청소-업데이트 시도-청소-업데이트 시도-..의 무한 반복...

그리고 마침내! grub 파일을 업데이트하고 sudo reboot 명령어로 서버를 재부팅해줬다.

이전에도 update 명령어를 쓰고나서 재부팅이 필요해서 몇번 재부팅을 했었는데, 보통 2-3분 뒤면 다시 서버에 접속할 수 있다.

그런데 이번에는 한참이 지나도 서버에 접속이 되지 않는것...!

다음날 바로 학교에 가서 연구실에 문의드렸다. 박사님께서 자초지종(VM 드라이버가 왜 설치되어 있었는지)을 말씀해주시고는 재부팅 과정에서 멈춘 서버를 살려주셨다.

몇분 뒤에 서버에 정상적으로 접속할 수 있었고, 드라이버 이슈도 해결되었다.

문제를 스스로 해결해보는 시도는 좋으나, 꼭꼭 담당자에게 사정,설명을 듣도록 하자....

3.[튜토리얼]Github 디렉토리 서버로 가져오기

NVML,RAPL 을 이용하여 전력을 측정해서 idle 상태의 전력, 즉 유휴 전력을 측정해보았다.

csv 파일의 일부이다.

이제 전통적인 워크로드에서 소모되는 전력을 측정해보겠다.

전통적인 워크로드를 주는 데는 대표적으로 3가지 방법이 있다.

1.언어로 프로그램 작성해서 실행하기

2.터미널 명령어 입력하기(stress 등)

3.타연구, 연구에서 보편적으로 쓰이는 프로그램 사용하기

나는 이중에서도 3번, 프로그램 중에서도 parsec을 사용하기로 했다. 많은 개발자, 연구자들이 약간씩 변형해서 깃헙의 공개 레포지토리에서 clone해서 쓸 수 있도록 해뒀기 때문에 사용하기도 쉽고, 실험에도 용이하며, 꽤나 정확한 방법이라고 판단했기 때문이다.

정확한 방법이라는 것은, 내가 준 부하를 오차없이 Tracking할 수 있다는 뜻이다.

내가 사용한 parsec 버전은 아래 링크의 것이다.

https://github.com/connorimes/parsec-3.0

GitHub - connorimes/parsec-3.0: PARSEC 3.0 benchmark suite

PARSEC 3.0 benchmark suite. Contribute to connorimes/parsec-3.0 development by creating an account on GitHub.

github.com

이걸 이제 로컬이 아니라, 사용중인 서버컴퓨터로 가져와야 한다.

1.서버에서 SSH key 생성하기

이메일은 실제 사용중이지 않아도 괜찮다. 개인 식별용이기 때문이다.

서버에 접속해서 아래 명령어를 입력하면 ssh key를 발급받을 수 있다.

ssh-keygen -t ed25519 -C "your_email@example.com"

2.Github에 SSH key 등록하기

발급받은 키를 복사해서 github의 Settings->SSH and GPG keys 에 접속, NEW SSH key 버튼을 클릭해 붙여넣기 한다.

이렇게 하면 내 github 계정에 서버에서 발급받은 ssh key를 등록할 수 있다.

3.잘 연결되었는지 확인하기

이제 다시 서버에 접속해서

ssh -T git@github.com

위의 명령어를 입력해서 아래와 같이 (uoehisx는 등록한 github 레포지토리의 계정이름, 여기서는 내 계정 이름이다.) 찍혀나오면 연결이 됐다는 것이다.

이제 git clone 명령어를 사용해서 필요한 레포지토리를 clone해서 사용하면 된다.

parsec으로 이것저것 부하를 주다보니 앞으로 무얼 해야할지가 좀 윤곽이 잡혔다.

1.현재는 단발성 부하인데, 일정시간 이상 부하를 줄 수 있도록 해야함.

2.부하와 에너지 소모량을 둘 다 logging해서 비교해봐야함.

이를 위해서는 백그라운드에서 에너지 측정 프로그램을 돌리면서 parsec 역시 터미널 명령어로 부하를 주는 것이 아니라, 백그라운드에서 에너지 측정 프로그램 실행하면서, 주어진 parsec을 커스터마이징해서 긴 시간 부하 주고, 두가지 모두 logging 되도록 하나의 프로그램을 짜야겠다는 생각이 들었다.

아무것도 모르는 상태에서 우선 이것저것 만져보니까 뭘 해야하는지 좀 뚜렷해진 것 같다.

[개발일지] github 디렉토리 서버로 가져오기

us2xince — Thu, 20 Nov 2025 13:49:01 +0900

c언어로 작성된 파일이 정상적으로 빌드,실행되고, gpu를 인식하는 것까지 확인했다.

NVML,RAPL,IPMI 라이브러리를 사용해서 전력을 측정해서 아무런 부하를 주지 않았을 때, 즉 idle상태에서의 전력(유휴전력)을 측정해봤다.

csv파일의 일부로, CPU와 GPU의 전력을 1초 단위로 측정해보았다.

이제 다음 단계로 넘어가서 '전통적인 워크로드'에서 소모되는 전력을 측정해보겠다.

이번 글에서는 전통적인 워크로드를 주기 위한 환경 세팅 방법에 대해서 설명해보겠다.

우선, 전통적인 워크로드를 주는 데는 세가지 방법이 있다.

CLI 명령어 이용
C나 CUDA 등 언어로 작성된 프로그램 실행
타연구 인용, Parsec등 연구를 위해 개발된 프로그램 사용

2번 방식 역시 다른 연구에서 사용한 것을 끌어올 수도 있지만 나는 parsec을 사용하기로 결정했다. 원본은 없지만 많은 개발자, 연구자들이 약간씩 변형해서 깃헙의 공개 레포지토리에서 가져다 쓸 수 있도록 해뒀기 때문에 사용하기도 쉽고, 가장 정확한 방법이라고 판단했기 때문이다.

내가 사용한 parsec 깃헙 파일은 아래 링크의 것이다.

https://github.com/connorimes/parsec-3.0

GitHub - connorimes/parsec-3.0: PARSEC 3.0 benchmark suite

PARSEC 3.0 benchmark suite. Contribute to connorimes/parsec-3.0 development by creating an account on GitHub.

github.com

이제 이걸 로컬이 아닌, 사용중인 서버로 가져와야 한다.

**서버의 자원에 주는 일체의 부하를 벤치마크(benchmark)라고 한다.

1.서버에서 SSH key 생성하기

이메일은 실제 사용중이지 않아도 괜찮다. 개인 식별용이기 때문이다.

ssh-keygen -t ed25519 -C "your_email@example.com"

2. Github SSH key 등록하기

발급받은 ssh key를 github 계정에 등록한다.

등록하는 방법은 굉장히 쉽다. 'New SSH key'를 선택한 후, 키를 붙여넣으면 된다.

3.잘 연결되었는지 확인하기

이제 다시 서버에 접속해서

ssh -T git@github.com

명령어를 넣어서 잘 되는지 확인하면 된다.

그 후에는 로컬의 터미널에서 깃헙 레포지토리를 클론하는 것과 같은 명령어로 레포지토리를 클론하면 된다.

parsec-3.0 디렉토리가 생성된 것을 확인할 수 있다.

다음 글에서는 parsec 사용법을 익혀서 워크로드를 주는 것과 동시에 전력측정하는 방법에 대해 글을 써보겠다.

[문제해결]서버 드라이버 이슈 해결

us2xince — Tue, 18 Nov 2025 16:44:07 +0900

운영체제 연구실에서 서버를 제공해주셔서 그걸 이용해서 전력측정을 수행하고자 했다.

서버 계정 정보를 받아서 주말 내에 기본적인 세팅을 완료하려고 했는데

간단하게 작성한 전력측정 코드를 빌드하고 실행하려고 하니 GPU 측정도구인 NVML 라이브러리에서 계속 문제가 생기는 듯 했다.

이 서버에 Nvidia GPU가 부착되어 있는 것으로 알고 있어서 이 서버가 이 GPU를 제대로 인식하고 있는지를 확인했다.

그 결과, 서버가 GPU를 인식하지 못 하고 있다는 것을 확인했다.

Gemini가 알려준 명령어를 몇개 쳐보니 현재 설치된 드라이버가 VM 환경을 구축하기 위한 드라이버라는 것을 확인했다. 교수님께 문의를 드렸지만 답변을 받기 전까지 내가 해결할 수 있는 것은 해야겠다고 생각해서 고쳐보기 시작했다.

우선, GPU를 인식하는 데 필요한 드라이버를 설치하려고 하니 서버의 용량이 부족해 설치할 수 없다는 로그가 계속 떴다.

설치된 패키지 중 같은 것들을 쭉 보고 오래된 버전들은 모두 삭제하고 필요한 드라이버를 설치했다.

그 후 이 드라이버를 서버의 설정파일(웹 개발할 때 .config 파일, .env 파일로 보면 된다.)에 올려놓으려고 grub 파일을 수정하고,

이 변경사항을 저장하려면 서버를 재부팅해야해서 너무너무 무서웠지만 sudo reboot 명령어를 실행했다.

이 사진들은 모두 이 문제를 해결하는 과정에서 뜬 로그들을 기록하기 위해 캡처한 것이었다.

그랬는데도 계속 GPU를 인식하지 못 해서 같은 과정을 몇번이나 반복했고 server reboot를 실행했다. 서버가 리부트 되면 몇분안에 켜져야 하는데 서버가 켜지지 않는 것.....이었다....

그래서 주말이 지나고 월요일이 되자마자 연구실에 찾아갔다. 연구실의 박사님과 얘기해본 결과 이전 연구 때문에 서버 설정이 바뀌어있었고 이것을 원래대로 되돌려놓지 않아 이런 이슈가 생긴 것이었다.

박사님께서 너무너무 감사하게도 서버 재부팅을 도와주셨고 몇분 뒤에 정상적으로 서버를 사용할 수 있었다.

이번 이슈 해결로 느낀 것은 주체적으로 문제를 해결해보는 시도는 좋으나, 꼭! 지도교수님께 확인을 받는 절차가 필요하다는 것을 뼈저리게(...)느꼈다.

졸업프로젝트...뭐하지? : 중간발표 이전까지 준비한 것들

us2xince — Wed, 22 Oct 2025 04:21:05 +0900

입학이 엊그제 같은데 내가 벌써 졸업프로젝트를 할 학년이 되었다. 다른 과는 막학기, 4학년에 졸업요건 관련된 수업을 수강하는 반면, 우리학교 컴퓨터공학과는 3-2,4-1이 스타트와 그로쓰로 졸업프로젝트를 진행할 것이 '권장'되기 때문에 아직 4학년은 아니지만 호기롭게 졸업프로젝트에 도전...! 하기로 결정했다.

왠지 똑똑해보이는...ㅎㅎ..

일단 수강신청은 했고 예전부터 산학과 연구 중 연구를 해야겠다고 생각해왔는데다가 친한 같은과 언니들도 이번에 졸업프로젝트를 한다길래 같은 팀으로 1년 동안 한배를 타기로 했다.

우리 셋 다 어느정도 관심분야도 같았던터라(시스템 최적화, OS, 자원분배) 자연스레 세명의 관심분야를 누덕누덕 기워서 주제를 생각해보게 되었다.

스타트37팀_연구주제.pdf

0.30MB

그렇게 해서 나온 우리의 1차 연구주제 리스트!

교수님께 전달드리고 연구주제에 대한 피드백을 받았다.

주제에 대한 고민이 정말 많았는데 브레인스토밍으로 주제를 여러개 뽑아봤으니 피드백을 기반으로 추릴 때는 명확한 기준으로 소거해나가려고 노력했던 것 같다.

결정기준으로는,

관심분야와 일치
연구의 현실성
유망하고 현재 인기있는 분야인지

였다. 선행연구가 많은지,적은지는 딱히 고려하지 않았다. 왜냐하면 어차피 선행연구를 봐봤자 실험하거나 글을 쓸 때 제약사항만 될 것 같았고(~~연구에서는 이러이러하게 했는데? 라는 의문이 유의미한 결과를 도출하기 위한 실험을 방해한다고 생각했다) 나중에 논문 표절에만 신경쓰면 되는 것이라고 생각했다.

그렇게 해서 정해진 우리의 연구주제는

'VM별 AI 워크로드 에너지 사용량 예측모델 설계 및 개선 방안'

이다.

이제 실험설계를 해야하는데 여기서 고초를 겪었다. 학부생의 지식 가지고 논문을 위한 연구를 설계하려니 너무 막막했고, 나름 알아본 바로 막막함을 타개하기 위해서 의견을 막 내다보니 연구 scope를 벗어난 것이었다.

비유하자면 자동차 핸들을 확 튼건 아닌데 약간 틀어진 상태로 액셀을 세게 밟아버린것.....

묘하게 방향이 틀어진 상태로 빠르게빠르게 아주 많은 의견을 내면서 진행해서 어찌저찌 연구계획안을 작성해 교수님께 피드백을 받고나서야 우리가 잘못 생각하고 있었다는 것을 깨달았다.

우리의 문제점은 크게 두가지였다.

VM 별 에너지 사용량 예측을 무시하고, 자원별 에너지 사용량에 집중했음.
- 우리 연구의 핵심은 VM이 분배받는 자원량(CPU 코어 수, 메모리 용량)에 따라 에너지 사용량이 어떻게 되는지를 정확히 측정하는 것인데 주객이 전도되어 VM은 그저 환경일 뿐이고 자원의 에너지 사용량을 정확히 측정하는 것으로 약간 어긋났다.
"예측"이라는 용어사용
- 아무래도 요즘 AI 가 각광받다보니 에너지사용량 예측을 AI 모델학습으로 초점을 맞췄고 AI 모델 학습이 역시나 주가 되어버리는 사태가 발생했다.

7차,8차,9차,,...졸프 수업시간 포함해 거의 15번의 회의가 이루어졌고 중간발표 전에 연구 scope를 명확히 하고, 정확한 연구에 필요한 tool과 프로그램 명세를 작성해 발표할 수 있었다.

다른 회의록은 혹시나 해서 공개하지 못하지만 8차 회의 준비하면서 내가 쓴 개인 페이지 내용이다.

우선 중간발표 전 큰 고비는 이렇게 두 가지였다.

연구 주제와 연구계획 1차 피드백.

후에 과제로 제출해야해서 미리 작성해두는 것도 있지만 읽은 논문과 혼자 실험을 위해 공부한 내용, 팀원들과 분배한 투두 중 내 몫에 대한 수행과정을 기록하고자 앞으로 계속 비공개로 써두려고 한다.

논문..은 연구에 방해를 주지 않는 선에서 Cloud,VM,OS,Resource distribution에 관한 것 위주로 읽을 예정이다.

아래는 우리 프로젝트의 github 링크이다.

여기서 상세한 Project_Scenario를 볼 수 있다.

https://github.com/Team37-OptimusPrime/optimusprime

[2024OSP]Gitto:벗터 기술블로그4-해설2

us2xince — Tue, 3 Dec 2024 22:56:08 +0900

이화여자대학교 2024-2학기 오픈SW플랫폼 과목수강을 바탕으로 작성된 기술블로그이며 총 다섯개의 포스팅으로 이루어져 있습니다.(개념, 팁&디버깅, 가이드, 해설1, 해설2)

개발 목표
한 학기 동안 오픈SW플랫폼 강의에서 배운 프론트엔드와 백엔드 개발 지식을 바탕으로 이화마켓 구현하기
Team Notion

(초대 요청 보내주시면 됩니다)
https://www.notion.so/Gitto-111257e4a22180b8b3abfe0cf8e16e37?pvs=4

Team Github
https://github.com/Gitto-OSP/2024-flask

어느덧 마지막 포스팅이네요! 벗터의 차별성을 가진 화면 세가지를 소개해드리겠습니다.

1.시즌 별 홈 화면

기존에 제시했던 화면을 약간 수정해서 '이화의 기념일,이벤트' 마다 상품을 판매할 수 있는 메인화면을 기획했습니다.

화면 상단에는 시즌을 잘 나타내는 배너가 보이도록 했습니다.
통일감 있는 상품 전체조회 페이지
동문 구매 혜택을 표시해야 하는 동문 브랜드 카테고리를 제외하고 모든 전체조회 화면의 레이아웃을 똑같이 했습니다.
전체 상품 개수 출력
필터로 상품을 분류해서 조회할 수 있습니다.

2.공동구매

공동구매 달력을 통해 내가 참여하고 싶은 공동구매를 놓치지 않도록 했습니다. (사용자 친화적)
기존 에브리타임의 공동구매 홍보글의 경우 상태를 업데이트하기가 어려웠습니다. 구매자와 사용자 모두에게 번거로운 일이 생기는 것을 해결하기 위해 공동구매 상품 상세조회 화면에서 현재 진행상황을 볼 수 있는 프로그레스 바를 제공합니다.

3.배꽃지수

당근마켓의 매너온도와 같은 기능
내가 작성한 상품 판매글에 달린 리뷰의 별점을 집계합니다.
벗터가 지속적으로 이용자들에게 안전한 거래를 제공하기를 바라는 마음에 추가했습니다.

한 학기 동안 개발하면서 작성자인 저는 많이 성장했습니다. 아직 저학년이라 모든게 처음이었는데 많은 오류를 만나고 해결하고 도움을 받으며 개발에 대한 지식은 물론 협업하는 방법도 배울 수 있었습니다.

읽어주셔서 감사합니다!

[2024OSP]Gitto:벗터 기술블로그4-해설

us2xince — Tue, 3 Dec 2024 21:55:19 +0900

개발 목표
한 학기 동안 오픈SW플랫폼 강의에서 배운 프론트엔드와 백엔드 개발 지식을 바탕으로 이화마켓 구현하기
Team Notion

(초대 요청 보내주시면 됩니다)
https://www.notion.so/Gitto-111257e4a22180b8b3abfe0cf8e16e37?pvs=4

Team Github
https://github.com/Gitto-OSP/2024-flask

지금까지 개념, 팁, 가이드까지 기술블로그를 작성해봤습니다. 이런 지식들과 경험들을 가지고 저희가 대체 한학기 동안 무엇을 했냐...!!!에 대해서 소개하고 전반적인 개발과정에 대해 써보겠습니다.

'설명'은 두개 챕터로 이루어집니다.

'벗터'에 대한 전반적인 소개
'벗터' 에서 눈여겨볼만한 디테일

1.벗터 서비스 소개

1)벗터

벗터는 '벗들의 장터'의 줄임말이자 이화여자대학교 학우들이 서로를 부르는 순우리말 '벗'과 마찬가지로 순우리말인 '터'를 합친 이름입니다.

Butter라는 단어와도 발음이 비슷하다는 점을 이용했습니다. 이 점 덕분에 기억하기 쉬운 이름이 되지 않았나 생각합니다. 발음이 귀엽기도 하고요. 또한 버터를 활용한 캐릭터를 제작해 우리 서비스만의 색을 더욱 확실히 했습니다.

2)벗터는 어떤 서비스를 제공하나요?

벗터는 벗들을 위한 중고거래 플랫폼입니다.

에브리타임에 동문 간의 중고거래 게시판이 있기는 하지만 에브리타임 자체는 대학생들을 위한 커뮤니티라 물건을 거래하기에는 불편한 점이 많다고 생각했습니다. 또한 철저히 '벗'들이 물품을 사고 파는 서비스가 필요하다고 생각했습니다.(배꽃지수로 평가받는 기능 추가)

여기에 저희는 벗터만의 추가적인 기능을 기획했습니다.

(1)기획 단계에서는 지구의 날, 환경의 날 등 국제적인 기념일마다 중고물품 중 관련된 물품을 sorting해서 보여주는 서비스를 제안했습니다. 하지만 '이화인들을 위한 마켓'이라는 제시된 주제에 맞게 이화의 기념일,행사마다 관련된 시즌 상품을 메인화면에 보여주는 것으로 수정했습니다.

(2)또한 커뮤니티에서 중고거래 뿐만 아니라 학잠 등의 공동구매도 활발히 진행된다는 점을 고려하여 공동구매 진행 서비스도 추가했습니다.

기존의 공동구매는 홍보글에서 재학생 인증을 하고 카카오톡 오픈 채팅방 링크를 받으면 거기서 공동구매를 진행하는 벗의 안내에 따라 공동구매가 진행되었습니다.

하지만 벗터에서는 가입부터 이화여자대학교 학생임을 인증해 '총대'의 부담을 줄이고 '총대'가 공동구매 물품을 등록할 때 진행에 필요한 정보를 미리 등록하도록 해 공구 달력과 공구 진행 프로그레스 바를 제공합니다. 이를 통해 원활하게 공구를 진행할 수 있도록 하였습니다.

(3)벗들의 브랜드를 홍보합니다.

이화에는 졸업 후에 자신의 브랜드를 창업하거나 재학 중에 품질 좋은 물건들을 제작해 판매하는 벗들이 많습니다. 이 벗들이 홍보를 위해 들이는 노력을 조금이라도 줄여주기 위해 벗터에 동문 브랜드를 등록하고 상품을 판매할 수 있는 서비스를 추가했습니다.

2.벗터 기획

(1)노션을 활용한 회의

저희는 노션 페이지에 회의록과 일정달력을 만들어두고 개발했습니다. 그리고 매주 수업시간에 약소한 회의를 진행했습니다. 카카오톡을 통해 활발히 소통했고 변경사항과 진행상황을 수시로 공유했습니다.

(2)Figma를 활용한 화면설계

각자 담당한 화면의 설계를 수합했고 Figma로 통일감 있는 디자인으로 재탄생했습니다.

https://www.figma.com/design/rv6feoZmBGNftzMXHkCoiw/OpenSW2024-2?node-id=19-313&node-type=frame

Figma

Created with Figma

www.figma.com

초록,연두, 회색을 조합한 메인컬러와 검정색의 깔끔한 글씨를 사용했습니다.

3.벗터 개발

개발에 사용한 툴

Github :협업 툴
Figma: 화면 설계 디자인 툴
VS code: 프로그래밍 툴
HTML,CSS,JS: Frontend
Flask, Pyerbase: Backend

상품 판매 화면(전체, 상세)	시즌/대동제, 중고물품, 공동구매, 동문브랜드
상품 등록 화면	위의 카테고리 별 상품 전체 조회 화면에서 등록할 수 있도록 함
리뷰조회(전체, 상세)	(전체 조회화면에서 작성자 클릭 시) 한 작성자가 작성한 리뷰 전체조회
마이페이지	회원가입,로그인,로그아웃 // 관심글//참여한 공동구매,주최한 공동구매// 내가 작성한 리뷰//작성한 판매글
기타	배꽃지수(리뷰 작성 시 받은 리뷰를 기반으로 결정됨)

왼쪽이 대분류이고 오른쪽이 속하는 디테일한 화면입니다.

다음 마지막 포스팅에서 벗터에서 가장 내세우고 싶은! 특별한 기능을 소개하겠습니다.

[2024OSP]Gitto:벗터 기술블로그3-가이드

us2xince — Tue, 3 Dec 2024 20:59:42 +0900

개발 목표
한 학기 동안 오픈SW플랫폼 강의에서 배운 프론트엔드와 백엔드 개발 지식을 바탕으로 이화마켓 구현하기
Team Notion

(초대 요청 보내주시면 됩니다)
https://www.notion.so/Gitto-111257e4a22180b8b3abfe0cf8e16e37?pvs=4

Team Github
https://github.com/Gitto-OSP/2024-flask

Github 처음 시작하기-Github 가이드

참고할만한 자료입니다.

https://docs.github.com/ko

GitHub.com 도움말 문서

GitHub Docs GitHub 여정 중 어디에 있든 도움이 됩니다.

docs.github.com

저도 이번 프로젝트를 통해 깃을 처음, 제대로 사용해봤습니다. 작년 겨울에 교내 해커톤 TF 활동을 했었는데 그때 다른 분들 레포지토리의 코드 기웃기웃하는 정도...?였습니다. 홍보팀이었어서......

그래서 처음에는 충돌도 해결하지 못했는데 지금은 나름 익숙해져서 깃헙을 처음 시작하는 방법에 대해 소개해드리려고 합니다.

1.깃헙 계정만들기

https://github.com/

GitHub · Build and ship software on a single, collaborative platform

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

github.com

에 접속합니다.

Email, Password, Username을 입력합니다.

사람임을 증명(ㅋㅋ)하고 나면

이렇게 계정생성이 완료되고 새로 로그인하는 페이지가 뜹니다.

여기까지 하시면 깃헙 계정 만들기가 끝났습니다!

2.깃헙 둘러보기

깃헙은 협업할 수 있는 다양한 기능을 제공하고 있는데요, 화면 기준으로 하나하나 살펴보도록 하겠습니다.

로그인하시면 볼 수 있는 가장 첫 화면입니다.

여기서 가장 기본적인 저장소 생성(Create Repository)를 해보겠습니다! 좌측 상단 초록색 버튼(Create repository)를 클릭합니다.

Repository 이름과 간단한 설명(선택), 공개범위를 설정합니다.

README파일은 누군가가 이 레포지토리를 처음 보게 되었을 때 참조하면 좋을 정보들을 올려두는 곳입니다.

만약 해커톤의 결과물로 깃헙 레포지토리를 제출했다면 팀 소개, 프로젝트 주제, 프로젝트에 사용한 언어,툴 정보 등을 적어둘 수 있겠죠?

간단하게 이런 이미지만 걸어둘 수도 있고

여러 이모지로 가독성 좋은 소개글을 작성할 수도 있어요

일단 가이드라인을 위해 이렇게만 만들어두겠습니다! 여기서 소개하고 싶은건 fork 기능인데요, 다른 Repository를 나의 Repository로 가져온다고 생각하시면 됩니다! <개념>편는 포크가 무엇인지 소개해드렸다면 이번에는 실제로 fork하는 방법을 알려드릴게요!

우선 포크하고 싶은 레포지토리에 접속합니다.

빨간 박스의 fork 버튼을 클릭합니다

어떻게 가져올지를 선택합니다.

fork를 완료하고 나면 나의 레포지토리에 포크한 레포지토리가 생긴걸 확인할 수 있습니다.

Fork한 레포지토리에서 작업하면 병합할 때의 실수를 방지할 수도 있기 때문에 (일종의 Buffer 역할) 협업할 때는 팀 깃헙 레포지토리를 나의 저장소로 Fork해서 Fork한 저장소를 내 로컬에 clone해서 사용하는 것을 추천드립니다! 대신 작업하기 전 fork와 로컬 모두 원래의 저장소 상태로 업데이트 해주는게 중요합니다!

이제 옆의 사이드바 메뉴를 살펴보겠습니다. 깃에는 저장소로 번역할 수 있는 Repository 외에도 Project, Organization,Enterprise 이렇게 세 가지 방식의 협업을 할 수 있습니다.

직관적인 느낌으로는 Project, Organization, Enterpirse 로 갈수록 규모가 커진다고 생각하시면 됩니다.

<Project>

Project는 목적에 따라 다른 템플릿을 제공해 타인과의 협업을 더욱 쉽게 할 수 있습니다.

저는 첫번째 Team Planning을 선택했는데요, 이렇게 To do list를 공유할 수 있습니다. 이 리스트에 레포지토리를 항목으로 추가할 수 있어서 만약 기능별로 레포지토리를 여러개 파서 사용하는 경우 레포지토리 자체를 투두리스트에 올려놔도 좋을 것 같네요!

저는 항상 회의는 디스코드를 통해서 하고 문서화는 노션, 코드작업만 깃헙에서 했어서(이것마저도 한두번....UIUX로 참여했습니다.) 이 기능을 잘 사용해보지는 않았습니다.

<Organization>

Organization에서는 레포지토리와 프로젝트를 모두 제공합니다.

<Enterprises>

Enterprises에서는 여러개의 Organization을 거느릴 수 있습니다.

3.로컬에서 깃헙 사용하기

이제 생성한 레포지토리를 로컬에서 작업하려고 합니다. <개념> 편에서 여러 깃헙 명령어들을 봤는데 이건 어디서, 어떻게 쓰는 걸까요?

<Command Line>

아래로 분할을 클릭하시면 콘솔창이 아래에 뜹니다.

여기서 '터미널' 로 맞춰주시고 가장 오른쪽 상자..! 여기서 어떤 터미널을 띄울지 선택하는데 여기서 'Git Bash'를 선택합니다.

그럼 이렇게 화려한....콘솔창을 볼 수 있습니다. 여기서 제가 현재 작업하고 있는 레포지토리와 브랜치를 확인할 수 있고 여러 명령어를 통해 작업할 수 있습니다.

<Github Desktop>

이 귀여운 걸 사용해볼겁니다.

여기서 레포지토리와 브랜치를 변경해서 명령어 없이 간단한 작업들을 할 수 있어요!

여기까지 깃헙에 대해서 간단하게 살펴보았습니다! 이 가이드라인이 도움이 되었으면 좋겠습니다.

다들 협업을 통해 성장하는 개발자가 되길 바랄게요

[2024OSP]Gitto:벗터 기술블로그2-팁&디버깅

us2xince — Sat, 30 Nov 2024 00:32:31 +0900

개발 목표
한 학기 동안 오픈SW플랫폼 강의에서 배운 프론트엔드와 백엔드 개발 지식을 바탕으로 이화마켓 구현하기
Team Notion

(초대 요청 보내주시면 됩니다)
https://www.notion.so/Gitto-111257e4a22180b8b3abfe0cf8e16e37?pvs=4

Team Github
https://github.com/Gitto-OSP/2024-flask

문제발생
리뷰 전체조회 화면에서 '코드 중복 피하기' 로 작성했던 네비게이션바가 깨지는 현상 발생

✏️해결방안 시도

1.Github에서 pull 해서 원격의 변경사항 업데이트 하기

2.로컬로 클론한 것 삭제 후 다시 클론하기

3.작업 툴(VS Code)에서 다시 불러오기

4.CSS 파일 수정하기

그런데도 문제가 해결되지 않아서 몇시간 동안 붙잡고 있었습니다..(┬┬﹏┬┬)

문제해결
원인:네비게이션바의 식별자가 review.html 파일의 식별자에도 그대로 적용되었음.

해결:리뷰 전체조회 페이지의 html 파일에서 스타일을 적용할 부분마다 아이디와 클래스 식별자를 적어주고 CSS 파일도 그에 맞게 수정했습니다.

그저...빛.....

Tips
태그이름 보다는 아이디나 클래스로 CSS 스타일을 적용하자!

고민
상품등록, 리뷰등록 화면 레이아웃이 똑같은데 코드 재사용성을 높일 수 있는 방법 없을까?

모든 등록화면이 기재해야 하는 항목만 다르고 전체적인 틀과 적용할 스타일이 동일한 점을 고려해 효율적으로 설계하고 싶었습니다.
고민해결
태그 내의 Contents만 바꾸어서 html 파일 사용
CSS 파일은 reg.css로 같은 파일 사용
DB에 넘겨줄 때 값 이름만 다르게 사용함

reg_reviews와 reg_items 모두 같은 reg.css 파일로 속성을 지정함.

DB에 저장할 때만 다르게 함.
Tips
코드의 재사용성과 유지보수의 용이함을 고려해서 코드를 작성하자!

[2024OSP]Gitto:벗터 기술블로그1-개념

us2xince — Sat, 30 Nov 2024 00:10:00 +0900

이화여자대학교 2024-2학기 오픈SW플랫폼 과목 수강을 바탕으로 작성된 기술블로그이며 총 다섯개의 포스팅으로 이루어져 있습니다.(개념, 팁&디버깅, 가이드, 해설1, 해설2)

개발 목표
한 학기 동안 오픈SW플랫폼 강의에서 배운 프론트엔드와 백엔드 개발 지식을 바탕으로 이화마켓 구현하기
Team Notion

(초대 요청 보내주시면 됩니다)
https://www.notion.so/Gitto-111257e4a22180b8b3abfe0cf8e16e37?pvs=4

Team Github
https://github.com/Gitto-OSP/2024-flask

깃&깃허브 ,FrontEnd 는 가볍게 읽으시고 GET,POST 방식으로 데이터 저장하고 가져오기, app.py와 database.py 부분을 유의깊게 읽으시면 되겠습니다~!

1.개념

참고사이트:
https://www.w3schools.com/

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Git&Github

1.깃이란?

소프트웨어 버전 관리 시스템(Version Control System)

Git은 파일의 변화를 "스냅샷"으로 저장하고 현 스냅샷은 이전 스냅샷의 포인터를 가지고 있어 파일의 변경이력을 저장가능.

※스냅샷: 특정 시점에서 파일, 폴더 또는 워크스테이스의 상태. 스냅샷을 통해 특정 시점 저장소의 모든 정보를 확인 가능하다.

2.깃헙이란?

Git을 사용하는 프로젝트를 지원하고 개발자들의 버전컨트롤 및 협업을 위한 코드 호스팅 플랫폼
깃허브에서 제공하는 클라우드 서버를 통해 관리되는 버전관리 시스템 (웹 호스팅 서비스)

3.Git의 기본용어

Repository(저장소): 소스코드가 저장되어 있는 물리적 공간
Remote Repository(원격 저장소): 여러 사람이 함께 공유하기 위한 저장소
Local Repository(로컬 저장소): 사용자 PC에 파일이 저장되는 저장소
Working Tree: 작업 폴더를 의미
Commit: 변경된 작업의 점검을 마치고 저장소에 남기는 행위. Commit log가 저장됨.
추후 변경 이력 조회를 위해 커밋메시지를 남겨야 함!
Index(=Staging Area): Commit 전의 저장소와 Working Tree 사이에 존재하는 공간.
Branch: 분기점으로 작업할 때, Commit 단위로 구분된 소스코드의 현재상태를 복사하여 Branch 에서 작업
Checkout:특정시점이나 특정 Branch fh dlehd
Head: 현재 작업 중인 Branch
Merge: 다른 Branch의 내용을 현재 Branch로 가져와 병합

+Pull Request(PR)

브랜치를 통합 브랜치에 병합하기 전 거쳐야 하는 프로세스
PR 생성시 작업한 토픽브랜치에서 변경한 사항들을 다시 한번 리뷰
PR 생성시 검토 요청할 팀원들 추가-> 수정사항이 있다면 코멘트 남기기
수정사항이 없다면 해당브랜치를 통합브랜치에 병합함

4.Fork vs Clone repository

Fork: Github account를 사용하여 수행. 내 깃헙 계정으로 복사하는 것.
PR을 통해 원격저장소에 변경사항 반영
Clone: Git을 사용하여 수행되고 로컬 PC에 원격저장소가 복사됨
로컬에서 Push 를 통해 원격저장소에 변경사항 반영 가능.

Fork 후 Clone 하는 것을 권장!!

이렇게! Fork해서 한학기 동안 진행했습니다.

[Git 명령어]

git --version
깃 버전 확인
git config --global user.name "~~"
git config --global user.email "~~"
깃 사용자 이름, 이메일 설정
git status
깃 Status 확인
→Tracked: files taht Git knows about and are added to the repository
→Untracked: files that are in your working directory, but not added to the repository
git add 파일명
git add -A
git add --all
깃이 파일을 트래킹하기 위해 Stage에 추가
git commit -m "commit message"
저장소에 파일 반영하기
git commit -a -m "commit message"
Stage에 추가, 저장소에 반영 동시에 하기
git branch 브랜치명
브랜치 생성
git branch
생성된 브랜치 확인
git checkout 브랜치명
해당 브랜치로 이동
git branch -d 브랜치명
브랜치 지우기
git fetch origin
원격저장소에서 change history 모두 가져오기
git diff origin/master
어디가 다른지 체크
git merge origin/master
로컬저장소에 merge
git merge 브랜치명
작업의 마무리단계 즉 변경사항 점검 및 확정이 되면 현재 HEAD가 가리키는 브랜치에 병합됨
git pull origin
fetch와 merge를 동시에
git revert HEAD --no-edit
가장 마지막 변경사항 되돌리고 commit
git reset 커밋코드
특정 commit 장소로 저장소 버전을 되돌리기
git init
깃 초기화
git log
현재 커밋 목록들 확인
git pull
원격저장소의 변경내역을 현재 로컬저장소로 가져와서 병합함. (가져오기만 하는 것 fetch)
git push
소스코드의 변경사항을 원격저장소에 기록
git reset
로컬저장소의 커밋을 취소시킴

※작업폴더의 파일들을 hello-world images 브랜치에 추가하고 hello-world 브랜치를 master 브랜치에 병합하기

git add --all
git commit -m " "
git checkout master
git merge hello-world-images
4-1.병합 성공
4-2.Conflict(충돌)로 병합실패 → git status로 충돌 확인 후 두 개의 파일의 내용이 같도록 수정한다.

FrontEnd

1.HTML(Hypertext Markup Language)
페이지들 사이의 링크를 정의해주는 하이퍼텍스트와 웹페이지의 구조를 정의하는 마크업언어로 이루어진

기본구조
<tagname>Content</tagname>
Attribute(속성)
속성은 항상 시작태그에 명시되어야 한다.
name="value"로 작성
예) <a href="https://~~">Visit here</a>
<img src="img.jpg" width="400" height="300">
<p style="color:red;">This is a red text</p>
기본적인 태그들(EndTag 생략)
<p>
<h1><h2><h3>
<hr>수평가로선
<br>줄바꿈
<pre>입력한 그대로 보여짐
Formatting
<b>:Bold text
<strong>:Important text
<i>:Italic text
<em>:Emphasized text
<mark>:Marked text
<small>:Smaller text
<del>: Deleted text
<ins>: Inserted text
<sub>:Subscript text
<sup>:Superscript text
주석 달기
<!--Comments-->

링크 달기
<a href="url" target="_self">link text </a>
※target: _self-현재창에서 오픈, _blank:새창에서 오픈
이미지 삽입하기
<img src="url" alt="alternatetext">
표 삽입하기
<table>
<tr>:Table row
<tb>:Table Data cell
colspan, rowspan으로 세로 가로 셀병합을 할 수 있다.
리스트
<ul>:Unordered List
<ol>:Ordered List
<li>:list items
<dl>:description list
<dt>:a term in a description list
<dd>:the term in a description list
Block/Inline
<div>:<div>태그 내에 속하는 여러 태그들을 하나로 묶는다. 행 전체에 적용
<span>: <div>와 비슷하지만 적용되는 컨텐츠 분량만큼 적용됨.
Iframe
display a web page within a web page
<iframe src="url" title="description"></iframe>
<head>
html의 body부분을 시작하기에 앞서서 여러 정보들을 적어놓는 부분.
<title>:코드의 제목
<meta>:specify the character set, page description, keywords, author of the document, and viewport settiings
입력받기
<form>태그
input type: text, radio, checkbox, submit, button,password,search,url/email,number,range,date,reset,file,hidden
+placeholder:아무것도 입력하지 않았을 때 띄울 내용
reqired:필수 입력
readonly:입력 불가 텍스트 박스
미디어 삽입하기
<object> 태그
추가
Select:드롭다운 메뉴
textarea:여러 줄 텍스트 입력
progress bar: 진행상황 표시

전통적인 웹페이지 구조(출처:4주차 강의자료)

2.CSS(Cascading Style Sheets)
웹페이지의 다양한 스타일을 적용할 수 있도록 지원
CSS는 개발 시간과 페이지 로딩 시간을 줄여주기 때문에 웹페이지 개발할 때 매우 유용하다.

내부 CSS
예)<style> h2 { color :darkorange;}</style>
인라인 CSS
예)<h2 style="color: darkorange "> Contents </h2>
외부 CSS
예)(별도의 CSS 파일)
.red{
color: darkorange ;
}

Selector
Property
Value

Element 셀렉터: 셀렉터 이름(html 태그 이름)만 쓴다.
ID 셀렉터: html태그 안에 id="아이디명" 으로 쓴 아이디명 앞에 '#'을 붙이고 스타일을 정의한다.
Class 셀렉터: html 태그 안에 class="클래스명"으로 쓴 클래스명 앞에 '.'을 붙이고 스타일을 정의한다.
Universal 셀렉터: * 사용
Grouping 셀렉터: 쉼표(,)로 구분해서 적어준다.
응용:
만약 div 태그 안의 많은 태그들 중 클래스 이름인 class에 대해 스타일을 적용한다면?
:p.class{
...
}

-박스모델 (중요!!!!)

겉부터 margin, border, padding, content 순

CSS 파일의 일부, 태그 아이디 클래스 식별자를 모두 사용하여 속성을 지정함

3.JavaScript
사용자와의 상호작용을 지원하고 Node.js와 함께 서버프로그래밍에도 사용
객체 기반의 동적 스크립트 언어
~~이름이 비슷하지만 자바와 연관없음(ㅎㅎ;)~~
JavaScript의 기능 Overview

HTML 내용 변경
HTML 속성 변경
HTML 스타일 변경

JavaScipt 적용법

내부 JavaScript
<script></script>태그 사용
외부 JavaScript
<script src="자바스크립트 파일명.js"></script>

HTML 페이지에 출력하기

window.alert()
예)alert("alert message");
innerHTML
예)변수.innerHTML="Sentence";
document.write()

변수 선언

var:변수 재선언, 재할당 모두 가능
let:변수 재할당만 가능
const:변수 재선언, 재할당 모두 불가능

Data type(typeof ~)

Number
String
Boolean
Undefined
Object(객체)
var dog={name: "해피", age:3}; //객체 생성
dog.name, dog.age로 접근

var person={
	name:"홍길동";
    birthday:"030219",
    pld:"1234567".
    fullid:function(){
    	return this.birthday+this.pld;
   }
 };

Type Conversion(타입 변환)

Implicit type conversion: 자동 타입변환 가능
Explicit type conversion:아래 함수 제공
String(true)
Boolean(0)
Number(true) //숫자 1

여러가지 연산자

산술연산자
비교연산자
문자열 결합 연산자
'+' 사용
Delete 연산자
조건문
if, else if, else
switch
반복문
while (표현식)
for(초기식;표현식;증감식)

함수
function 함수이름(매개변수1, 매개변수2, ...){
함수 실행문
}

예)

<body>
	<script>
		function sqr(x){
    		return x*x;
 		}
    	var sqrNum=sqr;
    	document.write(sqr(4)+"<br>");
    	document.write(sqrNum(4));
	</script>
</body>

String,Array 메소드 & Event

마이페이지에서 세부화면으로 넘어갈때 switch 문 사용

ID, 비밀번호, email 유효성 검사에서 if else 조건문 사용 alert 문 등

BackEnd

1.Flask
웹어플리케이션 개발을 지원하는 Python API

Open source
Lightweight
speed
Easy to use

✅

Anaconda 설치
VScode 설치

새로운 터미널 생성

OSP2024라는 가상환경 생성 후 flask 설치 (이미 설치한 상태였기 때문에 활성화한 후 업데이트함)

flask --debug run 명령어를 통해 실행

(응용) 코드의 중복을 피하면서 네비게이션바에 하위메뉴화면 연결하기

index.html 파일내용

코드중복 피하기1

코드중복 피하기2

{% extends "index.html" %}을 통해 index.html 코드를 확장해서 작성함.
index.html이 속한 templates 파일 하위에 파일을 위치하게 한다.

app.py에 다음 코드 추가

GET,POST 메소드 사용

app.py GET으로 데이터 가져오기

signup.html POST로 넘겨받은 값 뿌려주기

2.Firebase

A cloud-hosted NoSQL database developed by Google
실시간으로 JSON data 저장 및 동기화
실시간으로 기기간에 데이터를 sync할 수 있어 반응형앱 개발에 효과적
다양한 플랫폼 지원
Serverless 앱개발
보안

벗터의 파이어베이스 DB

database.py 파일 생성

database.py DB에 키,값 쌍으로 저장하는 함수

app.py에 이전에는 flask로 넘겨받기만 했던 값을 DB에 넘겨주기

동적라우팅

상품 이름을 key로 리뷰를 DB에 저장함.
그리고 상품명에 따라 리뷰를 클릭했을 때 다른 경로로 라우팅되도록 함.
하지만 세부화면은 같은 함수를 호출하도록 함

상품이름으로 review 테이블에서 데이터 가져오기

로그인(회원 정보), 상품 및 부스 등록( 상품 정보), 리뷰(리뷰 등록) 전체조회 및 상세조회 모두 이와 동일/유사한 방식으로 DB에 데이터를 저장하고 가져옴.