javascript
-
WebRTC, WebSocket, Socket.io 비교(feat. Next.js)Next.js 2024. 9. 27. 13:43
실시간 통신은 현대 웹 애플리케이션에서 중요한 요소입니다.비디오 컨퍼런싱, 실시간 채팅, 온라인 게임 등 다양한 분야에서 사용되고 있습니다.이러한 기능을 구현하기 위해서는 적절한 기술 선택이 필요합니다.이번 글에서는 WebRTC, WebSocket, Socket.io의 차이점을 비교하고, Next.js에서 WebRTC를 구현하는 방법을 알아보겠습니다.1. WebRTC, WebSocket, Socket.io란1. WebRTCWebRTC(Web Real-Time Communication)는 브라우저 간에 직접 실시간 미디어 스트림(오디오, 비디오)과 데이터 전송을 가능하게 하는 표준입니다.별도의 플러그인 없이 P2P(peer-to-peer) 통신을 지원하여 지연 시간을 최소화합니다.2. WebSocketWe..
-
구조분해 사용 팁 4가지JS & TS 2024. 9. 14. 13:36
자바스크립트의 구조분해 할당(Destructuring)을 더 효율적으로 사용하는 4가지 실전 팁을 소개합니다.1. 기본값 할당하기구조분해를 사용할 때, 배열이나 객체에서 값이 없을 경우 undefined가 할당됩니다.이를 방지하기 위해 기본값을 설정할 수 있습니다.예를 들어, 배열이나 객체에서 값이 없는 경우 기본값을 할당할 수 있습니다.이 방법은 백엔드에서 불완전한 데이터를 받을 때 특히 유용합니다.const [a, b, c = 3] = [1, 2];console.log(c); // 3 (기본값)const {d, e, f = 6} = {d: 4, e: 5};console.log(f); // 6 (기본값)2. 나머지 연산자 사용배열이나 객체에서 필요한 부분만 추출하고, 나머지 값을 하나의 변수에 담을 ..
-
Javascript ES15(ECMAScript 2024) 문법정리JS & TS 2024. 8. 14. 18:01
ES13에 대한 글을 작성한 지 얼마 안 된 것 같은데 벌써 ES15가 정식 출시하였습니다.JavaScript의 최신 표준인 ECMAScript 2024 (ES15)에서는 개발자들이 더욱 강력한 기능들을 활용할 수 있도록 다양한 새로운 기능들이 도입되었습니다.아래에서는 ES15의 주요 기능들을 정리하고, 각 기능에 대해 ES15 이전과 이후의 코드를 비교해 보겠습니다.1. Object 및 Array 그룹화Object.groupBy() 및 Array.prototype.groupBy() 메서드를 사용하면 객체나 배열의 요소를 특정 조건에 따라 그룹화할 수 있습니다.예를 들어, 다음과 같이 과일 목록을 양에 따라 그룹화할 수 있습니다.(참고로 이번에 추가된 메서드는 원래 Array 프로토타입 메서드로 있었으나..
-
2024년 JavaScript 트렌드Tip 2024. 7. 26. 12:50
1. TypeScript의 대두TypeScript는 JavaScript의 정적 타입 추가 버전으로, 코드 품질과 유지 보수성을 높이는데 큰 역할을 하고 있습니다.TypeScript는 큰 규모의 프로젝트에서 특히 유용하며, 2024년에도 그 인기는 계속될 것입니다.2. WebAssembly 통합WebAssembly(Wasm)는 여러 언어로 작성된 코드를 웹 브라우저에서 거의 네이티브 속도로 실행할 수 있게 해줍니다.이는 계산 집약적인 작업을 처리하는 웹 애플리케이션에 이상적이며, JavaScript와의 통합으로 더 많은 기회를 제공할 것입니다.3. 서버리스 컴퓨팅서버리스 아키텍처는 인프라 관리의 복잡성을 줄여주며, JavaScript는 AWS Lambda와 Azure Functions 같은 클라우드 플..
-
웹 접근성 개선을 위한 가이드Tip 2024. 6. 21. 13:25
웹 접근성은 장애를 가진 사람들이 웹 사이트를 쉽게 사용할 수 있도록 보장합니다.여기에는 시각, 청각, 운동 및 인지 장애가 있는 사람들이 포함됩니다.윤리적 책임을 넘어, 웹 접근성은 법적 요구 사항을 충족하고 비즈니스 이점을 제공합니다.1. 웹 접근성의 중요성웹 접근성은 윤리적 이유뿐만 아니라 법적 요구 사항을 충족하고 비즈니스 기회를 확장하는 데도 중요합니다.예를 들어, 미국의 ADA(Americans with Disabilities Act)는 웹 접근성을 규제합니다.2. 웹 접근성의 주요 원칙1) 인식 가능성(Perceivable)정보는 사용자가 인식할 수 있는 방식으로 제공되어야 합니다. 예를 들어, 시각 장애인을 위해 이미지나 비디오에 텍스트 대체 설명을 제공합니다.2) 운영 가능성(Operab..
-
자바스크립트 비동기 프로그래밍 패턴JS & TS 2024. 5. 28. 17:27
자바스크립트는 비동기 작업을 처리하기 위해 다양한 프로그래밍 패턴을 제공합니다.비동기 프로그래밍은 특히 네트워크 요청, 파일 입출력, 타이머 등 시간이 오래 걸리는 작업을 효율적으로 처리하는 데 유용합니다.이번 글에서는 자바스크립트의 주요 비동기 프로그래밍 패턴인 콜백, 프로미스, async/await, 그리고 RxJS에 대해서도 간단하게 소개하겠습니다.1. 콜백 (Callback)콜백은 가장 기본적인 비동기 프로그래밍 패턴입니다.함수가 실행된 후 호출될 함수를 매개변수로 전달하여 비동기 작업이 완료된 후 실행됩니다.function fetchData(callback) { setTimeout(() => { callback('데이터를 가져왔습니다'); }, 1000);}fetchData((messa..
-
Git 기초 마스터하기 - 1편 브랜치 전략Git 2023. 12. 27. 14:09
Git의 브랜치는 메인 개발 라인에서 벗어나 다른 이들에게 영향을 주지 않고 독립적으로 작업할 수 있게 해 줍니다. 기능, 수정, 실험 관리에 필수적입니다. 첫 번째로 Git을 사용할 때 가장 기본이 되는 브랜치 전략에 대해 알아보겠습니다. 1. Feature Branch Workflow 각각의 새로운 기능은 자체 브랜치에서 개발되며, 최종적으로 메인 브랜치로 병합됩니다. git checkout -b feature/new-feature-name # 기능 작업 git commit -am "새로운 기능 추가" git checkout main git merge feature/new-feature-name 2. Gitflow Workflow 프로젝트 릴리스를 중심으로 한 엄격한 브랜치 모델. 피처, 개발, 릴리..
-
Javascript ES13 문법정리JS & TS 2023. 12. 4. 18:10
1. Top-level await(최상위 await) 지금까지 JavaScript에서는 await 키워드를 async 함수 내에서만 사용할 수 있었습니다. 그러나 ECMAScript 2022에서는 최상위 모듈에서도 Promise를 기다리기 위해 await 키워드를 사용할 수 있게 되었습니다. 이를 통해 부모 모듈의 실행이 자식 모듈의 실행이 완료될 때까지 기다리게 됩니다. // before await Promise.resolve(console.log("Inkoop")) // SyntaxError: await is only valid in async function const print = async () => { await Promise.resolve(console.log("Inkoop")) } prin..