수업 시간에 한 데이터

수업에서는 ARX Anonymization Tool을 사용하여 Adult 데이터셋을 익명화하는 실습을 진행했다. 사용한 quasi-identifier 속성은 sex, age, race, marital-status, education, native-country이며, k-anonymity 기반의 익명화를 수행했다.

수업에서 적용한 최적 변환은 [0, 5, 1, 1, 1, 3]이었으며,
익명화 후 Score: 35.61%, 평균 재식별 위험도는 0.159% 로 크게 감소했다.

아쉬운 점

수업에서 진행한 익명화 결과를 분석하면서 몇 가지 아쉬운 점을 발견했다.

1. education 계층 구조의 비효율성

• 기존 그룹핑이 8 Set + 3 Set + 4 Set으로 구성되어 있어 교육 수준의 의미적 유사성이 반영되지 않았다.
• 특히 데이터에서 빈도가 높은 HS-grad가 다른 값들과 함께 묶여, 불필요한 정보 손실이 발생했다.

2. native-country 계층 구조의 비효율성

• 41개 국가가 지역적 의미 없이 10개 + 3개 + 12개로 단순 묶음 처리되어 있었다.
• 대륙/지역 기반의 의미 있는 그룹핑이 이루어지지 않아 유틸리티 손실이 컸다.

개선 방안

education 계층 구조 재설계

빈도가 높은 HS-grad를 단독 그룹으로 분리하고, 나머지 값들을 교육 수준에 따라 의미적으로 재그룹핑했다.

HS-grad를 단독으로 분리함으로써 해당 그룹의 일반화 수준을 낮추고 정보 손실을 최소화했다.

native-country 계층 구조 재설계

41개 국가를 대륙/지역 기반으로 의미 있게 그룹핑했다.

개선 결과

계층 구조 재설계 후 ARX에서 다시 익명화를 적용한 결과는 다음과 같다.

계층 구조를 데이터의 특성과 의미적 유사성에 맞게 재설계하면, 같은 익명성 수준을 유지하면서도 정보 손실(Score)을 줄일 수 있다는 것을 확인했다.

특히 빈도가 높은 값을 단독 그룹으로 분리하는 전략은 유틸리티 보존에 효과적이며, 국가처럼 범주가 많은 속성은 지역적/개념적 기준으로 그룹핑하는 것이 중요하다는 것을 배웠다.

처음 플러터를 접해보면 너무나 많은 들여쓰기와 괄호들을 보고 왜 이렇게 어렵게 생긴거야? 아니 저기엔 쉼표가 있는데 여기는 왜 없어? 왜 여기 있어야해? 라고 생각해보신 적 있으실 수도 있는데요, 그 이유는 플러터는 모든 요소를 Widget으로 보기 때문입니다. 이에 대한 이야기를 이제 더 깊게 정리해보겠습니다.

Flutter가 다루는 것

1. 무엇을 화면에 보여줄 것인가
2. 사용자가 어떤 행동을 했을 때 무엇을 할 것인가
3. 데이터가 바뀌었을 때 화면을 어떻게 다시 그릴 것인가

Flutter는 앱 화면을 만드는 도구다.
버튼, 입력값, 서버에서 가져온 데이터 등등…
데이터 변화가 화면의 변화로 이어지는 구조를 코드로 제어한다.

모든 것은 Widget이다

Flutter에서는 제목도, 설명 문장도, 버튼도 전부 Widget이다.

Scaffold: 화면의 기본 뼈대

Scaffold는 상단 바, 본문 영역, 하단 버튼, 플로팅 버튼, 메뉴 등 화면의 기본 구조를 잡아주는 위젯이다.

상태(State)란 무엇인가?

state = 화면에 영향을 주는 데이터
상태 관리 = 데이터 관리

아래처럼 숫자가 바뀌어야 하는 데이터가 바로 state다.

int count = 0;

// 상태를 변경하고 → build에게 다시 그리라고 알려줌
setState(() {
  count++;
});

Text("$count")  // 바뀐 숫자가 화면에 표시됨

Flutter는 build()를 다시 실행시켜서 화면을 새로 그린다.
상태를 변경하고 → 상태에 맞춰서 UI를 바꾸는 것, 이미 우리는 해오고 있었다.

데이터를 가져오는 두 가지 방식

1. 한 번만 가져오는 데이터 (Future)

서버에 요청 → 응답 받고 끝.

2. 계속 지켜보는 데이터 — Stream

데이터가 한 번 오고 끝이 아니라, 시간이 지나면서 계속 흘러들어오는 데이터 통로다.

앱 ↔ 서버 ↔ DB

캐싱(Caching)이란?

서버와 사용자 사이에는 시간 차가 존재한다.
매번 서버에 요청하면 느릴 수 있기 때문에 캐싱을 사용한다.

캐싱 = 데이터를 기억해두는 것
cache 변수에는 서버의 GET 요청으로 가져온 정보들을 저장해 더 빠르게 화면에 보여준다.

Flutter 문법: 괄호와 기호 완전 정리

{ } 중괄호 — 코드 실행 범위

코드가 실행되는 범위(블록) 를 나타낼 때 사용한다.

// 함수의 실행 내용
void sayHello() {
  print('hello');
}

// 버튼을 눌렀을 때 실행할 코드
onPressed: () {
  print('눌림!');
}

// 조건문 / 반복문 안에서 실행할 코드
if (count > 0) {
  print('양수');
}

// setState 안에서 상태를 바꾸는 코드
setState(() {
  count++;
});

[ ] 대괄호 — 여러 개를 목록으로 넣을 때

여러 위젯이나 값을 리스트(목록) 로 넣을 때 사용한다.

Column(
  children: [        // 여러 자식 위젯을 목록으로
    Text('첫 번째'),
    Text('두 번째'),
    ElevatedButton(...),
  ],
)

AppBar(
  actions: [         // 우측 아이콘들을 목록으로
    IconButton(...),
    IconButton(...),
  ],
)

( ) 소괄호 — 위젯 생성 & 함수 호출

위젯을 만들거나 함수를 호출할 때 사용한다.

Text('안녕하세요')   // Text 위젯 생성
print('출력')        // 함수 호출
setState(() { })     // setState 함수 호출

: 콜론 — 파라미터 이름에 값을 전달할 때

Flutter에서 위젯에 값을 넣을 때 파라미터명: 값 형태로 쓴다. (named parameter)

Text(
  '안녕하세요',
  style: TextStyle(fontSize: 20),   // style: 값
  textAlign: TextAlign.center,      // textAlign: 값
)

ElevatedButton(
  onPressed: () { },    // onPressed: 실행할 함수
  child: Text('클릭'),  // child: 자식 위젯
)

, 쉼표 — 각각의 위젯(값)을 구분

위젯이나 파라미터를 구분할 때 사용한다.
마지막 항목 뒤에도 쉼표를 붙이는 게 Flutter 스타일이다. (trailing comma → 자동 포맷팅에 도움)

Column(
  children: [
    Text('하나'),    // 쉼표로 구분
    Text('둘'),
    Text('셋'),      // 마지막에도 쉼표 OK
  ],
)

; 세미콜론 — 문장의 끝

하나의 실행문이 끝났음을 표시한다.

int count = 0;   // 변수 선언 끝
count++;         // 실행문 끝
print('hi');     // 실행문 끝

주의: { } 블록 뒤에는 ;을 붙이지 않는다.

📋 한눈에 정리

1. 오늘의 목표

Flutter에서 데이터를 다루는 두 가지 방식(Future와 Stream)의 차이를 이해하고, 상태(State)와 캐시(Cache)가 각각 어떤 역할을 하는지 정리한다.

2. 핵심 개념

Future — 한 번만 가져오는 데이터

Future는 Flutter(Dart)에서 비동기로 데이터를 한 번 요청하고 결과를 받으면 끝나는 방식이다.

이 개념은 앱을 처음 켤 때 서버에서 데이터를 불러오거나, 버튼을 눌렀을 때 특정 정보를 딱 한 번 조회할 때 필요하다.

Stream — 계속 지켜보는 데이터

Stream은 데이터가 한 번 오고 끝이 아니라, 시간이 지나면서 계속 흘러들어오는 데이터 통로다.

이 개념은 DB나 서버에 변화가 생길 때마다 자동으로 새 데이터를 받아야 할 때 필요하다.

예를 들어 일정 앱에서 일정을 추가하거나 삭제하면 화면이 자동으로 갱신되어야 하는 경우에 쓴다.

State — 화면에 영향을 주는 데이터

State는 값이 바뀌면 화면을 다시 그려야 하는 데이터다.

이 개념은 카운터, 선택된 날짜, 입력 중인 텍스트처럼 UI에 직접 반영되어야 하는 값을 관리할 때 필요하다.

Flutter에서는 setState()를 호출해야 상태가 바뀐 것을 감지하고 build()를 다시 실행한다.

Cache — 가져온 데이터를 임시로 기억하는 것

Cache는 서버나 DB에서 가져온 데이터를 변수에 임시로 저장해두는 것이다.

이 개념은 매번 서버에 새로 요청하지 않고도 저장된 값을 바로 사용해서 응답 속도를 높여야 할 때 필요하다.

앱과 서버 사이에는 네트워크 지연이 있기 때문에, 자주 바뀌지 않는 데이터는 캐싱해두면 훨씬 자연스러운 UX를 만들 수 있다.

3. 코드 예시

Future 방식 — 한 번만 조회

Future<List<Schedule>> getSchedules(DateTime date) {
  return (select(schedules)
    ..where((tbl) => tbl.date.equals(date)))
    .get();
}

Stream 방식 — 실시간 감시

Stream<List<Schedule>> watchSchedules(DateTime date) {
  return (select(schedules)
    ..where((tbl) => tbl.date.equals(date)))
    .watch();
}

State — setState로 화면 갱신

int count = 0;

setState(() {
  count++;
});

Text('$count') // count가 바뀌면 자동으로 다시 그려짐

Cache — 서버 데이터를 변수에 저장

List<Schedule>? cache; // 서버의 GET 요청으로 가져온 일정 정보를 저장

Future<void> loadSchedules() async {
  cache = await getSchedules(selectedDate); // 한 번 저장해두면 재사용 가능
}

StreamBuilder로 실시간 UI 연결

StreamBuilder<List<Schedule>>(
  stream: GetIt.I<LocalDatabase>().watchSchedules(selectedDate),
  builder: (context, snapshot) {
    return TodayBanner(
      selectedDate: selectedDate,
      count: snapshot.data?.length ?? 0,
    );
  },
),

4. 코드 설명

Future vs Stream 핵심 차이

State 관련 코드

Cache 관련 코드

StreamBuilder 관련 코드

5. 전체 코드 (MainCalender + HomeScreen)

main_calender.dart

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:calendar_scheduler/const/colors.dart';

class MainCalender extends StatelessWidget {

  final OnDaySelected onDaySelected; // 날짜 선택 시 실행
  final DateTime selectedDate;       // 선택된 날짜

  MainCalender({
    required this.onDaySelected,
    required this.selectedDate,
  });

  @override
  Widget build(BuildContext context) {
    return TableCalendar(
      locale: 'ko_kr',
      onDaySelected: onDaySelected,
      selectedDayPredicate: (data) =>
          data.year == selectedDate.year &&
          data.month == selectedDate.month &&
          data.day == selectedDate.day,

      firstDay: DateTime(1800, 1, 1),
      lastDay: DateTime(3000, 1, 1),
      focusedDay: DateTime.now(),

      headerStyle: HeaderStyle(
        titleCentered: true,
        formatButtonVisible: false,
        titleTextStyle: TextStyle(
          fontWeight: FontWeight.w700,
          fontSize: 16.0,
        ),
      ),
      calendarStyle: CalendarStyle(
        isTodayHighlighted: false,
        defaultDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          color: LIGHT_GREY_COLOR,
        ),
        weekendDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          color: LIGHT_GREY_COLOR,
        ),
        selectedDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          border: Border.all(
            color: PRIMARY_COLOR,
            width: 1.0,
          ),
        ),
        defaultTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
        weekendTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
        selectedTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: PRIMARY_COLOR,
        ),
      ),
    );
  }
}

home_screen.dart

import 'package:flutter/material.dart';
import 'package:calendar_scheduler/component/main_calender.dart';
import 'package:calendar_scheduler/component/schedule_card.dart';
import 'package:calendar_scheduler/component/today_banner.dart';
import 'package:calendar_scheduler/component/schedule_bottom_sheet.dart';
import 'package:calendar_scheduler/const/colors.dart';
import 'package:get_it/get_it.dart';
import 'package:calendar_scheduler/database/drift_database.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  DateTime selectedDate = DateTime.utc(
    DateTime.now().year,
    DateTime.now().month,
    DateTime.now().day,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: PRIMARY_COLOR,
        onPressed: () {
          showModalBottomSheet(
            context: context,
            isDismissible: true,
            builder: (_) => ScheduleBottomSheet(selectedDate: selectedDate),
            isScrollControlled: true,
          );
        },
        child: Icon(Icons.add),
      ),
      body: SafeArea(
        child: Column(
          children: [
            MainCalender(
              selectedDate: selectedDate,
              onDaySelected: onDaySelected,
            ),
            SizedBox(height: 8),
            StreamBuilder<List<Schedule>>(
              stream: GetIt.I<LocalDatabase>().watchSchedules(selectedDate),
              builder: (context, snapshot) {
                return TodayBanner(
                  selectedDate: selectedDate,
                  count: snapshot.data?.length ?? 0,
                );
              },
            ),
            SizedBox(height: 8),
            Expanded(
              child: StreamBuilder<List<Schedule>>(
                stream: GetIt.I<LocalDatabase>().watchSchedules(selectedDate),
                builder: (context, snapshot) {
                  if (!snapshot.hasData) return Container();

                  return ListView.builder(
                    itemCount: snapshot.data!.length,
                    itemBuilder: (context, index) {
                      final schedule = snapshot.data![index];

                      return Dismissible(
                        key: ObjectKey(schedule.id),
                        direction: DismissDirection.startToEnd,
                        onDismissed: (DismissDirection direction) {
                          GetIt.I<LocalDatabase>().removeSchedule(schedule.id);
                        },
                        child: Padding(
                          padding: const EdgeInsets.only(
                              bottom: 8, left: 8, right: 8),
                          child: ScheduleCard(
                            startTime: schedule.startTime,
                            endTime: schedule.endTime,
                            content: schedule.content,
                          ),
                        ),
                      );
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  void onDaySelected(DateTime selectedDate, DateTime focusedDate) {
    setState(() {
      this.selectedDate = selectedDate;
    });
  }
}

6. 전체 코드 설명 (표)

MainCalender 위젯

HomeScreen 위젯

7. 실행 결과

• 일정 카드를 왼쪽에서 오른쪽으로 밀면 카드가 사라지고, DB에서도 해당 일정이 삭제된다.
• 일정이 삭제되자마자 TodayBanner의 일정 개수가 자동으로 줄어든다.
• 날짜를 바꿔도 해당 날짜의 일정 개수가 배너에 실시간으로 반영된다.

8. 내가 바꿔본 점

• direction을 DismissDirection.startToEnd에서 DismissDirection.endToStart로 바꿨더니, 오른쪽→왼쪽으로 밀었을 때 삭제가 동작했다.
• count: 0으로 고정했을 때와 snapshot.data?.length ?? 0으로 연결했을 때를 비교했더니, 고정값은 일정을 추가해도 숫자가 변하지 않았고, Stream으로 연결하니 바로 반영되었다.

9. 에러 & 해결 방법

에러가 없었다.

10. 오늘 알게 된 점

• Flutter에서 데이터를 다루는 방식이 Future(한 번)와 Stream(계속 감시) 두 가지로 나뉜다는 것을 정리하니, 언제 어떤 걸 써야 하는지 기준이 생겼다. 실시간으로 바뀌어야 하는 데이터는 Stream, 한 번만 가져오면 되는 데이터는 Future를 쓰면 된다.
• 상태 관리에서 "상태 = 데이터"라는 것이 확실히 와닿았다. setState()를 호출해야 Flutter가 build()를 다시 실행한다는 흐름을 이해했다.
• 캐싱은 단순히 변수에 저장하는 것이지만, 서버와 사용자 사이의 지연을 줄여주는 중요한 개념이라는 것을 알게 됐다. 자주 바뀌지 않는 데이터는 캐싱해두면 UX가 훨씬 자연스러워진다.

11. 아직 헷갈리는 점

• 캐시 무효화: 캐시에 저장된 데이터가 서버에서 바뀌었을 때 어떻게 갱신해야 하는지 (언제 캐시를 날리고 다시 요청해야 하는지) 기준이 아직 헷갈린다.

프론트엔드란 사용자가 직접 눈으로 보는 화면을 말합니다.

버튼, 텍스트, 댓글창, 메뉴, 로그인 화면, 좋아요 버튼, 게시글 목록, 프로필 카드 ...

React의 핵심 철학

화면을 작은 조각(컴포넌트)으로 나눠서 만든다

레고 블록처럼 각각의 조각을 만들어두고, 필요한 곳에 끼워 맞추는 방식입니다.
덕분에 코드를 재사용하기 쉽고, 수정할 때 해당 조각만 건드리면 됩니다.

프로젝트 시작 — Vite로 React 세팅

React 프로젝트는 Vite를 사용해서 시작합니다.

npm create vite@latest my-app 
cd my-app
npm install
npm run dev

주요 파일 구조

JSX 작성 시 꼭 기억할 규칙

1. return 내부의 요소는 반드시 하나의 덩어리로 묶여야 한다
   → 여러 태그를 나란히 쓰고 싶다면 <>...</> (Fragment)로 감싸기

2. 클래스 지정은 class가 아니라 className
   → class는 JavaScript의 예약어라서 JSX에서는 className을 사용

3. 중괄호 {}로 JavaScript 표현식 삽입
   → {user.name}, {count + 1} 처럼 변수나 연산을 넣을 수 있음

컴포넌트 — 화면을 조각으로 나누기

React에서 컴포넌트는 화면의 한 조각을 만드는 함수입니다.

// ProfileCard라는 컴포넌트를 만들고
function ProfileCard() {
  return <p>저는 정원입니다.</p>;
}

// App에서 레고처럼 끼워서 사용
function App() {
  return (
    <div>
      <h1>React 스터디 1일차</h1>
      <ProfileCard />  {/* 컴포넌트 사용! */}
    </div>
  );
}

State — 변하는 값을 React가 관리한다

왜 일반 변수로는 안 될까?

// 이렇게 하면 버튼을 눌러도 화면이 안 바뀜
let count = 0;

function increase() {
  count = count + 1; // 값은 바뀌지만 React는 모른다!
}

일반 변수(let)는 값이 바뀌어도 React가 감지하지 못해서 화면이 다시 그려지지 않습니다.

useState — React에게 "변수 값이 바뀌면 자동으로 화면도 업데이트 해줘"

import { useState } from "react";

const [count, setCount] = useState(0);
//     ↑ 현재 값   ↑ 값을 바꾸는 함수   ↑ 초기값

useState를 사용하면 값이 바뀔 때마다 React가 자동으로 화면을 다시 그려줍니다.

State가 필요한 대표적인 예시

• 좋아요 수
• 장바구니 수량
• 다크 모드 ON/OFF
• 새 댓글 추가
• 로그인 여부 (로그인하면 마이페이지 보이기)

실습 1 — 카운터 만들기

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  function increase() {
    setCount(count + 1);
  }
  function decrease() {
    setCount(count - 1);
  }
  function reset() {
    setCount(0);
  }

  return (
    <>
      <h1>카운터</h1>
      <p>현재 숫자 : {count}</p>
      <button onClick={increase}>+1 증가</button>
      <button onClick={decrease}>-1 감소</button>
      <button onClick={reset}>초기화</button>
    </>
  );
}

버튼을 클릭하면 setCount가 호출되고, React가 새로운 count 값으로 화면을 다시 렌더링합니다.

실습 2 (숙제) — useState 응용 3가지

1. 감정 카운터

const [happy, setHappy] = useState(0);
const [sad, setSad] = useState(0);

<button onClick={() => setHappy(happy + 1)}>기쁨 😊 : {happy}</button>
<button onClick={() => setSad(sad + 1)}>슬픔 😭 : {sad}</button>

2. 응원하기 버튼

const [cheer, setCheer] = useState(0);

<p>지금까지 {cheer}번 응원받았습니다!</p>
<button onClick={() => setCheer(cheer + 1)}>파이팅</button>

3. 프레임워크 투표앱

const [reactVote, setReactVote] = useState(0);
const [vueVote, setVueVote] = useState(0);
const [svelteVote, setSvelteVote] = useState(0);

<button onClick={() => setReactVote(reactVote + 1)}>React</button>
<button onClick={() => setVueVote(vueVote + 1)}>Vue</button>
<button onClick={() => setSvelteVote(svelteVote + 1)}>Svelte</button>

State가 여러 개일 때는 각각 useState를 따로 선언합니다.
서로 독립적으로 관리되기 때문에 한 값이 바뀌어도 다른 값에는 영향을 주지 않습니다.

핵심 정리

처음 코딩을 배울 때는 하나의 파일에 모든 코드를 작성하게 됩니다.
하지만 프로젝트가 커질수록 한 파일에 코드를 길게 적으면 이런 문제들이 생깁니다.

이 문제를 해결하는 것이 바로 모듈 시스템입니다.

Node.js 모듈 시스템의 핵심 2가지

module.exports — "이 기능을 다른 파일에서도 쓸 수 있게 내보낼게"

// math.js

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

function multiply(a, b) {
  return a * b;
}

function div(a, b) {
  return a / b;
}

function power(a, b) {
  return a ** b;
}

function sqare(a) {
  return a * a;
}

module.exports = {
  add,
  subtract,
  multiply,
  div,
  power,
  sqare,
};

{ add: add } 처럼 키와 값이 같을 때는 { add } 로 줄여 쓸 수 있습니다! 자바스크립트에서 앞뒤가 똑같으면 하나만 써도 됩니다.

require() — "저 파일에 있는 기능을 가져와서 사용할게"

// app.js

const { add, subtract, multiply, div, power, sqare } = require("./math");

require("./math")로 math.js에서 내보낸 객체 전체를 가져온 다음,
구조 분해 할당으로 필요한 함수만 꺼내서 사용합니다.

process.argv — 터미널에서 입력값 받기

Node.js에서 터미널로 직접 인수를 전달하려면 process.argv를 사용합니다.

node app.js add 10 5

process.argv는 배열이고, 각 인덱스의 의미는 다음과 같습니다.

실습 — 터미널 계산기 만들기

math.js의 함수들을 app.js에서 불러와, 터미널 입력값으로 연산을 수행하는 계산기를 만들어봤습니다.

// app.js

const { add, subtract, multiply, div, power, sqare } = require("./math");

const operator = process.argv[2];      // 연산자
const num1 = Number(process.argv[3]);  // 첫 번째 숫자
const num2 = Number(process.argv[4]);  // 두 번째 숫자

if (operator === "add") {
  console.log(add(num1, num2));
} else if (operator === "subtract") {
  console.log(subtract(num1, num2));
} else if (operator === "multiply") {
  console.log(multiply(num1, num2));
} else if (operator === "div") {
  console.log(div(num1, num2));
} else if (operator === "power") {
  console.log(power(num1, num2));
} else if (operator === "sqare") {
  console.log(sqare(num1));
} else {
  console.log("지원하지 않는 연산자입니다");
}

실행 예시

node app.js add 10 5       # 15
node app.js subtract 10 5  # 5
node app.js multiply 10 5  # 50
node app.js div 10 5       # 2
node app.js power 2 8      # 256
node app.js sqare 9        # 81

process.argv로 받아오는 값은 문자열(string) 이기 때문에,
숫자 연산을 하려면 반드시 Number()로 변환해줘야 합니다!

정리

math.js  ──[module.exports]──▶  app.js
         ◀──[require()]──────

• module.exports : 기능을 파일 밖으로 내보낸다
• require() : 다른 파일의 기능을 내 파일로 가져온다
• process.argv : 터미널 실행 시 입력한 값을 배열로 받아온다

모듈로 파일을 분리하면 코드가 훨씬 읽기 쉽고, 수정하기 쉽고, 재사용하기 쉬워집니다.

그냥 하는 공부가 아니라, 이해를 위한 벨로그를 쓰는 방법을 정리했다. 코드를 해석하는 수준을 넘어서, 내가 설명할 수 있을 때까지 이해했는지 확인하는 글쓰기 방법이다.

왜 벨로그를 써야 하나?

공부하고 그냥 넘어가면 3일 뒤에 기억이 안 난다. 그런데 글로 쓰려고 하면 내가 뭘 모르는지가 바로 드러난다.

설명할 수 없으면 아직 이해한 게 아니다.

나쁜 제목 vs 좋은 제목

포스팅 제목부터 구체적으로 쓰는 게 중요하다. 제목이 구체적이면, 글 내용도 자연스럽게 구체적이 된다.

포스팅 구조 — 9단계 템플릿

1단계. 오늘의 목표

오늘 뭘 배웠는지 한 문장으로 정리한다.

오늘은 Flutter에서 화면을 구성하는 기본 단위인 Widget을 배웠다.

2단계. 핵심 개념

개념을 설명할 때는 아래 3가지 질문에 답하는 방식으로 쓴다.

• 이 개념이 뭐야?
• 왜 필요해?
• 언제 써?

예시 — 개념 설명 문장 패턴

______는 Flutter에서 _____할 때 사용하는 위젯이다.
______는 Dart에서 _____을 표현하기 위해 사용하는 문법이다.
이 개념은 ________ 할 때 필요하다.

실제 예시)
Column은 Flutter에서 여러 위젯을 세로로 배치할 때 사용하는 위젯이다.
이 개념은 텍스트, 버튼 등을 위아래로 나열할 때 필요하다.

3단계. 코드 예시

핵심 코드만 올린다. 전체 파일을 통째로 올리면 읽기 어렵다.

// Container 위젯 기본 예시
Container(
  width: 100,
  height: 100,
  color: Colors.blue,
)

Container는 화면에서 하나의 영역을 만들 때 사용하는 위젯이다. 크기, 색상, 여백, 테두리를 설정할 수 있어서 디자인의 기본 박스처럼 쓰인다.

4단계. 코드 설명

코드 한 줄씩 이게 무슨 의미인지 설명한다.

코드 설명 문장 패턴

이 코드는 _______를 의미한다.
_____속성은 _______을 설정한다.
____안에는 _______이 들어간다.

예시 — main() 코드 설명

void main() {
  runApp(MyApp());
}

• main() 함수는 Dart 프로그램이 시작될 때 가장 먼저 실행되는 함수다.
• runApp()은 Flutter 앱을 실행하는 함수다.
• MyApp()은 내가 만든 앱 화면의 시작점이다.

즉 이 코드는 "MyApp이라는 위젯을 앱으로 실행해라"라는 의미다.

5단계. 실행 결과

화면이나 콘솔이 어떻게 나왔는지 설명한다. 가능하면 스크린샷을 같이 올리면 좋다.

실행 결과 문장 패턴

실행 결과 __________가 화면에 표시되었다.
값을 ______에서 _______로 바꿨더니 ________이 변경되었다.

6단계. 내가 직접 바꿔본 것

공부에서 가장 중요한 단계다. 그냥 읽는 게 아니라 직접 값을 바꿔보고 어떻게 달라지는지 확인한다.

문장 패턴

처음에는 ____________이었는데, _______을 바꿔서 ________이 달라졌다.

예시

Text(
  'Hello Flutter',
  style: TextStyle(
    fontSize: 24,       // 24 → 40으로 바꿔봄
    color: Colors.blue, // blue → red로 바꿔봄
  ),
)

• fontSize를 24에서 40으로 바꿨더니 글자가 더 크게 보였다.
• Colors.blue를 Colors.red로 바꿨더니 글자 색상이 빨간색으로 바뀌었다.

7단계. 에러와 해결 방법

에러를 정리하는 것이 실력 향상에 가장 빠른 지름길이다.

에러가 무서운 게 아니라, 기록하지 않는 게 더 아깝다.

에러 정리 패턴

[에러 메시지]
- 원인: 
- 해결 방법:
- 알게 된 점:

예시

에러: Expected to find ','

원인: 위젯 안에서 속성을 작성할 때 쉼표를 빠뜨렸다.
해결 방법: Text() 위젯 뒤에 쉼표를 추가했다.
알게 된 점: Flutter는 위젯이 중첩 구조이기 때문에 괄호와 쉼표를 꼼꼼히 확인해야 한다.

처음에 원인을 잘못 짚었을 때 패턴

처음에는 ____________때문이라고 생각했다.
확인해보니 ________가 문제였다.
_______을 수정해서 문제를 해결했다.
다음에는 _______________를 주의해야겠다.

8단계. 오늘 알게 된 점

이 섹션은 내 말로 쓰는 게 핵심이다. 검색해서 나온 설명을 그대로 붙여넣으면 의미 없다.

회고 문장 패턴

오늘 가장 중요하게 이해한 내용은 _____다.
처음에는 ________라고 생각했는데, 알고 보니 ________였다.

9단계. 아직 헷갈리는 점

모르는 걸 솔직하게 남긴다. 이 내용이 다음 포스팅의 1단계 목표로 자연스럽게 이어진다.

회고 문장 패턴

아직 ________부분은 헷갈린다.
다음에는 _________을 더 연습해보고 싶다.

전체 구조 요약

1. 오늘의 목표    → 한 문장으로
2. 핵심 개념      → 이게 뭐야? 왜 필요해? 언제 써?
3. 코드 예시      → 핵심 코드만
4. 코드 설명      → 한 줄씩, 내 말로
5. 실행 결과      → 어떻게 나왔는지
6. 직접 바꿔본 것 → 값을 바꿔보고 어떻게 달라졌는지
7. 에러와 해결    → 에러 메시지, 원인, 해결, 교훈
8. 오늘 알게 된 점 → 내 말로
9. 아직 헷갈리는 점 → 다음 포스팅의 시작점

마지막으로

글을 잘 쓰려고 하지 않아도 된다. 내가 나중에 읽었을 때 이해되는 글이면 충분하다.

처음에는 문장이 어색해도 괜찮다. 쓰다 보면 코드를 보는 눈도, 글 쓰는 실력도 같이 늘어난다.

1. 오늘의 목표

Flutter에서 Drift 패키지를 사용해 SQLite 데이터베이스를 연결하고, 일정(Schedule) 데이터를 저장·조회·삭제하는 구조를 설계했다.

2. 핵심 개념

Drift의 의미

Drift는 Flutter에서 SQLite 데이터베이스를 Dart 코드로 다룰 수 있게 해주는 ORM(Object-Relational Mapping) 패키지다.

필요성

SQLite를 직접 쓰면 쿼리를 문자열로 직접 써야 한다. 오타가 나도 컴파일 타임에 잡히지 않는다. Drift를 쓰면 쿼리를 Dart 코드로 작성할 수 있어서 자동완성도 되고, 에러도 미리 잡힌다.

사용할 때

앱을 껐다 켜도 데이터가 남아있어야 할 때 — 일정, 메모, 즐겨찾기 같은 로컬 저장 기능을 만들 때 사용한다.

3. 핵심 코드 (파일별)

테이블 스키마 — schedule.dart

class Schedules extends Table {
  IntColumn get id => integer().autoIncrement()();
  TextColumn get content => text()();
  DateTimeColumn get date => dateTime()();
  IntColumn get startTime => integer()();
  IntColumn get endTime => integer()();
}

데이터베이스 클래스 — drift_database.dart

@DriftDatabase(tables: [Schedules])
class LocalDatabase extends _$LocalDatabase {
  LocalDatabase() : super(_openConnection());

  Stream<List<Schedule>> watchSchedules(DateTime date) =>
      (select(schedules)..where((tbl) => tbl.date.equals(date))).watch();

  Future<int> createSchedule(SchedulesCompanion data) =>
      into(schedules).insert(data);

  Future<int> removeSchedule(int id) =>
      (delete(schedules)..where((tbl) => tbl.id.equals(id))).go();

  @override
  int get schemaVersion => 1;
}

DB 파일 연결 — _openConnection()

LazyDatabase _openConnection() {
  return LazyDatabase(() async {
    final dbFolder = await getApplicationCacheDirectory();
    final file = File(p.join(dbFolder.path, 'db.sqlite'));
    return NativeDatabase(file);
  });
}

4. 코드 설명 (한 줄씩, 내 말로)

테이블 스키마 — schedule.dart

CRUD 메서드 — drift_database.dart

DB 파일 연결 — _openConnection()

5. 실행 결과

달력에서 날짜를 선택하면 해당 날짜의 일정 목록이 아래에 표시된다. 일정을 추가하면 리스트에 즉시 반영되고, 삭제하면 바로 사라진다. watchSchedules()가 Stream을 반환하기 때문에, StreamBuilder와 연결하면 따로 setState()를 호출하지 않아도 UI가 자동 갱신된다.

6. 직접 바꿔본 것

처음에는 .watch() 대신 .get()을 써봤다. get()은 Future를 반환하기 때문에 일정을 추가해도 화면이 바뀌지 않았다. 다시 새로고침(화면 이동 후 돌아오기)을 해야만 목록이 갱신되었다.

.watch()로 바꾸니까 일정을 추가/삭제하는 순간 화면이 자동으로 갱신되었다. get()은 스냅샷, watch()는 실시간 구독이라고 이해하면 딱 맞다.

7. 오늘 알게 된 점

가장 중요하게 이해한 건 Drift의 코드 생성 구조다.

내가 schedule.dart에서 테이블을 정의하면, build_runner가 drift_database.g.dart를 자동으로 만들어준다. 내가 쓰는 LocalDatabase는 그 생성된 파일의 _$LocalDatabase를 상속한다. 처음엔 _$LocalDatabase가 어디서 나온 건지 몰라서 당황했는데, .g.dart 파일을 보니 거기 있었다.

처음에는 "DB에서 데이터를 가져오면 그냥 Future로 받으면 되는 거 아닌가?" 라고 생각했는데, 알고 보니 일정 앱처럼 데이터가 자주 바뀌는 경우엔 Stream으로 구독하는 게 훨씬 편했다. 데이터가 바뀔 때마다 UI를 직접 갱신하는 코드를 쓸 필요가 없기 때문이다.

8. 아직 헷갈리는 점

schemaVersion을 올릴 때 마이그레이션을 어떻게 작성하는지 아직 모른다. 지금은 버전이 1이라 괜찮지만, 나중에 테이블 컬럼을 추가하거나 변경하면 기존 데이터가 어떻게 되는지 궁금하다.

다음엔 MigrationStrategy를 써서 스키마를 업데이트하는 방법을 공부해봐야겠다.

Node.js는 자바스크립트를 브라우저 밖에서도 실행할 수 있게 해주는 런타임 환경이다. 즉, 라이브러리나 프레임워크가 아니라 자바스크립트 실행 환경이다.

과거(2008년 이전)에는 자바스크립트가 오직 브라우저 안에서만 실행되었다. 그 이유는 브라우저 안에 자바스크립트를 실행하는 엔진이 포함되어 있었기 때문이다. 그래서 브라우저가 없으면 자바스크립트 파일은 단순한 텍스트 파일에 불과했다.

2009년, 라이언 달(Ryan Dahl)이 구글 크롬의 엔진을 가져와 브라우저 없이도 자바스크립트를 실행할 수 있게 만들었고, Node가 만들어지게 되었다.

2. 왜 Node.js를 배우는가

실제 개발 환경에서는 서버를 사용하는 경우가 많다. Node.js를 배우면 서버가 어떻게 동작하는지 이해할 수 있고, 최근 많이 사용되는 서버리스 방식도 더 쉽게 이해할 수 있다.

3. REPL이란 무엇인가

Node.js에는 REPL이라는 기능이 있다.

REPL은 다음의 과정을 반복한다.

• Read: 입력을 읽는다
• Eval: 코드를 실행한다
• Print: 결과를 출력한다
• Loop: 다시 입력을 기다린다 이 구조는 브라우저의 콘솔창과 유사하며, Node 환경에서 자바스크립트를 바로 실행할 수 있게 해준다.

4. npm이란 무엇인가

npm은 Node Package Manager의 약자로, Node 생태계의 앱스토어라고 말 할 수 있다. 전세계 개발자들이 만든 JS 코드 묶음(=패키지)을 누구나 다운 받아 쓸 수 있게 하는 시스템이다

예시:

• npm install: 패키지 설치
• npm run dev: scripts에 정의된 명령 실행

5. package.json 파일

package.json은 프로젝트의 설정 정보를 담고 있는 파일이다.

{
  "name": "nodejs-day1",
  "version": "1.0.0",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

주요 항목:

• name: 프로젝트 이름
• version: 프로젝트 버전
• type: module → ES Module(import/export) 사용 가능
• main: 프로젝트의 시작 파일
• scripts: npm run으로 실행할 명령어 정의

6. 모듈(Module)이란

모듈은 기능 단위로 나누어진 자바스크립트 파일이다. 다른 파일에서 가져와 사용할 수 있어 코드 재사용이 가능하다. ㄴ import

7. 모듈 방식의 변화

과거에는 CommonJS 방식이 사용되었다.

const math = require('./math');

이후 ES Module이 등장하면서 다음과 같이 사용할 수 있게 되었다.

import math from './math.js';

8. 코드 정리

1. date.js

import dayjs from "dayjs";

const now = dayjs();
console.log(now);
console.log(now.format("YYYY-MM-DD"));
console.log(now.format("YYYY년 MM월 DD일"));
console.log(now.format("YYYY-MM-DD HH:mm:ss"));

const nextWeek = now.add(7, "day");
console.log("일주일 후:", nextWeek.format("YYYY년 MM월 DD일"));

설명

dayjs 라이브러리를 사용하여 현재 날짜와 시간을 다루는 코드이다.

• dayjs() : 현재 날짜와 시간을 가져온다.

• format() : 날짜를 원하는 형식의 문자열로 변환한다.

  • "YYYY-MM-DD" → 2026-04-25 형태
  • "YYYY년 MM월 DD일" → 한국어 날짜 형식
  • "YYYY-MM-DD HH:mm:ss" → 날짜 + 시간

• add(7, "day") : 현재 날짜에서 7일을 더해 일주일 후 날짜를 계산한다.

2. greeting.js

export default function (name) {
  return `안녕하세요, ${name}!`;
}

설명

사용자의 이름을 받아 인사말을 반환하는 함수이다.

• export default : 이 파일의 기본 내보내기 값
• name : 매개변수로 전달받은 이름
• 템플릿 리터럴(`)을 사용하여 문자열을 생성

다른 파일에서 import할 때 이름을 자유롭게 지정할 수 있다.

3. math.js

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

export const PI = 3.14159;

설명

기본적인 수학 연산을 수행하는 함수들을 모아둔 모듈이다.

• add(a, b) : 두 수를 더하는 함수
• multiply(a, b) : 두 수를 곱하는 함수
• PI : 원주율 상수

각 요소를 export하여 다른 파일에서 사용할 수 있도록 한다.

4. main.js

import { add, multiply, PI } from "./math.js";
import greet from "./greeting.js";

console.log(add(3, 5));
console.log(multiply(4, 7));
console.log(`원주율은 ${PI}입니다.`);
console.log(greet("서영"));

설명

여러 모듈을 불러와 실행하는 메인 파일이다.

• import {} : 이름을 지정하여 가져오는 방식 (named export)
• import greet : default export를 가져오는 방식
• console.log() : 실행 결과를 출력

각 모듈에서 만든 기능을 실제로 사용하는 역할을 한다.

5. package.json

{
  "name": "nodejs-day1",
  "version": "1.0.0",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "start": "node main.js",
    "dev": "node --watch main.js"
  },
  "dependencies": {
    "dayjs": "^1.11.20"
  }
}

설명

Node.js 프로젝트의 설정 정보를 담고 있는 파일이다.

• type: "module" → ES Module(import/export) 문법 사용 가능

• scripts

  • npm run start : main.js 실행
  • npm run dev : 파일 변경 시 자동 재실행

• dependencies → 프로젝트에서 사용하는 외부 라이브러리 목록 (dayjs)

6. package-lock.json

설명

설치된 패키지들의 정확한 버전 정보를 기록하는 파일이다.

• npm install 시 자동 생성
• 동일한 환경에서 동일한 버전이 설치되도록 보장
• 직접 수정하지 않고 npm이 관리함

9. 정리 + 오늘의 학습 목표

Node.js가 프레임워크가 아닌 런타임임을 자기 말로 설명할 수 있다

Node.js는 기능을 제공하는 도구(프레임워크)가 아니라 자바스크립트를 실행해주는 환경이다.

브라우저 없이도 JS 파일을 실행할 수 있게 해주며, 코드를 “돌리는 역할”을 한다는 점에서 라이브러리나 프레임워크와 다르다.

서버리스 방식과 전통 서버 방식의 차이를 구분할 수 있다

Node.js는 기능을 제공하는 도구(프레임워크)가 아니라 자바스크립트를 실행해주는 환경이다.

브라우저 없이도 JS 파일을 실행할 수 있게 해주며, 코드를 “돌리는 역할”을 한다는 점에서 라이브러리나 프레임워크와 다르다.

Node REPL 에서 자바 스크립트를 직접 실행할 수 있다.

Node REPL은 코드를 입력하면 즉시 실행하고 결과를 바로 보여주는 환경이다.

브라우저 콘솔처럼 동작하며, 간단한 테스트나 실습을 빠르게 할 때 유용하다.

10. 마무리

오늘은 Node의 탄생부터 기초를 조금 배워봤습니다! 더 열심히 공부해서 서버에 대해 높은 이해도를 가질 수 있도록 하겠습니다 그럼 우리 모두 즐코!

지난 시간에 구현한 캘린더 UI에 이어, 실제 일정을 표시하는 ScheduleCard, 오늘 날짜를 알려주는 TodayBanner, 그리고 일정을 입력받기 위한 BottomSheet와 CustomTextField를 구현하고 화면에 배치하는 방법

코드 분석

component/custom_text_field.dart

사용자로부터 시간이나 일정 내용을 입력받는 공통 위젯

import 'package:calendar_scheduler/const/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class CustomTextFeild extends StatelessWidget {
  final String label;
  final bool isTime;
  const CustomTextFeild({
    required this.label,
    required this.isTime,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          label,
          style: TextStyle(
            color: PRIMARY_COLOR,
            fontWeight: FontWeight.w600,
          ),
        ),
        Expanded(
          flex: isTime ? 0 : 1,
          child: TextFormField(
            cursorColor: Colors.grey,
            maxLines: isTime ? 1 : null,
            expands: !isTime,
            keyboardType: isTime
                ? TextInputType.number
                : TextInputType.multiline,
            inputFormatters: isTime
                ? [FilteringTextInputFormatter.digitsOnly]
                : [],
            decoration: InputDecoration(
              border: InputBorder.none,
              filled: true,
              fillColor: Colors.grey[300],
              suffixText: isTime ? '시' : null,
            ),
          ),
        ),
      ],
    );
  }
}

component/schedule_card.dart

등록된 일정의 시간과 내용을 시각적으로 보여주는 카드 위젯

import 'package:calendar_scheduler/const/colors.dart';
import 'package:flutter/material.dart';

class ScheduleCard extends StatelessWidget {
  final int startTime;
  final int endTime;
  final String content;

  const ScheduleCard({
    required this.startTime,
    required this.endTime,
    required this.content,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(width: 1.0, color: PRIMARY_COLOR),
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: IntrinsicHeight(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              _Time(startTime: startTime, endTime: endTime),
              SizedBox(width: 16.0),
              _Content(content: content),
              SizedBox(width: 16.0),
            ],
          ),
        ),
      ),
    );
  }
}

class _Time extends StatelessWidget {
  final int startTime;
  final int endTime;

  const _Time({required this.startTime, required this.endTime, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final textStyle = TextStyle(fontWeight: FontWeight.w600, color: PRIMARY_COLOR, fontSize: 16);
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('${startTime.toString().padLeft(2, '0')}:00', style: textStyle),
        Text('${endTime.toString().padLeft(2, '0')}:00', style: textStyle.copyWith(fontSize: 10.0)),
      ],
    );
  }
}

class _Content extends StatelessWidget {
  final String content;
  const _Content({required this.content, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(child: Text(content));
  }
}

component/today_banner.dart & schedule_bottom_sheet.dart

상단 날짜 표시 배너와 하단 입력창 부분

// today_banner.dart 일부
return Container(
  color: PRIMARY_COLOR,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text('${selectDate.year}년 ${selectDate.month}월 ${selectDate.day}일'),
      Text('$count개'),
    ],
  ),
);

// schedule_bottom_sheet.dart 일부
showModalBottomSheet(
  context: context,
  isDismissible: true,
  builder: (_) => ScheduleBottomSheet(),
);

screen/home_screen.dart

위의 컴포넌트들을 모두 모아 하나의 화면으로 조립

class _HomeScreenState extends State<HomeScreen> {
  DateTime selectedDate = DateTime.utc(
    DateTime.now().year, DateTime.now().month, DateTime.now().day,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: PRIMARY_COLOR,
        onPressed: () {
          showModalBottomSheet(
            context: context,
            isDismissible: true,
            builder: (_) => ScheduleBottomSheet(),
          );
        },
      ),
      body: SafeArea(
        child: Column(
          children: [
            MainCalender(selectedDate: selectedDate, onDaySelected: onDaySelected),
            SizedBox(height: 8),
            TodayBanner(selectDate: selectedDate, count: 0),
            ScheduleCard(startTime: 12, endTime: 14, content: '프로그램 공부'),
          ],
        ),
      ),
    );
  }
}

이 파일이 하는 일: 캘린더, 배너, 일정 카드를 세로(Column)로 배치하고, FAB를 통해 일정을 추가할 수 있는 진입점을 제공합니다.

새롭게 알게 된 것

• IntrinsicHeight: 자식 위젯들의 높이를 가장 큰 자식에 맞춰주는 위젯으로, 디자인의 일관성을 맞추기 매우 편리하다.
• padLeft(): 문자열의 길이를 고정하고 빈 곳을 특정 문자로 채우는 함수를 통해 시간 포맷팅을 쉽게 구현할 수 있었다.
• InputFormatters: 텍스트 필드에서 특정 타입(숫자 등)만 입력받게 강제하는 법을 배웠다.

헷갈리는 부분

• Expanded와 Column: CustomTextField 내에서 Expanded를 사용할 때 부모 위젯의 제약 조건에 따라 에러가 날 수 있어 높이 설정에 유의해야 한다.
• State 공유: 바텀 시트에서 입력한 값을 어떻게 다시 HomeScreen의 리스트에 추가할지에 대한 로직 구현이 더 연습이 필요할 것 같다.

실습

Flutter는 Google이 만든 크로스 플랫폼 앱 개발 프레임워크이다. 일반적으로 앱을 개발하려면 Android는 Kotlin, iOS는 Swift를 따로 써야 한다. 하지만 Flutter를 사용하면 Dart 언어 하나로 Android, iOS, 웹, 데스크톱 앱을 동시에 만들 수 있다.

Flutter의 가장 큰 장점 중 하나는 Hot Reload다. 코드를 수정하고 저장하면 앱이 처음부터 재시작되는 게 아니라 바뀐 부분만 즉시 화면에 반영된다. 덕분에 UI를 조금씩 다듬으면서 빠르게 작업하기에 탁월하다.

한 줄 요약: Dart 하나로 Android + iOS + Web + Desktop, Hot Reload로 빠른 UI 개발.

2. 프로젝트 폴더 구조

① lib 폴더

우리가 작성하는 모든 Dart 코드는 이 폴더 안에 들어간다. main.dart 파일이 앱의 시작점으로, 앱을 실행하면 가장 먼저 이 파일이 실행된다.

화면이 여러 개라면 lib/screen/ 같은 하위 폴더를 만들어 화면별로 파일을 나눠 관리하는 것이 일반적인 패턴이다.

lib/
  ├── screen/
  │   └── home_screen.dart
  └── main.dart

② pubspec.yaml 파일

프로젝트 전체의 설정 파일이다. 외부 패키지(라이브러리)를 등록하거나, 이미지 같은 에셋(assets)을 등록할 때 사용한다.

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.2    # 외부 패키지 등록

flutter:
  assets:
    - asset/img/             # 이미지 폴더 등록

⚠️ 주의: pubspec.yaml을 수정하면 반드시 Pub get을 실행해야 변경 사항이 적용된다.

3. 위젯(Widget)

Flutter에서 화면에 보이는 모든 것 — 글자, 버튼, 이미지, 여백 — 은 전부 위젯(Widget) 이다. 작은 위젯들을 조립해서 화면을 만드는 방식이다.

위젯은 트리(tree) 구조로 중첩된다. 위젯 안에 위젯이 들어가고, 그 안에 또 위젯이 들어가는 식이다.

Scaffold(
  appBar: AppBar(
    title: Text('다연쌤 최고'),
  ),
  body: WebViewWidget(
    controller: webViewController,
  ),
)

위젯은 상태(state)의 유무를 기준으로 두 종류로 나뉜다.

① StatelessWidget (상태 없는 위젯)

한 번 그려지면 변하지 않는 위젯이다. 데이터가 바뀔 일이 없는 정적인 화면에 사용한다. build() 메서드 하나만 존재하며, 이 메서드가 화면을 그리는 역할을 담당한다.

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(...);
  }
}

② StatefulWidget (상태 있는 위젯)

사용자의 조작이나 시간에 따라 화면이 바뀌어야 할 때 사용한다. Flutter가 내부적으로 위젯을 효율적으로 관리하기 위해 클래스 2개로 나뉜다.

• HomeScreen — 껍데기(위젯 정의)
• _HomeScreenState — 실제 내용과 상태 관리

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  DateTime firstDay = DateTime.now(); // 상태값

  @override
  Widget build(BuildContext context) {
    return Scaffold(...);
  }
}

상태를 변경할 때는 반드시 setState() 안에서 값을 바꿔야 Flutter가 변경을 감지하고 화면을 다시 그린다.

StatelessWidget vs StatefulWidget 비교

4. 앱이 실행되는 흐름

Flutter 앱은 항상 아래 순서로 시작된다.

void main() {              // ① 앱의 시작점
  runApp(                  // ② 위젯을 화면에 띄우는 함수
    MaterialApp(           // ③ 앱 전체를 감싸는 최상위 위젯
      home: HomeScreen(),  // ④ 첫 화면 지정
    ),
  );
}

• main() — Dart 프로그램의 시작점. Java의 public static void main과 동일한 역할.
• runApp() — 괄호 안에 넣은 위젯을 화면에 표시.
• MaterialApp — 앱 전체를 감싸는 최상위 위젯. Google Material Design 적용. theme, home 등을 설정.
• Scaffold — 각 화면의 뼈대. appBar(상단바), body(본문), floatingActionButton(하단 버튼) 제공.

전체 구조를 트리로 나타내면 다음과 같다.

main()
  └── runApp()
        └── MaterialApp   // 앱 전체 설정
              └── HomeScreen   // 첫 화면
                    └── Scaffold   // 화면 뼈대

5. 레이아웃 위젯 — 화면 배치하기

① Column — 세로 배치

children 배열에 위젯을 넣으면 위에서 아래로 순서대로 배치된다.

Column(
  children: [
    Text('U&I'),
    Text('우리 처음 만난 날'),
    IconButton(...),
    Text('D+365'),
  ],
)

② Row — 가로 배치

children 배열에 위젯을 넣으면 왼쪽에서 오른쪽으로 나란히 배치된다.

Row(
  children: [
    Icon(Icons.star),
    Text('별점'),
    Text('4.5'),
  ],
)

③ 정렬 옵션 (mainAxis / crossAxis)

Column과 Row에는 두 가지 정렬 축이 존재한다.

• mainAxis(주축) — 위젯이 나열되는 방향 (Column: 세로, Row: 가로)
• crossAxis(교차축) — 주축의 반대 방향

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [...],
)

자주 쓰는 mainAxisAlignment 값 정리:

6. 자주 쓰는 기본 위젯

① SizedBox — 빈 공간 만들기

Flutter에서는 CSS의 margin이나 padding 대신 SizedBox를 끼워 넣어 간격을 만드는 방식을 많이 사용한다.

// 세로 16px 여백
const SizedBox(height: 16),

// 가로 16px 여백
const SizedBox(width: 16),

② SafeArea — 안전 영역 확보

요즘 스마트폰에는 상단에 노치(카메라 영역)가 있고, 하단에 홈 인디케이터가 있다. SafeArea로 감싸면 그 영역을 자동으로 피해서 콘텐츠를 배치할 수 있다.

SafeArea(
  top: true,      // 위쪽 노치 영역 피하기
  bottom: false,  // 아래쪽은 피하지 않기
  child: Column(...),
)

③ Center — 가운데 정렬

자식 위젯을 부모 영역의 정가운데에 배치한다.

Center(
  child: Image.asset('asset/img/j.jpg'),
)

7. 이미지 넣기

Flutter에서 로컬 이미지를 사용하려면 총 3단계를 거쳐야 한다.

① 폴더 만들기 — 프로젝트 루트에 asset/img/ 폴더를 만들고 이미지 파일을 넣는다.

② pubspec.yaml 등록 — 아래와 같이 경로를 등록한 뒤 반드시 Pub get을 실행한다.

flutter:
  assets:
    - asset/img/   # 폴더 안 모든 파일 사용 가능

③ 코드에서 사용 — Image.asset()으로 경로를 지정하면 된다.

Image.asset('asset/img/whtjdcks.jpg')

⚠️ pubspec.yaml 수정 후 Pub get을 빠뜨리면 이미지가 로드되지 않는다.

8. 스타일 한 곳에서 관리하기 (Theme)

텍스트 스타일을 각 Text 위젯마다 직접 적으면, 나중에 폰트 크기를 바꿀 때 전부 찾아서 수정해야 한다. MaterialApp의 theme에 한 번만 정의해두면 main.dart 한 곳만 수정해도 앱 전체에 일괄 반영된다.

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      displayLarge: TextStyle(
        color: Colors.white,
        fontSize: 80,
        fontWeight: FontWeight.w700,
      ),
      displayMedium: TextStyle(color: Colors.white, fontSize: 50),
      bodyLarge: TextStyle(color: Colors.white, fontSize: 30),
      bodyMedium: TextStyle(color: Colors.white, fontSize: 20),
    ),
  ),
  home: HomeScreen(),
)

각 화면에서는 Theme.of(context)로 정의된 스타일을 가져와 사용한다.

final textTheme = Theme.of(context).textTheme;

Text('U&I', style: textTheme.displayLarge),
Text('우리 처음 만난 날', style: textTheme.bodyLarge),

💡 context는 "내가 위젯 트리에서 어디에 있는지"를 알려주는 정보다. 이를 통해 상위에 설정된 Theme 정보를 가져올 수 있다.

9. 위젯을 클래스로 분리하기

한 파일에 모든 코드를 넣으면 길어질수록 읽기가 어려워진다. 화면의 각 부분을 의미 단위로 잘라 별도의 위젯 클래스로 만드는 것이 Flutter의 일반적인 패턴이다.

class _DDay extends StatelessWidget {
  final GestureTapCallback onHeartPressed;
  final DateTime firstDay;

  _DDay({required this.onHeartPressed, required this.firstDay});

  @override
  Widget build(BuildContext context) { ... }
}

생성자에서 값을 받아 부모 위젯 → 자식 위젯으로 데이터를 전달하는 방식이다. required 키워드를 붙이면 해당 값이 반드시 전달되도록 강제할 수 있다.

정리: 화면을 _DDay, _CoupleImage 같은 작은 위젯으로 쪼개면 코드 가독성이 높아지고, 각 위젯을 독립적으로 수정할 수 있어 유지보수에 유리하다.

table_calendar 플러그인을 활용하여 Flutter 캘린더 UI를 구현하고, 날짜 선택·포커스·스타일링 기능을 적용하는 방법

에 대해 알아보겠습니다

코드 분석

main.dart

import 'package:flutter/material.dart';
import 'package:calendar_scheduler/screen/home_screen.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomeScreen(),
    )
  );
}

이 파일이 하는 일: 앱의 시작점으로, HomeScreen을 첫 화면으로 하는 Flutter 앱을 실행한다.

const/colors.dart

import 'package:flutter/material.dart';
const PRIMARY_COLOR = Color(0xFFEC5FC9);
final LIGHT_GREY_COLOR = Colors.grey[200]!;
final DARK_GREY_COLOR = Colors.grey[600]!;
final TEXT_FIELD_FILL_COLOR = Colors.grey[300]!;

이 파일이 하는 일: 앱 전체에서 반복 사용되는 색상값을 한 곳에 모아 관리한다. 나중에 색상을 바꿀 때 이 파일 하나만 수정하면 앱 전체에 반영된다.

screen/home_screen.dart

import 'package:flutter/material.dart';
import 'package:calendar_scheduler/component/main_calender.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  DateTime selectedDate = DateTime.utc(
    DateTime.now().year,
    DateTime.now().month,
    DateTime.now().day,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            MainCalender(
              selectedDate: selectedDate,
              onDaySelected: onDaySelected,
            ),
          ],
        ),
      ),
    );
  }

  void onDaySelected(DateTime selectedDate, DateTime focusedDate) {
    setState(() {
      this.selectedDate = selectedDate;
    });
  }
}

① 클래스 선언부

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

② State 클래스 — 상태 선언

class _HomeScreenState extends State<HomeScreen> {
  DateTime selectedDate = DateTime.utc(
    DateTime.now().year,
    DateTime.now().month,
    DateTime.now().day,
  );

왜 DateTime.now() 대신 DateTime.utc()를 쓸까? table_calendar는 날짜 비교 시 UTC 기준을 사용하기 때문에, DateTime.now()(로컬 시간)와 비교하면 시간대 차이로 날짜가 틀릴 수 있음

③ State 클래스 — build 메서드

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Column(
        children: [
          MainCalender(
            selectedDate: selectedDate,
            onDaySelected: onDaySelected,
          ),
        ],
      ),
    ),
  );
}

④ State 클래스 — onDaySelected 메서드

void onDaySelected(DateTime selectedDate, DateTime focusedDate) {
  setState(() {
    this.selectedDate = selectedDate;
  });
}

이 파일이 하는 일: 선택된 날짜를 상태로 관리하고, 날짜가 바뀔 때마다 캘린더를 다시 그리는 화면 전체의 상태 관리 허브 역할을 한다.

component/main_calender.dart

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:calendar_scheduler/const/colors.dart';
class MainCalender extends StatelessWidget {

  final OnDaySelected onDaySelected; //날짜 선택 시 실행
  final DateTime selectedDate; //선택된 날짜

  MainCalender({
    required this.onDaySelected,
    required this.selectedDate,
});
  @override
  Widget build(BuildContext context) {
    return TableCalendar(

      onDaySelected: onDaySelected,
      selectedDayPredicate: (data) =>
      data.year == selectedDate.year &&
      data.month == selectedDate.month &&
      data.day == selectedDate.day ,

      firstDay: DateTime(1800,1,1), //첫째날
      lastDay: DateTime(3000,1,1), //마지막날
      focusedDay: DateTime.now(), //화면에 보여지는 날

      headerStyle: HeaderStyle(
        titleCentered: true,
        formatButtonVisible: false,
        titleTextStyle: TextStyle(
          fontWeight: FontWeight.w700,
          fontSize: 16.0
        )
      ),
      calendarStyle: CalendarStyle(
        isTodayHighlighted: false,
        defaultDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          color: LIGHT_GREY_COLOR,
        ),
        weekendDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          color: LIGHT_GREY_COLOR,
        ),
        selectedDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          border: Border.all(
            color: PRIMARY_COLOR,
            width: 1.0,
          )
        ),
        defaultTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
          weekendTextStyle: TextStyle(
            fontWeight: FontWeight.w600,
            color: DARK_GREY_COLOR,
          ),
          selectedTextStyle: TextStyle(
            fontWeight: FontWeight.w600,
            color: PRIMARY_COLOR,
          ),

      ),
    );
  }
}

① 클래스 선언 및 생성자

class MainCalender extends StatelessWidget {
  final OnDaySelected onDaySelected;
  final DateTime selectedDate;

  MainCalender({
    required this.onDaySelected,
    required this.selectedDate,
  });

② TableCalendar 기본 설정

TableCalendar(
  firstDay: DateTime(1800,1,1),
  lastDay: DateTime(3000,1,1),
  focusedDay: DateTime.now(),
  onDaySelected: onDaySelected,
  selectedDayPredicate: (data) =>
    data.year == selectedDate.year &&
    data.month == selectedDate.month &&
    data.day == selectedDate.day,

③ HeaderStyle — 달력 상단 헤더

headerStyle: HeaderStyle(
  titleCentered: true,
  formatButtonVisible: false,
  titleTextStyle: TextStyle(
    fontWeight: FontWeight.w700,
    fontSize: 16.0,
  ),
),

④ CalendarStyle — 날짜 셀 스타일

calendarStyle: CalendarStyle(
  isTodayHighlighted: false,

  defaultDecoration: BoxDecoration(
    borderRadius: BorderRadius.circular(6.0),
    color: LIGHT_GREY_COLOR,
  ),
  weekendDecoration: BoxDecoration(
    borderRadius: BorderRadius.circular(6.0),
    color: LIGHT_GREY_COLOR,
  ),
  selectedDecoration: BoxDecoration(
    borderRadius: BorderRadius.circular(6.0),
    border: Border.all(
      color: PRIMARY_COLOR,
      width: 1.0,
    ),
  ),

  defaultTextStyle: TextStyle(
    fontWeight: FontWeight.w600,
    color: DARK_GREY_COLOR,
  ),
  weekendTextStyle: TextStyle(
    fontWeight: FontWeight.w600,
    color: DARK_GREY_COLOR,
  ),
  selectedTextStyle: TextStyle(
    fontWeight: FontWeight.w600,
    color: PRIMARY_COLOR,
  ),
),

이 파일이 하는 일: table_calendar 패키지를 받아서 날짜 범위, 선택 로직, 헤더·셀 스타일을 모두 적용한 커스텀 캘린더 컴포넌트를 만들어 화면에 렌더링한다.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.8
  table_calendar: 3.1.2
  intl: 0.19.0
  drift: 2.21.0
  drift_flutter: 0.1.0
  path_provider: 2.1.5
  path: ^1.9.0
  get_it: 8.0.2
  dio: 5.7.0
  provider: 6.1.2
  uuid: 4.5.1

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.

dev_dependencies:
  flutter_test:
    sdk: flutter

  # 개발할때만 사용되고, 앱을 실행할 때는 필요없는 플러그인을 여기다가 설치
  flutter_lints: ^6.0.0
  drift_dev: 2.21.0
  build_runner: 2.4.13

dependencies vs dev_dependencies 핵심 차이! dependencies는 앱을 실행하는 사용자 기기에도 포함되고, dev_dependencies는 개발자 PC에서만 사용되고 배포 앱에는 들어가지 않음, 그래서 drift_dev나 build_runner처럼 코드 생성 용도의 패키지는 꼭 `dev_dependencie에 넣어야 앱 용량을 낭비하지 않아야함!

새롭게 알게 된 것

• Flutter에서 플러그인을 설치할 때 pubspec.yaml 파일에 작성해야 한다.
• dependencies는 앱 실행 시에도 포함되어 실제 기능 구현에 필요한 패키지를 작성하는 공간이다.
• dev_dependencies는 개발 과정에서만 필요한 패키지를 추가하는 공간으로, 앱 실행 시에는 포함되지 않는다.
• 캘린더처럼 날짜를 다룰 때는 DateTime.now()대신 DateTime.utc()를 사용하여 시간 정보로 인한 오류를 방지할 수 있다는 것을 알게 되었다.

헷갈리는 부분

• DateTime.utc()를 사용하는 이유는 이해했지만, 실제 프로젝트에서 언제 now()를 쓰고 언제 utc()를 써야 하는지 상황에 따라 구분하는 것이 아직 헷갈린다.
• focusedDay와 selectedDate의 역할 차이가 명확하게 구분되지 않는다.
• selectedDayPredicate가 내부적으로 어떻게 동작하는지, 모든 날짜마다 실행되는 구조가 성능에 영향을 주지 않는지 궁금하다.

실습

📁 프로젝트 구조

먼저 전체적인 프로젝트 디렉토리 구조는 다음과 같습니다.

guestbook/
├── src/
│   ├── main.js
│   ├── messages.js
│   ├── supabase.js
│   ├── style.css
│   └── assets/
├── public/
├── index.html
├── .env
├── .gitignore
├── package.json
└── package-lock.json

1. 기본 뼈대 만들기: index.html

사용자가 이름과 내용을 입력할 수 있는 폼과, 입력된 메시지가 출력될 리스트 영역을 만들어 줍니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>방명록</title>
  </head>

  <body>
    <h1>메세지 목록</h1>

    <div id="form">
      <input type="text" id="nickname" placeholder="이름" />
      <input type="text" id="content" placeholder="내용" />
      <button id="add-btn">등록</button>
    </div>

    <ul id="message-list"></ul>

    <script type="module" src="src/messages.js"></script>
  </body>
</html>

• 입력값: nickname, content 두 가지 데이터를 받습니다.
• 이벤트: 버튼 클릭 시 자바스크립트에서 이벤트를 가로채어 처리합니다.
• 동적 렌더링: 메시지 목록은 <ul id="message-list"> 하위에 동적으로 추가됩니다.

2. DB 연결 설정: supabase.js

데이터를 불러오고 저장하기 위해 Supabase 클라이언트를 초기화합니다.

import { createClient } from "@supabase/supabase-js";

// Supabase와 연결하는 객체 생성
export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,     // 프로젝트 URL
  import.meta.env.VITE_SUPABASE_ANON_KEY // 공개 API 키
);

환경 변수(env) 사용 시 주의점

• createClient: Supabase와의 통신을 담당하는 연결 객체를 생성합니다.
• import.meta.env: Vite 환경에서 환경 변수를 가져오는 전용 문법입니다. (기존 Node.js 방식인 process.env를 브라우저에서 사용하면 에러가 발생합니다!)

비동기 처리(async / await)

데이터베이스와 통신하는 코드를 작성하기 전, 반드시 짚고 넘어가야 할 개념이 있습니다. 바로 비동기 처리입니다.

비동기란 무엇인가요?

일반적인 동기(Synchronous) 코드는 위에서 아래로 한 줄씩 순서대로 실행됩니다. 하지만 데이터베이스에 데이터를 요청하는 작업은 네트워크 상황에 따라 시간이 걸립니다. 결과를 기다리는 동안 웹페이지 전체가 멈춰버리면 안 되기 때문에, 기다리는 동안 다른 작업을 할 수 있도록 비동기(Asynchronous) 방식으로 처리합니다.

async / await 기본 구조

async function 함수이름() {
  const 결과 = await 시간이_걸리는_작업();
}

• async: "이 함수는 내부에 비동기 작업을 포함하고 있습니다"라고 선언하는 역할입니다.
• await: "이 작업이 끝날 때까지 여기서 잠시 기다리겠습니다"라는 의미입니다. (반드시 async 함수 안에서만 쓸 수 있습니다.)

3. messages.js

이제 배운 비동기 개념을 활용하여, 메시지를 불러오고(Read) 새 메시지를 등록하는(Create) 기능을 완성해 보겠습니다.

import { supabase } from "./supabase.js";

// 1. DOM 요소 가져오기
const list = document.querySelector("#message-list");
const nicknameInput = document.querySelector("#nickname");
const contentInput = document.querySelector("#content");
const addBtn = document.querySelector("#add-btn");

// 2. 메시지 목록 불러오기 (Read)
async function loadMessages() {
  const { data, error } = await supabase
    .from("messages") // messages 테이블에서
    .select("*")      // 모든 데이터 조회
    .order("created_at", { ascending: false }); // 최신순(내림차순) 정렬

  // 에러 예외 처리
  if (error) {
    console.error("데이터 로드 실패:", error);
    return;
  }

  // 배열 데이터를 HTML 문자열로 변환하여 화면에 그리기
  list.innerHTML = data
    .map((msg) => `
      <li data-id="${msg.id}">
        <strong>${msg.nickname}</strong> : ${msg.content}
        <button class="edit-btn">수정</button>
        <button class="delete-btn">삭제</button>
      </li>
    `)
    .join(""); // 배열을 하나의 문자열로 합침
}

// 3. 등록 버튼 클릭 이벤트 (Create)
addBtn.addEventListener("click", async () => {
  const nickname = nicknameInput.value.trim();
  const content = contentInput.value.trim();

  // 입력값 빈 칸 검증
  if (!nickname || !content) {
    alert("이름과 내용을 모두 입력하세요.");
    return;
  }

  // DB에 새 데이터 추가
  const { error } = await supabase
    .from("messages")
    .insert({ nickname, content }); // 객체 형태로 전달

  if (error) {
    console.error("데이터 저장 실패:", error);
    return;
  }

  // 입력창 초기화
  nicknameInput.value = "";
  contentInput.value = "";

  // 목록 다시 불러와서 화면 갱신
  loadMessages();
});

// 4. 페이지가 처음 열릴 때 목록 로드 실행
loadMessages();

동작 흐름 요약

1. 페이지 로드 시 loadMessages() 최초 실행
2. DB에서 최신 데이터 가져와서 화면에 출력(innerHTML)
3. 사용자가 입력 후 '등록' 버튼 클릭 시 insert로 DB에 추가
4. loadMessages()를 다시 호출하여 업데이트된 내용을 화면에 반영

안녕하세요. 오늘은 SUPABASE를 활용한 방명록 웹사이트 만들기 1편으로, 개발을 시작하기 위한 환경 설정과 Supabase에서 미리 준비해야 할 내용을 정리해보겠습니다.

1. Vite로 바닐라 JS 개발환경 구축하기

Vite란?

는 웹 개발을 빠르게 시작할 수 있도록 도와주는 빌드 도구입니다.

빌드란? 사람이 작성한 소스 코드를 컴퓨터가 실행할 수 있는 형태로 변환하는 과정

Vite의 장점

• 빠른 개발 서버 실행 속도
• HMR(Hot Module Replacement) 지원 → 코드 수정 시 새로고침 없이 즉시 반영

2. Node.js 설치

Vite를 사용하기 위해서는 가 필요합니다.

설치 후 아래 명령어로 정상 설치 여부를 확인할 수 있습니다.

node -v

버전이 출력되지 않는다면 설치가 제대로 되지 않은 상태입니다.

3. Vite 프로젝트 생성

터미널에서 아래 명령어를 입력합니다.

npm create vite@latest

이후 다음과 같이 설정합니다.

• Project name: guestbook
• framework: Vanilla
• variant: Javascript

프로젝트 생성이 완료되면 guestbook 폴더만 따로 열어 개발을 진행합니다.

4. Supabase 설정

4-1. 계정 생성 및 프로젝트 생성

Supabase 공식페이지 → 접속 후 Google 로그인 → 오른쪽 상단 "Dashboard" 클릭

Organization이 있다면 선택하고, 없다면 New Organization 생성

Organization 내부에서 새로운 프로젝트 생성

프로젝트 생성 완료 → 이후 URL과 KEY를 확인할 수 있음

왼쪽 메뉴에서 Project Overview / Table Editor / SQL Editor 확인 가능 → Overview는 전체 정보를 한눈에 볼 수 있음

4-2. 권한 설정 (중요)

개발 전에 SQL Editor에서 권한 설정을 진행합니다.

create policy "Allow insert for everyone"
-- 이 정책의 이름 (Supabase 대시보드에서 식별용)

on messages
-- messages 테이블에 적용

for insert
-- INSERT 작업에만 적용 (SELECT, UPDATE, DELETE는 별개 정책 필요)

to public
-- 로그인 안 한 사람 포함 모든 사용자에게 허용

with check (true);
-- 삽입 조건 검사 — true면 조건 없이 무조건 허용

• 로그인하지 않은 사용자도 데이터 입력 가능
• 방명록 기능 구현을 위한 기본 설정

4-3. 테이블 생성

Table Editor → Create a Table 클릭

다음과 같이 테이블 생성

• 테이블명: messages

• 컬럼:

  • id (Primary Key)
  • created_at (timestamp, 기본값: now())
  • content (텍스트)

RLS가 활성화된 경우 정책(policy)이 없으면 데이터 조회가 되지 않으므로 주의

5. Supabase 연동하기

5-1. 라이브러리 설치

npm install @supabase/supabase-js

5-2. supabase.js 파일 생성

import { createClient } from "@supabase/supabase-js";
// supabase 클라이언트 생성 함수 가져오기

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,      // .env 파일의 Supabase 프로젝트 URL
  import.meta.env.VITE_SUPABASE_ANON_KEY, // .env 파일의 공개 API 키 
  // process.env 를 쓰면 브라우저에서 ReferenceError 발생 !! < 이거 땜에 고생 좀 함
);
// 생성된 클라이언트를 export해서 다른 파일에서 import { supabase } 로 재사용

5-3. 환경 변수 설정 (.env)

VITE_SUPABASE_URL=본인_URL
VITE_SUPABASE_ANON_KEY=본인_KEY

Supabase Dashboard에서 URL과 KEY를 복사하여 입력하면 됩니다.

마무리

이번 글에서는 방명록 웹사이트 개발을 위한 기본적인 개발환경 설정과 Supabase 준비 과정을 진행했습니다.

다음 글에서는 실제로 데이터를 저장하고 불러오는 기능을 구현해보겠습니다 !

1. GitHub 회원가입

👉 깃허브 홈페이지

1. 오른쪽 상단 Sign up 버튼 클릭

2. Continue with Google 버튼 클릭
3. 학교 구글 계정으로 회원가입

4. Username 원하는 이름 작성 후 Create account 클릭

5. 인증 단계 👉 왼쪽 그림과 같지만 주변 배경이 왜곡된 이미지 선택 → Submit 클릭!

6. 계정 생성 성공! 🎉

7. 오른쪽 상단 프로필 클릭

8. 잔디(커밋 기록)가 생성됐는지 확인

2. 백준 회원가입

👉 https://www.acmicpc.net/

9. 크롬에 백준 검색 후 접속

10. 오른쪽 상단 회원가입 클릭

11. 사진처럼 입력 후 학교 이메일 사용

12. 회원가입 완료! 🎉

3. 프로그래머스 회원가입

👉 프로그래머스 링크

13. 크롬에 프로그래머스 검색 후 접속

14. 오른쪽 상단 로그인 클릭

15. GitHub 계정으로 시작하기 (고양이 아이콘) 클릭

16. 초록색 Authorize 버튼 클릭

17. 회원가입 선택 (학교 이메일 확인!)

18. 프로그래머스 가입 완료! 🎉

🔗 4. 백준허브 설치 및 연결

👉 백준허브 설치

19. Chrome에 추가 클릭

20. 확장 프로그램 추가

21. 크롬 오른쪽 위 퍼즐 아이콘 클릭

22. 백준허브 선택

23. GitHub 인증하기 클릭

24. Authorize BackjoonHub 클릭

25. 새 저장소 생성 (비공개 추천) 👉 플랫폼별로 폴더 정리 👉 예: CodingTest

26. 🎉 백준 + 프로그래머스 + GitHub 연동 완료!

✨ 마무리

이제 코딩 테스트를 풀면 자동으로 초록 체크 나오면 성공입니다! 다들 개발자 될 준비 완.

최근 전공 수업인 [웹응용(JavaScript)] 강의를 듣다가 오잉??하는 문장을 발견했습니다.

3. 바닐라 자바스크립트(바닐라 JS) : 어떠한 라이브러리(JQuery..)나 프레임워크(React, Vue, Angular....)를 사용하지 않는 순수 자바스크립트... (후략)

이 문장을 보고 제 머릿속엔 의문이 크게 들었습니다..

"어? 내가 알기로 React는 라이브러리 아닌가?"

프레임워크라고 하면 보통 서버와 애플리케이션 구조를 포함하는 큰 틀을 제공하는 기술을 떠올리곤 합니다. 예를 들어 Python에서는 Flask나 FastAPI 같은 것이 프레임워크로 불립니다.

반면 React는 UI를 만들기 위한 도구(프론트)이고, 백엔드나 데이터베이스를 사용하려면 별도의 서비스나 기술을 함께 사용해야 합니다.

그래서 이번 글에서는 라이브러리와 프레임워크의 차이를 정리하고, React의 정체성이 무엇인지 살펴보려고 합니다.

1. 리액트 공식 문서의 입장

위 사진은 리액트 공식문서의 가장 처음 페이지인데요,

"사용자 인터페이스를 만들기 위한 JavaScript 라이브러리"

공식 문서에서도 리액트는 라이브러리라고 말하고 있습니다.

2. AWS(Amazon Web Services)의 입장

반면 AWS와 같은 클라우드 서비스나 일부 기술 문서에서는 리액트를 일반적인 웹 애플리케이션 프레임워크 중 하나로 분류하곤 합니다. 공식문서에서는 라이브러리.. AWS에서는 프레임워크...

프레임워크와 라이브러리, 무엇이 다를까?

프레임워크 (Framework)

소프트웨어 엔지니어링에서 프레임워크는 새로운 애플리케이션을 효율적으로 개발할 수 있도록 하는 재사용 가능한 소프트웨어 구성 요소의 모음을 의미합니다.

프레임워크는 일정한 표준과 프로토콜* 을 기반으로 만들어지며, 여러 개의 재사용 가능한 코드 모듈을 포함합니다.

여기서 프로토콜* 이란
컴퓨터에서 데이터를 원활하게 주고받기 위해 약속된 규칙과 양식의 체계를 의미합니다.

프레임워크는 높은 프로그래밍 표준에 맞게 설계되어 있기 때문에 코드의 품질을 향상시키는 데 도움을 줍니다. 또한 개발자가 기본적인 구조를 직접 구현하기보다는 비즈니스 로직* 에 더 집중할 수 있도록 해 줍니다.

여기서 비즈니스 로직이란 현실 세계의 업무 규칙을 프로그램 코드로 구현한 핵심적인 부분을 의미합니다.

또한 프레임워크는 개발자가 소프트웨어를 빠르게 개발하고 프로덕션 환경에 배포할 수 있도록 다양한 기능을 제공합니다.

여기서 프로덕션 배포란 개발과 테스트가 완료된 소프트웨어를 실제 서비스 환경에 배포하는 단계를 의미합니다.

예를 들어 다음과 같은 요소들이 포함될 수 있습니다.

- API(서로 다른 소프트웨어가 상호 이해할 수 있도록하는 프로토콜

- 코드 라이브러리(발자가 코드에 연결할 수 있는 재사용 가능한 소프트웨어 함수 모음)

- 디버거(프로그래머가 코드에서 실수를 찾아 수정하는 데 도움이 되는 도구)

- 컴파일러(개발자가 소스 코드를 배포 가능한 애플리케이션 파일로 변환하는 데 사용하는 소프트웨어 도구)

라이브러리 (Library)

라이브러리는 소프트웨어를 개발할 때 프로그램에서 사용할 수 있는 재사용 가능한 코드와 자원의 모음입니다.

라이브러리는 다음과 같은 요소들로 구성될 수 있습니다.

- 미리 작성된 코드

- 함수와 클래스

- 데이터 구조

- 문서 및 도움말 자료

- 메시지 템플릿

라이브러리는 독립적으로 실행되는 프로그램이 아니라, 특정 기능을 수행하기 위해 만들어진 코드 모음입니다.

즉 라이브러리 자체만으로는 일반적인 프로그램처럼 실행할 수 없으며, 개발자가 프로그램 안에서 라이브러리의 기능을 직접 호출하여 사용해야 합니다.

그래서 리액트가 뭐라고?

리액트는 라이브러리이다!!!

왜냐하면 리액트는 기본적으로 V-DOM(Virtual DOM), 컴포넌트, 상태, 선언형 UI 등 여러가지의 혁신적인 기능을 가지고 있지만 실제 웹,앱을 만드는데 직접적으로 사용되는 부분이 아니기 때문에 리액트 자체는 프레임워크라고 말 할 수 없습니다.

예를 들면

라우팅 -> React Router
상태 관리 -> Redux / Zustand
스타일링 → styled-components / Tailwind CSS

과 같이 리액트는 UI를 그리는 기능만을 가지고 있는 라이브러리입니다.

그럼 왜 사람들이 프레임워크라고 여기냐?

리액트 기반 프레임워크가 현재 많이 사용되기 때문입니다.

리액트에서 자주 사용하는 NEXT.js의 공홈에 있는 것과 같이 "The React Framework for the Web" = 리액트 프레임워크 웹용 처럼 각자 다른 라이브러리이지만 기본 내장이 되거나 긴밀하게 연관이 되어 있어

리액트 자체는 도구(Library)지만, 우리가 리액트를 사용하는 방식은 이미 완성된 시스템(Framework) 안으로 들어와 버렸다

라고 많은 사람들이 생각하기에 리액트가 프레임워크라는 말이 자주 나오는게 아닐까 싶습니다!

마무리

오늘은 리액트가 프레임워크인지 라이브러리인지에 대해 글을 작성해보았습니다. 수업 시간에 갑자기 들었던 생각을 더 심도있게 찾아보니 프레임워크와 라이브러리의 정의와 차이점에 더 깊게 이해할 수 있던 경험인 것 같아 좋은 기회였습니당🌸🌸

그럼 모두

즐코!

참고1 : AWS 프레임워크란? 참고2 : 리액트 공식문서 참고3 : [ IT 용어 ] 라이브러리 (Library)란 무엇인지 알아보자👀✨|작성자 네오 참고4 : NEXT.js

최근 인공지능(AI)이 다양한 분야에서 활용되면서, AI를 얼마나 잘 이해하고 실제로 활용할 수 있는지를 객관적으로 평가할 수 있는 기준의 필요성이 커지고 있습니다. 이러한 흐름 속에서 등장한 시험이 바로 AICE(AI Certificate for Everyone)입니다.

AICE는 KT가 주관하고, 한국경제신문과 함께 운영하는 AI 역량 인증 시험으로, AI 전공자가 아니더라도 누구나 도전할 수 있도록 설계된 것이 특징입니다.

AICE 시험의 목적

AICE 시험은 단순히 AI 이론을 암기하는 시험이 아닙니다. AI 기술을 이해하고 실제로 활용할 수 있는 능력을 평가하는 데 목적이 있습니다.

• AI 기초 개념에 대한 이해
• 데이터를 기반으로 문제를 해석하는 능력
• AI 기술을 실생활 또는 업무에 적용할 수 있는 사고력
• AI 리터러시(AI literacy) 역량 검증

즉, “AI를 얼마나 깊이 아는가”보다는 👉 “AI를 어떻게 활용할 수 있는가”에 초점을 둔 시험입니다.

AICE 시험의 특징

1. 수준별 등급 구성

AICE는 응시자의 수준에 따라 여러 등급으로 나뉘어 있습니다.

• Future / Junior : 초·중·고 학생 대상, AI 친화력 및 기초 개념 중심

• Basic : AI 입문자 대상, 기본적인 AI 원리와 활용 능력 평가

• Associate (ASSO) : 데이터 분석 및 AI 모델 활용 등 실무 기초 역량 평가

• Professional : AI 실무 및 심화 분석 역량을 평가하는 전문가 과정

이처럼 난이도가 단계적으로 구성되어 있어 AI를 처음 접하는 학습자부터 실무 수준의 학습자까지 모두 도전할 수 있습니다.

특히 주목할 점은, Basic 등급까지는 KT에서 자체적으로 제공하는 시험 플랫폼을 통해 시험이 진행되지만, Associate 등급부터는 Python을 활용한 실제 데이터 처리 및 분석이 요구된다는 점입니다. 이 지점부터 본격적인 실무형 AI 시험이라는 인상을 받게 됩니다.

2. 실무 중심 평가 방식

AICE 시험은 객관식 위주의 단순 이론 평가에 그치지 않습니다. 다음과 같은 요소들을 종합적으로 평가합니다.

• AI 관련 개념 이해 능력
• 데이터 해석 및 분석 능력
• Python 기반 문제 해결 능력
• AI 모델을 활용한 실습형 문제 해결 능력

특히 상위 등급으로 갈수록 이론보다 실습과 문제 해결 능력의 비중이 크게 증가합니다.

3. 온라인 시험 방식

AICE 시험은 대부분 온라인으로 응시할 수 있으며, 등급에 따라 시험 시간과 문제 구성에는 차이가 있습니다.

예를 들어,

• Associate 등급의 경우 약 90분 내외로 진행되며
• 실습과 사고력 중심의 문제로 구성됩니다

정해진 시간 안에 문제를 해결하는 방식으로, AI를 단순히 “아는지”보다 “실제로 활용할 수 있는지”를 평가합니다.

AICE 시험의 활용 가치

AICE 자격증은 다음과 같은 측면에서 활용도가 높습니다.

• AI 역량을 객관적으로 증명할 수 있음
• AI 관련 진로 및 전공 관심도를 효과적으로 어필 가능
• 포트폴리오 및 자기소개서에 활용 가능
• AI 기초 학습의 방향성을 설정하는 데 도움

특히 학생의 입장에서는 👉 AI 학습의 결과를 공식적으로 증명할 수 있는 인증 수단이라는 점에서 의미가 큽니다.

AICE 재수 경험

다소 부끄러운 이야기이지만, 필자는 AICE 시험 재수 경험자입니다..ㅎ

AICE 시험이 지금처럼 널리 알려지기 전부터 학교 방과후 수업을 통해 AICE를 준비하게 되었습니다.

샘플 문항과 자체 모의시험에서는 지속적으로 좋은 성적을 거두었고, 사전 점검 또한 문제없이 완료한 상태였기 때문에 시험에 대한 부담은 크지 않았습니다.

그러나 실제 시험 도중 문제가 발생하였습니다. 머신러닝 실행 버튼을 클릭한 이후, 총 시험 시간이 60분임에도 불구하고 약 20분 동안 로딩이 지속되는 상황등이 연속적으로 발생하였습니다.

문제 해결을 위해 감독관에게 여러 차례 문의를 남겼으나, 답변이 약 10분 간격으로 지연되면서 결과적으로 정상적인 시험 진행이 어려웠습니다.

이후 여러 응시자들의 후기를 확인해 본 결과, 유사한 경험을 한 사례가 적지 않다는 점을 알게 되었습니다.

따라서 AICE 시험을 준비하는 분들께는, 시험 도중 문제가 발생할 경우 당황하지 말고 즉시, 그리고 차분하게 문의를 남기는 것이 중요하다는 점을 꼭 말씀드리고 싶습니다!!

(당시에는 상당히 당황스러운 경험이었습니다 ㅎㅎ;;)

AICE 공부 방법

필자는 AICE를 준비하며 크게 세 가지 방법으로 공부를 진행하였습니다.

1. 문제집을 바탕으로 관련 용어의 의미를 정리한 노트 작성

2. AICE에서 제공하는 샘플 문항을 풀고, 유튜브 풀이 영상을 참고하여 부족한 개념 복습

3. 블로그와 티스토리에 정리된 AICE 시험 후기 및 팁 글을 활용한 최종 점검

특히 유튜브 강의의 경우 엘리쌤과 인공지능 AICE BASIC 정리

플레이리스트의 모든 영상을 시청하며 학습을 진행하였습니다.

또한 aice basic 티스토리 정리 글을 집중적으로 참고하였으며, 개념 정리와 시험 흐름을 이해하는 데 큰 도움이 되었습니다.

마지막으로 제가 끄적끄적 작성해본 노트 제공하고 끝내도록 하겠습니다!

그럼 모두 즐코!

객체 지향 프로그래밍(Object-Oriented Programming, OOP)은 프로그램을 객체들의 집합으로 보고, 이 객체들이 서로 상호작용하며 하나의 시스템을 구성하도록 설계하는 프로그래밍 방식이다.

사전적으로는 다음과 같이 정의됩니다. 다소 추상적으로 느껴질 수 있지만, 이를 쉽게 풀어보면 다음과 같이 이해할 수 있습니다.

객체 지향 프로그래밍은 현실 세계를 ‘객체’ 단위로 나누어 생각하며 이를 코드로 표현하는 방법

현실에서 사람, 자동차, 계좌, 게시글과 같은 개념을 떠올리듯 프로그램에서도 각각을 하나의 객체로 정의하고 그 객체들이 가진 속성과 행동을 중심으로 시스템을 설계합니다.

클래스이름 객체이름 = new 클래스 이름

이러한 형식으로 객체를 정의합니다.

2. 객체(Object)와 클래스(Class)의 기본 개념

객체 지향 프로그래밍을 이해하기 위해서는 객체(Object)와 클래스(Class)의 차이를 명확히 구분할 필요가 있습니다!

클래스(Class)

• 객체를 만들기 위한 개념적 설계도
• “이 객체는 어떤 특징과 행동을 가진다”를 정의한 틀
• 추상적인 분류 또는 개념에 해당

객체(Object)

• 클래스를 기반으로 생성된 구체적인 실체
• 실제로 값(데이터)과 행동(메서드)을 가지는 존재
• 데이터 및 수행하는 작업을 포함

정리하면 다음과 같습니다,

• 클래스: 개념, 분류, 설계도
• 객체: 그 설계도로 만들어진 실제 대상

3. 흔히 드는 예시와 그 차이점

객체 지향 프로그래밍을 설명할 때 자주 등장하는 예시는 다음과 같습니다.

• 과일 / 사과
• 과자 / 새우깡
• 자동차 / 소나타
• 붕어빵틀 / 붕어빵

앞의 세 예시는 공통적인 구조를 가집니다.

과일 / 사과

과자 / 새우깡

자동차 / 소나타

이 경우,

앞에 있는 객체가 상위 요소이고 뒤에 있는 객체가 앞에 있는 객체의 하위 요소입니다. 즉, 앞에 있는 객체(과일, 과자, 자동차)는 "개념/분류"이고, 뒤에 있는 객체들은 "그 분류에 속하는 구체적인 존재"입니다.

더 자세히, 앞에 있는 객체는 클래스로, 클래스는 "이것은 어떠어떠한 특징을 가진 무엇이다"라고 말하면 객체는 그거에 맞는 하위 분류로 그 개념에 맞는 여러개 중 하나가 될 수 있습니다. 즉,

• 과일이라는 클래스에 속하는 객체가 사과
• 과자라는 클래스에 속하는 객체가 새우깡
• 자동차라는 클래스에 속하는 객체가 소나타

이 구조는 객체 지향의 클래스-객체 관계를 정확히 표현합니다.

4. 붕어빵틀 / 붕어빵 이건 뭔데.

반면, 붕어빵틀 / 붕어빵 예시는 위의 구조와 성격이 다릅니다.

붕어빵틀이 붕어빵의 상위요소라고 할 수 있을까요? 붕어빵틀의 개념에 해당하는 구체적인 예세, 존재가 붕어빵이 맞을까요?

아닙니다.

붕어빵틀은 붕어빵을 만드는 도구이고, 붕어빵은 완성된 결과물입니다.

즉, 이 둘의 관계는 상위 개념과 하위 개념의 관계가 아니라, 제작 도구와 산출물의 관계이기 때문입니다.

다시 말해,

• 붕어빵틀은 붕어빵의 ‘분류’가 아니며
• 붕어빵은 붕어빵틀이라는 개념에 포함되는 객체가 아니라고 말 할 수 있습니다.

따라서 객체 지향 프로그래밍에서 말하는 클래스와 객체의 관계를 설명하기에는 개념적으로 정확하지 않은 예시라고 볼 수 있는거죠!

5. 아니 그러면 그 사람들이 다 바보라고?

그렇다면 왜 많은 설명에서 클래스 = 붕어빵틀, 객체 = 붕어빵이라는 비유가 사용되었을까?라는 의문이 드실거라고 생각합니다. (저도 그랬거든요)

이는 객체 지향의 핵심 중 하나인 “하나의 클래스로 여러 객체를 생성한다”는 개념을 직관적으로 전달하기에 편리했기 때문이라고 생각합니다.

• 하나의 틀
• 여러 개의 결과물

이라는 구조는 초보자에게 클래스와 객체의 관계를 빠르게 이미지화하는 데 도움을 줄 수 있기 때문입니다.

하지만 이 설명은 이해를 돕기 위한 비유일 뿐, 객체 지향의 개념을 정확히 설명하는 예시는 아니라고 할 수 있는거죠!

6. 보다 정확한 관점에서의 비유

객체 지향의 개념에 더 적합한 예시는 다음과 같습니다.

• 붕어빵의 종류 → 클래스
• 팥붕어빵, 슈크림붕어빵 → 객체

이처럼 클래스는 ‘제작 도구’가 아니라 공통된 특징을 가진 개념적 분류로 이해하는 것이 바람직합니다.

7. 마무리하며

이 글의 내용이 모든 분들의 생각과 완전히 일치하지 않을 수도 있고, 혹시 제가 잘못 이해한 부분이나 부족한 설명이 있을 수도 있다고 생각합니다. 저는 아직 배우는 과정에 있는 개발자로서, 이러한 개념들을 스스로 정리하고 고민해본 기록을 남기고자 이 글을 작성했습니다.

객체 지향 프로그래밍은 한 번에 완전히 이해하기 어려운 개념인 만큼, 다양한 관점과 설명을 접하는 것이 중요하다고 생각합니다. 글을 읽으시며 다른 의견이나 보완이 필요한 부분이 있다면 댓글로 자유롭게 공유해주시면 감사하겠습니다.

함께 배우고, 함께 성장하는 개발자가 되고 싶습니다. 읽어주셔서 감사합니다.

모두 즐코!

“분명 열심히 했는데, 그 순간의 칭찬이나 인정은 그냥 흘러가버리는 느낌…”

칭찬을 받아도 잠깐 기분 좋고 끝. 내가 뭘 잘했고, 어떻게 성장했는지는 남지 않는다.

그래서 시작한 프로젝트가 바로 StampMarble(스탬프마블)이다 ✍️✨ 이건 그냥 ‘칭찬 서비스’가 아니라, 칭찬을 기록으로 남겨 성장을 시각화하는 웹 서비스다.

1. 프로젝트 한눈에 보기

프로젝트명 : Stamp Marble 한 줄 소개 : 칭찬을 ‘여행 기록’처럼 남겨, 성장을 눈으로 확인하는 서비스 핵심 키워드 : 칭찬 · 성장 · 기록 · 여행 · 스탬프 기획 의도 : 순간의 칭찬을 오래 남기는 구조 만들기

2. Problem : 왜 우리는 칭찬을 그냥 흘려보낼까?

스탬프마블의 시작은 이 질문이었다.

“그냥 넘어가는 칭찬, 아쉽지 않았나요?”

학생들의 노력과 성취는

• 금방 잊히고
• 기록으로 남지 않고
• 인정의 경험은 일회성으로 끝난다

그래서 ✔ 성취를 체계적으로 기록하고 ✔ 칭찬을 시각적으로 남기고 ✔ ‘성장 과정’ 자체를 느끼게 하는 서비스가 필요하다고 생각했다.

3. Solution : 칭찬을 ‘여행 기록’으로 바꾸다

StampMarble은 칭찬 = 여행 중 얻는 스탬프라는 컨셉에서 출발했다 ✈️

✔ 여행처럼 쌓이는 성장 기록

• 활동 → 칭찬 → 스탬프 획득
• 스탬프가 쌓일수록 나의 여정이 완성됨

✔ 성장의 흐름이 한눈에 보이게

• 어디까지 왔는지
• 어떤 활동을 했는지
• 어떤 칭찬을 받았는지

이걸 “기억”이 아니라 기록으로 남기고 싶었다.

4. Service 01 : 여행사 기반 성장 참여 시스템

가장 중심이 되는 기능이다.

• 활동 참여
• 성장 기록 자동 저장
• 활동별 스탬프 연결

마치 여행지를 선택하듯 나의 성장 여정을 선택하고, 참여하고, 기록한다.

👉 “오늘 내가 한 활동이 그냥 사라지지 않게”

이게 목표였다.

5. Service 02 : 도장(Stamp) 발급을 통한 성장 기록

칭찬을 받으면 도장(stamp)이 찍힌다.

• 스탬프는 단순한 아이콘이 아니라 → “인정받은 경험의 증거”

• 날짜·활동·칭찬 내용과 함께 저장되어 → 나만의 기록 페이지에 남는다

책처럼 넘길 수 있는 UI로 “성장 다이어리” 같은 느낌을 주고 싶었다 📘

6. Service 03 : 혜택(쿠폰)으로 이어지는 보상 시스템

기록만 있으면 지속이 어렵다. 그래서 가벼운 보상 구조를 추가했다.

• 스탬프 → 포인트
• 포인트 → 쿠폰/혜택
• 혜택은 ‘목적’이 아니라 ‘동기’

칭찬을 보상 때문에 하는 게 아니라, 계속 참여하게 만드는 장치로만 설계했다.

7. 사용자 시나리오

Giver (칭찬하는 사람)

• 활동 생성
• 스탬프 발급
• 쿠폰 관리
• 참여 기록 확인

Receiver (칭찬받는 사람)

• 참여 기록 확인
• 스탬프 수집
• 성장 시각화
• 쿠폰 사용

칭찬이 일방적인 행동이 아니라 관계 안에서 순환되도록 설계했다.

8. 현재 한계점과 앞으로의 확장

현재 한계

• 모바일 최적화 부족
• 활동 종류 제한
• 개인 사용 위주 구조

앞으로 추가하고 싶은 기능

• 학급/동아리 공동 운영
• 도장 자동 발급
• 여행지 공동 관리
• 모바일 앱 확장

이 프로젝트는 끝이 아니라 확장 가능한 시작이라고 생각한다.

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

StampMarble을 하면서 얻은 가장 큰 성과는 이거다.

• 서비스 관점에서 기획하는 사고
• UX를 고려한 기능 설계
• 프론트–백–DB 흐름 이해
• “사용자 경험이 먼저”라는 기준

그리고 무엇보다,

기록은 곧 성장이라는 걸 직접 만들어보며 느꼈다.

마무리하며 🌱

StampMarble은 “칭찬을 예쁘게 포장한 서비스”가 아니라, 성장을 남기고 싶어서 만든 기록 시스템이다.

이 프로젝트 덕분에 나도 내 성장 과정을 조금 더 또렷하게 바라볼 수 있게 됐다.

그리고 이 경험은 앞으로 어떤 프로젝트를 하든 분명 큰 기준이 될 것 같다.

*피피티 주소 : * 스템프마블.ppt

그럼 오늘도

즐코! 😆💙

✨ 7개월 동안 만들어낸 우리 팀의 첫 AI 서비스, SRA

안녕하세요! 이번 글은 LG CNS에서 주관하는 AI 지니어스 프로젝트를 약 7개월 동안 준비하고 완성한 과정들을 기록한 회고록입니다. 저에게는 단순한 대회 과제가 아니라, 실제로 불편했던 문제를 해결해보고 싶은 마음에서 시작된 꽤 진지한 도전이었어요. 그래도 열심히 하다 보니 과정 곳곳에 소소한 즐거움도 많아서, 이렇게 기록으로 남기고 싶어졌습니다! (좋은 결과까지 받아서 더더욱 행복했던… 히히 ✨)

1. 프로젝트 시작과 아이디어가 만들어지기까지

📌 공학도서관에서 파이썬을 배우며 시작된 첫걸음

학교에서는 1학년 때 자바를 중심으로 배우지만, 저는 항상 “AI 시대에는 파이썬이 꼭 필요하지 않을까?” 하는 마음이 있었어요. 그래서 4월부터 7월까지 공학도서관 파이썬 특강을 들으며 기초를 차근차근 쌓았습니다.

그 과정 덕분에 자연스럽게 AI 지니어스 프로젝트에 참여할 수 있었고, “아… 이걸 제대로 한번 해보고 싶다!”라는 본격적인 의지도 생겨났어요.

📌 마스터데이에서 주제 선정하기

AI 지니어스는 반년 동안 특정 AI·ML 관련 수업을 모두 수강하고 과제를 완수해야 마스터데이 참가권이 주어졌습니다.

마스터데이에서는 다양한 주제가 있었는데, 저희 팀은 ‘AI로 만드는 안전한 도시’를 선택했습니다. 도시에서 실제로 체감하는 불편함을 해결하고 싶었기 때문이에요.

저는 평소 떠오르는 아이디어를 바로바로 적어두는 아이디어 노트를 항상 들고 다니는데, 이번 프로젝트도 그 노트에서 출발했습니다. 작은 메모 하나가 실제 서비스 아이디어로 성장하는 걸 보면, 기록의 힘이 정말 크다는 걸 다시 느꼈어요!

2. 우리 팀의 최종 아이디어: Safe Ride AI(SRA)

혹시 '킥라니'라는 표현 알아시나요? 전동 킥보드를 위험하게 운행하는 사람들을 고라니처럼 갑자기 튀어나온다는 의미로 부르는 신조어예요.

그래서 저희 팀이 만든 서비스가 바로 SRA(Safe Ride AI)입니다!

SRA의 목표는?

• 헬멧 착용 여부 자동 확인
• 면허증 실명 인증
• 킥보드 QR 정보 확인
• AI를 활용해 도시의 안전을 높이기

저희 팀에는 디자인 전공자가 없었기 때문에 레퍼런스 사이트 10개 이상 분석, 피그마 초안 제작, 그리고 디자인과 선배·친구들에게 피드백을 받으면서 정말 한 땀 한 땀 UI를 완성해갔어요.

디자인 경험이 많지 않아서 걱정했지만, 서비스의 목적이 뚜렷하다 보니 디자인 방향도 자연스럽게 잡히더라고요.

3. 멘토링

예선을 통과한 15팀에게는 전문 멘토링이 제공되는데, 저희 팀은 최종 본선 10팀 안에 꼭 들어가고 싶었기 때문에 멘토링 시간을 누구보다 열심히 활용했습니다.

• 멘토링 전날 팀원들과 진행 상황 공유
• 질문 리스트 사전 작성
• 멘토링 직후 바로 온라인 회의
• 회의에서 TODO 리스트 확정

짧은 30분이었지만, 그 시간을 얼마나 알차게 쓰느냐가 결과에 진짜 영향을 준다는 걸 깨달았어요! (멘토분도 열심히 하는거 보인다고 하셔서 더 햄복,,,)

4. 기술 스택 및 기능 구현 상세

A. QR 확인 기능 (HTML, CSS, JavaScript)

• 후면 카메라 실행 → QR 스캔
• 등록된 코드와 일치 여부 확인
• 성공 시 대여 화면 이동

배포 과정에서 QR URL을 실제 서비스 URL로 연결해야 했는데, 시간상 여유가 부족해 기능을 끝까지 완성하지 못한 점이 아쉬워요. 그래도 덕분에 배포 구조를 다시 공부할 기회가 되었고, “선택과 집중”의 중요성을 몸소 느끼게 되었어요.

B. 헬멧 착용 여부 확인 (YOLOv10 + FastAPI)

이 기능이 SRA의 핵심이었고, 저희 팀이 가장 많은 시간과 노력을 쏟아부은 기능이에요. 말 그대로 쓰라의 정체성!!

📌 데이터셋 문제 발생

처음에는 공개된 헬멧 데이터셋을 사용하려 했지만 라벨링이 엉망이라 정확도가 믿을 수 없을 정도로 낮았어요…

그래서 결국…

📌 직접 데이터셋 제작

헬멧 착용 / 미착용 사진을 500장 이상 직접 촬영하고 LabelImg로 하나하나 라벨링했습니다.

진짜 손과 눈이 녹아 없어질 뻔했지만, 모델 성능이 엄청 좋아져서 보람도 그만큼 컸어요!

📌 YOLOv10으로 모델 변경

기존 YOLOv5 대신 YOLOv10을 사용하게 된 이유는:

• mAP 향상
• 학습 안정성
• 실시간 처리 성능 증가

멘토님께 피드백 받으면서 모델 구조 자체를 다시 고민하게 되었고, 팀원들끼리 유튜브 강의 보면서 YOLO 스터디도 진행했어요!

📌 서버 연동 과정

처음엔 Flask를 썼는데 이미지 처리에서 자꾸 오류가 났어요. 그래서 FastAPI로 전환하자 문제 없이 안정적으로 돌아갔습니다.

완성 직전에 오류가 나서 진짜 심장이 내려앉는 줄 알았던 순간도 있었어요 ㅋㅋㅋ

C. 면허증-실제 얼굴 매칭 (faceNet)

QR 인증 후 전면 카메라를 이용해 회원가입 시 등록한 면허증 사진과 실제 얼굴을 비교하는 기능입니다.

faceNet과 insightFace를 비교했는데, 저희 서비스 흐름과 정확성 기준을 만족한 모델이 faceNet이라 최종 채택했습니다.

threshold 조정, 유사도 거리 계산 등 성능 튜닝도 여러 번 반복했어요!

5. AI + 센서 확장 실험

프로젝트 중 항상 들었던 질문이 있었어요.

“헬멧 인증할 때는 쓰다가, 주행 중에 벗으면 어떻게 막을 건데?”

맞아요… 이건 기획 단계에서도 나왔던 우려였고, 소프트웨어만으로는 완전히 해결할 수 없는 부분이었어요.

그러던 중 멘토링에서 “헬멧에 센서를 달아보는 건 어떨까?”라는 조언을 받고 바로 하드웨어 실험을 병행하게 되었습니다!

하지만… 저희는 뉴미디어소프트웨어과 학생들이기 때문에 하드웨어는 정말 하나하나가 난관이었어요 ㅋㅋㅋ

온도 센서를 잘못 사오고, 압력 센서가 작동 안 하고… 아두이노 없이 센서만 사는 실수를 하기도 하고… 담당 선생님께 정말 매일 찾아가 도움 요청하면서 해결해나갔습니다!

📌 최종 적용 센서

• 조도 센서: 헬멧 내부 밝기 감지
• LED: 착용 시 초록불 / 미착용 시 빨간불

📌 향후 넣고 싶은 센서

• 적외선 센서: 실제 머리 유무 감지
• 가속도 센서: 주행 중 벗기, 충격 여부 감지

프로젝트 기간이 제한적이다 보니 완벽한 결과물은 아니지만, 이 경험은 분명 더 발전된 SRA를 만드는 큰 발판이 될 거예요.

✨ 5.5 LG CNS 본사 방문기:

1차 본선에 합격한 15개의 팀은 LG CNS 본사에 투어를 하고 간부분의 강의를 들을 수 있는 기회가 주어지는데요! 저는 그날 일정이 있어서.. 본사 투어를 못 갔어요(해커톤에서밤새코딩중이엿뜸)

그렇기에 전 첫 방문이였는데요 ㅎㅎ 전 서울에서 학교 다니지만 대구사람이여서 서울 당일치기를 하며 하루를 시작했습니다 ㅎㅎ 6시 첫차 타구 방문했는데용! 사실 그날 완성하느라 잠을 못자서 무수면 상태로 방문했답니다... ㅎㅎ

6. 프로젝트를 마치며

SRA 프로젝트는 단순히 기술을 구현하는 과제를 넘어 “AI가 실제 문제 해결에 어떻게 적용될 수 있을까?”를 진짜로 고민하게 해준 시간이었어요.

모델을 바꾸고, 데이터를 만들고, 서버를 고치고, 디자인을 수정하고… 그 모든 과정을 지나오면서 “아, 나 진짜 개발자로 성장하고 있구나” 하는 실감이 들었습니다.

특히 스스로 문제를 정의하고 해결책을 직접 만들어가는 경험은 앞으로 어떤 프로젝트를 하든 가장 큰 자산이 될 거라고 믿습니다!

7. 앞으로의 계획

• YOLO 모델 경량화 및 모바일 최적화
• FastAPI ↔ 프론트엔드 연동 구조 개선
• IR·가속도 센서 기반 헬멧 인증 고도화
• 더 직관적이고 편리한 UX 개발

아직 부족한 부분도 많지만, 이번 프로젝트 덕분에 제가 만들고 싶은 서비스의 방향이 더 명확해졌어요.

🏆 마지막으로…

오늘은 1200명 중 2등이라는, 인생에서 너무 소중한 순간을 다시 떠올리며 LG CNS AI 지니어스 회고록을 작성해봤습니다!

1년의 가장 큰 프로젝트였고 고난도 많았지만, 최종 발표에서 “잘했다”, “멋지다”, “대단하다”는 칭찬을 들으니 정말 뿌듯했고 행복했어요.

앞으로 이 프로젝트를 더 성장시켜 조금이라도 세상에 긍정적인 영향을 주는 서비스로 발전시키고 싶습니다.

8.AI 지니어스📸📸

전시하기 전에 열정적으로 준비...! 열심히 발표도 하구전시도 성공적으로 설치하고 많은 분들의 관심도 받아서 감사했습니다! 발표도 세상 열심히 기차에서까지도 준비햇어요..(LG본사화장실삐까뻔쩍해요..)헬로우월드 후드티 입고 코딩하시는 개발자..!

그럼 오늘도

즐코! 😆🤍

1. 와이어프레임 및 구조 설계

송진경 개발자의 포트폴리오를 기반으로 하여, 학생으로서의 기술 숙련도와 학습 기록을 강조하는 방향으로 수정했습니다. 포트폴리오는 방문자가 정보를 단계적으로 파악할 수 있도록 7개의 섹션으로 구성되었습니다.

이 중 Velog 섹션은 개인의 활발한 학습 기록을 포트폴리오에 직접적으로 노출하여, 학습에 대한 진정성을 보여주기 위한 핵심 기능으로 설정되었습니다.

2. 기술 구현 중점 사항

A. Velog 게시글 연동

• 목표: 작성된 벨로그 글 목록을 포트폴리오 페이지에 직접 가져와 실시간으로 보여주는 기능 구현.
• 배경: 단순히 링크를 연결하는 것을 넘어, 많은 학습 기록이 담긴 벨로그 내용을 통해 지속적인 자기 계발 노력을 강조하기 위함.
• 구현: Velog의 API 또는 RSS 피드 파싱 방식을 활용하여, 비동기 통신을 통해 최신 게시글 데이터를 불러와 카드 형태로 렌더링했습니다.

B. GitHub Pages를 통한 배포

• 목표: 포트폴리오 배포 과정을 직접 경험하고, Git/GitHub 활용 능력을 버전 관리 외 배포까지 확장하는 것.
• 배경: 협업에 필수적인 Git/GitHub 활용을 완벽히 습득하기 위해 배포 환경 구축까지 진행.
• 구현: GitHub Pages를 이용해 소스 코드를 웹사이트로 배포하는 절차를 따랐으며, 이 과정은 향후 협업 시 CI/CD 환경에 대한 이해도를 높이는 데 기여했습니다.

3. 프로젝트를 통한 발견 및 결론

이번 포트폴리오 제작을 통해 가장 크게 체감한 것은 기록의 중요성이었습니다.

• 개인의 경험: 평소 노션(Notion)에 프로젝트 기획, 사소한 결정, 파일, 수상 기록 등 모든 것을 습관적으로 기록해 두었습니다.
• 결과: 포트폴리오 제작 시작 단계에서 자료를 찾는 데 시간을 허비하지 않고, 바로 개발에 착수할 수 있었습니다. 이는 다른 참여자들이 자료 수집에 시간을 쏟는 것과 대비되는 부분이었으며, 웹사이트 개발이라는 보다 높은 수준의 목표를 달성할 수 있는 기반이 되었습니다.

결론적으로, 웹 포트폴리오는 단순한 성과 나열을 넘어, 개발자로서의 학습 태도와 기록 습관을 입증하는 결과물이 되었습니다. 앞으로도 지속적인 업데이트를 통해 포트폴리오의 내용과 기능을 발전시켜 나갈 계획입니다.

완성 웹사이트 링크 : https://dayeon-t.github.io/website_portfolio/#intro