JavaScript6 [Node] Socket.io 활용 WebRTC 가장 최근 진행한 프로젝트 당시 1:1 비대면 화상진료 기능을 맡았다. 해당 기능을 구현하기 위해서 Socket.io와 WebRTC를 사용해 보고자 했다.Socket.io는 클라이언트와 서버 간의 실시간 양방향 통신을 처리하는 데 사용되며, WebRTC는 브라우저 간 P2P(피어 투 피어) 연결을 통해 오디오, 비디오 및 데이터를 실시간으로 전송할 수 있게 해준다. WebSocket이 아닌 Socket.io를 사용한 이유는 Socket.io는 소켓 연결이 끊어지면 자동으로 재연결을 시도하는 기능과 WebSocket뿐만 아니라 폴링이나 언폴링 등의 다양한 연결 방식을 가지고 있어 해당 클라이언트에 가장 잘 맞는 연결 방식을 동적으로 네트워크 환경 지원 여부에 따라 선택을 해준다. 또한, 네임 스페이스와 방.. 2024. 8. 24. [React] D3 D3는 Data Driven Documents의 약자로써 D가 3개라는 뜻이라고 한다. 데이터 시각화 Javascript 라이브러리로, 데이터를 바탕으로 HTML의 DOM을 직접 조작하는 것이 특징이다. 나는 여기서 D3는 DOM을 직접 조작하고,React는 Virtual DOM으로 문서를 조작하기 때문에 서로 충돌되는 부분이 있을 것이라고 생각이 들었다. 그래서 찾아보니 오히려 시너지가 나는 부분이 있다고 한다. React가 D3에게 DOM을 제공하고 D3는 이것을 받아서 데이터를 화면에 그려내면 React Hooks의 상태관리 기능과 D3의 데이터 시각화 기능을 한꺼번에 활용할 수 있기 때문이다. 그러니까 한 마디로 하자면, 리액트의 장점인 반응형으로 데이터 시각화를 이루어낼 수 있다는 것이다. .. 2024. 7. 26. [Node] 암호화(feat. bcrypt) Bcrypt는 단방향 암호화 알고리즘으로써, 비밀번호 해싱을 위해 설계되었다. 내부적으로 랜덤 salt가 생기고이에 따른, 해시값의 결과가 매번 바뀌게 된다.Bcrypt는 랜덤하게 솔트를 생성한 후 비밀번호와 솔트를 결합하여 Blowfish암호를 여러 번 반복하여 해싱한다.반복 횟수는 cost factor로 결정하며 이를 통해 해싱 속도를 조절한다. 그렇기 때문에, Brycpt는 단방향 암호화라고 한다. 입력 데이터를 고정된 크기의 해시 값으로 변환하고변환된 데이터를 원래의 입력한 데이터로 복원하는 것은 불가능하기 때문이다. /*salt는 해싱 과정에서 비밀번호에 추가되는 임의의 데이터 조각이라고 생각할 수 있다.salt가 추가됨으로써 동일한 비밀번호도 서로 다른 해시 값을 가지게 되어 같은 해시 값을 .. 2024. 7. 25. [Node] session 자바에서 비교적 편리하게 세션과 쿠키를 다뤘던 경험과 다르게 Node 환경에서 session을 다뤄보는 것은 처음이기도 했고구조도 달라서 꽤나 애를 먹었다. 따라서, 기록을 해놔야 겠다는 생각이 들었다. 1. session 설치npm install express-mysql-sessionnpm install express-session express-session 만으로는 세션 저장 여부를 확인할 수 없기 때문에 express-mysql-session 을 사용해서 세션의 저장소를 함께 사용해 주어야 한다. 2. session 설정app.use( session({ secret: 'custom-secret', resave: false, saveUninitialize.. 2024. 7. 24. [Node] Node.js? Node.js란?- Node.js는 서버 사이드 및 네트워크 애플리케이션을 구축하기 위해 설계된 오픈 소스, 크로스 플랫폼 JavaScript 런타임 환경이다. Node.js는 V8 JavaScript 엔진을 사용하여 JavaScript를 매우 빠르게 실행하며, 비동기 이벤트 기반 아키텍처를 채택하여 높은 성능과 확장성을 제공한다. Node.js의 주요 특징 및 구성 요소비동기 이벤트 기반 아키텍처이벤트 루프: Node.js의 핵심은 이벤트 루프이다. 비동기 작업을 관리하고, 작업이 완료되었을 때 콜백을 실행하는 역할을 한다. 이 구조 덕분에 Node.js는 블로킹 없이 많은 클라이언트 요청을 동시에 처리할 수 있다.콜백: Node.js에서 비동기 작업이 완료되면 호출되는 함수이다. 예를 들어, 파일을.. 2024. 7. 17. [React] React 맥(Mac os) VSCODE 리액트 프로젝트 생성하는 방법(개발환경 세팅) 1. Node.js 설치https://nodejs.org/ko/ Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org위 노드.js 공식 홈페이지로 들어가 LTS 버전으로 설치한다. 최신 버전을 설치해도 되긴 하지만 간혹 오류가 있을 수 있기 때문에, 권장하는 설치 버전은 안정적인 LTS 버전이다.- 스트레스 없는 리액트 환경 개발을 위해선 LTS 13.xx 이상, 17.xx 이하 버전을 쓰는 것이 정신 건강에 좋다고 한다.- 노드.js 설치할 때 설치 경로는 변경하지 말고 기본 세팅대로 그대로 설치해주면 된다. 2. 리액트(React) 프로젝트 생성노드.js 설치가 끝났다면 이제 VScode에서 신.. 2023. 6. 29. 이전 1 다음
