무딘붓의 코딩기록

1. 서론Next.js 13 버전을 사용하고 있는 프로젝트에서, CSR 페이지를 SSR로 전환하게 되었습니다. 클라이언트가 API 서버에서 데이터를 가져오는 CSR 방식과 달리, SSR 방식은 서버에서 API 서버의 데이터를 가져와 페이지를 만든 후, 클라이언트에 완성된 페이지를 전달합니다. 그림을 통해 간단히 통신 과정을 살펴봅시다.   그렇다면 Next.js 서버에서 API 서버의 데이터를 가져오기 위해선 어떤 패칭 라이브러리를 사용해야 할까요? Server to Server 통신에서 자주 사용하는 4가지 패칭 라이브러리를 간단히 살펴보겠습니다. 2. 주요 패칭 라이브러리 비교하기 2.1. fetch (내장 API)소개브라우저 및 Node.js 환경에 내장된 네트워크 요청 APIJavaScript의 ..

기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다.게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다.  실시간 화이트보드 공유 서비스를 운영하며 생긴 지연 문제의 해결 과정을 정리한 글입니다.해당 서비스를 처음 구현한 과정은 이전 개발 일지에 정리했습니다. 💭 0. 문제 상황  화이트보드에 쓴 글씨가 많아지면 참여자 페이지에서 느리게 보이는 문제가 발생했습니다. 이러한 문제점이 생기는 원인은 아래와 같이 세 가지를 추정해 봤습니다.강의자 페이지에서 화이트보드 정보를 저장하는 시간이 오래 걸린다.강의자가 보내는 화이트보드 데이터의 용량이 커서 서버를 통한 전송이 오래 걸린다.참여자 클라이언트에서 처리해야 할 데이터..

기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다.게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다.   실시간 화이트보드 공유 서비스를 구현하기까지의 과정을 정리한 글입니다.Fabric.js로 화이트보드를 구현하는 과정은 이전 게시글에 정리했습니다.💭 1. 강의자 canvas의 내용을 어떻게 참여자에게 전달해서 표시해야 하는가? 실시간으로 강의자의 화이트보드(canvas) 내용을 참여자들에게 전달하는 것을 목표로 프로젝트를 시작했습니다. 강의자의 화이트보드는 Fabric.js 라이브러리를 이용해서 구현을 마쳤고,음성 브로드캐스팅은 WebRTC를 사용한 미디어 서버를 통해 완성한 상황이었습니다. 프로젝트 발표까지..

기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다.게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다.   웹 페이지에서 마이크를 통해 음성을 입력받고, 볼륨을 시각화 하는 과정을 정리합니다. 바닐라 Javascript로 개발한 예제코드는 아래에서 확인할 수 있습니다.https://codepen.io/vchgekmq-the-flexboxer/pen/MWLVJeO?editors=1111🎤 1. 마이크를 통해 사용자의 음성을 입력 받기navigator.mediaDevices .getUserMedia({ audio: true }) // 마이크 권한을 요청 .then((stream) => { ..

기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다. 게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다. 이 게시글에서는 React 프로젝트에서 Fabric.js 라이브러리로 화이트보드(그림판)를 만드는 과정을 정리합니다. 실행 예시와 React 코드는 링크(codesandbox)에서 확인할 수 있습니다. 0. 왜 Fabric.js 라이브러리를 사용하나요? 우선, Fabric.js는 HTML Canvas를 쉽고 강력하게 관리할 수 있게 해주는 라이브러리 입니다. 가장 큰 특징은, 캔버스에 그려진 요소를 객체 형태로 관리할 수 있다는 점 입니다. 이를 이용해서 캔버스의 요소들을 선택, 이동, 회전, 크기조절 할 수 있는..

설명 express를 비롯한 Node.js의 모듈들과, React로 구현한 로그인, 회원가입 예제입니다. React를 사용하지 않고 구현한 예제는 아래와 같습니다. https://sirius7.tistory.com/59 Node.js와 MySQL을 이용한 로그인/회원가입 예제 (소스코드) 설명 express를 비롯한 Node.js의 모듈들과, 5개 정도의 js파일로 구현한 로그인, 회원가입 예제입니다. MySQL을 데이터베이스로 사용하였기 때문에 MySQL을 설치하셔야 사용 가능합니다. (사용방법 링 sirius7.tistory.com MySQL을 데이터베이스로 사용하였기 때문에 MySQL을 설치하셔야 사용 가능합니다. (사용방법 링크) 사용하시면서 궁금하신 점이나 문제점이 있다면 댓글 달아주세요. 필요..

설명 express를 비롯한 Node.js의 모듈들과, 5개 정도의 js파일로 구현한 로그인, 회원가입 예제입니다. MySQL을 데이터베이스로 사용하였기 때문에 MySQL을 설치하셔야 사용 가능합니다. (사용방법 링크) 사용하시면서 궁금하신 점이나 문제점이 있다면 댓글 달아주세요. 필요 모듈 1. mysql2 2. express 3. express-session 4. session-file-store 5. body-parser npm을 이용하여 다운로드하시면 됩니다. mysql2 대신 mysql 모듈을 사용하셔도 무방하며, session-file-store 모듈은 세션을 다른 방식으로 저장하실 경우 사용하지 않으셔도 됩니다. body-parser 역시 편의를 위한 것으로, 소스코드에서 request.bo..