이전에 사이드 프로젝트에서 단체 채팅 기능을 구현하기 위해 채팅 프로그램을 만들어본 적이 있다. 그 때는 단순하게 단체 채팅방 하나만 구현하는 프로그램을 작성하는 연습만 하고 끝났었다. (이 프로그램은 추후에 소켓에 대해 정리하면서 포스팅할 예정이다.) 그 이후로 손을 놓고 있다가 시간이 나게 되어 단체 채팅방을 여러 개 만들 수 있도록 개선했다. 채팅 사용자는 방을 개설할 수 있기도 하고 참여할 수 있기도 하다. 채팅 프로그램은 채팅방을 관리하고 메시지를 처리해주는 채팅 서버와, 채팅에 참여하는 채팅 클라이언트 두개의 프로젝트로 작성했다. Project : multi-chat-server ------ Server.java import java.net.ServerSocket; import java.net..

나는 스프링 프레임워크로 웹 개발에 입문했다. 스프링은 개발 시에 많은 어노테이션을 사용하여 편하게 개발할 수 있도록 도와준다. 그래서 이번엔 평소에 궁금했던 어노테이션에 관하여 알아보고 커스텀 어노테이션을 만들어 보았다. 우선 어노테이션은 기본적으로 세가지 타입이 존재한다. Marker Annotation : 표시만 해 놓는 어노테이션 Sigle Value Annotation : 하나의 입력 값만 존재하는 어노테이션 Multi Value Annotation : 여러 입력 값이 존재하는 어노테이션 다음으로 커스텀 어노테이션은 어노테이션을 위한 어노테이션인 메타 어노테이션(Meta Annotation)을 사용한다. @Retention : 컴파일러가 어노테이션을 다루는 방법을 기술, 어느 시점까지 영향을 미..

최근 회사에서 프로젝트를 진행하며 OCR(광학 문자 인식) 인증을 수정한 적이 있다. 당연히 인증하는 솔루션은 내가 건드릴 순 없지만 카메라를 신분증 사진을 어떻게 찍고 그 파일을 보내는 과정을 알아볼 수 있었다. spec : Spring, React 1. 우선 카메라 화면에서 HTML 기본 태그와 태그를 사용해 영역을 지정해 준다. return ( ) 2. canvas와 video를 통해 해당영역을 이미지로 캡쳐한다. 현재 ref의 refVideo와 refCanvas는 리액트 Hook의 useRef()를 사용해 객체를 지정해 놓은 상태이다. const 캡처 = () => { if(refVideo.current.srcObject){ refCanvas.current.width = refVideo.curre..