폴리프레임

Public Domain Licence, MIT License

폴리프레임 — Fri, 16 May 2025 09:38:48 +0900

Public Domain License와 MIT License는 모두 소프트웨어의 자유로운 사용, 수정 및 배포를 허용하는 라이선스이지만, 몇 가지 중요한 차이점이 있습니다.

Public Domain License (퍼블릭 도메인 라이선스)

저작권 포기: 퍼블릭 도메인은 저작권자가 자신의 저작물에 대한 모든 권리를 포기하고 이를 공중에게 기증하는 것을 의미합니다. 따라서 퍼블릭 도메인으로 배포된 소프트웨어는 누구든지 어떤 목적으로든 자유롭게 사용, 수정 및 배포할 수 있으며, 별도의 라이선스 조항이나 저작권 표시 의무가 없습니다.
법적 불확실성: 일부 국가에서는 저작권자가 명시적으로 저작물을 퍼블릭 도메인으로 양도하는 것이 법적으로 인정되지 않을 수 있습니다. 이 때문에 퍼블릭 도메인과 유사한 효과를 내기 위해 별도의 퍼블릭 도메인 유사 라이선스(예: CC0)가 사용되기도 합니다.

MIT License

허용적 라이선스: MIT 라이선스는 대표적인 허용적(permissive) 오픈소스 라이선스 중 하나입니다. 이는 소프트웨어의 사용, 수정, 배포 및 상업적 이용을 거의 제한 없이 허용합니다.
고지 의무: MIT 라이선스의 주요 조건은 소프트웨어를 복제하거나 배포할 때 저작권 표시와 MIT 라이선스 전문을 포함해야 한다는 것입니다.
면책 조항: MIT 라이선스는 소프트웨어에 대한 어떠한 보증도 제공하지 않으며, 소프트웨어 사용으로 인해 발생하는 문제에 대해 저작자나 배포자가 책임을 지지 않는다는 면책 조항을 포함합니다.

주요 차이점

특징	Public Domain License	MIT License
저작권	저작권자가 모든 권리 포기	저작권은 유지되나, 넓은 범위의 사용 권한을 허용
고지 의무	없음	저작권 표시 및 라이선스 전문 포함 의무 있음
법적 확실성	일부 국가에서 법적 효력이 불확실할 수 있음	비교적 명확하고 널리 인정됨
책임 제한	일반적으로 명시적인 면책 조항 없음 (법률에 따라 해석)	명시적인 면책 조항 포함

WiFiManger web server 코드 와 html 문서 처리

폴리프레임 — Thu, 15 May 2025 13:12:39 +0900

index.h

const char index_html[] PROGMEM = R"rawliteral(<html>...</html>)rawliteral";

esp32_wm_server.ino

#include <WiFiManager.h>
#include <ESPAsyncWebServer.h>
#include <DNSServer.h>
#include <ESPmDNS.h>
#include <Update.h>

#include "index.h"

const char* http_username = "username"; // 웾 접속 용
const char* http_password = "password"; // 웹 접속 용

AsyncWebServer server(80);    // Create an instance of the AsyncWebServer

int nCounter;

void notFound(AsyncWebServerRequest *request) {
  request->send(404, "text/plain", "Not found");
}

void setup() {
    pinMode(LED_BUILTIN, OUTPUT);

    WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP

    // put your setup code here, to run once:
    Serial.begin(115200);
    
    //WiFiManager, Local intialization. Once its business is done, there is no need to keep it around
    WiFiManager wm;
    //wm.resetSettings();

    bool res;
    // res = wm.autoConnect(); // auto generated AP name from chipid
    // res = wm.autoConnect("AutoConnectAP"); // anonymous ap
    res = wm.autoConnect("AutoConnectAP","password"); // password protected ap

    if(!res) {
        Serial.println("Failed to connect");
        // ESP.restart();
    } 
    else {
        Serial.println("connected...yeey :)");
    }

    server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
    if (!request->authenticate(http_username, http_password))
      return request->requestAuthentication();
    request->send_P(200, "text/html", index_html, NULL);
  });
  
    server.on("/adc_value", HTTP_GET, [](AsyncWebServerRequest * request) {
    nCounter ++;
    request->send(200, "text/html", String(nCounter));
  });

      server.on("/led_toggle", HTTP_GET, [](AsyncWebServerRequest * request) {
    Serial.println("LED Toggled!!!");
    digitalWrite(LED_BUILTIN, !digitalRead(LED_BUILTIN));
    request->send(200, "text/html", "");
  });

  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest * request) {
    String inputMessage;
    String inputParam;

    Serial.println(inputMessage);
    request->send(200, "text/html", index_html);
  });
  server.onNotFound(notFound);
  server.begin();
}

void loop() {

}

const char index_html[] : index.html은 문자열 배열호 선언되었음. 이를 통해 HTML 코드가 저장되었음
PROGRAM : PROGMEM은 AVR 기반 마이크로컨트롤러(예: ESP8266, ESP32)에서 플래시 메모리에 데이터를 저장하도록 하는 키워드입니다. 기본적으로 문자열은 RAM에 저장되지만, PROGMEM을 사용하면 플래시 메모리에 저장되어 RAM 사용량을 줄일 수 있습니다. esp32 에는 RAM(SRAM)은 320KB~520KB 제공, Flash Memory는 4 MB ~ 1MB 제공
R"rawliteral(...)"rawliteral" : Raw String Literal이라는 문법입니다. 일반적으로 문자열을 정의할 때 "문자열"처럼 따옴표를 사용하지만, HTML 코드에는 "나 \ 같은 특수문자가 많아 이스케이프(escape) 처리가 필요합니다. 그러나, R"rawliteral(...)rawliteral"을 사용하면 HTML 코드를 그대로 저장할 수 있어 가독성이 높아집니다.

nth-child(5n + 5) 패턴 해석

폴리프레임 — Tue, 13 May 2025 14:07:34 +0900

#sec .dot:nth-child(5n + 5) { 
  width:20px; 
}

위 코드는 sec ID를 갖은 요소안에는 많은 요소가 있습니다. 그 중에 dot 클라스들에서 5번째 단위로 골라 폭을 20px 로 만들라는 명령어 입니다. 여기서 ()안을 방정식으로 생각하고, n을 0 번부터 계속된다고 보면 됩니다. 즉 5X0 + 5 는 5, 5x1 + 5 = 10 이러한 방식으로 5의 배수를 선택하라는 명령입니다.

/* 목록의 두 번째 <li> 선택 */
li:nth-child(2) {
  color: lime;
}

/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */
:nth-child(4n) {
  color: lime;
}

~ (틸트)선택자 , + 선택자 활용

폴리프레임 — Tue, 13 May 2025 13:55:11 +0900

~ (틸트)선택자

CSS에서 ~(틸드)는 일반 형제(General Sibling) 선택자입니다. 즉, 특정 요소의 같은 부모를 가진 형제 요소들 중에서, 뒤에 위치한 요소들만 선택하는 역할을 합니다.

#dots .active.dot ~ .dot {
    background: #555;
}

#dots 내부에서 .active.dot 클래스를 가진 요소 뒤에 위치하는 모든 .dot 요소를 선택하여 background: #555; 스타일을 적용합니다. 즉, 다음 줄 요소들 중에 dot 클래스를 갖은 모든 요소.

+ 선택자

인접 형제 선택자로 뒤에 바로 붙어 있는 .dot 한 개만 적용 됨

.active.dot + .dot { background: #555; }

var(--clr) 전역사용, 개별사용

폴리프레임 — Tue, 13 May 2025 12:25:45 +0900

전역사용

아래의 경우는 모든 요소에서 활용는 되는 경우입니다.

:root {
    --clr: #ff2972; /* 모든 요소에 적용할 색상 */
}

#clock div {
    color: var(--clr);
}

개별사용

 <div id="clock">
        <div id="hr" style="--clr:#ff2972;"></div>
        <div id="min" style="--clr:#fee800;"></div>
        <div id="sec" style="--clr:#04fc43;"></div> 
 </div>
 
 ** css **
#sec,
#min,
#hr { 
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    inset: 0;
    text-align: center;

    color: var(--clr);
}
// 이 경우는 --clr은 개별 3가지 객상으로 분리되어 사용이 됩니다.

normalize.css 와 CssBaseline

폴리프레임 — Mon, 12 May 2025 12:37:53 +0900

normalize.css

브라우저 기본 스타일을 정리하여 모든 브라우저에서 일관된 스타일을 제공하는 css 파일 입니다.
기본적으로 HTML 요소의 스타일을 조정하여 브라우저 간 차이를 줄입니다.
예를 들어, <h1> 태그의 크기나 <button>의 기본 스타일을 통일하는 역할을 합니다.
HTML5 요소 지원 ( <main>, <article> )

활용 방법

1. CDN을 사용하여 적용

HTML 의 <head> 태그 안에 다음 코드를 추가 하면, 별도의 다운로드없이 온라인으로 최신버전을 바로 사용할 수 있음

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

2. 프로젝트에 직접 다운로드하여 적용

공식 사이트에서 normalize.css 파일을 다운호드하여 프로젝트의 css 폴더에 저장한 후, HTML에서 불러옵니다.

<link rel="stylesheet" href="css/normalize.css">

MUI의 CssBaseline

Material UI에서 제공하는 CSS 리셋 컴포넌트입니다.
normalize.css와 유사하지만, Material UI 디자인 시스템에 맞춰 추가적인 스타일을 적용합니다.
모든 브라우저에서 <body>의 기본 마진 제거
폰트 스무딩 적용, 박스 모델 통일 (box-sizing: border-box;) 등 MUI 제공 컴포넌트 활용

활용 방법

1. CssBaseline 을 활용하려면 MUI 라이브러리를 가져와야 합니다.

import CssBaseline from '@mui/material/CssBaseline';

function MyApp() {
  return (
    <>
      <CssBaseline />
      {/* 나머지 애플리케이션 코드 */}
    </>
  );
}

2. 주로 Vite React 프로젝트에서는 main.jsx 에 설치하는 것을 추천합니다.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import { CssBaseline } from '@mui/material'

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <CssBaseline />
    <App />
  </StrictMode>,
)

URL 클래스, URL.createObjectURL()

폴리프레임 — Sun, 9 Feb 2025 18:54:58 +0900

Methods

1. URL.createObjectURL(blob)

브라우저 환경에서 Blob 객체나 File 객체를 나타내는 임시 URL을 생성하는 데 사용됩니다. 이를 통해 바이너리 데이터를 직접 표시하거나 다운로드할 수 있는 URL을 만들 수 있습니다. 이 URL은 메모리에 존재하며, 브라우저를 닫거나 명시적으로 해제하지 않는 한 유효합니다.

const inputElement = document.querySelector('input[type="file"]');

inputElement.addEventListener('change', (event) => {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (file) {
    const objectURL = URL.createObjectURL(file);
    console.log(objectURL); // 생성된 URL 출력
    
    // 예: 이미지를 미리보기로 표시
    const img = document.createElement('img');
    img.src = objectURL;
    document.body.appendChild(img);
  }
});

2. URL.revokeObjectURL(url): 생성된 임시 URL을 해제하여 메모리를 반환합니다.

URL.revokeObjectURL(objectURL);

3. toString(): URL의 문자열 표현을 반환합니다.

console.log(url.toString()); // 'https://example.com/path?name=JohnDoe&age=25#section2'

4. toJSON(): URL의 JSON 표현을 반환합니다.

console.log(url.toJSON()); // 'https://example.com/path?name=JohnDoe&age=25#section2'
// url.href 와 동일

Properties

1. href: 전체 URL 문자열을 반환하거나 설정합니다.

const url = new URL('https://example.com/path?name=JohnDoe&age=25#section2');
console.log(url.href); // 'https://example.com/path?name=JohnDoe&age=25#section2'

2. protocol: URL의 프로토콜을 반환하거나 설정합니다 (예: http:, https:)

console.log(url.protocol); // 'https:'

3. host: URL의 호스트(포트 번호 포함)를 반환하거나 설정합니다.

console.log(url.host); // 'example.com'

4. hostname: 포트를 제외한 호스트 이름을 반환하거나 설정합니다.

console.log(url.hostname); // 'example.com'

5. port: URL의 포트 번호를 반환하거나 설정합니다.

console.log(url.port); // ''

6. pathname: URL의 경로를 반환하거나 설정합니다.

console.log(url.pathname); // '/path'

7. search: URL의 쿼리 문자열을 반환하거나 설정합니다 (시작 ? 포함).

console.log(url.search); // '?name=JohnDoe&age=25'

8. hash: URL의 해시(# 뒤에 오는 부분)를 반환하거나 설정합니다.

console.log(url.hash); // '#section2' 
// #section2 부분을 나타내며, 페이지 내 특정 위치를 지정합니다.

콜론 - 단일 콜론, 이중 콜론

폴리프레임 — Tue, 28 Jan 2025 10:55:35 +0900

단일 콜론 (:) - 의사 클래스 (pseudo-class)

- 의사 클래스는 요소의 특정 상태를 나타내는 데 사용됩니다.

- 예를 들어, :hover는 마우스 커서를 요소 위에 올렸을 때의 상태를 나타냅니다. 일반적으로 의사 클래스는 요소가 특정 상태에 있을 때 스타일을 적용하는 데 사용됩니다. 즉, a:hover는 링크 요소에 마우스를 올렸을 때 스타일을 적용합니다.

이중 콜론 (::) - 의사 요소 (pseudo-element)

- 의사 요소는 요소의 특정 부분을 스타일링하는 데 사용됩니다.

- 예를 들어, ::before는 요소의 시작 부분에 콘텐츠를 삽입하고, ::placeholder는 입력 요소의 자리 표시자 텍스트를 스타일링합니다. 즉, input::placeholder는 입력 필드의 자리 표시자 텍스트의 스타일을 정의합니다.

한 가지 중요한 점은, CSS3 이전에는 의사 요소도 단일 콜론을 사용했지만, CSS3부터는 의사 클래스와 의사 요소를 구분하기 위해 이중 콜론을 사용하기로 정해졌습니다. 따라서 최신 표준을 따르는 것이 좋습니다.

dark mode, light mode 설정 ( 윈도우 )

폴리프레임 — Wed, 8 Jan 2025 13:34:04 +0900

1. 설정 열기

- 윈도우 키 + I 로 설정을 열기

2. 개인 설정

- 선택 창에서 개인 설정을 선택

3. 색

- 왼쪽 메뉴에서 색을 클릭

4. 색 선택

- 색 모드 선택에서 라이트 또는 다크 모드를 선택

활용

@media (prefers-color-scheme: light) { 
	:root { 
      color: #213547; 
      background-color: #ffffff; 
     } 
    a:hover {
      color: #747bff; 
    } 
    button { 
      background-color: #f9f9f9; 
    } 
}

FontLoader()

폴리프레임 — Wed, 8 Jan 2025 13:16:49 +0900

FontLoader()는 Three.js에서 폰트 파일을 로드하여 3D 텍스트를 생성할 수 있게 해주는 로더입니다. 폰트 파일은 보통 JSON 형식으로 저장됩니다. Three.js의 typeface.js 예제에서 폰트 파일을 다운로드할 수 있습니다. 사용 예제는 아래와 같습니다.

const loader = new THREE.FontLoader();
loader.load('path/to/your/font.json', function (font) {
  // 폰트 로딩 후 텍스트 생성
  const textGeometry = new THREE.TextGeometry('Hello, World!', {
    font: font,
    size: 80,
    height: 5,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 8,
    bevelOffset: 0,
    bevelSegments: 5
  });

  const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  const textMesh = new THREE.Mesh(textGeometry, textMaterial);
  scene.add(textMesh);
});

TextGeometry를 생성할 때 여러 가지 옵션을 설정할 수 있습니다:

font: 로드된 폰트 객체
size: 텍스트 크기
height: 텍스트의 깊이
curveSegments: 텍스트 곡선의 세그먼트 수
bevelEnabled: 텍스트의 베벨(경사) 여부
bevelThickness: 베벨의 두께
bevelSize: 베벨의 크기
bevelOffset: 베벨의 오프셋
bevelSegments: 베벨의 세그먼트 수

주의사항

폰트 파일 경로가 올바른지 확인하세요.
로드된 폰트를 사용하는 TextGeometry 옵션들을 잘 설정하세요.
텍스트의 크기와 위치를 조절하여 씬에서 적절히 배치하세요.