WEB

[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 함수란 다른 코드의 인수로서 넘겨주는 실행 가능한..

[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 연산자를 ..

[React] 리액트 시작하기

Node.js 설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 이 사이트에서 원하는 버전에 맞게 설치해준다. (나는 LTS인 18 버전으로) 계속 넘어가서 설치를 잘 했다면 Node 버전을 확인하는 node -v, npm 버전을 확인하는 npm -v 을 통해 설치가 잘 되었는지 확인해본다. 이렇게 확인 가능하다. npx 또한 확인하기를 원한다면 npx -v 을 통해 확인할 수 있다. React 프로젝트 생성 npx create-react-app {app 이름} npx 를 통해 프로젝트가 생성된다. src 폴더 내에 App.js 가 메인 페이..

[Spring Boot] Spring boot EC2에 배포하기

Java JAVA JDK, JRE 설치 및 환경설정 AWS EC2 AWS EC2 에 스프링 부트를 배포하자. 먼저 저자는 Maven 사용했기 때문에 package 를 더블클릭해서 실행하면 배포를 하게되고 아래 콘솔에 나온 경로로 이동해서 server-0.0.1-SNAPSHOT.jar 파일을 찾는다. 이 파일이 배포 파일이다. (설정에 따라 war 일 수도 있음) EC2로 해당 파일을 옮긴 후 java -jar server-0.0.1-SNAPSHOT.jar 를 입력하여 실행하면 스프링 부트가 실행된다. 이 실행을 백그라운드로 돌리기 위해서는 nohup java -jar server-0.0.1-SNAPSHOT.jar & 이렇게 입력해준다. 만약 스프링을 배포한다면 톰캣을 설치하고 webapps 폴더 내에 해..

[Spring] RestTemplate Response Entity Type

RestTemplate Spring에서 RestAPI로 통신을 할 수 있는 방법은 두가지가 있다. Spring 3 부터 적용 가능한 Rest Template, Spring 5 부터 적용 가능한 Web Client 각각의 방법을 차후에 포스트로 작성할 예정 이번에는 Rest Template 객체를 사용한 통신 중에 내가 지정한 클래스에 응답 객체를 매핑하게 되는데... 이 부분에서 오류가 발생했다. 제네릭을 사용한 클래스인 List.class 를 반환 타입으로 주고, 이 객체를 for문을 통해 List의 요소를 하나씩 꺼내와서 기능을 수행했다. List는 List 형식으로 되어서 FileEntity.class 로의 매핑이 필요했다. 이 때 사용한 방법으로 com.fasterxml.jackson.databi..