alswl alswl

❓ WebView ❓모바일 애플리케이션이나 데스크톱 애플리케이션 내에서 웹 콘텐츠를 표시할 수 있는 컴포넌트이다. WebView는 웹 브라우저와 유사한 기능을 가지고 있으며, HTML, CSS, JavaScript로 작성된 웹 페이지를 애플리케이션 내부에서 표시하고 상호작용할 수 있다. 📌 WebView의 주요 특징 📌애플리케이션 내에서 웹 페이지 표시WebView는 앱 내에서 외부 웹 페이지를 로드하거나 로컬에 있는 HTML 파일을 표시할 수 있다. 이를 통해 네이티브 애플리케이션과 웹 콘텐츠를 통합하여 사용할 수 있다. 하이브리드 애플리케이션WebView는 하이브리드 앱을 만들 때 주로 사용된다. 하이브리드 앱은 네이티브 앱과 웹 앱의 장점을 결합한 형태로, 네이티브 코드와 웹 기술(HTML, C..

❓ SWC(Speedy Web Compiler) ❓SWC(Speedy Web Compiler)는 JavaScript/TypeScript 컴파일러이자 번들러이다. 이는 성능 향상을 목표로 개발이 되었는데, Rust로 작성이 되어 있다.TypeScript와 JSX를 포함한 최신 JavaScript 기능을 빠르게 변화할 수 있는 성능을 제공한다. 🤔 SWC는 왜 개발이 되었는가 🤔프론트엔드 개발을 해본 사람이라면, Babel을 들어봤을 거다.JavaScript 생태계에서는 Babel을 주로 사용하는데, Babel은 JavaScript로 작성되어 있기에, 컴파일 속도가 느려질 수 있다.특히나 대규모 프로젝트에서 빌드 시간이 상당히 길어질 수 있다.💡 [참고] Babel 💡: Babel은 JavaScrip..

개발에 있어서 test라는 걸 생각해봤을 때 내가 아는 건 블랙박스 테스트, 화이트박스 테스트와 같은 내용들이다.정보처리기능사 준비를 하면서 공부를 했던 내용이었는데, 어느 정도 느낌만 기억이 나고 자세한 내용까지는 기억이 나지 않았다. 그런데 딱 프론트엔드에서 진행해야할 테스트는 뭐고, 어떤 식으로 진행해야 하는가를 생각해보면 잘 생각은 나지 않아서 다시 조사해보고자 한다. ✅ 내가 알고 있거나 생각하는 테스트 ✅ 프론트엔드에서 테스트를 진행한다  이걸 생각했을 때, 딱 떠오르는 테스트는 E2E 테스트이다.물론, 단위 테스트나 UI 테스트 같은 것도 들어보기도 했지만 직접 해본 적은 없다. E2E는 사용자가 어떤 식으로 서비스를 접근하고 사용하게 될지를 시나리오로 작성하고, 시나리오에 맞춰서 테스트를 ..

사실 거의 처음 들어보는 것과 다름 없었던 개념이었던 Web Worker. 기본적으로 큰 틀은 알겠어도, 각각의 자료마다 설명하고자 하는 내용이 달랐던 부분이 많았다.그래서 이해하는 데까지 많은 시간이 소요된 글 중 하나이다. ❓Web Workers❓Web Workers는 스크립트 연산을 웹 애플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술이다. 이 기능을 통해 웹 애플리케이션은 사용자 인터페이스(UI)를 차단하지 않고도 복잡한 연산을 수행할 수 있다.특히, 무거운 작업을 분리된 스레드에서 처리하면서 스레드가 멈추거나 느려지는 현상을 방지할 수 있다. 📌 Web Worker 개념 📌웹 워커를 생성할 때는 Worker() 등의 생성자로 생성한다. 웹 워커에서 실행..

❓Virtual DOM(가상 DOM) ❓웹 애플리케이션에서 UI 업데이트를 효율적으로 처리하기 위해 사용하는 개념이다. Virtual DOM은 브라우저의 실제 DOM(Document Object Model)을 추상화한 JavaScript 객체로, 변경 사항을 효과적으로 반영하고 성능을 최적화하는 역할을 한다. 📌 Virtual DOM의 주요 개념 📌1️⃣ DOM의 문제점브라우저의 실제 DOM은 매우 복잡하며, 변경할 때마다 성능 비용이 많이 든다.DOM의 요소를 변경하면 브라우저는 전체 페이지의 재렌더링을 수행해야 하므로, 대규모 애플리케이션의 경우 성능 저하를 야기할 수 있다. 2️⃣ Virtual DOM의 원리Virtual DOM은 실제 DOM의 가벼운 복사본이다. JavaScript로 메모리 내..

❓ TypeScript ❓JavaScript의 모든 기능을 포함하면서도 정적 타입 시스템과 다양한 기능을 추가 제공하는 프로그래밍 언어이다. 즉, JavaScript의 단점을 보완하여 만들어진 언어로, 엄격한 문법을 지원한다.  📌 TypeScript의 특징 📌정적 타입(Type System)TypeScript는 변수나 함수의 매개변수, 반환 값에 타입을 명시할 수 있다. JavaScript와 다르게 타입을 지정함으로써, 개발 중 타입 오류를 미리 확인할 수 있다는 장점이 있다.let message: string = "TypeScript";message = 36; 위와 같은 코드에서는 오류가 발생하는데, 그 이유는 'string'으로 설정된 message에 'number' 타입인 36을 할당하려고 하..

JavaScript에서 배열을 다루는 메소드들은 매우 다양하다.각각의 메소드는 특정한 작업을 수행하며, 배열의 요소를 추가, 삭제, 변형, 조회하는 데 사용된다. 다양한 메소드들이 존재하지만 그중에 비슷한 기능을 하는 것들이 있다.비슷하게 동작하는 메소드들을 비교하는 형태로 메소드들을 알아보도록 하자. 📌 JavaScript 배열(array) 📌동일한 유형의 여러 값을 하나의 변수에 저장할 수 있는 특수한 객체 타입이다. 배열은 순서가 있는 값의 컬렉션으로 각 값은 index를 사용해 접근할 수 있다.배열이 객체의 특수한 형태이지만, 주로 순차적인 데이터를 다루는 데 사용된다. 즉, 배열은 객체의 일종이기에, 배열의 요소에 인덱스를 통해 접근하는 것은 객체의 프로퍼티에 키로 접근하는 것과 유사하다.?..

❓ WebSocket ❓Web Socket은 두 프로그램 간의 메시지 교환을 위한 통신 방법으로 W3C와 IETF에 의해 표준화된 프로토콜이다. 특히, WebSocket을 지원하는 브라우저에서는 WebSocket 프로토콜을 통해 양방향 통신(Full-Duplex)을 구현할 수 있다.이는 클라이언트와 서버가 서로에게 데이터를 동시에 주고받을 수 있는 구조인데, 일반적인 HTTP 통신의 경우 클라이언트가 요청을 보내는 경우에만 서버가 응답하는 단방향 통신 구조로 이루어져 있다. 즉, WebSocket을 사용하면 실시간으로 데이터를 주고받을 수 있으며, 서버 또는 클라이언트 측에서 데이터를 보낼 때 지연 시간을 최소화하고 효율적인 양방향 통신을 구현할 수 있다. 📌 WebSocket의 특징 📌1️⃣ 양방향..