본문 바로가기

JavaScript

 (46)
WebRTC로 1:1 영상 통화 구현 배경서비스 요구사항에 영상 통화 기능이 추가되어 개발해야 했습니다. 별도의 라이브러리 없이 직접 구현할 수 있는 방법을 찾던 중 WebRTC라는 API를 알게 되었고, 추후 요구사항 변경이나 확장성을 고려한다면 WebRTC가 무엇인지, 그리고 관련 구성요소들이 어떤 게 있는지 정확히 알 필요가 있다고 생각해 공부한 내용을 기록하게 되었습니다.목차WebRTC란WebRTC로 결정한 이유WebRTC의 장단점WebRTC는 어떻게 동작할까Peer 연결Signaling ServerSDPICESTUN 서버TURN 서버무료 STUN / TURN 서버 URL 목록구현 WebRTC란WebRTC(Web Real-Time Commnication)는 Apple, Google, Microsoft, Mozila, Opera에서 지..
Mac) node.js 버전 변경 개발 중인 프로젝트에 따라 node.js 버전이 다를 수 있는데, n 패키지를 사용하면 node.js의 버전을 쉽게 관리할 수 있다. # n 패키지 설치 sudo npm i -g n # 설치된 node.js 목록 sudo n ls # node.js 16 버전 설치 sudo n install 16 # 현재 사용할 node.js 버전 변경 sudo n 또는 현재 node.js를 제거하고 새로 설치할 수 있다. https://parodev.tistory.com/52
Vue.js 개발 환경 구성(VSCode, 크롬 확장) VSCode 플러그인 설치 1. 한국어 언어팩: VSCode 한국어 지원 2. indent-rainbow: 탭 가독성 향상에 도움 3. Auto Rename Tag: html 태그명 변경 시 열고 닫는 태그명을 함께 바꿔줌 4. CSS Peek: html에서 사용된 클래스가 CSS 중 어디에서 사용됐는지 추적이 쉽게 해줌(cmd + 클릭) 5. HTML to CSS autocompletion: CSS에서 클래스 작성할 때 자동완성 지원 6. HTML CSS Support: HTML에서 클래스 작성할 때 자동완성 지원 7. Live Server: 코드가 변경되었을 때 브라우저에 자동 반영(dev server) 8. ESLint: 작성한 코드에 오류가 있는지 확인해줌 9. Vue Language Featu..
Vue3 Options API vs Composition API Vue3에서 애플리케이션을 만들 수 있는 방법은 크게 두 가지가 있습니다. 하나는 Vue2에서 사용해왔던 Options API를 사용하는 방법과 다른 하나는 Vue3에서 새롭게 등장한 Composition API 입니다. 기존 Vue2에서는 SFC(Single File Component) 구조로 Options API를 사용해 직관적으로 코드를 개발해 왔습니다. 이는 개발할 때 고민을 덜 하게 되어 편하지만 컴포넌트의 크기가 커졌을 때 유지보수가 어려워진다는 문제를 야기했습니다. 예를 들어, Options API로 개발한 파일 탐색기 소스를 관심사에 따라 색칠하면 아래와 같이 됩니다. 색깔별로 같은 관심사인데, 한 로직을 따라가려면 스크롤을 위아래로 이동하면서 읽어야 하기 때문에 가독성이 좋지 않습니다. ..
vue-cli(v5) 설치 및 프로젝트 구조 정리 목차 VueJS 설치 프로젝트 생성 프로젝트 구조 1. VueJS 설치 VueJS를 설치하는 방법은 두 가지인데요, vue를 직접 설치하거나, @vue/cli를 설치하는 방법입니다. 두 방법의 차이는 다음과 같습니다. vue: VueJS를 직접 설치하는 방법으로, 간단하고 빠른 방법이지만 프로젝트 세팅을 직접 해야 합니다. @vue/cli: 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다. https://simplevue.gitbook.io/intro/01.-vue-cli 아래 명령어로 vue-..
Vue.js란? - 2023년 Vue.js의 장점과 단점 이 글은 아래 글을 번역한 글입니다. https://www.trio.dev/blog/why-use-vue-js What Is Vue.js? The Pros and Cons of Vue.js in 2023 - Trio Developers Vue.js is a JavaScript framework for building user interfaces (UIs) and single-page applications (SPAs). Find out more about Vue.js and how it works! www.trio.dev Vue.js란 무엇일까요? '점진적(Progressive)' 프레임워크라고 하는 Vue.js는 추가적인 기능들을 점진적으로 채택하는 디자인 철학으로 유명합니다. '점진적 프레임워크'라는..
[NextJS] OAuth 2.0 구글 로그인 API 적용하기 배경 최근 소셜(간편) 로그인은 대부분의 서비스의 필수 기능이 되었습니다. 회원가입 절차가 간단해지고, 사용자가 서비스에 접근하기 쉬워지기 때문에 유저 확보의 장점만 보더라도 개발하지 않을 이유가 없게 된 것이죠. 이러한 로그인은 SSO(Single Sign on)라는 이름으로 불리기도 하는데요, 구글을 예로 들면, 구글 로그인을 한 번 하면, 구글의 여러 서비스에서 따로 로그인 할 필요 없이 구글의 서비스를 이용할 수 있다는 점을 들 수 있습니다. 이러한 로그인은 구글 뿐만 아니라, 페이스북, 네이버, 카카오톡 등의 서비스에서 제공하고 있습니다. SSO는 인증(Authentication)과 인가(Authorization)와 관련이 있는데요, 인증은 로그인과 같이 사용자를 인증하는 과정이며, 인가는 어느..
[NestJS] 채팅 구현하기(with ReactJS) 배경 Web 환경에서 실시간 채팅을 구현하려면 클라이언트와 서버가 양방향 통신을 할 수 있어야 합니다. 따라서, 이 글에선 클라이언트가 서버로 요청을 보내는 단방향 프로토콜인 HTTP 대신, WebSocket 프로토콜을 사용하여 채팅을 구현하는 방법을 소개합니다. 단방향 vs 양방향 HTTP는 단방향 네트워크 프로토콜로 설계되었습니다. 클라이언트와 서버가 연결이 성립된 후, 클라이언트가 서버에게 요청을 보내고, 서버가 클라이언트에게 응답을 하면 연결이 종료됩니다. 여기서 주목할 점은 요청은 항상 클라이언트가 하고, 응답은 항상 서버가 한다는 점입니다. 이런 일방적인 프로세스를 단방향이라고 합니다. 라디오를 예로 들 수 있는데요, 라디오를 들으려면 우리는 라디오를 켭니다(요청). 라디오가 켜지면 해당 주파..

티스토리툴바