개발자노트 조현진

SSE(Server-Sent Events) 채팅 시스템

개발자노트 조현진 — Tue, 2 Sep 2025 15:48:54 +0900

사전 기반 지식

1단계 폴링 시스템 완전 이해 (MVC 패턴, JPA, Mustache)
HTTP 통신의 한계: 클라이언트가 먼저 요청해야만 응답 가능
JavaScript 기초: EventSource API와 이벤트 처리
멀티스레드 개념: 동시성과 스레드 안전성에 대한 기본 이해

폴링 vs SSE 비교

통신 방향	클라이언트 → 서버 (요청/응답)	서버 → 클라이언트 (푸시)
연결 방식	매번 새로운 HTTP 연결	하나의 지속적인 HTTP 연결
실시간성	폴링 주기에 따른 지연	즉시 전달 가능
서버 부하	높음 (불필요한 요청)	낮음 (필요시에만 전송)
네트워크 효율	비효율적	효율적
구현 복잡도	간단	중간

SSE의 주요 활용 사례

실시간 알림 및 알림 센터: 새로운 메시지, 친구 요청, 좋아요 등 서버에서 발생하는 이벤트들을 사용자에게 즉시 알릴 때 사용됩니다.
뉴스피드 및 타임라인: 페이스북, 인스타그램과 같이 팔로우하는 사용자의 새로운 게시물이 올라왔을 때, 클라이언트가 새로고침하지 않아도 자동으로 업데이트되게 만듭니다.
실시간 주가 정보/스포츠 경기 스코어: 서버에서 지속적으로 변하는 주식 가격이나 경기 스코어를 여러 사용자에게 실시간으로 중계할 때 사용됩니다.
라이브 대시보드: 서버의 상태, 데이터 사용량, 로그 등 실시간으로 변하는 모니터링 데이터를 웹 대시보드에 보여줄 때 유용합니다.
배달/주문 상태 추적: 배달 앱에서 주문 상태가 '접수 완료' → '배달 중' → '배달 완료' 등으로 변경될 때, 클라이언트 화면을 실시간으로 업데이트하는 데 사용됩니다.

이러한 기능들은 모두 클라이언트가 서버에 데이터를 보낼 필요 없이, 오직 서버로부터 데이터를 받기만 하면 되기 때문에 단방향 통신에 최적화된 SSE가 효율적이고 정석적인 방법이 될 수 있습니다.

SSE 통신 흐름

클라이언트: new EventSource('/sse/connect') → 서버에 SSE 연결 요청
서버: SseEmitter 생성 → 클라이언트와 지속적 연결 유지
메시지 작성: 사용자가 새 메시지 POST → 서버에 저장
브로드캐스트: sseService.broadcastMessage() → 모든 연결된 클라이언트에 즉시 전송
클라이언트: eventSource.addEventListener('newMessage') → 새 메시지 실시간 수신

SSE의 한계와 WebSocket의 필요성

SSE는 폴링보다 효율적이지만 여전히 단방향 통신의 한계가 있습니다. 채팅에서 사용자가 "입력 중..." 상태를 보여주거나, 실시간 게임과 같은 양방향 상호작용이 필요한 경우에는 WebSocket이 더 적합합니다.

폴링 채팅 시스템

개발자노트 조현진 — Tue, 2 Sep 2025 15:45:33 +0900

사전 기반 지식

Spring Boot 기본: @Controller, @Service, @Repository 어노테이션 이해
Spring Data JPA: Entity, Repository 패턴 숙지
HTTP 기본: GET, POST 요청/응답 이해
HTML/JavaScript 기초: 기본 DOM 조작과 이벤트 처리
Mustache 템플릿 엔진: 기본 문법 ({{}}, {{#}})

폴링(Polling)이란?

폴링은 클라이언트가 서버에 주기적으로 요청을 보내 새로운 데이터가 있는지 확인하는 통신 방식입니다.

폴링(Polling)이라는 용어는 클라이언트가 서버로부터 데이터를 계속해서 당겨오는(pulling) 행위에서 유래했습니다. 즉, 클라이언트가 서버에게 "새로운 데이터가 있나요?"라고 지속적으로 질문을 던져 응답을 수집하는 행위를 말합니다.

장점: 구현이 간단하고, HTTP 기반이므로 방화벽 문제에서 자유롭습니다.
단점:
- 불필요한 요청: 새로운 데이터가 없어도 계속 요청을 보냅니다.
- 서버 부하 증가: 동시 접속자가 많을수록 서버에 과도한 부하를 줄 수 있습니다. 예를 들어, 1,000명의 사용자가 2초마다 요청하면 서버는 2초마다 1,000개의 요청을 처리해야 합니다.
- 실시간성 제한: 데이터가 즉시 전달되지 않고, 폴링 주기에 따라 지연이 발생합니다.

시스템의 주요 기능

메시지 작성: 사용자가 채팅 메시지를 입력하고 전송할 수 있습니다.
메시지 조회: 웹 페이지에 접속하면 저장된 모든 채팅 메시지를 볼 수 있습니다.
자동 업데이트: 웹 페이지는 2초마다 자동으로 새로고침되어 새로운 메시지가 있는지 확인하고 화면에 표시합니다.

상태 관리란 뭘까?

개발자노트 조현진 — Thu, 21 Aug 2025 17:31:04 +0900

공유 상태가 변경될 때, 동기화 하는 것을 상태 관리(State Management)라고 합니다.

상태 관리가 안되면 데이터 일관성을 잃게 됩니다.

유저가 프로필을 변경해도 다른 화면에서 이전 프로필이 보이는 문제
쇼핑 바구니에 표시된 상품의 개수와 실제 담긴 상품 개수가 다른 문제
글을 작성했는데, 게시판에 반영되지 않는 문제(Create)
글을 수정했는데, 게시판에 반영되지 않는 문제(Update)
글을 삭제했는데, 게시판에 반영되지 않는 문제(Delete)

동일한 데이터를 여러 곳에서 가지고 있기 때문에, 동기화가 필요하게 됩니다.

MVVM 패턴과 상태 관리

개발자노트 조현진 — Tue, 19 Aug 2025 16:35:56 +0900

Monolithic (모노리스) 구조의 특징

하나의 코드 파일에 UI, 비즈니스 로직, 프레젠테이션 로직을 모두 넣는 형식을 흔히 Monolithic Architecture 또는 간단히 Monolith라고 부릅니다.

먼저 MVVM 패턴 없이 간단한 구조로 코드를 작성해보자. 모든 로직과 상태 관리를 하나의 파일에 통합하여, UI와 데이터 처리가 한 클래스에서 이루어지는 방식으로 코드를 작성할 수 있다. 이 방식은 MVVM과 같은 디자인 패턴이 없어도 간단한 앱에서는 빠르게 개발할 수 있는 장점이 있다.

MVVM에 대한 기본 개념 잡기
MVVM(Model-View-ViewModel)은 소프트웨어 개발에서 널리 사용되는 아키텍처 패턴 중 하나입니다. 플러터에서 MVVM을 적용하는 것은 앱의 구조를 명확하게 하고, 코드의 재사용성과 테스트 용이성을 높여줍니다.

MVVM은 세 가지 주요 구성 요소

MVVM은 소프트웨어를 Model / View / ViewModel로 관심사 분리하여 View를 쉽게 변경할 수 있도록 만들어줍니다.

View : UI 담당
ViewModel : View 상태 및 로직 담당
Model : 비즈니스 로직 & 데이터 입출력 담당

SpringBoot Base64

개발자노트 조현진 — Fri, 8 Aug 2025 14:24:36 +0900

1. Base64란?

Base64는 바이너리 데이터(이미지, 파일 등)를 텍스트로 변환하는 인코딩 방식입니다. 64개의 ASCII 문자(A-Z, a-z, 0-9, +, /)와 패딩 문자(=)를 사용해 안전하게 전송할 수 있게 합니다.

2. 왜 사용하나요?

텍스트만 허용하는 시스템(예: JSON, 이메일, HTTP)에서 바이너리 데이터를 보낼 때.
데이터 손상 방지: 특수 문자가 바이너리에 섞이지 않음.
예: 플러터 앱에서 파일을 Base64로 변환해 서버로 업로드.

3. 어떻게 작동하나요?

바이너리 데이터를 8비트 바이트로 봅니다.
6비트 단위로 나눕니다 (3바이트 = 24비트 = 4개의 6비트).
각 6비트를 0-63 숫자로 변환 후, Base64 테이블에서 문자로 매핑.
나머지 비트가 부족하면 =로 패딩.

도식화 (간단 예: "Man" 문자열)

원본: M a n (ASCII: 77, 97, 110 → 바이너리: 01001101 01100001 01101110)
6비트 나누기: 010011 010110 000101 101110
10진수: 19, 22, 5, 46
Base64 매핑: T W F u
결과: TWFu

Base64 역직렬화(디코딩)는 Base64 문자열을 원본 바이너리로 복원합니다.

Base64 문자열을 4문자(24비트) 단위로 나눕니다.
각 문자를 6비트(0-63)로 매핑 후 결합해 8비트 바이트로 재구성.
패딩(=) 무시.

도식화 ("TWFu" 디코딩 예):

Base64: T W F u (인덱스: 19, 22, 5, 46 → 6비트: 010011 010110 000101 101110)
8비트 재구성: 01001101 01100001 01101110 (ASCII: 77, 97, 110 → "Man")

Flutter Key 및 상태 관리에 기본 개념

개발자노트 조현진 — Fri, 8 Aug 2025 14:23:03 +0900

Flutter의 세 가지 트리 구조

개요

Flutter는 UI를 효율적으로 렌더링하기 위해 세 가지 트리 구조를 사용합니다. 이 구조들은 성능 최적화와 재사용성을 위해 설계되었으며, 개발자는 주로 Widget Tree만 직접 다룹니다.

세 가지 트리의 역할

Widget Tree: 개발자가 작성한 UI 구조 (불변객체)
Element Tree: Widget과 RenderObject를 연결하는 중간 계층 (상태 유지)
RenderObject Tree: 실제 화면에 그려지는 객체들 (렌더링 담당)

Widget: UI 설계도 (불변 청사진)
Element: 런타임에서 생성된 살아있는 구조물 (가변 인스턴스)
역할: 위치, 타입, 상태를 저장하고 RenderObject와 연결

중요한 특징:

State 객체는 Element에 의해 관리됩니다
StatefulWidget은 StatefulElement를, StatelessWidget은 StatelessElement를 가집니다
Flutter는 성능을 위해 Element와 RenderObject를 재활용합니다

구성 요소 생성 비용 재생성 빈도

Widget	저렴	자주 발생
Element	높음	최소화됨
RenderObject	높음	최소화됨

canUpdate() 메서드

Flutter는 Widget.canUpdate() 메서드를 사용하여 Element 재사용 여부를 결정합니다

재사용 판단 과정

프레임 빌드 시: Element Tree의 각 노드를 검사
비교 수행: 새 위젯의 타입과 키를 이전 위젯과 비교
재사용 결정:
- 타입과 키가 같으면 → Element 재사용, 참조만 업데이트
- 다르면 → 기존 Element 제거 후 새로 생성

Key를 사용한 문제 해결

키를 사용하여 상태보존

플러터는 프레임을 빌드할 때 각 요소와 해당 위젯을 확인하여 해당 요소를 재사용할 수 있는지 판단합니다. 목록의 경우, 플러터는 자식 요소 내에서 일치하는 위젯 유형과 키를 확인합니다.

Key의 작동 원리

식별 매커니즘: 다음 순서

runtimeType (클래스 타입)
key (고유 식별자)

Key의 작동 방식

Flutter는 Key를 통해 위젯을 고유하게 식별합니다. 같은 타입이라도 Key가 다르면 Flutter는 이를 별개의 위젯으로 인식하고, 다른 상태를 유지하도록 처리합니다. 따라서 Key가 있는 위젯의 순서가 변경되면 Flutter는 새로운 위치에 있는 위젯의 상태를 유지하도록 관리합니다.

핵심 정리

Key 사용의 이점

성능 최적화: 불필요한 Element 재생성 방지
상태 보존: 위젯 순서 변경 시에도 올바른 상태 유지
메모리 효율성: Element와 RenderObject 재사용으로 메모리 절약

주요 개념 복습

Widget Tree: 개발자가 작성하는 UI 설계도 (불변)
Element Tree: Widget의 실제 구현체 (상태 유지)
RenderObject Tree: 실제 렌더링 담당
canUpdate(): 타입과 키를 비교하여 Element 재사용 결정
Key의 역할: 위젯을 고유하게 식별하여 올바른 Element 매칭

Flutter의 Key는 단순해 보이지만 성능과 사용자 경험에 큰 영향을 미치는 중요한 개념입니다. 올바른 Key 사용을 통해 효율적이고 안정적인 Flutter 앱을 개발할 수 있습니다.

GestureDetector 위젯

개발자노트 조현진 — Fri, 8 Aug 2025 12:52:07 +0900

개요

GestureDetector는 사용자가 화면에서 수행하는 다양한 터치 이벤트를 감지하고 처리하는 기본적인 Flutter 위젯입니다.

특징

GestureDetector 자체는 화면에 표시되지 않으며, child에 지정된 위젯에 사용자 이벤트가 발생할 때 이벤트를 처리할 수 있습니다
다양한 사용자 이벤트에 대한 콜백 함수들로 구성되어 있어, 각 이벤트에 맞는 동작을 정의할 수 있습니다

주요 콜백 함수

onTap	사용자가 화면을 가볍게 탭할 때 호출	버튼 클릭 효과
onDoubleTap	사용자가 화면을 빠르게 두 번 탭할 때 호출	이미지 확대
onLongPress	사용자가 화면을 오래 누르고 있을 때 호출	아이템 삭제 옵션 표시
onTapDown	사용자가 화면을 터치하기 시작할 때 호출	버튼을 누르는 즉시 효과 적용
onTapUp	사용자가 터치한 손가락을 화면에서 떼었을 때 호출	클릭 완료
onVerticalDragStart	사용자가 화면을 위아래로 드래그하기 시작할 때 호출	목록 스크롤 시작 감지
onHorizontalDragStart	사용자가 화면을 좌우로 드래그하기 시작할 때 호출	슬라이드 메뉴 호출

dart 비동기 프로그래밍

개발자노트 조현진 — Fri, 8 Aug 2025 12:50:05 +0900

dart 비동기 프로그래밍에 대한 개념을 이해하자.

동기성 - 모든 코드가 순차적으로 진행되는 형태

비동기 - 코드가 동시다발적으로 실행, 순착적으로 보장을 할 수 없는 형태

dart 비동기 프로그래밍은 프로그램의 흐름을 중단시키지 않고, 무언가의 완료를 기다리는 동안 다른 작업을 수행할 수 있게 해줍니다. Dart에서는 이를 위해 Future와 Stream이라는 두 가지 주요 개념을 제공합니다.

Future 타입이 뭘까?

Future 객체는 미래에 어떤 값이나 오류를 반환할 것이라는 약속을 나타냅니다. async 키워드가 붙은 함수 내부에서 await 키워드를 사용하면, Future가 완료될 때까지 실행을 잠시 멈추고 결과가 준비되면 다시 실행을 계속합니다

Flutter에서 콜백함수

개발자노트 조현진 — Mon, 28 Jul 2025 15:46:39 +0900

콜백 함수란?

콜백 함수(callback function)는 말 그대로 나중에 불려지는 함수입니다.
보통 다른 함수(또는 위젯)에 인자로 넘겨서, 그 함수가 필요한 시점에 대신 호출해주는 방식이에요.

그럼 왜 콜백함수를 쓸까?

버튼을 눌렀을 때
값이 바뀌었을 때
무언가가 끝났을 때
자식 위젯이 부모에게 알릴 때

이처럼 특정 상황이 생기면 실행되어야 하는 작업을 미리 정해두기 위해 콜백 함수를 씁니다.

Flutter에서는 어떻게 쓰일까?

Flutter는 위젯 중심의 프레임워크라서,
콜백 함수는 보통 이벤트 처리에 많이 사용됩니다.

한줄로 정리하자면

콜백 함수는 나중에 실행될 함수를 다른 함수나 위젯에 넘겨주는 것입니다.

Flutter에서는 이걸로 버튼 누르기, 값 바꾸기, 사용자 반응 처리를 합니다.

플러터로 스토어 앱 만들기

개발자노트 조현진 — Fri, 25 Jul 2025 17:51:04 +0900

1.안드로이드 스튜디오 실행

2.왼쪽 상단에서 New Flutter Project 생성

3.Flutter를 선택

4.Flutter경로 선택후 알맞은 설정후 Finish버튼 클릭

2.1.asset 디렉토리 생성후 자신이 원하는 이미지 넣기

2.2.yaml에 이미지 파일 인식을 위해 자원 폴더 위치 설정 (아래 코드 참조)

2.3.pub get 버튼을 클릭하여 설정 적용

3.1.나머지는 아래 코드처럼 main을 작성

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: StorePage(),
    );
  }
}

class StorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(25.0),
              child: Row(
                children: [
                  Text("Woman", style: TextStyle(fontWeight: FontWeight.bold)),
                  Spacer(),
                  Text("Kids", style: TextStyle(fontWeight: FontWeight.bold)),
                  Spacer(),
                  Text("Shoes", style: TextStyle(fontWeight: FontWeight.bold)),
                  Spacer(),
                  Text("Bags", style: TextStyle(fontWeight: FontWeight.bold)),
                ],
              ),
            ),
            //Image.asset("assets/bag.jpeg", fit: BoxFit.cover),
            //Image.asset("assets/cloth.jpeg", fit: BoxFit.cover),
            Expanded(child: Image.asset("assets/bag.jpeg", fit: BoxFit.cover)),
            SizedBox(height: 2),
            Expanded(child: Image.asset("assets/cloth.jpeg", fit: BoxFit.cover)),
          ],
        ),
      ),
    );
  }
}

name: flutterstore
description: "A new Flutter project."
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1

environment:
  sdk: ^3.6.2

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter

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

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^5.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter packages.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/to/resolution-aware-images

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/to/asset-from-package

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/to/font-from-package