WebRTC 기본 흐름 요약

 # **주어**

[🖥️] **서버** = Raspberry Pi 또는 GStreamer 실행 장비

[🌐] **브라우저** = video.html 실행 중인 웹 클라이언트

[🔗] **시그널링 서버** = WebSocket 통신 중개자 (ex. `video.js`)

---

### ➡️ 시그널링 중심 1~6

(1) [🌐] 브라우저가 [🔗] 시그널링 서버에 **WebSocket 연결**을 요청함.

[🔗] 시그널링 서버는 **Offer, Answer, ICE 후보 정보를 주고받기 위한 중계 경로**를 준비함.

(2) [🌐] 브라우저가 **RTCPeerConnection 객체**를 생성함.

이 객체는 향후 WebRTC 연결 전반을 관리할 주체가 됨.

(3) [🌐] 브라우저가 **비디오 트랙 또는 데이터 채널**을 RTCPeerConnection에 추가함.

어떤 콘텐츠를 주고받을지 미리 정의하는 단계임.

(4) [🌐] 브라우저가 **Offer 객체**를 생성함.

사용할 코덱, 미디어 트랙 등의 연결 제안 정보가 포함됨.

(5) [🌐] 브라우저가 **생성한 Offer**를 **자기 자신(LocalDescription)**에 적용함.

이 과정을 setLocalDescription이라고 부름.

(6) [🌐] 브라우저가 **Offer**를 **시그널링 채널(WebSocket)**을 통해 상대방에게 전송함.

상대방이 이 Offer를 받고 연결 절차를 이어가게 됨.

---

### ➡️ WebRTC 중심 7~13

(7) [🖥️] 서버가 [🔗] 시그널링 서버로부터 **Offer**를 수신하고, **RTCPeerConnection 객체**를 생성함.

WebRTC 연결에 응답할 준비를 함.

(8) [🖥️] 서버가 **비디오 트랙(GStreamer 출력)**을 **RTCPeerConnection에 추가**함.

[🌐] 브라우저에게 전송할 미디어 스트림을 설정함.

(9) [🖥️] 서버가 **Answer 객체**를 생성하고, **자기 자신(LocalDescription)**에 적용함.

이후 Answer를 [🔗] 시그널링 서버를 통해 [🌐] 브라우저에게 전송함.

(10) [🌐] 브라우저가 [🔗] 시그널링 서버로부터 **Answer**를 수신하고, **RemoteDescription**에 적용함.

[🖥️] 서버의 연결 조건을 수락함.

(11) [🌐] 브라우저와 [🖥️] 서버가 각각 **ICE 후보(Candidate)**를 생성함.

서로 연결 가능한 네트워크 주소 목록을 준비함.

(12) [🌐] 브라우저와 [🖥️] 서버가 생성한 **ICE 후보 정보**를 [🔗] 시그널링 서버를 통해 **서로 교환**함.

(13) [🖥️] 서버가 **비디오 스트림**을 [🌐] 브라우저에게 전송함.

[🌐] 브라우저는 `<video>` 요소를 통해 **실시간 영상**을 수신하고 재생함.

# 다이어그램

[🌐 브라우저]

│

│ (1) WebSocket 연결 요청

│     • Offer, Answer, ICE 정보 중계 준비

│

│ (2) RTCPeerConnection 객체 생성

│ (3) 비디오 트랙/데이터 채널 추가

│ (4) Offer 생성

│ (5) Offer를 LocalDescription에 적용

│ (6) Offer 전송 → [🔗 시그널링 서버]

│

▼

[🔗 시그널링 서버]

│

│ (Offer, Answer, ICE 후보 정보 중계)

│

▼

[🖥️ 서버]

│

│ (7) Offer 수신 후 RTCPeerConnection 객체 생성

│ (8) 비디오 트랙(GStreamer 출력) 추가

│ (9) Answer 생성 후 LocalDescription에 적용

│     → Answer 전송 → [🔗 시그널링 서버]

│

▼

[🔗 시그널링 서버]

│

│ (Answer와 ICE 후보 정보 중계)

│

▼

[🌐 브라우저]

│

│ (10) Answer 수신 후 RemoteDescription 적용

│ (11) ICE 후보 생성 및 교환

│ (12) ICE 연결 수립 완료

│

▼

[🖥️ 서버] ──────→ [🌐 브라우저]

(13) 비디오 스트림 전송

• 브라우저는 <video> 요소로 실시간 영상 수신 및 재생

# **핵심 요약**

- *[🌐 브라우저]**는 먼저 시그널링 서버에 연결해 Offer를 생성 및 전송하고, Answer와 ICE 후보를 받아 연결을 완성함.

- *[🖥️ 서버]**는 Offer를 수신해 RTCPeerConnection을 구성하고, 비디오 트랙(예: GStreamer 출력)을 추가한 후 Answer를 생성해 응답함.

- *[🔗 시그널링 서버]**는 단순히 Offer, Answer, ICE 후보 정보를 중계하는 역할을 함.

- 최종적으로 서버는 브라우저로 비디오 스트림을 전송하고, 브라우저는 이를 실시간으로 재생함.

Cursor Project Rules 업데이트

Project Rules 개요

• 기존에는 프로젝트당 하나의 cursorrules 파일만 생성 가능했음.
• 이번 업데이트로 여러 개의 Project Rules 파일을 생성할 수 있도록 개선됨.
• 이제 프로젝트 내 특정 작업에 맞춰 별도의 규칙을 적용 가능.

Project Rules 설정 방법

• Cursor 설정 메뉴에서 Project Rules 항목 추가됨.
• Add new rule 버튼을 클릭하여 새로운 규칙 생성 가능.
• 규칙 추가 시 .cursor/rules 디렉터리에 저장됨.

Project Rules의 주요 기능

• 각 규칙에 대해 Description(설명)과 파일 경로 규칙을 설정할 수 있음.
• AI가 작업 수행 전 해당 규칙을 자동으로 탐색하여 적용함.
• 필요한 경우 관련된 규칙만 선택적으로 컨텍스트에 추가됨.

Project Rules 적용 방식

• 예를 들어, "로그인 기능 추가" 요청 시 auth-rule 규칙이 자동으로 적용됨.
• 공용 버튼 추가 요청 시 ShadCN 규칙을 찾아 적용.
• 규칙이 많아져도 AI가 자동으로 적절한 규칙을 선택하여 활용.

컴포저 히스토리 요약 기능

• 이전 컴포저 작업 내용을 요약하여 새로운 컴포저에서 이어서 작업 가능.
• 컨텍스트 크기가 커질 경우, 불필요한 정보를 제거하고 핵심 내용만 요약하여 제공.

긴 컨텍스트 처리 개선

• 이전에는 컨텍스트 크기가 커지면 자동으로 압축되었음.
• 이번 업데이트로 컨텍스트를 압축할지 여부를 선택할 수 있음.
• 대형 프로젝트에서 컨텍스트 유지가 중요한 경우, 전체 내용을 전송할 수 있는 옵션 추가.

결론

• Project Rules 기능이 추가되면서 프로젝트별로 세분화된 규칙 적용이 가능해짐.
• AI가 자동으로 적절한 규칙을 탐색하여 적용하는 방식으로 개발 효율성이 향상됨.
• 긴 컨텍스트 처리 옵션이 추가되어 대형 프로젝트에서도 보다 안정적인 개발 가능.

Cursor AI 활용법 요약 (효율적인 솔로 개발을 위한 팁)

Cursor AI 활용법 요약

1. 프로젝트 규칙 설정

• AI의 실수를 방지하려면 명확한 프로젝트 규칙을 설정해야 함.
• Command + Shift + P → New Cursor Rule 선택 후 규칙을 작성.
• 파일별로 적용 가능, Markdown 형식으로 규칙 작성 후 지속적으로 업데이트 필요.

2. Chat 기능 활용

• 코드 관련 질문, 디버깅, 학습에 유용.
• @ 기호를 사용하면 파일, 폴더, 웹 데이터, Git 변경 내역 등을 질문에 포함 가능.
• / 명령어를 사용하면 여러 개의 활성 탭을 한 번에 추가할 수 있음.
• 이미지 업로드 및 붙여넣기도 가능.

3. Cursor Agent 기능

• 자동 코딩 수행 (완전 자동 또는 사용자가 승인하는 방식 선택 가능).
• "Vibe coding" 트렌드와 관련, 사용자는 지켜보며 가이드만 제공 가능.
• Claude 3.7 Sonet 모델 추천 (현재 가장 성능이 우수).

4. Agent 설정 추천

• Auto Apply 설정: 코드베이스 전체에서 AI가 자율적으로 수정 가능하도록 활성화.
• Iterate on Lints 설정: 자동으로 린트 및 타입 오류 수정 가능.
• Yolo 모드: 완전 자동 실행 가능하지만 신중하게 사용해야 함.

📌 요약

Cursor AI를 활용하면 프로젝트 규칙을 설정하여 AI의 실수를 줄이고, Chat 기능으로 코드 학습 및 디버깅을 도우며, Agent를 활용하여 자동 코딩을 할 수 있음. 효율적인 개발을 위해 적절한 설정을 활용하는 것이 중요함.

윈도우용 커서 단축키

단축키	설명
Ctrl + I	Composer 열기
Ctrl + L	Chat 열기
Ctrl + K	Prompt Bar 열기
Ctrl + /	AI 모델 전환
Ctrl + Shift + J	Cursor 설정 열기
Ctrl + Shift + P	명령 팔레트 열기
Enter	(채팅 입력 상자에서) 제출
Ctrl + Backspace	(채팅 입력 상자에서) 생성 취소
Ctrl + Shift + L	선택한 코드를 채팅 컨텍스트에 추가
Ctrl + Enter	코드베이스에서 검색하여 채팅
Tab	자동완성 제안 수락
Ctrl + →	다음 단어 자동완성 수락
Ctrl + K	터미널 프롬프트 바 열기
Ctrl + Enter	생성된 명령 실행
Esc	명령 수락

맥용 커서 단축키

 커서 단축키 정리

단축키	설명
Cmd + I	Agent 열기
Cmd + L	Ask 열기
Cmd + .	채팅 모드 전환
Cmd + /	AI 모델 순환
Cmd + Shift + J	Cursor 설정 열기
Cmd + ,	일반 설정 열기
Cmd + Shift + P	명령 팔레트 열기
Enter	(채팅 입력 상자에서) 제출
Cmd + Backspace	(채팅 입력 상자에서) 생성 취소
Cmd + Shift + L	선택한 코드를 채팅 컨텍스트에 추가
Cmd + Enter	코드베이스에서 검색하여 채팅
Tab	자동완성 제안 수락
Cmd + →	다음 단어 자동완성 수락
Cmd + K	터미널 프롬프트 바 열기
Cmd + Enter	생성된 명령 실행
Esc	명령 수락

Cursor단축키

단축키	설명
Cmd + I	AgentCursor 열기
Cmd + L	Ask 열기
Cmd + .	채팅 모드 전환
Cmd + /	AI 모델 순환
Cmd + Shift + J	Cursor 설정 열기
Cmd + ,	일반 설정 열기
Cmd + Shift + P	명령 팔레트 열기
Enter	(채팅 입력 상자에서) 제출
Cmd + Backspace	(채팅 입력 상자에서) 생성 취소
Cmd + Shift + L	선택한 코드를 채팅 컨텍스트에 추가
Cmd + Enter	코드베이스에서 검색하여 채팅
Tab	자동완성 제안 수락
Cmd + →	다음 단어 자동완성 수락
Cmd + K	터미널 프롬프트 바 열기
Cmd + Enter	생성된 명령 실행
Esc	명령 수락

vscode 단축키

단축키	설명
Alt + 클릭	원하는 위치에 커서 추가
Ctrl + Alt + ↑ / ↓	현재 커서 위치의 위나 아래에 커서 추가
Shift + Alt + 드래그	상자 모양으로 영역 선택 (박스 선택)
Ctrl + D	현재 선택과 동일한 다음 항목 선택
Ctrl + U	마지막 커서 작업 실행 취소
Shift + Alt + I	선택한 각 줄 끝에 커서 삽입
Ctrl + Shift + L	현재 선택과 일치하는 모든 항목 선택
Ctrl + F2	현재 단어의 모든 항목 선택
Ctrl + L	현재 줄 선택
Ctrl + Shift + → / ←	선택 영역 확장 / 축소

OS Settings 라즈비안 재설치 하는 과정 최적화

sudo apt update

sudo apt install -y fonts-nanum ibus ibus-hangul fcitx fcitx-hangul

export XMODIFIERS="@im=fcitx" 

export GTK_IM_MODULE=fcitx

export QT_IM_MODULE=fcitx

sudo apt update

sudo apt upgrade -y

라즈환경설정, ssh활성화, 로켈 > 지역, 시간, 자판 재부팅안함

입력기 i-bus 추가  

[ SD카드 용량 최대치 적용 ]

sudo raspi-config  # 터미널에서 실행

>메뉴에서 “Advanced Options” 

>“Expand Filesystem”  선택

>재부팅

[SSH접속을 위한 RPI설정]

sudo nano /etc/ssh/sshd_config  #설정열어서

PasswordAuthentication yes  #이 항목 해제하고 아래두줄 복사붙여넣기

ClientAliveInterval 60

ClientAliveCountMax 3

저장하고

sudo systemctl restart ssh  #SSH 서버 재시작

[ No-IP 클라이언트 다운로드 & 설치 ]

cd /usr/local/src

sudo wget http://www.no-ip.com/client/linux/noip-duc-linux.tar.gz

sudo tar xzf noip-duc-linux.tar.gz

cd noip-가 설치된 경로로 이동

 

sudo make

sudo make install   #No-IP 계정 정보를 입력 후 설치종료

[ No-IP 자동 실행 설정 ]

sudo nano /etc/systemd/system/noip.service  #설정 열어서

[Unit]

Description=No-IP Dynamic DNS Client

After=network.target

[Service]

ExecStart=/usr/local/bin/noip2

Restart=always

[Install]

WantedBy=multi-user.target

위 내용을 붙여넣고 저장

[ No-IP 자동 업데이트 ]

sudo systemctl enable noip

sudo systemctl start noip

sudo apt update

sudo apt install ufw -y

sudo ufw allow 22/tcp

sudo ufw enable

sudo ufw status verbose //여기서 22/tcp ALLOW가 보이면 정상적으로 적용됨 

25년 개발도구

맥북프로

 

맥북에어