분류 전체보기

[Web] WebRTC를 활용한 화상통화 서비스의 서버 구성

WebRTC를 사용해서 1:1 화상통화 서비스가 포함된 프로젝트를 진행중이다. 이 때 필요한 서버는 1. Signaling Server 2. STUN Server 3. TURN Server 만약 1:1 방식의 화상통화가 아닌 1:N 혹은 N:M 방식이라면 Media Server를 추가하는 것이 좋다. Signaling Server 양쪽의 클라이언트를 연결시켜주는 역할을 하는 서버이다. 각 클라이언트들의 연결을 위해서는 먼저 정보의 전달이 필요한데, 이 정보를 SDP(Session Description Protocol)이라 하고 Siganling Server가 이 정보를 중계해주는 역할을 한다. Spring Boot를 사용한다면 일반적으로 WebSocket을 사용하여 통신하게 된다. 그 순서를 알아보면 1..

[AI - NLP] Chat GPT를 API로 만들어보자.

요즘 ChatGPT를 굉장히 많은 곳에서 사용하고 있다. 간단한 것을 직접 구글에 검색해서 찾는 것이 아니라 ChatGPT에 물어보면 간편하게 확인할 수 있어서 좋다. 지금 진행중인 프로젝트에서 주어진 단어들을 포함하는 완벽한 문장을 만드는 기능이 필요해서 문장생성이 가능한 모델인 GPT 중 가장 인기가 많은 ChatGPT를 API로 만들어보자. (python 코드로 진행됩니다.) pip install openai 먼저! openai를 설치해준다. import openai API_KEY = 'your api key' openai.api_key = API_KEY first_query = 'Use these words in order, one at a time, to make a sentence.' seco..

[Web] WebSocket API / REST API

배경 진행 중인 프로젝트에서 영상을 실시간으로 스트리밍 하면서 그 영상의 처리를 해주는 API를 원했다. 지금까지는 REST API를 만들어서 요청과 응답으로 구성되어 있는 API에 익숙해져 있었다. 하지만 실시간으로 바로 처리하면서 기능을 수행하기에는 한계가 있었다. 그러면서 WebSocket의 개념이 생각났고, REST API가 사용하는 방법이 아닌 WebSocket 개념을 사용한다면 내가 원하는 API가 될것같았다! 찾아보니 WebSocket API가 존재했고 둘의 차이점을 비교해 보자 REST API REST API는 기본적으로 요청과 응답으로 연결된다. HTTP URI로 엔드포인트를 명시하고, HTTP Method(Post, Get 등)을 통해 요청을 보내게 된다. 그리고 API의 기능이 끝나면..

[Web] Web Socket / Web RTC

Web Socket Web Socket은 클라이언트와 서버의 실시간 통신을 지원해 준다. HTTP 프로토콜과는 달리 한 번의 연결이 이루어지면 지속적인 연결을 도와준다. 또한 한쪽에서의 일방적인 요청에 따른 응답이 아닌, 필요에 따라서 양방향에서 데이터를 주고받을 수 있다. Web RTC Web Real-Time Communication 웹 브라우저 환경에서 비디오, 음성 등의 데이터를 peer 간에 실시간으로 전송되도록 지원하는 오픈소스이다. 연결을 원하는 브라우저에서 Signaling Server를 통해 Offer SDP를 보내고 연결되는 브라우저에서 Answer SDP를 보내주면서 Ice Candidates 과정으로 이루어진다. NAT 환경에 있을 경우 Stun/Turn Server를 구현해 통신할..

[Spring] 패키지 구조

고민 전에 프로젝트를 진행하면서 패키지를 어떤 기준으로 나누어 만들어야 효율적인지 고민을 했다. 처음에는 컨트롤러, 서비스, 레포지토리 등으로 나누었고 다음은 조금 더 간결하고 모아지도록 M,V,C 각각 패키지로 만들었다. 하지만 프로젝트 크기가 커지면서 도메인마다의 MVC가 생겨났다. 그러면서 어떻게 해야 찾기에도 편하면서 관리하기 좋을까? 고민을 하던 당시에는 가장 좋은 효율을 찾던 중 맡은 기능별로 나누어 관리했다. 지금와서 생각해보면 결론적으로 도메인을 기준으로 나누어 진행했었다. 종류 패키지를 구조적으로 계층형과 도메인형으로 나뉜다. 계층형 구조 처음 내가 진행했던 방법은 계층형 구조이다. 계층형 구조는 작은 프로젝트에 유용하며 전체적인 구조를 빠르게 파악할 수 있다. 하지만 하나의 디렉토리에 ..

[React] map 함수

map() 함수란? 반복되는 컴포넌트를 렌더링하기 위해 사용하는 함수. const days = ["Mon", "Tue", "Wed"]; const goodDay = dyas.map(day => '${day}); console.log(goodDay); "Mon" "Tue" "Wed" 이렇게 출력된다. map()은 배열의 요소 하나씩 뽑은 뒤 결과값을 보여준다. 이뿐만 아니라 map 함수의 파라미터값으로 콜백 함수가 들어가게 되는데, 그 안에 변수를 순서대로 현재 처리하고 있는 요소, 현재 처리하고 있는 요소의 index 값, 현재 처리하고 있는 원본 배열 로 입력된다. 하나의 변수만 놓는다면 현재 처리하고 있는 요소의 값만을 사용하게 된다. Callback 함수란 다른 코드의 인수로서 넘겨주는 실행 가능한..

[PostgreSQL] PostgreSQL 시작

설치 https://www.enterprisedb.com/downloads/postgres-postgresql-downloads Download PostgreSQL PostgreSQL Database Download www.enterprisedb.com 해당 사이트에서 원하는 버전으로 설치해준다. 차후에 AWS RDS 로 프로젝트에 적용해보기 위해서 14 버전으로 다운하겠다. ( RDS는 현재 14버전까지 지원해줌 ) 원하는걸 선택해준다. 모르겠으면 그냥 기본 설정으로 선택! 데이터베이스의 관리자 비밀번호를 설정해준다. 포트번호는 기본이 5432 이다. 그대로 진행! 마찬가지로 그대로 진행하면서 설치 접속 설치가 완료되었으면 접속을 해보자. 윈도우 버튼을 눌러 이 폴더를 찾은 후 이 중에서 pgAdmin..

[React] spread 연산자

spread는 펼치다 라는 뜻이 있다. 그 뜻과 같이 spread 문법을 사용하면 객체 혹은 배열을 펼쳐 사용할 수 있다. const [inputs, setInputs] = useState({ name: "", email: "", tel: "" }); 이렇게 useState를 이용해 값을 저장한 객체가 있고 이 객체의 값을 변경하기를 원할 때 클라이언트에서 입력받은 value 값과 태그의 id 값을 통해 const onChange = (e) => { const value = e.target.value; const id = e.target.id; setInputs({ ...inputs, [id]: value }) }; 위와같이 set 함수를 사용하여 값을 변경해주었는데 그 내부에서는 spread 연산자를 ..