시그널링 서버(signaling server)실시간 화상채팅을 구현하기 전에 Signaling 서버에 대해 알아야 합니다. WebRTC에서 시그널링 서버(signaling server)는 매우 중요한 역할을 합니다. 이 서버는 WebRTC 연결을 구성하기 위해 필요한 메타데이터와 control 메시지를 주고받는 데 사용됩니다. 시그널링 서버는 peer-to-peer 간의 초기 설정, 네트워크 정보 교환, 세션 관리 등을 합니다. WebRTC 프로토콜 자체에서 제공해주는 기능은 아니기 때문에 시스템 구조 및 상황에 맞게 개발자가 시그널링 프로세스를 구현해야 합니다. (예를들어, 화상 채팅 앱을 만든다면, 인증 및 채팅 방을 관리하기 위한 프로세스가 필요합니다. 이런 프로세스를 직접 시그널링 서버에 구현해햐..

초기 환경 설정node 설치React Native는 React와 같이 Javascript으로 개발을 하기 때문에 node가 필요합니다. node 설치는 아래 링크를 참고하시면 됩니다. macos에 nodejs 설치하기 (쉽게 node 버전 변경하기)nodejs 설치 nodejs를 설치하는 방법은 brew를 사용한 방법이 있고, nodejs 공식사이트에서 직접 설치하는 방법이 있습니다. 본 글에서는 brew를 사용하여 설치하는 방법에 대해 소개합니다. brew로 설치bluemiv.tistory.com watchman 설치Watchman은 Facebook이 개발한 오픈 소스 툴입니다. 파일 시스템에서 변화를 감지하고 해당 변화에 반응하는 작업을 자동화할 수 있게 해주는 도구입니다. ..

프로젝트를 시작하다보면 어떤 프로젝트 구조로 개발을 할지 고민을 하게 됩니다. 정해진 규칙은 없기 때문에 정답은 없지만, 본 글에서는 제가 개발하면서 유지보수하기 편했던 디렉토리 구조를 설명합니다. 소규모 & 중간규모 프로젝트 작은 규모의 프로젝트일 수록 디렉토리 구조는 단순하게 가져가는 것이 좋았습니다. 그래서 depth는 최대한으로 줄이고 컴포넌트, api, hook, 유틸리티 함수 등으로 디렉토리를 구분하였습니다. my-app/ │ ├── src/ │ ├── components/ # 재사용 가능한 컴포넌트 │ │ ├── common/ # 전역적으로 사용되는 컴포넌트 (버튼, 헤더, 푸터 등) │ │ └── BlogContainer # 블로그 컨테이너 컴포넌트 │ │ ├── index.tsx │ │ ..

Intersection Observer API 이전에는 스크롤 위치에 따라 화면을 변화시키기 위해, 아래와 같이 scroll event listener 를 추가하여 사용했습니다. document.addEventListener("scroll", callback); 이렇게 스크롤로 화면 내의 요소(element)의 변화를 감지하는 일은, 스크롤을 조금만 움직여도 이벤트가 발생하며 사이트에 부하를 줄 수 있기 때문에 비효율적이었습니다. 비교적 최근 브라우저에서는 Intersection Observer 라는 API를 지원해주기 때문에 이전 방법(스크롤 이벤트를 이용한 방법)보다 효율적이고, 쉽게 컨트롤 할 수 있게 됐습니다. Intersection Observer 사용하기 사용하는 방법은 관찰자(Observer..

tailwindcss tailwindcss는 자주 사용하는 css를 모아놓은 라이브러리로 편리한 유틸리티 css 라이브러리입니다. tailwindcss에는 정말 많은 스타일들이 이미 정의가 되어있어서, 따로 css를 작성할 필요없이 class(className)에만 추가를 하면 스타일이 입혀집니다. 예를 들어, 둥근 사각형을 만든다고 했을때 아래와 같이 html 코드에 class 속성을 추가하고, border-radius 값을 정의해줘야 합니다. .rounded-rectangle { width: 50px; height: 50px; border-radius: 0.25rem; } 만약, tailwindcss 를 사용하게 된다면 훨씬 간단해집니다. (사용하지 않았을때 코드와 비교했을때, 훨씬 간단하게 작성할 ..

여러가지 방법으로 크롬 extension을 만들 수 있지만, 본 글에서는 React 를 사용해서 크롬 extension을 만드는 방법에 대해 소개합니다. React 프로젝트 생성하기 우선 extension으로 만들 리액트 프로젝트를 CRA를 사용해서 생성합니다. 본 글에서는 타입스크립트 기반의 리액트 프로젝트를 생성하도록 하겠습니다. yarn create react-app my-chrome-app --template typescript chrome extension 만들기 manifest 설정 변경 생성된 프로젝트의 public 디렉토리를 보면 manifest.json 파일이 있습니다. manifest.json 파일은 브라우저에 이 앱에 대한 정보를 알려주는 파일입니다. 이 앱이 크롬 익스텐션이라고 브라..

nextjs를 사용하는 이유 Link 컴포넌트를 사용하는 이유에 대해 알아보기 전에 CSR과 SSR에 용어 정리가 필요합니다. nextjs를 사용하는 이유 중 가장 큰 이유는 서버 사이드 렌더링(Server Side Rendering) 이라고 할 수 있습니다. 서버 사이드 렌더링은 줄여서 SSR이라고 부르기도 합니다. 반대로 React의 경우는 Client Side Rendering, CSR 입니다. 단어에서도 알 수 있듯이 SSR은 서버에서 미리 렌더링하여 html 파일을 만들어주고, 만들어진 html 파일을 사용자에게 전달하는 방식으로 동작합니다. 반면에 CSR의 경우는 javascript에 의해 클라이언트에서 화면을 렌더링한다는 차이점이 있습니다. SSR은 서버에서 미리 html 파일을 만들어주기 ..