김 양의 멋따라 개발따기

JavaScript !! (느낌표 두 개) 완전 정리: 왜 쓰고, 언제 위험할까?

개발따라김양 — Mon, 19 Jan 2026 12:53:41 +0900

1) !와 !!의 의미

!value : 부정(논리 NOT)

value를 truthy/falsy로 평가한 뒤 결과를 뒤집는다.
결과 타입은 항상 boolean이다.

!!value : boolean으로 강제 변환(정규화)

!를 두 번 적용해서 뒤집고 다시 뒤집음 → “참/거짓 여부만” 남긴다.
결과는 무조건 true 또는 false.

2) truthy / falsy 한 번에 정리

JS에서 조건문은 boolean이 아니어도 동작하고, 값은 크게 두 종류로 평가된다.

falsy (조건문에서 false 취급)

false
0, -0
0n (BigInt)
"" (빈 문자열)
null
undefined
NaN

truthy (그 외 전부 true 취급)

"0" (문자열)
"false" (문자열)
[] (빈 배열)
{} (빈 객체)
function() {} 등…

포인트: 빈 배열/빈 객체도 truthy다

3) !!를 쓰는 이유 (장점)

1) 타입을 boolean으로 “고정”

설정값이 1, "Y", 객체 같은 형태로 들어올 수 있을 때도
한 번 !!로 플래그 형태(booleans)로 정규화할 수 있다.

2) 조건문/비교에서 실수 줄이기

아래처럼 엄격 비교를 하거나, 다른 함수에 넘길 때도 안정적이다.

3) “없으면 false” 기본값 처리

값이 없으면 undefined → !!undefined는 false라서
기본 OFF 동작을 쉽게 만든다.

4) BUT: !!가 “정확한 의미”를 보장하진 않는다 (주의)

!!는 값의 의미를 해석하지 않고, JS의 truthy/falsy 규칙만 적용한다.

✅ 결론:

!!는 타입 일관성에는 도움
하지만 "false", "0" 같은 값이 들어오면 의도와 다른 결과가 될 수 있음

5) 한 줄 요약

!!value는 값을 boolean(true/false)로 강제 변환한다.
조건문에서 타입 혼란을 줄여주는 장점이 있다.
하지만 "false" 같은 문자열은 truthy라서 의도와 다른 결과가 날 수 있어,
입력이 문자열일 가능성이 있으면 명시적으로 파싱하자.

2.0 + 4.4 + 6.2 + 2.4 = 15.000000000000002 이 되는 자바스크립트의 부동소수점 오차

개발따라김양 — Fri, 21 Nov 2025 15:24:38 +0900

1. 왜 2.0 + 4.4 + 6.2 + 2.4 이 15.000000000000002가 될까?

자바스크립트에서 숫자는 대부분 IEEE 754 64-bit 부동소수점 형식으로 저장돼요.
쉽게 말하면:

고정된 64개의 비트 안에
- 부호(sign) 1비트
- 지수(exponent) 11비트
- 가수(fraction, mantissa) 52비트
  이렇게 나눠서 **“2진수 실수”**를 표현합니다.

문제는 우리가 사용하는 10진수 소수가
**2진수로 “딱 떨어지지 않는 경우가 많다”**는 겁니다.

예를 들어:

1/10 (0.1)
2/10 (0.2)
4.4, 6.2, 2.4 …

이런 수들은 2진수로 표현하면 무한히 반복되는 소수가 됩니다.
10진수에서 1/3 = 0.33333... 끝없이 반복되는 것처럼요.

컴퓨터는 52비트까지만 저장할 수 있으니
중간에 잘라서(반올림해서) 저장할 수밖에 없습니다.

그래서 실제로는:

4.4 → 내부적으로는 4.400000000000000355... 비슷한 값
6.2 → 6.200000000000000177... 비슷한 값
이런 식의 아주 살짝 틀어진 값으로 저장됩니다.

2. “콘솔에는 4.4로 보이는데?” → 출력할 때 깎아서 보여줘서 그래요

console.log(4.4)를 찍으면 브라우저는
사람이 보기 좋게 적당한 자리까지만 문자열로 만들어 보여줍니다.

실제 내부 값은 4.400000000000000355...인데
보여줄 때는 4.4로 반올림해서 출력하는 거예요.

하지만 덧셈을 하면 진짜 저장된 값끼리 계산하기 때문에
오차가 눈에 보이는 숫자로 튀어나오는 거죠 → 15.000000000000002

3. 부동소수점의 핵심 개념 정리

2진수 기반 실수 표현
- 컴퓨터는 2진수만 다룰 수 있어서
  실수도 “2진수 소수”로 표현해야 함.
표현 가능한 숫자가 한정됨
- 64비트 안에서만 표현해야 하므로
  대부분의 10진수 소수는 근사값으로 저장됨.
근사값의 합 = 또 다른 근사값
- 오차들이 더해지고 빼이다 보면
  어느 순간 0.30000000000000004, 15.000000000000002 같은 결과 등장.
자바스크립트, 파이썬, 자바, C 등 거의 모든 언어가
기본 실수 타입으로 같은 방식을 씀(IEEE 754).

4. 그래서 실무에서 어떻게 처리하나?

1) 표시할 때 반올림해서 보여주기 (UI용)

점수처럼 소수점 한 자리까지면 충분한 경우:

const sum = Number(value1) + Number(value2) + Number(value3) + Number(value4);

// 소수 1자리까지 반올림해서 숫자로
const rounded = Math.round(sum * 10) / 10;
sumTd.innerText = rounded;

// 항상 한 자리까지 문자열로 보여주고 싶으면
sumTd.innerText = rounded.toFixed(1); // "15.0"

2) 정수로 바꿔서 계산하기 (고정소수점 느낌)

예를 들어 점수가 항상 “소수 첫째 자리까지”라면
10을 곱해서 정수로 계산하는 방법도 자주 써요.

function toInt10(v) {
  return Math.round(Number(v) * 10); // 예: 4.4 -> 44
}

const sum10 =
  toInt10(value1) +
  toInt10(value2) +
  toInt10(value3) +
  toInt10(value4);

const sum = sum10 / 10; // 다시 10으로 나누기
sumTd.innerText = sum.toFixed(1);  // "15.0"

이렇게 하면 내부적으로는 정수 덧셈이라
부동소수점 오차가 훨씬 줄어듭니다.

변수 선언하지 않고 JS에서 HTML 요소 사용할 수 있다?

개발따라김양 — Fri, 26 Sep 2025 09:58:46 +0900

1. 문제 상황

 <button  class="w-[150px] h-[40px] bg-indigo-950 mt-20 mb-20 hover:bg-slate-300 active:bg-slate-300 text-white" type="button" id="faculty_btn">페컬티정보조회</button>

 faculty_btn.addEventListener("click", ()=>{
      //... 동작
    })

faculty_btn이 변수로 선언하지 않고 스크립트에서 동작하고 있는 걸 발견함.

상황이 신기해서 찾아봄

2. 문제 설명

1) 메커니즘: 왜 되는가

브라우저는 문서를 파싱할 때, id(그리고 일부 태그의 name)가 있는 요소들을 **window 객체의 “이름 있는 프로퍼티(named properties)”**로 노출합니다. 그래서 id="faculty_btn" 이 있으면 window.faculty_btn이 생기고, 일반 스크립트에선 전역 식별자처럼 faculty_btn으로 바로 접근이 됩니다. 이를 **“Named access on the Window object”**라고 합니다. HTML Living Standard+2MDN 웹 문서+2

모든 HTML 요소의 id 값은 전역으로 노출됩니다. (예: window.faculty_btn) MDN 웹 문서
name 속성은 일부 태그(form, iframe, img, object, embed)에 한해 전역으로 노출됩니다. (예: <form name="f"> → window.f) MDN 웹 문서

즉, 지금 코드가 “변수 선언 없이” 돌아간 건 브라우저가 자동으로 window.faculty_btn을 제공했기 때문이에요.

2) 언제 되지 않나 (깨지는 조건들)

이 동작은 “레거시 편의 기능”이라 상황에 따라 바로 깨질 수 있습니다.

ES 모듈(<script type="module">): 모듈의 최상위 스코프는 모듈 스코프이므로, **맨바닥 식별자 faculty_btn은 ReferenceError**가 납니다. (대신 window.faculty_btn은 존재할 수 있지만, 맨바닥 식별자로는 접근 안 됨) eslint.org
파싱 순서: 스크립트가 요소 보다 먼저 실행되면 그 시점엔 아직 window.faculty_btn이 없으므로 실패합니다. (DOM 생성 후에만 생김)
이름 충돌: 전역의 다른 속성/함수 이름과 겹치면(예: open, name 등) 헷갈리거나 접근 자체가 달라질 수 있습니다. (이 때문에 사양도 “의존하지 말라”고 경고) HTML Living Standard
중복 id(유효하지 않은 HTML): 같은 id가 여러 개면, 사양상 그 이름으로 접근하면 **단일 요소가 아닌 HTMLCollection**이 반환될 수 있어 코드가 깨질 수 있습니다. HTML Living Standard

3) 이건 ‘변수’가 아니다 (미묘한 차이)

faculty_btn은 let/const/var로 만든 변수 바인딩이 아니라, window의 동적 프로퍼티에 더 가깝습니다.

예시:즉, 맨바닥 식별자 해석 규칙과 window 프로퍼티가 섞여 동작하기 때문에, 유지보수/도구(린터·번들러) 관점에서 취약해집니다. 사양도 “이 방식에 의존하면 깨지기 쉽다(brittle)”고 못박고 있어요. HTML Living Standard
// HTML 어딘가에 <button id="faculty_btn"></button> 존재 console.log(window.faculty_btn === document.getElementById('faculty_btn')); // true let faculty_btn = 123; console.log(faculty_btn); // 123 (이제는 '변수'가 우선) console.log(window.faculty_btn); // <button ...> (여전히 window엔 요소가 존재)

4) 보안 측면(DOM Clobbering)

이 기능을 악용해, 공격자가 특정 id/name으로 요소를 삽입해 전역 변수/함수를 덮어쓰게(clobber) 만드는 기법이 있습니다. 예컨대 어떤 코드가 전역 config를 기대할 때, <a id="config" href=...> 같은 마크업으로 흐름을 교란할 수 있습니다. 그래서 보안 가이드들도 이 기능에 의존하지 말라고 권고해요. OWASP Cheat Sheet Series+1

5) 실무 권장 패턴 (당장 적용 팁)

항상 명시적으로 선택

document.addEventListener("DOMContentLoaded", () => { const facultyBtn = document.getElementById("faculty_btn"); // ✅ facultyBtn?.addEventListener("click", () => { /* ... */ }); });

헷갈리는 전역 이름 피하기
open, name, status 같은 전역과 겹치는 id를 피하고, 변수명도 openBtn, nameInput처럼 구체적으로.
중복 id 금지
유효한 HTML 유지(한 문서에 같은 id는 1개).
모듈을 쓰면 더 안전
점진적으로 <script type="module">로 옮기면 “맨바닥 식별자 = 전역” 패턴이 차단되어 버그가 줄어듭니다. (필요 시 window.faculty_btn처럼 명시적으로 접근) eslint.org

핵심 요약

왜 되나? id가 자동으로 window의 이름 있는 프로퍼티로 노출되기 때문. HTML Living Standard+1
하지만 모듈/파싱순서/이름충돌/중복id 등에서 쉽게 깨지고, 보안 리스크도 있다. HTML Living Standard+1
그래서 실전에서는 항상 getElementById/querySelector로 변수 선언해서 쓰는 게 정석. MDN 웹 문서

JavaScript - Pinch Zoom 보완하기

개발따라김양 — Thu, 24 Jul 2025 17:44:16 +0900

1. 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PinchZoom Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

    .pinch-zoom-container {
      width: 500px;
      height: 500px;
      position: relative;
      overflow: hidden;
      border: 2px solid salmon;
    }

    .pinch-zoom img {
      width: 100%;
      height: auto;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="pinch-zoom-container" id="screen">
    <div class="pinch-zoom">
      <img src="./kitten-tall.jpg" alt="Zoomable" id="target">
    </div>
  </div>
<script>
const target = document.getElementById('target');
const screen = document.getElementById('screen');
touchInit(screen, target);

function touchInit(screen, target) {
  const state = { x: 0, y: 0, scale: 1 };

 const setState = ({ x, y, scale }) => {
    const containerRect = screen.getBoundingClientRect();
    const containerWidth = containerRect.width;
    const containerHeight = containerRect.height;

    const img = target;
    const imgRatio = img.naturalWidth / img.naturalHeight;

    const baseWidth = containerWidth;
    const baseHeight = containerWidth / imgRatio;

    const scaledWidth = baseWidth * scale;
    const scaledHeight = baseHeight * scale;

    let clampedX = x;
    let clampedY = y;

    if (scaledWidth <= containerWidth) {
        clampedX = (containerWidth - scaledWidth) / 2;
    } else {
        const minX = containerWidth - scaledWidth;
        clampedX = Math.min(0, Math.max(minX, x));
    }

    if (scaledHeight <= containerHeight) {
        clampedY = (containerHeight - scaledHeight) / 2;
    } else {
        const minY = containerHeight - scaledHeight;
        clampedY = Math.min(0, Math.max(minY, y));
    }

    state.x = clampedX;
    state.y = clampedY;
    state.scale = scale;

    target.style.transform = `translate(${clampedX}px, ${clampedY}px) scale(${scale})`;
    target.style.transformOrigin = '0 0';
    };


  const getState = () => state;

  pinchZoomAndDrag({ screen, setState, getState });
}

function pinchZoomAndDrag({ screen, setState, getState }) {
  let isDragging = false;
  let lastTouch = null;

  screen.addEventListener('touchstart', (ev) => {
    if (ev.touches.length === 1 && getState().scale > 1) {
      isDragging = true;
      lastTouch = ev.touches[0];
    } else {
      isDragging = false;
    }
    touchStartHandler(ev);
  });

  screen.addEventListener('touchmove', (ev) => {
    if (isDragging && ev.touches.length === 1) {
      const current = ev.touches[0];
      const dx = current.clientX - lastTouch.clientX;
      const dy = current.clientY - lastTouch.clientY;
      const { x, y, scale } = getState();
      setState({ x: x + dx, y: y + dy, scale });
      lastTouch = current;
      ev.preventDefault();
    } else {
      touchMoveHandler(ev, (info) => handlePinch(info, setState, getState));
    }
  });

  screen.addEventListener('touchend', (ev) => {
    isDragging = false;
    touchEndHandler(ev);
  });

  screen.addEventListener('touchcancel', (ev) => {
    isDragging = false;
    touchEndHandler(ev);
  });
}

function handlePinch({ zoom, centerX, centerY }, setState, getState) {
  if (zoom === 0) return;

  const { x, y, scale } = getState();
  const zoomWeight = 0.018;
  const nextScale = scale + (zoom > 0 ? zoomWeight : -zoomWeight);
  const clampedScale = Math.min(Math.max(nextScale, 1), 3);

  const biasX = ((centerX - x) * (clampedScale / scale)) - (centerX - x);
  const biasY = ((centerY - y) * (clampedScale / scale)) - (centerY - y);

  const nextX = x - biasX;
  const nextY = y - biasY;

  setState({ x: nextX, y: nextY, scale: clampedScale });
}

let prevDiff = -1;
const evHistory = [];
let requestId = null;

function touchStartHandler(ev) {
  const touches = ev.changedTouches;
  if (evHistory.length + touches.length <= 2) {
    for (let i = 0; i < touches.length; i++) {
      evHistory.push(touches[i]);
    }
  }
}

function touchEndHandler(ev) {
  const touches = ev.changedTouches;
  for (let i = 0; i < touches.length; i++) {
    const touch = touches[i];
    const index = evHistory.findIndex(cached => cached.identifier === touch.identifier);
    if (index > -1) evHistory.splice(index, 1);
  }
  if (evHistory.length < 2) prevDiff = -1;
}

function touchMoveHandler(ev, onPinch) {
  if (ev.cancelable && evHistory.length === 2) ev.preventDefault();

  const touches = ev.changedTouches;
  for (let i = 0; i < touches.length; i++) {
    const touch = touches[i];
    const index = evHistory.findIndex(cached => cached.identifier === touch.identifier);
    if (index !== -1) {
      evHistory[index] = touch;

      if (
        evHistory.length === 2 &&
        evHistory[0] && evHistory[1] &&
        typeof evHistory[0].clientX === 'number' &&
        typeof evHistory[1].clientX === 'number'
      ) {
        const xDiff = evHistory[0].clientX - evHistory[1].clientX;
        const yDiff = evHistory[0].clientY - evHistory[1].clientY;
        const curDiff = Math.sqrt(xDiff * xDiff + yDiff * yDiff);

        if (prevDiff > 0) {
          const zoom = curDiff - prevDiff;

          if (!requestId) {
            requestId = requestAnimationFrame(() => {
              if (
                evHistory[0] && evHistory[1] &&
                typeof evHistory[0].clientX === 'number' &&
                typeof evHistory[1].clientX === 'number'
              ) {
                const x = (evHistory[0].clientX + evHistory[1].clientX) / 2;
                const y = (evHistory[0].clientY + evHistory[1].clientY) / 2;

                const { top, left } = target.getBoundingClientRect();
                const newX = x - left;
                const newY = y - top;

                onPinch({ zoom, centerX: newX, centerY: newY });
              }
              requestId = null;
            });
          }
        }
        prevDiff = curDiff;
      }
    }
  }
}
</script>

</body>
</html>

집에 가고 싶을 때 퇴근 타이머 만들기

개발따라김양 — Fri, 11 Jul 2025 16:48:57 +0900

퇴근이 너무 하고 싶어서 만든 18시 퇴근 기준 퇴근 타이머 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>퇴근 타이머</title>
  <style>
    body {
      font-family: 'Pretendard', sans-serif;
      text-align: center;
      margin-top: 100px;
      background-color: #f2f2f2;
    }
    #timer {
      font-size: 48px;
      color: #333;
    }
    #message {
      margin-top: 30px;
      font-size: 24px;
      color: green;
    }
  </style>
</head>
<body>
  <h1>퇴근까지 남은 시간 ⏰</h1>
  <div id="timer">계산 중...</div>
  <div id="message"></div>

  <script>
    //   퇴근 시간 설정 (오후 6시)
    const endHour = 18;
    const endMinute = 0;

    function updateTimer() {
      const now = new Date();
      const end = new Date();

      end.setHours(endHour, endMinute, 0, 0); // 오늘 18:00:00

      const diff = end - now;

      if (diff <= 0) {
        document.getElementById("timer").innerText = "00:00:00";
        document.getElementById("message").innerText = "✨ 퇴근하세요! ✨";
        return;
      }

      const hours = String(Math.floor(diff / (1000 * 60 * 60))).padStart(2, "0");
      const minutes = String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, "0");
      const seconds = String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, "0");

      document.getElementById("timer").innerText = `${hours}:${minutes}:${seconds}`;
    }

    setInterval(updateTimer, 1000);
    updateTimer(); // 즉시 실행
  </script>
</body>
</html>

결과물

- 아직 한 시간 넘게 남았다....

Index DB 사용해보기

개발따라김양 — Thu, 19 Jun 2025 13:28:16 +0900

1. Index DB

Index DB 는 브라우저에 데이터를 로컬 저장할 수 있는 API로, 오프라인 앱, 캐시, 장바구니 데이터 저장, PWA 등에 자주 사용됩니다.

IndexedDB는 사용자의 브라우저에 데이터를 영구적으로 저장할 수 있는 방법 중 하나입니다. IndexedDB를 사용하여 네트워크 상태에 상관없이 풍부한 쿼리 기능을 이용할 수 있는 웹 어플리케이션을 만들 수 있기 때문에, 여러분의 웹 어플리케이션은 온라인과 오프라인 환경에서 모두 동작할 수 있습니다.

2. CRUD

// 1. DB 생성
let db;
const request = indexedDB.open("MyAppDB", 1); // name, version

request.onupgradeneeded = function (event) {
  db = event.target.result;

  // object store 생성 (keyPath는 고유 키)
  const store = db.createObjectStore("users", { keyPath: "id" });

  // 인덱스 생성 (검색 편의용)
  store.createIndex("name", "name", { unique: false });
};

request.onsuccess = function (event) {
  db = event.target.result;
  console.log("IndexedDB 연결 완료");
};

request.onerror = function (event) {
  console.error("IndexedDB 에러:", event.target.error);
};


// Create
function addUser(user) {
  const tx = db.transaction("users", "readwrite");
  const store = tx.objectStore("users");
  const request = store.add(user); // user = { id: 1, name: "철수" }

  request.onsuccess = () => console.log("사용자 추가 완료");
  request.onerror = () => console.error("추가 실패");
}


//Read
function getUser(id) {
  const tx = db.transaction("users", "readonly");
  const store = tx.objectStore("users");
  const request = store.get(id);

  request.onsuccess = () => {
    console.log("조회된 사용자:", request.result);
  };
}


//Delete
function deleteUser(id) {
  const tx = db.transaction("users", "readwrite");
  const store = tx.objectStore("users");
  store.delete(id);
}

출처 : https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB

IndexedDB 사용하기 - Web API | MDN

IndexedDB는 사용자의 브라우저에 데이터를 영구적으로 저장할 수 있는 방법 중 하나입니다. IndexedDB를 사용하여 네트워크 상태에 상관없이 풍부한 쿼리 기능을 이용할 수 있는 웹 어플리케이션을

developer.mozilla.org

CKEDITOR - 글자 크기 옵션 늘리기

개발따라김양 — Mon, 28 Apr 2025 14:38:52 +0900

1. 문제 상황

CKEDITOR을 사용하던 중 글자 크기 옵션 늘려달라는 요청을 받음

그러나 라이브러리 자체에 글자 크기를 직접 입력 받는 방식은 없었음

2. 해결 방법

옵션을 추가하여 글자 크기를 선택할 수 있도록 코드를 짬

///ckeditor/plugins/fontSizeInput/plugin.js

CKEDITOR.plugins.add('fontSizeInput', {
    init: function(editor) {
        editor.ui.addRichCombo('FontSizeInput', {
            label: '글자 크기',
            title: '글자 크기',
            toolbar: 'styles',
            panel: {
                css: [ editor.config.contentsCss ],
                multiSelect: false,
                attributes: { 'aria-label': 'Font Size' }
            },

            init: function() {
                // 기본 폰트 사이즈 옵션을 설정할 수도 있음
                this.startGroup('글자 크기');
                this.add('50px', '50px', '50px');
                this.add('54px', '54px', '54px');
                this.add('58px', '58px', '58px');
                this.add('60px', '60px', '60px');
                this.add('64px', '64px', '64px');
                this.add('68px', '68px', '68px');
            },

            onClick: function(value) {
                editor.applyStyle(new CKEDITOR.style({ element: 'span', attributes: { 'style': 'font-size:' + value } }));
            }
        });
    }
});

//config.js

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
    config.enterMode = CKEDITOR.ENTER_BR;
	config.extraPlugins = 'fontSizeInput'; //외부 플러그인 추가!
	config.toolbarGroups = [
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
		{ name: 'forms', groups: [ 'forms' ] },
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
		{ name: 'links', groups: [ 'links' ] },
		{ name: 'insert', groups: [ 'insert' ] },
		{ name: 'styles', groups: [ 'styles' ] },
		{ name: 'colors', groups: [ 'colors' ] },
		{ name: 'tools', groups: [ 'tools' ] },
		{ name: 'others', groups: [ 'others' ] },
		{ name: 'about', groups: [ 'about' ] }
	];

	config.removeButtons = 'Source,Save,Templates,NewPage,ExportPdf,Preview,Print,PasteFromWord,RemoveFormat,CopyFormatting,NumberedList,BulletedList,Indent,Outdent,Blockquote,BidiLtr,BidiRtl,Language,Flash';
};

크기 옆에 글자 크기 옵션이 생겨 좀 더 세분화해서 글자 크기 선택 가능해짐!

JavaScript - 핀치줌(Pinch Zoom) 구현하기

개발따라김양 — Fri, 27 Dec 2024 13:19:48 +0900

1. html 코드

<div id="screen">
     <img  id="target" src="" style="transform: scale(1) translate(0px, 0px);">   
</div>

2. JavaScript 코드

 function touchInit(targetElement) {
    zoomStatus = true;
  
    let startX = 0, startY = 0;
    let offsetX = 0, offsetY = 0;
    let scale = 1;  // 초기 스케일
    let isDragging = false;
    let initialDistance = 0;
  
    let touchCenterX = 0, touchCenterY = 0; // 터치 중심점
    const maxScale = 2;  // 최대 확대 배율 설정
  
    // 기준값 설정
    const baseTranslateX = 270;
    const baseTranslateY = 270;
  
    // 요소의 위치 정보
    const rect = targetElement.getBoundingClientRect();
    const elementOffsetX = rect.left; // 요소의 X 위치
    const elementOffsetY = rect.top;  // 요소의 Y 위치
  
    // 값 제한 함수
    function clamp(value, min, max) {
      return Math.max(min, Math.min(value, max));
    }
  
    // 거리 계산 함수
    function getDistance(touches) {
      const [touch1, touch2] = touches;
      const deltaX = touch2.clientX - touch1.clientX;
      const deltaY = touch2.clientY - touch1.clientY;
      return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
    }
  
    // 터치 시작
    targetElement.addEventListener('touchstart', (event) => {
      if (event.touches.length === 2) {
        // 핀치 줌 시작
        initialDistance = getDistance(event.touches);
  
        // 중심점 계산 (요소의 위치를 기준으로 보정)
        const touch1 = event.touches[0];
        const touch2 = event.touches[1];
        touchCenterX = ((touch1.clientX + touch2.clientX) / 2) - elementOffsetX;
        touchCenterY = ((touch1.clientY + touch2.clientY) / 2) - elementOffsetY;
      } else if (event.touches.length === 1) {
        // 드래그 시작
        isDragging = true;
        startX = event.touches[0].clientX - offsetX;
        startY = event.touches[0].clientY - offsetY;
      }
    });
  
    // 터치 이동
    targetElement.addEventListener('touchmove', (event) => {
      if (event.touches.length === 2) {
        // 핀치 줌 동작
        const currentDistance = getDistance(event.touches);
        const zoomFactor = currentDistance / initialDistance;
  
        // 스케일 업데이트 및 제한
        scale = clamp(scale * zoomFactor, 1, maxScale); // 확대 범위 제한
        initialDistance = currentDistance;
  
        // 중심점 기준 확대 조정
        offsetX = (scale - 1) * (baseTranslateX - touchCenterX);
        offsetY = (scale - 1) * (baseTranslateY - touchCenterY);
  
        // 이동 경계 제한 추가
        const minOffsetX = -((scale - 1) * baseTranslateX);
        const maxOffsetX = (scale - 1) * baseTranslateX;
        const minOffsetY = -((scale - 1) * baseTranslateY);
        const maxOffsetY = (scale - 1) * baseTranslateY;
  
        offsetX = clamp(offsetX, minOffsetX, maxOffsetX);
        offsetY = clamp(offsetY, minOffsetY, maxOffsetY);
  
        // 변환 적용
        targetElement.style.transform = `scale(${scale}) translate(${offsetX}px, ${offsetY}px)`;
      } else if (event.touches.length === 1 && isDragging) {
        // 드래그 동작
        offsetX = event.touches[0].clientX - startX;
        offsetY = event.touches[0].clientY - startY;
  
        // 이동 경계 제한
        const minOffsetX = -((scale - 1) * baseTranslateX);
        const maxOffsetX = (scale - 1) * baseTranslateX;
        const minOffsetY = -((scale - 1) * baseTranslateY);
        const maxOffsetY = (scale - 1) * baseTranslateY;
  
        offsetX = clamp(offsetX, minOffsetX, maxOffsetX);
        offsetY = clamp(offsetY, minOffsetY, maxOffsetY);
  
        // 변환 적용
        targetElement.style.transform = `scale(${scale}) translate(${offsetX}px, ${offsetY}px)`;
      }
    });
  
    // 터치 종료
    targetElement.addEventListener('touchend', () => {
      isDragging = false;
    });
  }

PHPWord - 여러 문서 파일(docx)을 하나의 문서(docx)로 병합하기

개발따라김양 — Fri, 6 Dec 2024 14:21:10 +0900

1. 문제 상황

여러 문서 파일을 하나의 문서 파일로 병합해야 했습니다.

2. 문제 해결

PHPWord 라이브러리를 사용했습니다.
코드

<?php 

require_once '/vendor/autoload.php'; // 라이브러리 경로

use PhpOffice\PhpWord\PhpWord;
use PhpOffice\PhpWord\IOFactory;



// PhpWord 인스턴스 생성
$phpWord = new PhpWord();

// 파일 경로 배열 생성
$fileArray = [] // 파일 경로 배열

// 각 파일을 PhpWord로 로드하고 병합
foreach ($fileArray as $file) {
    if (!file_exists($file)) {
        echo "파일을 찾을 수 없습니다: $file\n";
        continue;
    }

    try {
        $source = IOFactory::load($file);
        if (!$source) {
            echo "파일 로드 실패: $file\n";
            continue;
        }
        $sections = $source->getSections();

        // 섹션별로 문서에 추가
        foreach ($sections as $section) {
            $newSection = $phpWord->addSection();
            foreach ($section->getElements() as $element) {
                $newSection->addElement(clone $element);
            }
        }
    } catch (Exception $e) {
        echo "문서 처리 중 오류 발생: " . $e->getMessage() . "\n";
    }
}

// 병합된 문서를 저장
$outputFile = __DIR__ . '/abstract_All.docx';

try {
    $objWriter = IOFactory::createWriter($phpWord, 'Word2007');
    $objWriter->save($outputFile);
    echo "문서 병합 성공: $outputFile\n";
} catch (Exception $e) {
    echo "문서 저장 중 오류 발생: " . $e->getMessage() . "\n";
}

PHPWord - docx 파일을 화면에 보이게 하기

개발따라김양 — Thu, 5 Dec 2024 12:52:04 +0900

1. 문제상황

docx 파일을 입력 받아 저장시키는 상황에서 화면에서 파일을 페이지로 띄워야 했습니다.
PHPWord 라이브러리를 알게 되어 적용시켰습니다.

2. 문제 해결

1. PHPWord 설치하기

composer require phpoffice/phpword

2. 경로 받아와서 화면에 보이기

<?php
// Composer를 통해 PHPWord 라이브러리 사용
require_once '../vendor/autoload.php'; // 라이브러리 위치

$docxFilePath = isset($_GET['file']) ? $_GET['file'] : '기본 파일 경로'; //파일 경로 동적 할당

if (file_exists($docxFilePath)) {
    try {
        $phpWord = \PhpOffice\PhpWord\IOFactory::load($docxFilePath);
        $htmlWriter = \PhpOffice\PhpWord\IOFactory::createWriter($phpWord, 'HTML');

        ob_start();
        $htmlWriter->save('php://output');
        $htmlContent = ob_get_clean();

        ?>
        <!DOCTYPE html>
        <html lang="ko">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>DOCX 파일 보기</title>
            <link rel="stylesheet" href="./css/style.css">
        </head>
        <body style="width: 100%;">
            <div class="docx_wrap">
                <?= $htmlContent; ?>
            </div>
        </body>
        </html>
        <?php
    } catch (Exception $e) {
        echo "<p>PHPWord 변환 중 오류 발생: " . $e->getMessage() . "</p>";
    }
} else {
    echo "<p>파일이 존재하지 않습니다: $docxFilePath</p>";
}
?>