개발일기

React - hls로 스트리밍되는 영상 재생하기

Flashback — Wed, 6 Aug 2025 20:35:53 +0900

hls형식의 미디어를 재생하려면 브라우저 호환성으로 인해 hls.js를 import하여 가져오는 것이 추천된다.

yarn add hls.js

react에서 미디어를 재생하기 위해 react-player를 추가로 설치한다.

yarn add react-player

렌더링하는 부분에 RectPlayer를 통해 master.m3u8이 재생될 수 있도록 코드를 입력한다.

return (
    <>
        <ReactPlayer src='./cat/master.m3u8' controls={ true } />
    </>
)

전체 코드는 다음과 같다.

import react from 'react'
import ReactPlayer from 'react-player'
import Hls from 'hls.js'

function App() {
    return (
        <>
            <ReactPlayer src='./cat/master.m3u8' controls={ true } />
        </>
    )
}

export default App

import한 hls를 쓰지않더라도 저렇게 import한 코드를 입력해줘야 오류없이 재생될 수있다.

Network탭을 보면 다음과 같이 ts segment들이 순차적으로 불러와지면서 영상이 재생되는 것을 확인할 수 있다. mp4파일과 다른 점은 mp4파일은 먼저 페이지가 로드되면 미디어를 한 번에 다운받아 재생하는데 hls는 ts segment를 순차적으로 받아와 재생하게 된다.

참고 사이트:

https://www.npmjs.com/package/react-player

react-player

A React component for playing a variety of URLs, including file paths, Mux, YouTube, Vimeo, and Wistia. Latest version: 3.3.1, last published: 21 days ago. Start using react-player in your project by running `npm i react-player`. There are 1328 other proje

www.npmjs.com

https://www.npmjs.com/package/hls.js?activeTab=readme

hls.js

JavaScript HLS client using MediaSourceExtension. Latest version: 1.6.8, last published: a day ago. Start using hls.js in your project by running `npm i hls.js`. There are 957 other projects in the npm registry using hls.js.

www.npmjs.com

Node.js - ffmpeg으로 mp4파일을 hls로 변환하기

Flashback — Wed, 6 Aug 2025 20:26:04 +0900

1. HLS란?

HLS는 HTTP기반의 적응형 스트리밍 프로토콜이며 미디어 파일을 일정한 세그먼트(segment) 단위로 나눠서 전송한다. 적응형 스트리밍이란 사용자의 네트워크 환경에 맞는 화질을 자동으로 선택하여 전송하는 것을 의미한다. 즉 사용자의 네트워크 속도가 느릴 경우 화질을 낮춰 전송하고 네트워크 속도가 괜찮을 경우 좋은 화질로 미디어 데이터를 전송하는 것을 의미한다.

2. 코덱과 비트레이트

Video Codec: 영상을 인코딩 하거나 디코딩하는 기술로 영상 데이터를 저장하거나 전송하기에 적합한 형태로 압축을 하고 재생 시 다시 원래 형태로 복원하는 역할을 한다. 비디오 코덱의 종류에는 libx264, libx265, mpeg4 등이 있다.
Audio Codec: Audio Codec은 Video Codec과 다르게 소리를 인코딩하거나 디코딩한다. 오디오 코덱의 종류에는 MP3, AAC, FLAC 등이 있다.
Bitrate: 1초당 몇 비트의 데이터를 사용할지를 의미한다. 비트레이트가 높으면 파일 크기가 크며 고화질이다. 반대로 비트레이트가 낮으면 파일 크기가 작으며 저화질이다.
Constant Bitrate(CBR): 고정 비트레이트로 처음부터 끝까지 고정된 비트레이트를 사용하여 압축을 진행한다. 고정된 비트로 인해 전송이 안정적이지만 화면 전환이 많은 구간에는 충분한 비트가 할당되지 않아 해당 부분 한정으로 품질이 낮아질 수 있다.
Variable Bitrate(VBR): 가변 비트레이트로 CBR과 다르게 비트레이트가 매번 변하며 이로 인해 CBR의 단점을 보완할 수 있다. 전체적인 품질은 VBR이 더 우수하다.

3. ffmpeg 옵션

const ffmpegOptions = [
    '-loglevel', 'info',
    '-i', path.join(__dirname, `${mp4DirName}/SampleVideo_1280x720_30mb.mp4`),
    '-filter_complex', // 여러 스트림을 동시에 처리하기 위해 사용
    '[0:v]split=3[v1][v2][v3];' + // 비디오 스트림을 3개로 분할
    '[v1]scale=1280:720[vout1];' + // 첫 번째 분할된 스트림을 1280x720 크기로 지정
    '[v2]scale=854:480[vout2];' + // 두 번째 분할된 스트림을 854x480 크기로 지정
    '[v3]scale=640:360[vout3]', // 세 번째 분할된 스트림을 640x360 크기로 지정

    '-map', '[vout1]',     '-map', '0:a', // 매핑
    '-map', '[vout2]',     '-map', '0:a',
    '-map', '[vout3]',     '-map', '0:a',

    '-c:v', 'libx264', // 영상 코덱
    '-g', '24',  // GOP 크기 설정
    '-keyint_min', '24', // 최소 키프레임 간격

    '-b:v:0', '2500k', // 영상 비트레이트
    '-b:v:1', '1500k',
    '-b:v:2', '800k',

    '-c:a', 'aac', // 오디오 코덱
    '-b:a', '128k', // 오디오 비트레이트

    '-hls_time', '5', // segment 간격
    '-hls_list_size', '0', // m3u8 파일에 포함할 ts파일 개수
    '-hls_segment_filename', `${targetDirName}/%v/segments_%03d.ts`, // ts 파일 이름 형식
    '-master_pl_name', 'master.m3u8', // master 파일 이름
    '-var_stream_map', 'v:0,a:0,name:720p v:1,a:1,name:480p v:2,a:2,name:360p', // 스트림 매핑

    `${targetDirName}/%v/playlist.m3u8`
]

-filter_complex: 여러 스트림을 동시에 처리하거나 입력 파일의 미디어 스트림을 여러 개 분할하여 변환할 때 사용한다.
'[0:v]split=3[v1][v2][v3];’: [0:v]는 입력 파일의 첫 번째 영상 스트림을 의미한다. split으로 입력 파일의 영상을 3개의 스트림으로 분할하여 각각 v1, v2, v3로 이름을 지정한다. 여기서 v는 video를 의미한다.
[v1]scale=1280:720[vout1]…: 분할된 스트림의 해상도를 지정한다. width, height 순으로 나열하며 720p, 480p, 360p로 지정한다. vout1, vout2, vout3은 filter_complex로 분할되고 해상도가 지정된 최종 영상 스트림의 이름을 의미한다. vout1, vout2, vout3을 -map에 사용하여 매핑을 진행한다.
-map: ffmpeg에서 어떤 입력 스트림을 출력해 포함시킬지 정의한다. 0:a는 입력 파일의 첫 번째 오디오 스트림을 의미한다. 0:v와 같이 0은 첫 번째 스트림을 의미하며 a는 audio를 의미한다. 각 영상마다 오디오가 필요하므로 ‘-map’: ‘[vout1]’, ‘-map’, ‘0:a’, ‘-map’: ‘[vout2’], ‘-map’], ‘0:a’ … 처럼 3개의 영상 스트림과 오디오 스트림을 출력에 포함되도록 지정한다.
'-c:v', 'libx264': 비디오의 코덱을 libx264로 설정한다.
'-b:v:0', '2500k': 첫 번째 영상 스트림의 비트레이트를 2500k로 설정한다. 2번째 세번째 영상 스트림은 해상도에 따라 비트레이트를 조절한다.
'-c:a', 'aac': 음성 스트림의 코덱을 aac로 설정한다.
'-b:a', '128k': 음성 스트림의 비트레이트를 128k로 설정한다. 음성 스트림은 하나이기 때문에 a:0, a:1이 아닌 a로 입력한다.
-g: 키프레임부터 다음 키프레임까지의 최대 프레임 수를 지정한다.
-keyint_min: 키프레임들 사이의 최소 프레임 수를 지정한다. 보통 keyint_min과 -g는 같은 값으로 지정한다. 단위는 fps로 24면 24프레임을 의미한다.
'-hls_time', '5': 생성될 hls segment의 길이를 지정한다. 단위는 초로 5로 지정하면 5초를 의미한다. keyint_min과 g값으로 인해 hls_time은 5로 지정했지만 각 segment의 길이가 달라질 수 있다.
'-hls_list_size', '0’: m3u8플레이 리스트에 포함시킬 hls segment의 개수를 지정한다. 0으로 지정하면 모든 hls segment를 m3u8에 포함하여 저장한다. 5로 지정하면 최근 생성된 5개의 hls segment만 m3u8에 포함하여 저장하게 된다. 0이 아닌 다른 숫자를 지정하는 경우는 보통 라이브 스트리밍을 할 때 다른 숫자로 지정하게 된다.
'-var_stream_map’: -map에서 매핑되어 출력 스트림에 포함된 스트림들을 그룹화한다. 위 코드를 보면 v:0과 a:0을 720p로 v:1과 a:0을 480p로 그룹 지정하였다. 이렇게 지정된 이름은 %v로 사용할 수 있다.
'-hls_segment_filename’: 생성되는 hls segment의 파일 명을 지정한다.
'-master_pl_name’: 마스터 플레이리스트의 파일 명을 지정한다. 지정된 이름으로 m3u8파일이 생성된다.
${targetDirName}/%v/playlist.m3u8: 분할되어 생성되는 각 해상도별 플레이리스트 파일 명을 지정한다.

4. 변환 코드

const spawn = require('child_process').spawn;
const path = require('path');
const fs = require('fs');

const mp4DirName = 'original_videos'
const targetDirName = 'streaming_videos/SampleVideo_1280x720_30mb'

if (!fs.existsSync(path.join(__dirname, targetDirName))) {
    fs.mkdirSync(path.join(__dirname, targetDirName), { recursive: true });
}

const ffmpegOptions = [
    '-loglevel', 'info',
    '-i', path.join(__dirname, `${mp4DirName}/SampleVideo_1280x720_30mb.mp4`),
    '-filter_complex', // 여러 스트림을 동시에 처리하기 위해 사용
    '[0:v]split=3[v1][v2][v3];' + // 비디오 스트림을 3개로 분할
    '[v1]scale=1280:720[vout1];' + // 첫 번째 분할된 스트림을 1280x720 크기로 지정
    '[v2]scale=854:480[vout2];' + // 두 번째 분할된 스트림을 854x480 크기로 지정
    '[v3]scale=640:360[vout3]', // 세 번째 분할된 스트림을 640x360 크기로 지정

    '-map', '[vout1]',     '-map', '0:a', // 매핑
    '-map', '[vout2]',     '-map', '0:a',
    '-map', '[vout3]',     '-map', '0:a',

    '-c:v', 'libx264', // 영상 코덱
    '-g', '24',  // GOP 크기 설정
    '-keyint_min', '24', // 최소 키프레임 간격

    '-b:v:0', '2500k', // 영상 비트레이트
    '-b:v:1', '1500k',
    '-b:v:2', '800k',

    '-c:a', 'aac', // 오디오 코덱
    '-b:a', '128k', // 오디오 비트레이트

    '-hls_time', '5', // segment 간격
    '-hls_list_size', '0', // m3u8 파일에 포함할 ts파일 개수
    '-hls_segment_filename', `${targetDirName}/%v/segments_%03d.ts`, // ts 파일 이름 형식
    '-master_pl_name', 'master.m3u8', // master 파일 이름
    '-var_stream_map', 'v:0,a:0,name:720p v:1,a:1,name:480p v:2,a:2,name:360p', // 스트림 매핑

    `${targetDirName}/%v/playlist.m3u8`
]

const converter = spawn('ffmpeg', ffmpegOptions)

converter.stderr.on('data', (data) => {
    console.log(`stderr: ${data}`);
})
converter.stderr.on('end', () => {
    console.log('End converting video')
})

위의 코드를 실행하면 streaming_videos라는 폴더가 생성되고 그 하위 폴더에 360p, 480p과 720p 해상도별 폴더가 생성된다. 적응형 스트리밍을 위해 master.m3u8은 각 플레이리스트의 정보를 담고 있으며 각각의 폴더는 ts segment과 playlist.m3u8을 생성한다.

참고 사이트:

https://frontdev.tistory.com/entry/ffmpeg%EB%A1%9C-hls-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%98%B5%EC%85%98%EC%A0%95%EB%A6%AC

ffmpeg로 hls 만들기, 옵션정리

ffmpeg 프로그램을 다운받고 영상을 hls 전용 스트리밍 영상 파일로 변환 및 ts (각각의 세그먼트 파일) 들을 추출 한 뒤에 웹에 적용해볼 수 있습니다. ie 11 이상으로 지원하고, 각각 영상 조각 파일

frontdev.tistory.com

https://video.stackexchange.com/questions/37648/ffmpeg-hls-time-and-hls-init-time-not-working

ffmpeg: -hls_time and -hls_init_time not working

Source video: h264 mp4, 45 seconds, 30 fps, keyint 30, min keyint 16 I am trying to create an m3u8 playlist where the first chunk is smaller (2 seconds) and the rest are 10 seconds. when using this

video.stackexchange.com

hls_time: Invalid chars on ffmpeg version 3 · Issue #347 · bramp/ffmpeg-cli-wrapper

Describe the bug HlsOutputBuilder is incompatible with the hls format used in ffmpeg version 3. FFmpeg switched from second based value (eg. 120) to the format we use (2:00, hh:mm:ss) in version 4....

github.com

https://ffmpeg.org/documentation.html

Documentation

The following documentation is regenerated nightly, and corresponds to the newest FFmpeg revision. Consult your locally installed documentation for older versions. API Documentation Doxygen documentation for current trunk (regenerated nightly); documentati

ffmpeg.org

Node.js - ffprobe로 미디어 파일 분석하기

Flashback — Wed, 6 Aug 2025 19:04:48 +0900

1. ffprobe란?

ffprobe로 미디어 파일이 담고 있는 영상, 음성, 자막 등의 정보를 확인할 수 있으며 해당 파일의 크기 등을 확인할 수 있다. 이렇게 얻은 정보를 바탕을 통해 ffmpeg으로 영상을 다른 확장자로 변환하거나 스트리밍 형식으로 변환할 수 있다.

Node.js에서 ffprobe를 사용하려면 ffmpeg을 다운로드 해야한다. https://ffmpeg.org/ 이 사이트에서 자신의 OS에 맞게 설치를 하거나 npm에 올라가 있는 @ffprobe-installer/ffprobe, @ffmpeg-installer/ffmpeg패키지를 설치하여 사용할 수도 있다.

npm ffmpeg: https://www.npmjs.com/package/@ffmpeg-installer/ffmpeg

npm ffprobe: https://www.npmjs.com/package/@ffprobe-installer/ffprobe

2. ffprobe 옵션

const ffprobeOptions = [
    '-loglevel', 'info',
    '-print_format', 'json',
    '-show_streams',
    '-show_format',
    `${path.join(__dirname, `${mp4DirName}/SampleVideo_1280x720_30mb.mp4`)}`
];

-loglevel: ffprobe를 실행했을 때, 나타날 로그의 로그 레벨을 설정한다. error, quiet, info 등이 있는데 error는 에러가 발생했을 때 로그 출력, quiet는 로그를 출력하지 않으며 info는 현재 진행 상황 등을 출력한다.
-print_format: 결과 값을 출력한 형태를 지정한다. 여기선 json으로 지정한다.
-show_streams: 입력 파일이 가지고 있는 영상, 음성, 자막 등의 미디어 스트림 정보를 출력하게 하는 옵션이다.
-show_format: 해당 미디어 파일의 파일 크기, 비트레이트와 재생 시간 등을 출력하게 하는 옵션이다.
path.join~: 분석할 미디어 파일의 경로를 지정한다.

const spawn = require('child_process').spawn;
const path = require('path');
const fs = require('fs');

const mp4DirName = 'original_videos'
const ffprobeOptions = [
    '-loglevel', 'error',
    '-print_format', 'json',
    '-show_streams',
    '-show_format',
    `${path.join(__dirname, `${mp4DirName}/SampleVideo_1280x720_30mb.mp4`)}`
];
const process = spawn('ffprobe', ffprobeOptions)
let output = '';

process.stdout.on('data', (data) => {
    output += data.toString();
});
process.stderr.on('data', (data) => {
    console.log('stderr: ', data.toString())
})
process.on('close', (code) => {
    if (code === 0) {
        output = JSON.parse(output)
        let videoStream = {}
        let audioStream = {}
        let mediaFormat = {}
        if(typeof output.streams !== 'undefined') {
            videoStream = output.streams.find(stream => stream.codec_type === 'video')
            audioStream = output.streams.find(stream => stream.codec_type === 'audio')
        }
        if(typeof output.format !== 'undefined') {
            mediaFormat = output.format
        }
        console.log('videoStream: ', videoStream)
        console.log('audioStream: ', audioStream)
        console.log('media format: ', mediaFormat)
    } else {
        console.log('error code: ', code)
    }
});

nodejs에서 ffmpeg, ffprobe를 사용하려면 spawn을 사용해야 한다. ffprobe는 Node.js가 아닌 외부 프로그램이기 때문에 spawn으로 외부 프로세스를 실행할 수 있게 해야 한다.

stdout.on(’data’): 표준 출력으로 현재 출력되는 데이터를 확인할 수 있다.
stderr.on(’data’): 표준 에러로 오류 또는 ffmpeg의 진행 상황을 확인할 수 있다.
process.on(’close’): spawn으로 실행한 프로세스가 종료되면 실행된다.

output의 streams는 -show_streams 옵션이 추가된 상태에서 확인할 수 있다. 이와 마찬가지로 output.format은 -show_format 옵션이 추가된 상태에서 확인할 수 있다.

3. video, audio, format 출력 값

// video stream
videoStream:  {
  index: 0,
  codec_name: 'h264',
  codec_long_name: 'H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10',
  profile: 'Main',
  codec_type: 'video',
  codec_tag_string: 'avc1',
  codec_tag: '0x31637661',
  width: 1280,
  height: 720,
  coded_width: 1280,
  coded_height: 720,
  has_b_frames: 0,
  sample_aspect_ratio: '1:1',
  display_aspect_ratio: '16:9',
  pix_fmt: 'yuv420p',
  level: 31,
  chroma_location: 'left',
  field_order: 'progressive',
  refs: 1,
  is_avc: 'true',
  nal_length_size: '4',
  id: '0x1',
  r_frame_rate: '25/1',
  avg_frame_rate: '25/1',
  time_base: '1/12800',
  start_pts: 0,
  start_time: '0.000000',
  duration_ts: 2186752,
  duration: '170.840000',
  bit_rate: '1086104',
  bits_per_raw_sample: '8',
  nb_frames: '4271',
  extradata_size: 38,
  disposition: {
    default: 1,
    dub: 0,
    original: 0,
    comment: 0,
    lyrics: 0,
    karaoke: 0,
    forced: 0,
    hearing_impaired: 0,
    visual_impaired: 0,
    clean_effects: 0,
    attached_pic: 0,
    timed_thumbnails: 0,
    non_diegetic: 0,
    captions: 0,
    descriptions: 0,
    metadata: 0,
    dependent: 0,
    still_image: 0,
    multilayer: 0
  },
  tags: {
    creation_time: '1970-01-01T00:00:00.000000Z',
    language: 'und',
    handler_name: 'VideoHandler',
    vendor_id: '[0][0][0][0]'
  }
}

// audio stream
audioStream:  {
  index: 1,
  codec_name: 'aac',
  codec_long_name: 'AAC (Advanced Audio Coding)',
  profile: 'LC',
  codec_type: 'audio',
  codec_tag_string: 'mp4a',
  codec_tag: '0x6134706d',
  sample_fmt: 'fltp',
  sample_rate: '48000',
  channels: 6,
  channel_layout: '5.1',
  bits_per_sample: 0,
  initial_padding: 0,
  id: '0x2',
  r_frame_rate: '0/0',
  avg_frame_rate: '0/0',
  time_base: '1/48000',
  start_pts: 0,
  start_time: '0.000000',
  duration_ts: 8201216,
  duration: '170.858667',
  bit_rate: '383933',
  nb_frames: '8009',
  extradata_size: 2,
  disposition: {
    default: 1,
    dub: 0,
    original: 0,
    comment: 0,
    lyrics: 0,
    karaoke: 0,
    forced: 0,
    hearing_impaired: 0,
    visual_impaired: 0,
    clean_effects: 0,
    attached_pic: 0,
    timed_thumbnails: 0,
    non_diegetic: 0,
    captions: 0,
    descriptions: 0,
    metadata: 0,
    dependent: 0,
    still_image: 0,
    multilayer: 0
  },
  tags: {
    creation_time: '1970-01-01T00:00:00.000000Z',
    language: 'und',
    handler_name: 'SoundHandler',
    vendor_id: '[0][0][0][0]'
  }
}

video와 audio정보는 위와 같이 출력된다. 핵심적인 내용으로 해당 미디어 스트림의 코덱명, 미디어 타입, 비트레이트, 재생시간과 video면 width, height 해상도, 프레임, audio면 샘플레이트 등을 확인할 수 있다. 이 정보를 바탕으로 여러 해상도로 다운 스케일링하여 스트리밍 형식으로 변환할 때 사용할 수 있다.

// format
media format:  {
  filename: '~\\\\original_videos\\\\SampleVideo_1280x720_30mb.mp4', // filename은 앞에 폴더 경로가 있는데 로컬 컴퓨터라 ~로 대체합니다.
  nb_streams: 2,
  nb_programs: 0,
  nb_stream_groups: 0,
  format_name: 'mov,mp4,m4a,3gp,3g2,mj2',
  format_long_name: 'QuickTime / MOV',
  start_time: '0.000000',
  duration: '170.858667',
  size: '31491130',
  bit_rate: '1474487',
  probe_score: 100,
  tags: {
    major_brand: 'isom',
    minor_version: '512',
    compatible_brands: 'isomiso2avc1mp41',
    creation_time: '1970-01-01T00:00:00.000000Z',
    encoder: 'Lavf53.24.2'
  }
}

format은 파일 크기, 재생 시간, 비트레이트 등을 확인할 수 있다.

참조 사이트:

https://ffmpeg.org/

FFmpeg

Converting video and audio has never been so easy. $ ffmpeg -i input.mp4 output.avi News September 30th, 2024, FFmpeg 7.1 "Péter" FFmpeg 7.1 "Péter", a new major release, is now available! A full list of changes can be found in the release changelo

ffmpeg.org

https://www.npmjs.com/package/@ffprobe-installer/ffprobe

@ffprobe-installer/ffprobe

Platform independent binary installer of FFprobe for node projects. Latest version: 2.1.2, last published: 2 years ago. Start using @ffprobe-installer/ffprobe in your project by running `npm i @ffprobe-installer/ffprobe`. There are 104 other projects in th

www.npmjs.com

@ffmpeg-installer/ffmpeg - npm

@ffmpeg-installer/ffmpeg

Platform independent binary installer of FFmpeg for node projects. Latest version: 1.1.0, last published: 4 years ago. Start using @ffmpeg-installer/ffmpeg in your project by running `npm i @ffmpeg-installer/ffmpeg`. There are 331 other projects in the npm

www.npmjs.com

https://ffmpeg.org/ffprobe.html

ffprobe Documentation

Table of Contents ffprobe [options] input_url ffprobe gathers information from multimedia streams and prints it in human- and machine-readable fashion. For example it can be used to check the format of the container used by a multimedia stream and the form

ffmpeg.org

06/12 - 박달 과학화 기본훈련 후기

Flashback — Thu, 12 Jun 2025 23:45:19 +0900

박달과학화예비군훈련장에서 2훈련장에 배정받아 훈련을 진행하였다.

~9:00 - 문진표 작성 후 명찰과 시계를 받고 조원들을 따라 안보교육관으로 이동. 가방을 들고 들어갈 수 없으며 물품보관함에 넣고 가야함. 입소를 한 이후에 위병소 밖에 있는 제 2물품보관함을 이용이 불가능하다.
9:25 - 안보교육관에서 소개교육들은 후 훈련장으로 이동. 1차 소개교육은 8:50에 있는데 더 일찍오면 이에 참여할 수 있다. 안보교육은 오늘 일정에 대해 간단한 설명을 들은 후에 본격적으로 교육을 시작하게 된다. 첫 교육은 임의로 지정되며 그 이후부터는 동선을 고려하여 자율적으로 임하게 된다.

훈련 내용

훈련 일정은 자율로 진행한 것이기 때문에 내용만 주로 확인하면 된다.
9:50 ~ 10:30 - 개인화기사격. 총 5발을 쏘는데 탄착군이 형성되면 합격한다. 조원중에서 70%?(확실하지않음)이 합격하면 해당 조는 최종 합격이다. 오조준만 안하면 대부분은 합격이다. 개인화기사격은 제 2안보관과 거리가 가장 먼 곳이기 때문에 이점 유의할 것.
10:30 ~ 10:50 - 영상모의사격. 개인화기사격장 건물 1층에서 영상모의사격을 진행한다. 센서가 달려있는 옷을 입고 모의사격장에 입장하는데 분대장은 명령하달하고 3번 8번?은 그 명령에 따라 크레모아 격발과 수류탄을 투척하면 된다. 나머지 조원들은 화면에 나온 적군을 맞추기만 하면 된다.

11:20 ~ 11:40 - 핵 및 화생방. 영상모의사격이 끝나고 바로 교육을 진행하려고 했는데 교육 쉬는 시간에 걸려버려서 10시 50분부터 11시 20분까지 기다렸다 교육을 진행하였다. 이렇게 한 번 시간이 꼬이게되면 오전에 교육을 5개 듣지 못하고 4개만 듣게될 수 있으니 처음 동선을 짤 대 유의할 것. 핵 및 화생방 교육은 먼저 영상 시청을 한 후 방독면 주머니 메는법, 착용법과 방독면 주머니 닫는 법을 배운다. 방독면을 직접 쓰지는 않고 쓰는 모션을 취하고 방독면을 주머니에 넣고 닫는 것 까지 실습을 진행한다. 실습을 그렇게 어려운 편이 아니다.

11:40 ~ 12:10 - 시가지훈련. 개인적으로 기대가 됬던 훈련이다. 먼저 영상 시청을 간단하게 한 후 청군 황군으로 나눠서 쌍방교전을 진행한다. 근데 같은 조원들 전부가 대충하려고 해서 많이 실망스러웠다. 전략을 짜는 분대장을 만나면 그렇게 행동하면되고 아니면 그냥 각자 개인플레이를 하면 된다. 마일즈 장비가 이상한지 상대방을 맞췄는데도 상대방이 계속 살아있는 신기한 경험을 할 수 있다. 어쨌든 그냥 서로 교전하다가 시간지나면 점수체크하고 다음 교장으로 이동하면 된다.

12:10 ~ 14:00 - 점심 시간. 점심 배식은 12시 30분부터인데 남은 교육이 야지전술과 제2 안보교육이라 식당 앞에서 도시락을 기다림. 좌측이 A, C형 도시락이고 우측이 B형 도시락이다. 식당 입장을 기다릴 때 A, C형이면 그늘도 없는 곳에서 줄 서있어야 한다. B형쪽은 그늘진 곳이 있어서 어느정도 시원하게 기다릴 수 있다(본인은 A형이였다. 한식이 좋아서) 점심을 빠르게 먹으면 PX를 이용할 수 있는데 꼭 점심 시간이 아니라 3시 30분까지 PX 입장이 가능함으로 점심 시간에 무리해서 기다릴 필요는 없다.

한식 맛있습니다.

**중요**

* 점심 시간에 PX 줄 기다리다가 2시 정각에 시작하는 제2안보교육을 못 듣게 될 수도 있다. 혼자 듣는 거라면 상관없는데 본인이 빠지면 조원 전체가 해당 교육에 참여할 수 없기 때문에 시간은 꼭 엄수할 것. 실제로 본인 조원 중에서 한 명이 20초전에 안보관으로 등장해서 심장이 쫄깃했다. 50분에 모이기로 했는데 시간이 지남에도 안 나타나고 57분이 넘어서자 욕이 나올 지경이였다... 앞 자리 조와 뒷 자리 조에도 한 명이 안 나타났는데 해당 조들은 실제로 교육장 밖으로 퇴장당했다. + 해당 조원들이 욕하는 건 덤.

14:00 ~ 14:30 - 제2 안보교육. 영상 시청을 두 개 하고 문제를 푼다. 첫 번째 영상은 예비군의 중요함을 알려주는 영상이고 제 두 번째 영상은 연예인들이 나와서 예비군에 대한 이런저런 얘기를 하는 영상이다. 영상 시청이 끝나고 간단한 퀴즈를 10문제 풀면 교육 이수가 완료되는데 미이수 훈련이 남은 조는 해당 교육장으로 이동하고 모두 이수한 조는 안보관에서 휴식을 취하거나 이 시간에 PX를 이용할 수 있다.

14:30 이후에 이용하는 PX는 줄이 생각보다 널널하니 웬만하면 PX이용은 이 시간대를 이용하자.

14:30 ~ 14:50 - 야지전술훈련. 이름은 야지전술훈련인데 구급법교육으로 대체되었으며 점심 식사를 했던 식당에서 진행한다. 지혈대 사용법에 대한 영상을 시청한 후에 식당 뒷편에서 실습을 진행한다. 실습 내용은 지혈대를 사용하는 방법인데 영상을 잘 시청했다면 쉽게 통과가 가능하다.

14:50 ~ 15:40 - 자유시간. 처음에 예측하고 희망했던 바는 제2 안보교육이 끝나고 바로 휴식을 취하는 것인데 오전에 4개 교육밖에 하지 못해 자유시간이 좀 줄어들었다. 분대장을 잘 만나야 한다는 것을 이때 깨달았다(그냥 귀찮다고 대충하는 분대장을 만나면 오전에 4개를 하거나 심지어 3개만 이수하게 될 수도 있음. - 본인 조 분대장은 시가지는 오후에 하자고 하긴했었음. 근데 조원들의 반대?로 오전에 진행함) 자유시간 때 PX를 이용할 수 있는데 14:30부터 줄 서있던 사람도 있기 때문에 어느정도 줄은 서야한다. 근데 점심 시간과 비교하면 줄은 2/3가량 짧다.

15:40 ~ 16:00 - 퇴소. 퇴소는 조 순서대로 퇴소를 진행한다. 즉, 1조부터 먼저 나가고 2조가 나가는 식이다. 가장 빨리 나가면 버스에서 가장 좋은 자리에 앉을 수 있는 장점이 있다. 물론 집을 빨리 간다는 장점또한 존재하기에 조기입소를 강력 추천한다.

구로, 고척은 2훈련장

퇴소 시간에 맞춰 기다리고 있다!!!

훈련 팁

입소는 빠르게 하는게 좋다. 입소를 먼저 한 순서대로 제1 안보교육을 듣고 조 순서에 따라 다른 강의장으로 이동한다. 오전에 빠르게 교육을 받으면 오후에는 쉴 수 있다. (8시 30분에 도착했을 때 16조에 배정받음)

https://yeyak.seoul.go.kr/web/main.do

서울특별시 공공서비스예약

한번에 쉽게 간편하게 서울특별시 공공서비스예약

yeyak.seoul.go.kr

공공서비스예약을 통해서 해당 날짜에 운용되는 셔틀버스가 있으면 신청할 수 있는데 집 주변 및 훈련장 근처로 바로 이동이 가능한 장점이 있다. 훈련장에서 퇴소하면 안양 1번 버스가 4대정도 기다리고 있는데 이에 탑승 못 하면 다음 버스를 기다려야 하고 타더라도 서서 가야할 가능성이 높다. 하지만 셔틀버스를 타면 편하게 앉아서 집 주변까지 갈 수 있으니 별 일이 없다면 셔틀버스를 이용하자.
14:00 제2 안보교육 시간은 꼭 지키자. 이 시간을 못 지켜서 다른 조원들이 교육을 못 받아 퇴소 시간이 늦어지는 일이 생기지 않도록 하자.
박달 기준으로 구로, 고척은 2훈련장이다. 신도림 등 다른 지역은 1훈련장이다. 확실하지는 않지만 보통 이렇게 배정되는 것 같다.

PX이용 팁

점심 시간말고 제 2안보교육이 끝나는 시간을 이용하자. 제 2안보교육이 끝나는 14:30은 PX에 줄이 없는 상태기 때문에 교육이 끝나고 빠르게 뛰어가면 빠르게 입장이 가능하다.
PX입구에서 한쪽면은 화장품 진열대가 있고 반대편은 로카티나 아이스크림을 보관 냉장고가 있다. PX중앙이랑 다른 용품 산 후에 마지막으로 계산줄 기다리면서 화장품 사는 것도 나쁘지 않은 선택이다.(계산 기다리는 시간을 줄일 수 있음) + 마스크팩이 엄청 인기가 많다. 마스크팩 사려는 사람은 유의할 것
15:30이 지나면 더이상 PX에 입장할 수 없다. 이미 바구니를 받아서 물건을 고르고 있는 상태면 괜찮은데 그게 아니면 입장을 할 수 없다.

이외에 훈련에 대해 궁금한 점을 댓글로 남기면 바로 답변해 드리겠습니다.

Javascript - WebRTC 연결 예제

Flashback — Sun, 8 Jun 2025 14:14:18 +0900

https://github.com/FlashBack102/webrtc-boilerplate

GitHub - FlashBack102/webrtc-boilerplate

Contribute to FlashBack102/webrtc-boilerplate development by creating an account on GitHub.

github.com

Javascript - WebRTC로 실시간 미디어 스트리밍 구축

Flashback — Sun, 8 Jun 2025 14:13:07 +0900

1. WebRTC의 기본 구성 요소

WebRTC

웹 브라우저 간에 실시간 통신을 할 수 있게 해주는 오픈 소스 기술이다. 별도의 플러그인 없이 브라우저만으로 미디어 데이터 스트리밍을 주고받을 수 있다.

Stun Server

사용자가 자신의 공인 IP주소, 포트와 NAT종류를 파악할 수 있도록 해주는 서버로 주로 공유기나 NAT 환경에 이는 사용자가 외부에서 볼 수 있는 정보를 확인하게 해주는 서버이다. NAT 뒤에 있는 기기는 보통 사설 IP를 사용하여 외부 피어가 직접 연결을 하기 힘들다. STUN은 NAT으로 인해 발생하는 연결 문제를 우회하는데 중요한 역할을 한다. 즉 Stun 서버를 통해 자신의 공인 IP와 포트 번호를 파악한 후 그 정보를 다른 피어에게 전달해주는 역할을 하는게 Stun서버이다.

Turn Server

Stun서버로 P2P연결이 불가능한 경우가 있다. 네트워크 설정에서 특정 규칙이 적용되어 네트워크 통신이 제한된 NAT이나 방화벽 제한이 있을 경우가 이에 속한다. Stun서버의 단점을 보완하기 위해 사용하는게 바로 Turn서버이다. Turn서버는 직접 연결이 불가능한 장치들 사이에서 중계자 역할을 하며 양방향으로 전달되는 트래픽을 우회하여 전달한다. 즉, Stun서버는 직접 연결을 하게 해주지만 직접 연결이 어려울 경우 Turn을 통해 데이터를 중간에서 전달해준다.

ICE

ICE는 Stun과 Turn처럼 서버를 나타내는게 아니라 연결 방법을 의미한다. Stun과 Turn 등 다양한 연결 경로(candidate)중에서 가장 좋은 연결을 선택하는 방식으로 최적의 연결을 도와주는 도구이다. 최적의 연결이라는 것은 두 브라우저가 서로 통신하기 위해 사용할 수 있는 가장 빠르고 안정적인 네트워크 경로를 의미한다.

ICE Candidate는 브라우저가 연결을 시도할 수 있는 네트워크 주소들의 후보들을 의미한다. 이 후보들을 바탕으로 연결이 가능한지 확인한 후 가장 적합한 경로를 찾아 통신을 시작하게 한다. 후보 타입에는 Local Address, Server Reflexive Address, Relayed Address가 있다.

Local Address: 자신의 로컬 IP를 의미한다.
Server Reflexive Address: STUN서버를 통해 확인한 공인 IP를 의미한다.
Relayed Address: TURN서버를 경유한 중계용 IP를 의미한다.

NAT

공유기, 방화벽, 라우터 같은 네트워크 장비가 사용하는 기능으로 내부 사설 IP와 외부 공인 IP를 연결해주는 역할을 한다.

new RTCPeerConnection(): 피어 간의 연결을 설정하기 위한 객체를 생성하는데 사용하는 함수이다. 여기서 각 피어는 주로 로컬 피터와 원격 피어 간의 RTC연결을 의미한다. 또한 RTCPeerConnection()은 영상과 음성 미디어 데이터를 주고받을 수 있다.

const peerConnection = new RTCPeerConnection({
    {urls: [
        "stun:stun1.l.google.com:19302",
        "stun:stun2.l.google.com:19305"
    ]},
    {urls:["turn server url"], username: "fruit", credential: "mango"} 
})

SDP: 피어 간에 미디어 연결 설정에 필요한 정보인 코덱, IP, 포트, 암호화 등을 정의하는 문자열이다. WebRTC에서 서로 연결하려면 이 SDP 정보를 주고받아야 한다. offer, answer를 통해 각 peer가 sdp를 주고받는다.

WebRTC API에서 제공하는 createOffer()와 createAnswer()로 SDP를 생성하고 상대방에게 전달한다. 받는 상대방은 setRemoteDescription()으로 정보를 받는다. 피어간 정보를 교환할 때 브라우저 간 직접적으로 주고받을 수 없으며 WebSocket, socket.io와 같은 Signaling Server를 사용하여 별도의 경로를 통해 정보를 주고받아야 한다. 즉, WebSocket과 socket.io는 단순히 SDP 문자열을 전달하기 위한 용도로만 사용된다. 이 방법 외에 다른 방법을 사용하여 SDP 문자열만 전달하면 두 피어간의 RTC 연결이 가능하다.

2. WebRTC의 연결 과정

PeerA

PeerA가 P2P연결을 실행하기 위해 new RTCPeerConnection()로 객체를 생성한다.
PeerA가 createOffer()로 sdp를 생성한다.
setLocalDescription()으로 생성된 sdp를 자신의 peerConnection에 추가한다.
sdp데이터를 담아 시그널링 서버를 통해 PeerB에 데이터를 전달한다. 이때 전달되는 sdp type은 offer이다.
시그널링 서버에서 PeerA에서 온 데이터를 PeerB로 전달한다.

PeerB

PeerB는 new RTCPeerConnection()으로 객체를 생성 한 후, 전달받은 sdp데이터를 setRemoteDescription()로 자신의 peerConnection에 추가한다.
PeerB가 createAnswer()로 sdp를 생성한다.
setLocalDescription()으로 생성된 sdp를 자신의 peerConnection에 추가한다.
sdp데이터를 담아 시그널링 서버를 통해 PeerA에 데이터를 전달한다. 이때 전달되는 sdp type은 answer이다.
시그널링 서버에서 PeerB에서 온 데이터를 PeerA로 전달한다.

PeerA

PeerB로부터 전달받은 sdp데이터를 setRemoteDescription()로 자신의 peerConnection에 추가한다.

WebRTC는 위의 과정을 거쳐 연결이 이뤄진다. 복잡하긴 하지만 각각의 peer가 데이터를 주고받아 연결이 이뤄지게 된다. 연결을 하면서 시그널링 서버라는 것이 등장한다. 시그널링 서버는 각 Peer가 연결되기 전에 필요한 정보를 주고 받을 수 있게 해야 하는데 이를 가능하게 해주는 중계 서버를 의미한다. 시그널링 서버를 통해 sdp, ICE Candidate와 상대 PeerId 등을 교환한다. 주로 시그널링 서버로 소켓 서버를 사용한다.

3. WebRTC Connection

peerA가 peerB와 통신하는 1:1 통신이라는 것을 가정하고 코드를 확인해보자. peerA는 먼저 peerB에 offer를 보내고 peerB는 peerA에 answer를 보내는 역할이다.

3-1. socket connection

// Client
import { io } from "socket.io-client"

const peerListRef = useRef({}) // socket connection list
const dataChannelRef = useRef({}) // data channel list
const mediaRef = useRef({}) // media stream
const [userSocket, setUserSocket] = useState(false)
const [peerList, setPeerList] = useState({})
const [messageText, setMessageText] = useState("")

useEffect(() => {
		const myPeerId = 'client-' + crypto.randomUUID()
		console.log('My PeerId: ', myPeerId)
		let socket = io('<http://localhost:3000>', {
			query: {
				peerId: myPeerId
			},
			transports: ['websocket']
		}) // Connect socket.io
		console.log('Connect socket')
		setUserSocket(socket)

		return () => {
			  console.log('Socket disconnected!!')
        socket.disconnect()
        socket.removeAllListeners()
    }
	}, [])

useEffect(() ⇒ {…}, [] ) 부분에 소켓 연결 부분을 넣어 페이지에 접속하는 클라이언트들은 소켓 서버에 연결되게 한다.

3-2. connection server code

// Server
const peerList = {}
io.on('connection', (socket) => {
    console.log('Socket Connected: ', socket.id)

    const peerId = socket.handshake.query.peerId // connected client id
    console.log('My peerId: ', peerId)
    
    const socketKeyList = Array.from(io.sockets.sockets.keys())
    socketKeyList.map((key) => {
        const connectedSocket = io.sockets.sockets.get(key)
        if(connectedSocket) {
            const queryId = connectedSocket.handshake.query.peerId
            if(typeof peerList[queryId] === 'undefined') {
                peerList[queryId] = connectedSocket
            }
        }
    })
    console.log('socket list: ', socketKeyList)

    socket.emit('peer-connected', {
        peerList: Object.keys(peerList),
        peerId: peerId
    })
})

peerId: 클라이언트의 쿼리에 담겨 넘어온 peerId는 서버에 연결된 소켓을 구분하는 용도로 사용한다.
socketKeyList: 현재 소켓에 연결된 소켓들을 배열 형식으로 저장한다. socketKeyList 변수에 자신을 제외한 연결된 peer들을 저장하여 관리하기 위해 사용한다.
peer-connected: 연결이 되면 클라이언트에 연결된 peer목록과 자신의 peerId를 전달한다. 이 이벤트를 기점으로 RTC연결이 시작된다.

3-3. new RTCPeerConnection

// Client - new RTCPeerConnection
useEffect(() => {
	if(userSocket !== false) {
		const peerConnectionConfig = { 
			'iceServers': [
				{ urls: [ "stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19305" ] },
			]
		}; // RTC peer conneciton info

		userSocket.on('peer-connected', (data) => { // other peer connected
			const peerId = data.peerId // connected peer id
			const connectedPeerList = data.peerList // connected peer list

			console.log('Connected peerId: ', peerId)
			console.log('peerList: ', connectedPeerList)

			connectedPeerList.forEach((peer) => {
				if(typeof peerListRef.current[peer] === 'undefined') {
					if(peer !== peerId) { // Except my peer
						console.log('Start peer connection!')
						const peerConnection = new RTCPeerConnection(peerConnectionConfig)
						peerListRef.current[peer] = peerConnection
						setPeerList((prev) => ({
							...prev,
							[peer]: peerConnection
						}))
					} else {	
						console.log('current peer connection except')
					}
				}
			})

			console.log('peerListRef:', peerListRef.current)
		})
	}
}, [userSocket])

클라이언트가 소켓에 접속하면 서버에서 emit을 통해 peer-connected 이벤트가 클라이언트에 전달된다. 클라이언트는 연결된 peer목록과 자신의 peerId를 받아 RTC연결을 진행한다.

peer !== peerId: 자신의 peerId는 RTC연결을 진행하지 않기 위해 추가한다. 다른 peer와 연결을 진행해야 하기 때문에 예외처리를 추가한다.
new RTCPeerConnection(): 선언한 peerConnectionConfig데이터를 바탕으로 객체를 생성한다. peerConnectionConfig에 기술된 내용을 stun, turn중에서 연결을 시도한다.

3-4. createDataChannel

// Client - createDataChannel
const dataChannel = peerConnection.createDataChannel('dataChannel') // Create data channel
dataChannelRef.current[peer] = dataChannel
console.log('Create DataChannel: ', dataChannel)

dataChannel.onopen = () => { // Data channel open success
	console.log('dataChannel open!')
	dataChannel.send('hello')
}
dataChannel.onmessage =(event) => { // Received data channel message
	console.log('dataChannel onmessage: ', event)
}
dataChannel.onerror = (error) => {
	console.error('dataChannel error: ', error)
}
dataChannel.onclose = () => {
	console.log('dataChannel close')
}

WebRTC는 기본적으로 영상, 음성을 스트림을 전송하는데 사용하지만 문자열이나 일반 데이터도 P2P로 주고받을 수 있다. 이때 사용하는 기능이 바로 createDataChannel이다.

createDataChannel(): 데이터 채널을 생성하며 지정한 채널 명에 따라 데이터가 전달되는 채널이 달라진다. 데이터 채널이 A와 B가 있다면 A채널에 전달되는 데이터는 B채널에서 확인할 수 없다. 데이터 채널을 통해 전달되는 데이터를 확인하려면 서로 같은 데이터 채널에 연결되어야 하낟.
onopen(): 데이터 채널이 연결되어 메시지를 전달이 가능할 때 실행된다.
onmessage: 데이터 채널에 메시지가 전달되면 실행된다.
onerror: 채널에서 오류가 발생하면 실행된다.
onclose: 채널이 닫히면 실행된다.

3-5. onicecandidate

// Client - opicecandidate
peerConnection.onicecandidate = event => { // Get IceCandidate
	console.log('Start onicecandidate')
	if(event.candidate) {
		console.log('Candidate: ', event.candidate)
		userSocket.emit('ice-candidate', {
			toId: peer,
			fromId: peerId,
			candidate: event.candidate
		})
	}
}

onicecandidate는 WebRTC연결에 필수적인 단계이며 이를 통해 상대방에게 내 ICE Candidate를 전달한다. setLocalDescription()이 호출되면 ICE Candidate를 자동으로 수집을 시작한다. ICE Candidate가 발견되면 ICE Candidate를 시그널링 서버를 통해 상대방에게 전달한다. 상대방은 addIceCandidate()로 추가하여 연결 테스트를 진행한다. 전달된 ICE Candidate중에서 하나로 ICE 연결이 성공하면 P2P연결이 최종 성공하게 된다. 이 코드가 없으면 ip와 port를 교환하지 못해 P2P연결이 성립되지 않는다.

3-6. signaling offer

// Client - signaling offer
const startSiganlingOffer = async () => {
	try {
		const offer = await peerConnection.createOffer()
		await peerConnection.setLocalDescription(offer)
		console.log('Signal offer')
		userSocket.emit('signal', {
			toId: peer, // Receiver peer id
			fromId: peerId, // Sender peer id (me)
			sdp: offer // SDP offer data
		})
	} catch (error) {
		console.error('startSignalingOffer error: ', error)
	} finally {}
}
startSiganlingOffer()

sdp데이터를 주고받는 부분의 시작점이다.

createOffer(): WebRTC 연결을 시작하기 위해 필요한 sdp를 생성하는 함수
setLocalDescription(): 생성된 내 sdp데이터를 peerConnection에 등록하는 함수

이후 시그널링 서버를 통해 상대방에게 sdp데이터를 전달한다.

3-7. signaling server code

// Server - signaling
socket.on('signal', (data) => {
    const toId = data.toId // Receiver
    const fromId = data.fromId // Sender
    const sdp = data.sdp // SDP data: offer, answer

    console.log('signal type: ', sdp.type)

    peerList[toId].emit('signal', data)
})

socket.on('ice-candidate', (data) => {
    const toId = data.toId
    const fromId = data.fromId
    const candidate = data.candidate

    peerList[toId].emit('ice-candidate', data)
    console.log('ice candidate on!')
})

signal: signal이벤트는 클라이언트에서 넘어온 sdp 데이터를 상대방에게 전달한다.
ice-candidate: ice-candidate이벤트는 클라이언트에서 넘어온 ICE Candidate를 상대방에게 전달한다.

3-8. client ice-candidate event

// Client
userSocket.on('ice-candidate', (data) => {
	const fromId = data.fromId
	const candidateData = data.candidate
	console.log('candidate data: ', data)

	if(typeof peerListRef.current[fromId] != 'undefined') {
		peerListRef.current[fromId].addIceCandidate(candidateData)
		console.log('success icenCandidate')
	}
})

socket.emit을 통해 peerA에서 peerB에게 전달된 ice-candidate이벤트다. 전달된 ICE Candidate를 바탕으로 연결을 시도한다. 연결이 성공하면 WebRTC 연결을 할 port와 ip를 찾은 단계가 되고 sdp 시그널링도 마무리해야 WebRTC 연결이 마무리된다.

3-9. offer and answer

userSocket.on('signal', (data) => {
	console.log('Signal Event On', data)

	let toId = data.toId // Receiver (me)
	let fromId = data.fromId // Sender
	let sdp = data.sdp // SDP offer data

	if(sdp.type === 'offer') {
		console.log('SDP type: offer')

		const peerConnection = new RTCPeerConnection(peerConnectionConfig)
		peerListRef.current[fromId] = peerConnection
		setPeerList((prev) => ({
			...prev,
			[fromId]: peerConnection
		}))

		peerConnection.ondatachannel = (event) => { // Get data channel
			const channel = event.channel
			dataChannelRef.current[fromId] = channel
			console.log('ondatachannel', fromId)
			console.log('channel: ', channel)

			channel.onopen = () => { // Data channel open success
				console.log('data channel open!')
			}
			channel.onmessage = (event) => { // Receive message data
				console.log('Receive data channel onmessage: ', event)
			}
		}
		
		navigator.mediaDevices.getUserMedia({
			video: true,
			audio: true
		})
		.then((stream) => {
			console.log('answer getUserMedia: ', stream)
			stream.getTracks().forEach((track) => {
				peerConnection.addTrack(track, stream)
			})
		})
		.catch((error) => {
			console.error('getUserMedia error: ', error)
		})
		.finally(() => {})

		peerConnection.setRemoteDescription(new RTCSessionDescription(sdp))
		.then(() => {
			peerConnection.createAnswer()
			.then((answer) => {
				peerConnection.setLocalDescription(answer)
				.then(() => {
					console.log('Signal answer')
					
					userSocket.emit('signal', {
						toId: data.fromId, // Sender peer id (me)
						fromId: data.toId, // Receiver peer id
						sdp: answer
					}) // Reverse toId, fromId
				})
				.catch((error) => {
					console.error('setLocaleDescription error: ', error)
				})
				.finally(() => {}) // End setLocaleDescription
			})
			.catch((error) => {
				console.error('createAnswer error: ', error)
			})
			.finally(() => {}) // End createAnswer
		})
		.catch((error) => {
			console.error('setRemoteDescription error: ', error)
		})
		.finally(() => {}) // End setRemoteDescription

		peerConnection.oniceconnectionstatechange = () => {
			console.log(peerConnection.iceConnectionState, 'connected state')
		}

		peerConnection.ontrack = (event) => {
			console.log('Offer ontrack: ', event)
			const [remoteStream] = event.streams
			const videoElement = mediaRef.current[fromId]

			if(videoElement) {
				videoElement.srcObject = remoteStream
			} else {
				console.warn(`video element not found for peer ${fromId}`)
			}
		}

	} else if(sdp.type === 'answer') {
		console.log('SDP type: answer')

		peerListRef.current[fromId].setRemoteDescription(new RTCSessionDescription(sdp))
		.then(() => {
			console.log('RTC Connection Success')

			peerListRef.current[fromId].ontrack = (event) => {
				console.log('Answer ontrack: ', event)
				const [remoteStream] = event.streams
				const videoElement = mediaRef.current[fromId]

				if(videoElement) {
					videoElement.srcObject = remoteStream
				} else {
					console.warn(`video element not found for peer ${fromId}`)
				}
			}
		})
		.catch((error) => {
			console.error('setRemoteDescription error: ', error)
		})
		.finally(() => {})
		
	}
})

offer는 peerB에서 실행되고 answer는 peerA에서 실행된다.

setRemoteDescription: peerA가 보낸 sdp offer는 peerB에 등록한다.
createAnswer: 등록된 offer에 대한 answer를 생성한다. 이 answer는 시그널링 서버를 통해 peerA에 전달된다.
setLocalDescription: peerB가 생성한 answer를 peerB의 peerConnection에 등록한다. 이를 통해 ICE Candidate를 수집하여 네트워크 연결을 진행할 수 있다.

또한 peerA가 데이터 채널을 생성했기 대문에 해당 채널에 접근하려면 ondatachannel이 필요하다.

ondatachannel: 상대방이 만든 데이터 채널을 수신할 때 호출되는 이벤트 핸들러다. 이를 통해 상대가 생성한 데이터 채널을 받을 수 있으며 이를 통해 메시지를 수신하거나 전달할 수 있다.

offer를 받은 후 signal이벤트를 호출하여 시그널링 서버를 거쳐 다시 peerA에게 sdp answer를 보내게 된다. answer부분을 실행하는 peerA가 setRemoteDescription로 peerB가 보낸 sdp answer를 peerA에 정상적으로 등록하게 되면 두 peer는 WebRTC연결에 성공하게 된다.

미디어 스트림도 주고받으려면 추가적으로 navigator.mediaDevices.getUserMedia, addtrack과 ontrack을 통해 미디어 데이터도 주고받아야 한다.

3-10. media stream

// Client - addTrack offer
navigator.mediaDevices.getUserMedia({
	video: true,
	audio: true
})
.then((stream) => {
	console.log('answer getUserMedia: ', stream)
	stream.getTracks().forEach((track) => {
		peerConnection.addTrack(track, stream)
	})
})
.catch((error) => {
	console.error('getUserMedia error: ', error)
})
.finally(() => {})

addTrack: navigator.mediaDevices.getUserMedia를 통해 얻은 오디오, 비디오 트랙을 peerConnection에 추가하여 상대방에게 전송할 수 있게 하는 함수다.

// Client - ontrack answer
peerListRef.current[fromId].ontrack = (event) => {
	console.log('Answer ontrack: ', event)
	const [remoteStream] = event.streams
	const videoElement = mediaRef.current[fromId]

	if(videoElement) {
		videoElement.srcObject = remoteStream
	} else {
		console.warn(`video element not found for peer ${fromId}`)
	}
}

ontrack: 상대방이 addTrack()으로 보낸 트랙을 수신하면 ontrack 이벤트가 발생한다. useRef로 선언한 mediaRef에 스트림 데이터를 담아 video태그에서 상대방의 실시간 영상을 확인할 수 있다.

4. 전체 코드

// Server
const http = require('http');
const { Server } = require('socket.io');
const port = 3000
const server = http.createServer();
const io = new Server(server, {
    cors: {
        origin: ['<http://localhost:4000>', '<http://localhost:3001>'],
        methods: ['GET', 'POST']
    }
});
const peerList = {}

io.on('connection', (socket) => {
    console.log('Socket Connected: ', socket.id)

    const peerId = socket.handshake.query.peerId // connected client id
    console.log('My peerId: ', peerId)
    
    const socketKeyList = Array.from(io.sockets.sockets.keys())
    socketKeyList.map((key) => {
        const connectedSocket = io.sockets.sockets.get(key)
        if(connectedSocket) {
            const queryId = connectedSocket.handshake.query.peerId
            if(typeof peerList[queryId] === 'undefined') {
                peerList[queryId] = connectedSocket
            }
        }
    })
    console.log('socket list: ', socketKeyList)

    socket.emit('peer-connected', {
        peerList: Object.keys(peerList),
        peerId: peerId
    })
    
    socket.on('signal', (data) => {
        const toId = data.toId // Receiver
        const fromId = data.fromId // Sender
        const sdp = data.sdp // SDP data: offer, answer

        console.log('signal type: ', sdp.type)

        peerList[toId].emit('signal', data)
    })

    socket.on('ice-candidate', (data) => {
        const toId = data.toId
        const fromId = data.fromId
        const candidate = data.candidate

        peerList[toId].emit('ice-candidate', data)
        console.log('ice candidate on!')
    })

    socket.on('disconnect', (reason) => {
        console.log('disconnect', reason)
        delete peerList[peerId]
        socket.broadcast.emit('peer-disconnected', peerId)
    })
})

server.listen(port, () => {
    console.log('Server listening on port ' + port);
});

// Client
import { useEffect, useRef, useState } from 'react';
import { io } from "socket.io-client"

function App() {

	const peerListRef = useRef({}) // socket connection list
	const dataChannelRef = useRef({}) // data channel list
	const mediaRef = useRef({}) // media stream
	const [userSocket, setUserSocket] = useState(false)
	const [peerList, setPeerList] = useState({})
	const [messageText, setMessageText] = useState("")

	useEffect(() => {
		const myPeerId = 'peer-' + crypto.randomUUID()
		console.log('My PeerId: ', myPeerId)
		let socket = io('<http://localhost:3000>', {
			query: {
				peerId: myPeerId
			},
			transports: ['websocket']
		}) // Connect socket.io
		console.log('Connect socket')
		setUserSocket(socket)

		return () => {
			console.log('Socket disconnected!!')
			peerListRef.current = {}
			dataChannelRef.current = {}
			mediaRef.current = {}
			setPeerList({})
            socket.disconnect()
            socket.removeAllListeners()
        }
	}, [])

	useEffect(() => {
		if(userSocket !== false) {
			const peerConnectionConfig = { 
				'iceServers': [
					{ urls: [ "stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19305" ] },
				]
			}; // RTC peer conneciton info

			userSocket.on('peer-connected', (data) => { // other peer connected
				const peerId = data.peerId // connected peer id
				const connectedPeerList = data.peerList // connected peer list

				console.log('Connected peerId: ', peerId)
				console.log('peerList: ', connectedPeerList)

				connectedPeerList.forEach((peer) => {
					if(typeof peerListRef.current[peer] === 'undefined') {
						if(peer !== peerId) { // Except my peer
							console.log('Start peer connection!')
							const peerConnection = new RTCPeerConnection(peerConnectionConfig)
							peerListRef.current[peer] = peerConnection
							setPeerList((prev) => ({
								...prev,
								[peer]: peerConnection
							}))

							const dataChannel = peerConnection.createDataChannel('dataChannel') // Create data channel
							dataChannelRef.current[peer] = dataChannel
							console.log('Create DataChannel: ', dataChannel)

							dataChannel.onopen = () => { // Data channel open success
								console.log('dataChannel open!')
								dataChannel.send('hello')
							}
							dataChannel.onmessage =(event) => { // Received data channel message
								console.log('dataChannel onmessage: ', event)
							}
							dataChannel.onerror = (error) => {
								console.error('dataChannel error: ', error)
							}
							dataChannel.onclose = () => {
								console.log('dataChannel close')
							}

							peerConnection.onicecandidate = event => { // Get IceCandidate
								console.log('Start onicecandidate')
								if(event.candidate) {
									console.log('Candidate: ', event.candidate)
									userSocket.emit('ice-candidate', {
										toId: peer,
										fromId: peerId,
										candidate: event.candidate
									})
								}
							}

							const startSiganlingOffer = async () => {
								try {
									const offer = await peerConnection.createOffer()
									await peerConnection.setLocalDescription(offer)
									console.log('Signal offer')
									userSocket.emit('signal', {
										toId: peer, // Receiver peer id
										fromId: peerId, // Sender peer id (me)
										sdp: offer // SDP offer data
									})
								} catch (error) {
									console.error('startSignalingOffer error: ', error)
								} finally {}
							}

							navigator.mediaDevices.getUserMedia({
								video: true,
								audio: true
							})
							.then((stream) => {
								console.log('offer getUserMedia: ', stream)
								// mediaRef.current.srcObject = stream
								stream.getTracks().forEach((track) => {
									peerConnection.addTrack(track, stream)
								})

								startSiganlingOffer()
							})
							.catch((error) => {
								console.error('error: ', error)
								startSiganlingOffer()
							})
							.finally(() => {})

							peerConnection.oniceconnectionstatechange = () => {
								console.log(peerConnection.iceConnectionState, 'connected state')
							}

							console.log('user media device: ', mediaRef)

						} else {	
							console.log('current peer connection except')
						}
					}
				})

				console.log('peerListRef:', peerListRef.current)
			})

			/* Get signal data */
			userSocket.on('signal', (data) => {
				console.log('Signal Event On', data)

				let toId = data.toId // Receiver (me)
				let fromId = data.fromId // Sender
				let sdp = data.sdp // SDP offer data

				if(sdp.type === 'offer') {
					console.log('SDP type: offer')

					const peerConnection = new RTCPeerConnection(peerConnectionConfig)
					peerListRef.current[fromId] = peerConnection
					setPeerList((prev) => ({
						...prev,
						[fromId]: peerConnection
					}))

					peerConnection.ondatachannel = (event) => { // Get data channel
						const channel = event.channel
						dataChannelRef.current[fromId] = channel
						console.log('ondatachannel', fromId)
						console.log('channel: ', channel)

						channel.onopen = () => { // Data channel open success
							console.log('data channel open!')
						}
						channel.onmessage = (event) => { // Receive message data
							console.log('Receive data channel onmessage: ', event)
						}
					}
					
					navigator.mediaDevices.getUserMedia({
						video: true,
						audio: true
					})
					.then((stream) => {
						console.log('answer getUserMedia: ', stream)
						stream.getTracks().forEach((track) => {
							peerConnection.addTrack(track, stream)
						})
					})
					.catch((error) => {
						console.error('getUserMedia error: ', error)
					})
					.finally(() => {})

					peerConnection.setRemoteDescription(new RTCSessionDescription(sdp))
					.then(() => {
						peerConnection.createAnswer()
						.then((answer) => {
							peerConnection.setLocalDescription(answer)
							.then(() => {
								console.log('Signal answer')
								
								userSocket.emit('signal', {
									toId: data.fromId, // Sender peer id (me)
									fromId: data.toId, // Receiver peer id
									sdp: answer
								}) // Reverse toId, fromId
							})
							.catch((error) => {
								console.error('setLocaleDescription error: ', error)
							})
							.finally(() => {}) // End setLocaleDescription
						})
						.catch((error) => {
							console.error('createAnswer error: ', error)
						})
						.finally(() => {}) // End createAnswer
					})
					.catch((error) => {
						console.error('setRemoteDescription error: ', error)
					})
					.finally(() => {}) // End setRemoteDescription

					peerConnection.oniceconnectionstatechange = () => {
						console.log(peerConnection.iceConnectionState, 'connected state')
					}

					peerConnection.ontrack = (event) => {
						console.log('Offer ontrack: ', event)
						const [remoteStream] = event.streams
						const videoElement = mediaRef.current[fromId]

						if(videoElement) {
							videoElement.srcObject = remoteStream
						} else {
							console.warn(`video element not found for peer ${fromId}`)
						}
					}

				} else if(sdp.type === 'answer') {
					console.log('SDP type: answer')

					peerListRef.current[fromId].setRemoteDescription(new RTCSessionDescription(sdp))
					.then(() => {
						console.log('RTC Connection Success')

						peerListRef.current[fromId].ontrack = (event) => {
							console.log('Answer ontrack: ', event)
							const [remoteStream] = event.streams
							const videoElement = mediaRef.current[fromId]

							if(videoElement) {
								videoElement.srcObject = remoteStream
							} else {
								console.warn(`video element not found for peer ${fromId}`)
							}
						}
					})
					.catch((error) => {
						console.error('setRemoteDescription error: ', error)
					})
					.finally(() => {})
					
				}
			})

			userSocket.on('ice-candidate', (data) => {
				const fromId = data.fromId
				const candidateData = data.candidate
				console.log('candidate data: ', data)

				if(typeof peerListRef.current[fromId] != 'undefined') {
					peerListRef.current[fromId].addIceCandidate(candidateData)
					console.log('success icenCandidate')
				}
			})

			userSocket.on('peer-disconnected', (disconnectedClientId) => { // CleanUp disconnected client info
				console.log('peer-disconnected', disconnectedClientId)
				if(typeof peerListRef.current[disconnectedClientId] != 'undefined') {
					peerListRef.current[disconnectedClientId].close()
				}
				delete peerListRef.current[disconnectedClientId]
				delete dataChannelRef.current[disconnectedClientId]
				setPeerList((prev) => {
					const updated = { ...prev }
					delete updated[disconnectedClientId]
					return updated
				})
			})

		}
	}, [userSocket])

	const changeMessageText = (e) => {
		setMessageText(e.target.value)
	}

	const sendMessage = (peer) => {
		console.log('send success')
		console.log('dataChannelRef: ', dataChannelRef)
		if(typeof dataChannelRef.current[peer] != 'undefined') {
			dataChannelRef.current[peer].send(messageText)
		}
	}

	return (
		<>
			{ Object.keys(peerList).map((peer) => {
				return (
					<div key={ peer }>
						<video
							ref={el => {
								if (el) mediaRef.current[peer] = el
							}}
							autoPlay
							playsInline
							style={{ width: '300px', border: '1px solid black' }}
						/>
						<input type='text' onChange={(e) => changeMessageText(e)} value={ messageText } />
						<button onClick={() => sendMessage(peer)}>send to { peer }</button>
					</div>
				)
				
			}) }
		</>
	);
}

export default App;

Client의 렌더링 부분을 보면 video, input태그가 있다. 상대방이 연결되면 해당 태그를 통해 상대방의 실시간 영상을 확인할 수 있고 상대방에게 메시지를 보낼 수 있다. 상대방이 비디오나 오디오에 연결되지 않아도 WebRTC연결을 성공하게 구조를 만들었고 데이터 채널을 통해 메시지 수신, 전달은 가능하다.

참고 사이트:

https://getstream.io/resources/projects/webrtc/basics/rtcpeerconnection/

RTCPeerConnection WebRTC Tutorial

Did you know? All Video & Audio API plans include a $100 free usage credit each month so you can build and test risk-free. View Plans ->

getstream.io

https://getstream.io/resources/projects/webrtc/advanced/stun-turn/

WebRTC Stun vs Turn Servers

Did you know? All Video & Audio API plans include a $100 free usage credit each month so you can build and test risk-free. View Plans ->

getstream.io

https://github.com/FlashBack102/webrtc-boilerplate

GitHub - FlashBack102/webrtc-boilerplate

Contribute to FlashBack102/webrtc-boilerplate development by creating an account on GitHub.

github.com

Javascript - navigator 객체로 미디어 제어하기

Flashback — Sat, 31 May 2025 16:28:26 +0900

1. enumerateDevices()

enumerateDevices()는 연결된 장치 목록을 배열 형식으로 반환한다.

navigator.mediaDevices.enumerateDevices().then((devices) => {
    console.log('devices: ', devices)
})

배열 요소에는 deviceId, groupId, kind, label이 포함된다.

deviceId: 장치 하나를 고유하게 식별하는 id다. deviceId를 통해 특정 장치를 선택하여 getUserMedia() 메서드를 사용할 수 있다.
groupId: 카메라와 마이크가 함께 내장되어 있는 모니터와 같은 물리적 장치를 그룹으로 묶는 id다. 단순히 같은 그룹에 속해있다는 것을 알려주는 값이다.
kind: 해당 장치가 어떤 장치인지 알려준다. audioinput(마이크), videoinput(카메라), audiooutput(스피커)로 구분된다.
label: 장치의 이름을 나타낸다. MacBook Pro 스피커 (Built-in), MacBook Pro 마이크 (Built-in)처럼 해당 장치의 이름으로 표시된다.

1-1. getUserMedia()

getUserMedia()는 사용자의 audio나 video 장치에 권한을 요청하여 해당 장치에 접근한 후 미디어 스트림 객체를 반환받아 사용할 때 사용하는 메서드다. 반환된 스트림을 녹화, 분석, 전송 등을 할 때 사용한다.

navigator.mediaDevices.getUserMedia({
    video: {
        deviceId: 'e62af3b11b6f3249ae286f271b4e2e5536c771d75bd145b0ae4c540d049508a2',
        width: 640,
        height: 480,
        frameRate: 30,
    },
    audio: {
        deviceId: '539d4ee3bc49ae530097e0f7e02406f4243c01be93b9082e0c986c17a82d9672',
        sampleRate: 44100,
        sampleSize: 16,
    }
})

1-2. video

video 객체 안에 사용할 video장치의 제약 조건을 지정한다.

deviceId: 권한을 요청할 deviceId를 지정한다.
width: width와 height는 영상 해상도를 지정한다. video의 가로 길이를 지정한다.
height: video의 세로 길이를 지정한다.
frameRate: 영상에서 1초에 몇 개의 프레임을 보여줄 지 지정한다.

1-3. audio

audio 객체 안에 사용할 audio장치의 제약 조건을 지정한다.

deviceId: 권한을 요청할 deviceId를 지정한다.
sampleRate: 1초에 몇 번 샘플링하는지 비율을 나타낸다. Hz단위로 보통 44100으로 지정한다.
sampleSize: 각 샘플을 몇 비트로 표현할지 지정한다. bit단위로 보통 16으로 지정한다.

2. 기본값으로 설정

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
})

true로 설정하면 기본값으로 지정된 장치를 바탕으로 MediaStream을 생성한다. 특정 장치로 설정하려면 위의 예시처럼 deviceId로 제약 조건을 지정해야 한다.

참고 사이트:

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

MediaDevices: getUserMedia() method - Web APIs | MDN

The getUserMedia() method of the MediaDevices interface prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.

developer.mozilla.org

Javascript - btoa()와 atob()로 문자열을 Base64로 인코딩, 디코딩하기

Flashback — Sat, 31 May 2025 15:31:37 +0900

btoa()와 atob()는 문자열을 각각 Base64로 인코딩하거나 디코딩할 때 사용하는 javascript의 내장 함수다.

btoa(): 문자열을 Base64 인코딩된 문자열로 변환하는 함수이다.

let data = {
    name: 'mango',
    price: 1000
}
data = JSON.stringify(data) // object to string

const encodedData = btoa(data) // encode data
console.log('encodedData: ', encodedData)

// encodedData:  eyJuYW1lIjoibWFuZ28iLCJwcmljZSI6MTAwMH0=

btoa()로 Base64 형태로 인코딩하려면 먼저 데이터를 문자열로 변경해야 한다. JSON.stringify로 object타입의 변수를 문자열로 변경한다. 인코딩 후 데이터를 출력하면 문자열이 위와같이 뭉개져서 나오는 것을 확인할 수 있다.

atob(): btoa()와 반대로 Base64로 인코딩된 문자열을 디코딩하여 원래의 문자열로 표시하는 함수이다.

const decodedData = atob(encodedData) // decode data
console.log('decodedData: ', decodedData)
console.log('parsed decodedData: ', JSON.parse(decodedData))

// decodedData:  {"name":"mango","price":1000}
// parsed decodedData:  { name: 'mango', price: 1000 }

인코딩된 문자열을 atob()로 디코딩하면 원래의 문자열로 변경된다.

참고 사이트:

https://stackoverflow.com/questions/33854103/why-were-javascript-atob-and-btoa-named-like-that

https://stackoverflow.com/questions/3538021/why-do-we-use-base64

https://www.freecodecamp.org/news/what-is-base64-encoding/

What is base64 Encoding and Why is it Necessary?

By Sergei Bachinin In this article, we'll thoroughly explore base64 encoding. You'll learn how it came into being and why it's still so prevalent in modern systems. Here's what we'll cover: What is base64? Why use base64? When to use base64 A Case o...

www.freecodecamp.org

AWS - AWS Summit Seoul 2025 방문 후기

Flashback — Fri, 16 May 2025 11:09:11 +0900

1. 기조 연설

기조 연설에서 생성형 AI와 해당 사업의 현대화를 주력으로 삼고 있다는 현재 AWS의 전략에 대해 간단히 설명하고 카카오페이, 현대카드와 트레블랩스 등 생성형 AI 서비스를 도입하여 사용하고 있는 기업들에 대해 간략한 설명을 진행하였다. 또한 AWS Nova를 소개했는데 차세대 생성형 AI 파운데이션 모델로 검색 증강 생성, 프롬프트 엔지니어링, 미세 조정, 사전 학습 등의 기능을 포함하고 있다. AWS Bedrock Guardrails도 언급하여 단어 필터 토픽 필터 유해 콘텐츠와 개인정보 보호 등의 기능을 통하여 LLM 이용자의 데이터를 보호하는 기능을 제공한다는 등의 LLM보완점을 추가로 언급하였다.

2. 강연

2-1. 지구상의 연결의 한계를 뛰어넘기 위한 우주에서의 혁신 - Amazon Project Kuiper

현재 지구에는 아직 인터넷 접근성조차 확보하지 못한 채 살아가고 있는 수십억의 인구가 존재한다. 지리적, 인프라적 한계로 인해 발생하는 문제인데 이러한 한계를 극복하고 모든 인류가 디지털 문명의 혜택을 누릴 수 있도록 하기 위한 프로젝트가 바로 Amazon Project Kuiper다. LEO 기반 통신망을 통해 기존 정지궤도 위성 대비 지연시간이 낮고 속도가 빠르며 AWS 인프라와 통합하여 데이터 통합과 원활한 데이터 흐름을 보장한다. 향후 10년 이내에 지구 저궤도에 3236개의 위성을 배치하여 전 세계에 광대역 인터넷 서비스를 제공하겠다는 계획을 가지고 있다. 이 프로젝트를 통해 개발도상국의 디지털 전환 촉진과 일관된 통신 품질 제공과 교육, 의료, 공공 서비스 접근성 확대 등의 이점을 기대할 수 있다.

2-2. 데이터로 날개를 달다. 대한항공의 여객분석 플랫폼 2.0과 전사 BI Amazon QuickSight 전환 여정

여객 분석 플랫폼 2.0으로 개편을 진행할 대 높은 안정성을 위한 원천 시스템과 의존성을 분리하여 서비스 무중단 운영 설계를 목표로 하였다. 또한 낮은 복잡도를 위한 파이프라인 간소화와 간편한 유지보수, 높은 유연성을 위해 Apache Iceberg를 도입으로 중복 데이터를 제거하여 비용 절감을 핵심 목표로 삼았다. 이를 통해 의존성 감소, DataLake 환경 개선, 성능 향상, 데이터 처리 유연성 향상, 유지보수 편의성 증가와 전체적인 비용 절감의 효과를 얻게 되었다. 1.0에서 2.0으로 성공적으로 개편을 진행한 이후 향후 개선 방안으로 아시아나와 통합을 위해 데이터 라이프 사이클을 관리, CI/CD 관리와 데이터 모델 최적화 등을 통해 현 2.0플랫폼을 더욱 개선해 나가려 하고 있다.

2-3. LLM Observability: LLM의 거짓말을 잡아내는 법

LLM에는 아직 환각 현상(Hallucination)이라 불리는 허위 정보 생성 문제가 남아있다. 이는 사실과 다른 내용을 매우 설득력있게 출력한다. datadog에서는 이러한 환각 증상을 최소화하고 모델별 성능 비교, 최적화와 프롬프트 개발과 개선을 진행할 수 있는 하나의 플랫폼을 제공한다.

Experiments라는 플랫폼에서는 여러 LLM모델 간 성능 비교 및 최적화가 가능하고 Playground는 프롬프트 디버깅과 성능 분석을 할 수 있다. 즉 이 플랫폼을 통해 메시지를 바꾸거나 모델 등의 설정을 변경하여 여러 과정을 실험할 수 있다.

즉, datdog llm observability를 통해 LLM을 모니터링, 트러블 슈팅 등을 하나의 플랫폼에서 관리할 수 있다.

2-4. 개발을 덜 하고 가치는 더 크게: 타이드스퀘어의 NDC Aggregator SaaS여정

타이드스퀘어는 AWS 클라우드 인프라를 활요해 NDC라는 항공사와 직접 연동해 항공권과 부가 서비스를 단일 인터페이스에서 제공할 수 있는 항공 유통 표준을 기반으로 Aggregator SaaS 솔루션을 개발하였다. 개발을 하면서 개발 기간을 대략 6주가량 단축시켰는데 upstream kanban을 통해 일하는 방식과 Design Thinking면에 도움이 되었다고 한다.

2-5. Amazon Bedrock을 이용한 이미지 검색 서비스의 혁신

게티이미지코리아는 수억 개의 사진과 동영상을 제공하는 글로벌 콘텐츠 기업이다. 이처럼 방대한 양의 이미지에서 사용자가 원하는 이미지를 찾아내어 보여주는 것에는 한계가 있다. 기존에는 키워드 위주의 검색을 통해 이미지를 찾아냈지만 문맥 이해 부족과 반복적인 검색이 필요하다는 단점이 존재하였다. 이를 극복하기 위해 Amazon Bedrock과 OpenSearch기반의 자연어 검색 기능을 도입하여 키워드 중심 검색에서 자연어 언어 기반의 의미 검색으로 전환을 이루어냈다.

Amazon Bedrock은 생성형 AI API를 통해 입력된 자연어 문장을 벡터 임베딩으로 전환하고 OpenSearch와 벡터 DB를 통해 사전 임베딩된 이미지 메타데이터와 벡터 유사도 검색을 수행하여 사용자가 자연스럽게 질의를 하여 검색 결과를 도출해 내도록 전환되었다. 이를 통해 사용자의 만족도가 향상되었고 탐색 효율이 증가하여 검색 자연어 검색 도입이 성공적으로 이루어졌다.

2-6. 계산과학의 혁명적 전환점: 양자 컴퓨팅 기술과 Amazon Braket이 여는 미래

양자 컴퓨팅은 고전적인 컴퓨팅 방식의 한계를 뛰어넘는 차세대 기술로 주목받고 있다. 하지만 아직은 완전히 상용화되기까지 넘어야 할 기술적, 경제적 장벽이 존재한다. 특히 개발은 극도로 복잡하고 고비용이 수반되며, 수천만 달러에 이르는 초기 투자비용이 필요하다. 현재 대부분의 연구는 논문과 특허에 기반하고 있으며, 실제 활용 사례는 아직 초기 단계에 머물러 있습니다. 하지만 이 기술이 계산 과학 및 산업 전반에 영향을 끼칠 것으로 기대되고 있기 때문에 가능성은 열려있다.

AWS에서도 이러한 양자 컴퓨팅을 할 수 있게 하는 서비스를 제공하고 있다. 바로 AWS Bracket인데 사용자가 고전적인 컴퓨팅 자원과 양자 하드웨어를 하나의 통합된 클라우드 환경에서 접근하고 실험할 수 있게 하는 플랫폼으로 AWS Console에서 쉽게 사용할 수 있다.

Advanced Solutions Labs을 통해 고객의 유즈케이스를 확인하고 고객과 함께 공동 연구 프로그램을 진행할 수 있는 실행조직을 적극 운영하고 있다. 이를 통해 기업 고객은 자신들의 문제를 AWS 전문가들과 알고리즘에 대한 내용을 개선하거나 맞춤형 양자 워크플로우를 설계하거나 실험을 하는 등의 작업을 할 수 있다.

Windows Powershell - Supplying an input file via '@' gives an error: The splatting operator '@' cannot be used to reference variables in an expression

Flashback — Sun, 4 May 2025 17:03:38 +0900

윈도우 파워쉘에서 yarn add @socket.io/redis-adapter를 할 때 이와 같은 에러가 발생했다. 파워쉘이 @ 기호를 배열, 해시테이블, splatting 연산자 용도로 인식했기 때문에 발생하는 에러로 @ 기호가 위치하는 npm 모듈명을 ""로 감싸주면 해결된다.

yarn add "@socket.io/redis-adapter"

참고 사이트:

https://stackoverflow.com/questions/59805670/supplying-an-input-file-via-gives-an-error-the-splatting-operator-canno