gongboo

  Capacitor는 웹 네이티브 앱을 빌드하기 위한 오픈 소스 네이티브 런타임입니다. JavaScript, HTML, CSS로 크로스 플랫폼 iOS, Android, Progressive Web Apps를 만드세요. https://capacitorjs.com/ 🚀 **Capacitor란?** ------------------ **Capacitor**는 **웹 기반 애플리케이션을 네이티브 앱으로 감싸고, 네이티브 기능(GPS, 블루투스, 푸시 알림 등)에 접근할 수 있게 해주는 프레임워크**야.\ 📌 **Ionic 팀에서 개발한 오픈소스 프로젝트**로, **Cordova보다 현대적인 웹-네이티브 브릿지** 역할을 수행해. ### ✅ **Capacitor의 핵심 특징** 1.  **웹을 그대로 네이티브 앱(Android, iOS)으로 변환 가능** 2.  **네이티브 기능 (GPS, 카메라, 푸시 알림, 파일 시스템 등) 쉽게 연동 가능** 3.  **PWA, 웹, 네이티브 앱을 하나의 코드베이스에서 운영 가능** 4.  **Cordova보다 현대적이고, 최신 웹 기술과 잘 호환됨** 5.  **React, Vue, Angular, Svelte 같은 프레임워크와도 호환됨** * * * * * ✅ **Capacitor 사용 방법** --------------------- ### 📌 1️⃣ **설치 및 프로젝트 설정** 먼저, Capacitor를 설치해야 해. ``` npm install @capacitor/core @capacitor/cli ``` 📌 **웹 프로젝트를 Capacitor 기반으로 초기화** ``` npx cap init "MyApp" "com.example.myapp" ``` 이제 Capacitor가 `capacitor.config.ts` 또는 `capacitor.config.json` 파일을 생성하면서 앱을 설정함. * * * * * ### 📌 2️⃣ **네이티브 플랫폼 추가** Ca...

인프런 강의 캡쳐 방어 캡쳐 안되길래 신기했음. 웹인데도  DRM 으로 강의 캡쳐를 막아서 캡쳐 도구를 감지하는게 신기 --- 인프런 강의에서 캡쳐 방어가 되어 있는 걸 보면, 보안 수준을 꽤 신경 쓴 것 같네요. 웹 환경에서도 캡쳐를 막는 방법에는 여러 가지가 있는데, 보통 DRM(Digital Rights Management)이나 JavaScript 기반 방어 기법을 조합해서 사용하는 경우가 많아요. ### 📌 **웹에서 캡쳐 방어하는 방법들** 1.  **DRM 적용 (Widevine, PlayReady, FairPlay 등)**     -   동영상 자체를 암호화하고, 특정 인증을 받은 환경에서만 재생되도록 설정.     -   이 방식이면 캡쳐 소프트웨어에서도 녹화가 안 될 가능성이 큼.     -   보통 비디오 스트리밍 서비스에서 사용. 2.  **CSS 및 JavaScript 방어**     -   `pointer-events: none;`을 이용해 우클릭 및 개발자 도구 방지.     -   `visibility:hidden` 같은 스타일을 사용하여 특정 조건에서 콘텐츠 숨기기.     -   `oncontextmenu="return false;"`로 우클릭 방지. 3.  **Canvas Fingerprinting 및 Tamper Detection**     -   `Canvas API`를 이용해 브라우저의 스크린샷 감지.     -   DevTools에서 특정 키 입력을 감지하고 강제 종료하거나, `debugger` 키워드로 디버깅 방해. 4.  **Blur 처리 및 Overlay 적용**     -...

fontello 폰텔로 웹폰트 다운 받는사이트 올린 벡터 이미지를 폰트화 시키는 기능도 있음 https://fontello.com/ 올린 벡터 이미지를 폰트화 시키는 기능 설명 위키 https://github.com/fontello/fontello/wiki/How-to-use-custom-images  # fontello 와 utf 체계 UTF-8(유니코드) 체계를 이해하는 것은 생각보다 복잡할 수 있지만, 아이콘 폰트와 같은 간단한 용도로 사용하려면 몇 가지 기본 개념만 이해하면 돼요. Fontello를 활용해 아이콘 폰트를 만들 때, UTF 코드 체계를 잘 활용하면 원하는 아이콘을 쉽게 포함시킬 수 있습니다. 우선, UTF와 Fontello의 관계를 설명하고, UTF를 활용하여 아이콘을 추가하는 방법을 정리해 볼게요. ### 1. Fontello와 UTF 체계 이해하기 Fontello는 SVG 파일을 기반으로 웹폰트(icon font)를 생성하는 도구예요. 즉, SVG 아이콘 파일을 업로드하면 Fontello가 해당 아이콘을 유니코드(UTF-8) 체계에 매핑하여 웹에서 사용할 수 있는 폰트 파일(`.woff`, `.ttf` 등)과 CSS 파일을 만들어줘요. Fontello에서 아이콘 폰트를 사용할 때, 각각의 아이콘은 특정한 유니코드 값(예: `U+E001`)에 매핑돼요. 이 매핑된 유니코드 값을 사용하여 CSS에서 `content` 속성으로 아이콘을 불러올 수 있어요. ### 2. 기본 유니코드 체계 이해하기 유니코드 체계는 전 세계의 문자와 기호를 통합하여 표현하기 위한 표준 체계예요. UTF-8은 유니코드를 효율적으로 인코딩하여 사용하게 해 주는 방식 중 하나고요. - 유니코드는 보통 `U+XXXX` 형식으로 표현됩니다. 여기서 `XXXX`는 16진수 코드값이에요.   - 예를 들어, `U+0041`은 대문자 `A`의 유니코드 값입니다.   - `U+1F600`은 😀 이모티콘의 유니코드 값입니다. - 웹에서 사용할 때는 HT...

  <img alt="" data-original-height="1186" data-original-width="1942" height="195" src="https://blogger.googleusercontent.com/img/a/AVvXsEgu3JFY7JVt0fv1K7rA27RXa7K-8LNV0cS3CMLogN4oSGEG0Xihoz0dNmqWOt7dABHiQVH2Lf1mAbVXQmHzg9qTgvl842qYDLlRpp08RrQCsGl_pAE3bh8jlyawGH0kP79ZoZ_WFpEJh76uPDjVjmp3IBCAF2A18PatgomOZ4pIRIRfnAqqwsw10iVPjrzo" width="320" /> 사용자들이 **www**로 웹페이지에 접근하려고 할 때, 이를 자동으로 **www 없는** 페이지로 리디렉션할 수 있습니다. 이를 해결하기 위한 몇 가지 방법을 소개하겠습니다. 주로 웹 서버 설정을 통해 www로 시작하는 URL을 제거할 수 있습니다. ### **1. Apache 웹 서버에서 리디렉션 설정하기** Apache를 사용하는 경우 `.htaccess` 파일을 사용하여 **www 리디렉션**을 설정할 수 있습니다. 아래의 코드를 `.htaccess` 파일에 추가하면, 모든 www 요청을 non-www로 리디렉션할 수 있습니다. ```apache RewriteEngine On RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] RewriteRule ^(.*)$ https://%1/$1 [R=301,L] ``` 이 코드는: - **RewriteEngine On**: 리라이트 엔진을 활성화합니다. - **RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]**: www로 시작하는 모든 요청을 찾습니다. - **RewriteRule ^(.*)$ https://%1/$1 [R=301,L]**: 해...

 모바일 형식의 게임을 완전 웹으로 만들어 둔거는 처음봐서 신기하다. 신기해서 개발자 도구 열어보니까 어플라이 권유를 콘솔 로그로 띄운다 ㅋㅋ g123이라는 일본회사인듯 로그인 안해도 그냥 캐쉬에 저장해서 진행할 수 있는 형태로 내가 좋아하는 로그인 없는 서비스 웹으로만 개발한건지는 모르겠는데 신기하네 리액트임 여기서 개발한 웹게임이 여러개인듯 https://h5.g123.jp/game/queensblade?lang=en

 웹을 앱처럼 만드는 기술로는 주로 "프로그레시브 웹 앱(Progressive Web Apps, PWA)"가 있습니다. PWA는 웹 기술(HTML, CSS, JavaScript)을 사용하여 만든 애플리케이션으로, 전통적인 웹사이트와는 달리 모바일 앱과 유사한 사용자 경험을 제공합니다. 이 기술은 웹사이트가 오프라인에서도 작동하게 하고, 푸시 알림과 같은 모바일 앱의 기능을 사용할 수 있게 해줍니다. PWA의 주요 특징은 다음과 같습니다: 1. **응답성**: 다양한 디바이스와 화면 크기에 맞게 콘텐츠가 조정됩니다. 2. **오프라인 작동**: 서비스 워커(Service Workers)를 사용하여 네트워크 연결이 없어도 기본적인 기능을 사용할 수 있습니다. 3. **앱처럼 느껴지는 인터랙션**: 사용자는 웹사이트를 모바일 앱처럼 홈 화면에 추가하고 전체 화면 모드로 사용할 수 있습니다. 4. **푸시 알림**: 모바일 앱처럼 푸시 알림을 통해 사용자와 소통할 수 있습니다. 이러한 PWA 기술 덕분에 사용자들은 별도의 앱 다운로드 없이 웹 브라우저를 통해 앱과 유사한 경험을 할 수 있게 되었습니다. 프로그레시브 웹 앱(PWA)에서 푸시 알림을 구현하는 것은 몇 가지 주요한 기술 요소를 포함합니다. 이 기능을 구현하기 위해 주로 사용되는 기술은 서비스 워커(Service Worker), 웹 푸시 API(Web Push API), 그리고 알림 API(Notification API)입니다. 아래에 각 기술 요소에 대해 간략히 설명드리겠습니다: 1. **서비스 워커(Service Worker)**:    - 서비스 워커는 웹 페이지와 별개로 백그라운드에서 실행되는 스크립트입니다.    - 네트워크 요청을 가로채고, 캐싱 및 오프라인 기능을 제공합니다.    - 푸시 알림을 받기 위한 핵심 요소로, 서버에서 보내는 푸시 메시지를 수신합니다. 2. **웹 푸시 API(Web Push API)**:   ...

크로스 사이트 요청을 방지하기 위해 사용되는 주요 기술 중 하나는 CORS(Cross-Origin Resource Sharing)입니다. CORS는 서버에서 응답 헤더를 설정함으로써, 특정 웹 사이트나 웹 페이지가 해당 서버의 리소스(API 포함)에 접근할 수 있도록 허용하는 기능을 제공합니다. CORS를 설정하면 서버는 다음과 같은 HTTP 응답 헤더를 포함하여 보냅니다: ``` Access-Control-Allow-Origin: https://example.com ``` 위의 예제에서, 서버는 `https://example.com` 도메인에서의 요청만 해당 서버의 리소스에 접근하도록 허용하게 됩니다.  또한, 여러 도메인을 허용하려면 서버 로직을 구현하여 올바른 `Origin` 헤더를 기반으로 동적으로 `Access-Control-Allow-Origin` 값을 설정할 수 있습니다. 하지만, 보안 상의 이유로 `Access-Control-Allow-Origin` 헤더의 값으로 `*`를 사용하여 모든 웹사이트를 허용하는 것은 주의가 필요합니다. CORS 설정은 주로 백엔드 서버나 API 서버의 설정에서 수행되며, 사용하는 프레임워크나 서버 종류에 따라 구성 방법이 다를 수 있습니다. 이러한 CORS 정책을 통해, API 사용을 특정 사이트로 한정하는 것이 가능합니다. CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 동작하는 보안 메커니즘입니다. CORS는 웹 페이지가 다른 도메인의 리소스에 접근할 수 있도록 허용하는 규칙을 정의합니다. 그러므로, CORS 자체는 모바일 앱과 같은 웹 브라우저 외의 클라이언트에 대한 접근 제한에는 적합하지 않습니다. 특정 앱으로 API 접근을 제한하려면 다른 방법을 사용해야 합니다: 1. **API 키**: 각 앱에 고유한 API 키를 제공하고, 이 키를 사용하여 요청을 인증하도록 서버를 설정합니다. 서버는 유효한 API 키를 가진 요청만 처리하도록 합니다. 그러나 이 방법은 완벽하진 않...

 WAS (Web Application Server)는 웹 애플리케이션 및 웹 서비스를 호스팅하는 서버입니다. 백엔드 개발의 일부분을 포함하긴 하지만, "백엔드" 자체를 의미하는 것은 아닙니다. WAS의 주요 기능은 다음과 같습니다: 1. **HTTP 요청 처리**: 클라이언트 (웹 브라우저나 다른 클라이언트 앱)로부터의 HTTP 요청을 수신하고 적절한 응답을 반환합니다. 2. **비즈니스 로직 실행**: WAS는 데이터베이스 연결, 비즈니스 로직 처리, 데이터 처리 등의 서버 측 로직을 실행합니다. 3. **애플리케이션 생명 주기 관리**: WAS는 웹 애플리케이션의 생명 주기를 관리하고, 필요한 리소스 (예: 데이터베이스 연결)를 할당하거나 회수합니다. 4. **보안**: WAS는 웹 애플리케이션의 보안을 지원하는 기능, 예를 들어, 인증과 인가, SSL/TLS를 제공합니다. 보통 백엔드 시스템은 다음과 같은 주요 컴포넌트로 구성됩니다: 1. **Web Server (예: Apache, Nginx)**: HTTP 요청을 수신하고 정적 파일 (HTML, CSS, JS, 이미지 등)을 제공하는 서버입니다. 2. **Web Application Server (예: Tomcat, WebLogic, JBoss, Node.js)**: 동적 콘텐츠 처리와 비즈니스 로직을 실행하는 서버입니다. 3. **Database Server (예: MySQL, PostgreSQL, MongoDB)**: 데이터 저장, 검색, 수정, 삭제 등의 데이터베이스 작업을 처리합니다. WAS는 이 중에서 웹 애플리케이션의 동적 콘텐츠와 비즈니스 로직을 처리하는 역할을 합니다. 그러나 "백엔드"는 WAS 뿐만 아니라 웹 서버, 데이터베이스 서버, API 서버 등 전체 시스템을 포함하는 더 넓은 개념입니다.

### URL (Uniform Resource Locator)과 URI (Uniform Resource Identifier)의 차이 #### URL (Uniform Resource Locator) - URL은 인터넷 상의 자원의 위치를 나타내는 주소입니다. - URL은 자원이 어디에 있는지, 그리고 어떻게 접근할지에 대한 정보를 제공합니다. - 구성 요소: `스킴(scheme)://호스트(host):포트(port)/경로(path)?쿼리(query)#프래그먼트(fragment)` - 예: `https://www.example.com:8080/page?id=1#section2` #### URI (Uniform Resource Identifier) - URI는 인터넷 상의 자원을 식별하는 식별자입니다. - URI는 URL과 URN (Uniform Resource Name)을 포괄하는 더 넓은 개념입니다. - 예: `mailto:example@example.com` (URL 아님, URI임), `https://www.example.com/page` (URL이면서 URI임) ### URL과 URI의 관계 - 모든 URL은 URI이지만, 모든 URI가 URL은 아닙니다. - URL은 자원의 위치와 접근 방법을 모두 지정하는 반면, URI는 자원을 단순히 식별만 할 수 있습니다. ### 비슷한 용어 #### URN (Uniform Resource Name) - URN은 자원의 이름을 제공하는 URI의 하위 집합입니다. - URN은 자원의 위치가 아닌, 자원의 이름을 고유하게 식별합니다. - 예: `urn:isbn:0451450523` (책의 ISBN 번호) #### Endpoint - API나 서비스에서 특정 작업을 수행하기 위한 URI 또는 URL을 의미합니다. #### Base URL - API나 웹 서비스에서 공통된 부분의 URL을 의미합니다. - 예: `https://api.example.com/v1` 이후에 특정 경로가 추가됩니다. (`/users`, `/prod...

TLD (Top-Level Domain)와 gTLD (Generic Top-Level Domain)는 도메인 네임 시스템 (DNS)에서 사용되는 용어들입니다. 이 두 용어의 차이와 의미에 대해 살펴보겠습니다: ### TLD (Top-Level Domain): - **정의**: TLD는 인터넷 주소의 마지막 부분 (예: .com, .org, .net)을 나타냅니다. TLD는 도메인 네임 시스템 (DNS)의 가장 높은 수준의 계층 구조에 있습니다. - **종류**:   1. **gTLD (Generic Top-Level Domain)**: 일반적인 목적으로 사용되는 TLD (예: .com, .org, .net).   2. **ccTLD (Country Code Top-Level Domain)**: 특정 국가나 지역을 대표하는 TLD (예: .us for the United States, .kr for South Korea, .jp for Japan).   3. **sTLD (Sponsored Top-Level Domain)**: 특정 커뮤니티나 단체에 의해 후원되는 TLD (예: .edu for educational institutions, .gov for U.S. government entities).   4. **iDNS (Internationalized Domain Names)**: 비영어 스크립트를 사용하는 TLD (예: .中国, .рф). ### gTLD (Generic Top-Level Domain): - **정의**: gTLD는 일반적인 목적으로 사용되는 TLD를 나타냅니다.  - **특징**: gTLD는 일반적으로 조직의 성격이나 목적에 따라 분류됩니다. 가장 흔하게 알려진 gTLD에는 .com, .net, .org 등이 있습니다. - **확장**: 최근에는 많은 새로운 gTLD가 추가되었으며, 이러한 확장으로 인해 브랜드, 도시, 취미 등 다양한 주제의 gTLD를 선택할 수 있게 되었습니다 (예: .app...

  can i use 사이트에 검색하면됨 https://caniuse.com/