오늘 찾은 오류의 경우 기존 php7.4버전일 때의 Twave에서는 나타나지 않던 오류이다.

우선 프로필 수정 시 회원 여분필드가 넘어가지 않아서 회원 어분필드 자체가 초기화되는 오류가 발생했다.

따라서 이를 해결해주기 위해 Twave thme/mobile/skin/member/profile_form.php의 27번 째 줄 아래에 다음과 같은 코드를 추가하였다.

    <!-- 여분필드 Hidden 입력 시작 -->

위치 상으로는

    <input type="hidden" name="mb_nick" value="<?php echo get_text($member['mb_nick']) ?>">

아래에 추가하면 된다.

또한 프로필 수정 이후 계속 회원 가입 폼(register_form.php)로 넘어가는 오류가 발생하여,

/bbs/profile_form.php에서 register_form_update.php로 업데이트 하는 부분을 profile_form_update.php로 바꿔주고,

register_form_update.php를 복제 후 profile_form_update.php로 이름을 변경해준 뒤, 프로필 수정 완료 이후 리다이렉트 되는 경로를 '.G5_HTTP_BBS_URL.'/register_form.php에서 '.G5_HTTP_BBS_URL.'/member_profile.php?mb_id='.$mb_id.'으로 바꿔주었다.

5월 초, PHP 7.4에서 PHP 8.2로 업데이트하고 나서 접속자 기록을 확인하던 중,

예상치 못한 급격한 트래픽 증가가 발생하여 이 글을 쓰게되었다.

지난 3-4개월간 사이트 일일 접속자 수는 약 2,000명(±150명) 수준으로 안정적이었다.

4월달 까지만 해도 일 방문자는 약 1900~2500 명 정도로 안정적으로 유지되어왔다.

(사실 지난 2024년을 기준으로 한다면 작년 평균 일일 방문자 약 1000명 보다 두 배나 증가한 수치이긴 하다만, 1월 후반부터 1천명 후반대에서 2천명 중반대 정도로 안정적인 일일 방문자 수치가 유지되었기에 안정적이라 셈치겠다.)

그런데, 아래의 그래프를 한 번 보자.

php7.4에서 8.2로 업데이트 다음날 5월 7일에 8,071명, 이틀날인 5월 8일에는 8,530명으로 방문자가 급증했다.

이는 23년~ 후반에 비정상적인 최대 일일 방문자 2700명의 약 3배이며, 24년 후반의 4천명을 두 배 가량 뛰어넘는 수치이다. 아무리 내가 운영중인 사이트라고 해도 솔직히 글도 그렇게 많지도 않고 유명하지도 않은 사이트이다. 최근에 백링크가 새로 생길 행동도 하지 않았다. 그렇기에 비정상적인 것이다.

보통 24년 말 이후로 매달 4-5만 명 정도가 접속했는데, PHP 8.2 업데이트 이후 5월 1일부터 5월 7일까지만 해도 벌써 3만 명 가까이 되는 방문자가 접속했다. 이는 기존 평균 방문자 수와 비교했을 때 상당한 증가다.

이러한 원인을 정확히 분석하고 싶지만, 나는 전지전능하지도, 코딩을 잘하지도 않는 그저 채찍피티 코드 짜집퍼이기 때문에 간단하게 원인 분석만 적어본다.

원인 분석을 해보자면 다음과 같이 추측할 수 있다.

1.  페이지 로딩 속도 개선:

2. 서버 부하 감소:

어느 쪽이든, 이번 업데이트가 사이트 성능과 사용자 경험에 긍정적인 영향을 미친 것은 분명하다. 앞으로 트래픽 패턴을 지속적으로 모니터링하면서 서버 자원을 적절히 조정할 필요가 있겠다.

sudo apt install php8.2

기타 라이브러리 설치

sudo apt install php8.2-fpm php8.2-mysql php8.2-cli php8.2-xml php8.2-zip php8.2-common -y

그누보드5 요구사항 설치

sudo apt install php8.2-curl php8.2-gd php8.2-iconv

기존 php7.4 중지

sudo systemctl stop php7.4-fpm

php8.2 시작

sudo systemctl start php8.2-fpm

php 버전 변경

sudo update-alternatives --config php

입력 후 8.2 버전에 해당하는 숫자를 입력 후 Enter

nginx 기준.

/etc/nginx/sites-available/

에서 도메인 명으로 된 파일이 있으면 해당 파일을, 없으면 default를 수정하기 위해

vi /etc/nginx/sites-available/default

를 입력(default는 예시)

접속하여

fastcgi_pass unix:/run/php/php7.4-fpm.sock;

의 php7.4부분을 아래와 같이 8.2로 변경

fastcgi_pass unix:/run/php/php8.2-fpm.sock;

:wq! 를 입력하여 강제 저장 후 나가기

설정 오류 확인:

nginx -t

nginx 재시작

sudo systemctl restart nginx

그누보드5를 php8.2로 업데이트할 때 주의사항:

php7.4버전에 비해 문법에 대해 엄격해져 php버전 변경 이후 흰 화면이 출력될 수 있다. 이 때는

(nginx 기준)

tail -f /var/log/nginx/error.log

를 입력하여 오류사항을 확인하고 하나하나 수정해야한다.

<style>

  /* 이미지 편집 모달 스타일 */

  .image-editor-modal {

    display: none;

    position: fixed;

    z-index: 1000;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.85);

    align-items: center;

    justify-content: center;

    font-family: 'Arial', sans-serif;

  }

  .image-editor-content {

    background-color: #ffffff;

    padding: 10px;

    border-radius: 20px;

    max-width: 90%;

    text-align: center;

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

    width: 90%;

    max-width: 360px;

  }

  .editor-canvas {

    border-radius: 8px;

    border: 1px solid #e6e6e6;

    width: 100%;

    height: auto;

    margin-bottom: 10px;

  }

  /* 버튼 스타일 */

  .image-editor-buttons {

    display: flex;

    justify-content: space-around;

    margin-top: 10px;

  }

  .image-editor-buttons button {

    background-color: #2792fb;

    color: #fff;

    border: none;

    border-radius: 20px;

    padding: 8px 12px;

    cursor: pointer;

    font-size: 13px;

    transition: background-color 0.3s ease;

    flex: 1;

    margin: 0 5px;

  }

  .image-editor-buttons button:hover {

    background-color: #2792fb;

  }

  /* 취소 버튼 별도 스타일 */

  #cancelEdit {

    background-color: #dbdbdb;

    color: #262626;

  }

  #cancelEdit:hover {

    background-color: #c1c1c1;

  }

</style>

<!-- 이미지 편집 모달 구조 -->

<div class="image-editor-modal" id="imageEditorModal">

  <div class="image-editor-content">

    <canvas id="editorCanvas" class="editor-canvas"></canvas>

    <div class="image-editor-buttons">

      <button type="button" id="rotateLeft">회전</button>

      <button type="button" id="applyChanges">적용</button>

      <button type="button" id="cancelEdit">취소</button>

    </div>

  </div>

</div>

<script>

  const imageEditorModal = document.getElementById('imageEditorModal');

  const editorCanvas = document.getElementById('editorCanvas');

  const ctx = editorCanvas.getContext('2d');

  let scale = 1;

  let rotation = 0;

  let img = new Image();

  let offsetX = 0;

  let offsetY = 0;

  let initialDistance = null;

  const canvasSize = 300; // 1:1 비율을 위한 고정 크기

  const snapThreshold = 20; // 중앙으로 스냅되는 거리 설정

  document.getElementById('reg_mb_img').addEventListener('change', function(event) {

    const file = event.target.files[0];

    if (file) {

      const reader = new FileReader();

      reader.onload = function(e) {

        imageEditorModal.style.display = 'flex';

        document.body.style.overflow = 'hidden'; // 모달 열릴 때 스크롤 잠금

        img.src = e.target.result;

        img.onload = function() {

          editorCanvas.width = canvasSize;

          editorCanvas.height = canvasSize;

          applyTransformations();

        };

      };

      reader.readAsDataURL(file);

    }

  });

  function applyTransformations() {

    ctx.clearRect(0, 0, editorCanvas.width, editorCanvas.height);

    ctx.save();

    ctx.translate(editorCanvas.width / 2 + offsetX, editorCanvas.height / 2 + offsetY);

    ctx.scale(scale, scale);

    ctx.rotate((rotation * Math.PI) / 180);

    const imgAspect = img.width / img.height;

    const canvasAspect = editorCanvas.width / editorCanvas.height;

    let renderWidth, renderHeight;

    if (imgAspect > canvasAspect) {

      renderHeight = editorCanvas.height;

      renderWidth = img.width * (renderHeight / img.height);

    } else {

      renderWidth = editorCanvas.width;

      renderHeight = img.height * (renderWidth / img.width);

    }

    ctx.drawImage(img, -renderWidth / 2, -renderHeight / 2, renderWidth, renderHeight);

    ctx.restore();

  }

  function snapToCenter() {

    if (Math.abs(offsetX) < snapThreshold) {

      offsetX = 0;

    }

    if (Math.abs(offsetY) < snapThreshold) {

      offsetY = 0;

    }

  }

  // 핀치 줌 및 드래그 기능

  editorCanvas.addEventListener('touchstart', function(e) {

    e.preventDefault(); // 기본 동작 방지

    if (e.touches.length === 1) { // 드래그 시작

      lastX = e.touches[0].clientX;

      lastY = e.touches[0].clientY;

    } else if (e.touches.length === 2) { // 핀치 줌 시작

      initialDistance = getDistance(e.touches[0], e.touches[1]);

    }

  });

  editorCanvas.addEventListener('touchmove', function(e) {

    e.preventDefault(); // 기본 동작 방지

    if (e.touches.length === 1) { // 드래그 이동

      const deltaX = e.touches[0].clientX - lastX;

      const deltaY = e.touches[0].clientY - lastY;

      lastX = e.touches[0].clientX;

      lastY = e.touches[0].clientY;

      offsetX += deltaX;

      offsetY += deltaY;

      snapToCenter(); // 이동할 때마다 자석 기능 적용

      applyTransformations();

    } else if (e.touches.length === 2) { // 핀치 줌

      const newDistance = getDistance(e.touches[0], e.touches[1]);

      if (initialDistance) {

        const scaleChange = newDistance / initialDistance;

        scale = Math.max(0.5, Math.min(3, scale * scaleChange)); // 0.5 ~ 3배율 사이로 제한

        initialDistance = newDistance;

        applyTransformations();

      }

    }

  });

  editorCanvas.addEventListener('touchend', function(e) {

    e.preventDefault();

    if (e.touches.length === 0) { // 터치 종료

      initialDistance = null;

      snapToCenter(); // 터치가 끝날 때도 자석 기능 적용

      applyTransformations();

    }

  });

  function getDistance(touch1, touch2) {

    const dx = touch2.clientX - touch1.clientX;

    const dy = touch2.clientY - touch1.clientY;

    return Math.sqrt(dx * dx + dy * dy);

  }

  // 모달 외부의 터치 및 스크롤 방지

  document.addEventListener('touchmove', function(e) {

    if (imageEditorModal.style.display === 'flex') {

      e.preventDefault(); // 기본 동작 및 외부 스크롤 방지

    }

  }, { passive: false });

  // 회전 버튼

  document.getElementById('rotateLeft').addEventListener('click', function() {

    rotation += 90;

    applyTransformations();

  });

  // 적용 버튼 클릭 시 동작

  document.getElementById('applyChanges').addEventListener('click', function(event) {

    event.preventDefault();

    editorCanvas.toBlob(function(blob) {

      const fileInput = document.getElementById('reg_mb_img');

      const file = new File([blob], 'edited_profile.png', { type: 'image/png' });

      const dataTransfer = new DataTransfer();

      dataTransfer.items.add(file);

      fileInput.files = dataTransfer.files;

      document.getElementById('profileImage').src = editorCanvas.toDataURL();

      imageEditorModal.style.display = 'none';

      document.body.style.overflow = ''; // 모달 닫힐 때 스크롤 복구

    });

  });

  document.getElementById('cancelEdit').addEventListener('click', function(event) {

    event.preventDefault();

    imageEditorModal.style.display = 'none';

    document.body.style.overflow = ''; // 모달 닫힐 때 스크롤 복구

  });

</script>

( 현재 dsclub에서 사용중인 테마의 버전은 TwaveCv2 - Twave 커스텀 버전2 입니다 )

<?php

if(!$member['mb_id']) alert('로그인후 이용해주세요', G5_BBS_URL.'/login.php'); // 로그인안하면 로그인페이지로

include_once(G5_LIB_PATH.'/latest.lib.php');

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨

add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/style.css">', 0);

// 현재 URL의 mb_id 파라미터 값을 가져옵니다.

$current_mb_id = isset($_GET['mb_id']) ? $_GET['mb_id'] : '';

// 회원의 mb_id 값

$member_mb_id = $member['mb_id'];

// mb_id가 일치하지 않는 경우

if ($current_mb_id !== $member_mb_id) {

    // 메시지를 출력합니다.

    echo "<script>alert('타인의 개인 프로필 탭은 확인할 수 없습니다.');</script>";

    // 현재 도메인을 자동으로 가져옵니다.

    $current_domain = ($_SERVER['HTTPS'] ? "https://" : "http://") . $_SERVER['HTTP_HOST'];

    // 도메인으로 리다이렉트합니다.

    echo "<script>window.location.href = '$current_domain';</script>";

    }

?>


/profile.php (profile.skin.php)

<?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

include_once(G5_LIB_PATH.'/latest.lib.php');

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨

add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/style.css">', 0);

$member_mb_id = get_member($row['mb_id']);

// 현재 URL의 mb_id 파라미터 값 가져오기

$current_mb_id = isset($_GET['mb_id']) ? $_GET['mb_id'] : null;

// 회원 정보의 mb_id

$member_mb_id = $member['mb_id'];

// mb_id가 일치하는지 확인

if ($current_mb_id === $member_mb_id) {

    // 일치할 경우 리다이렉트

    header("Location: /bbs/member_profile.php?mb_id=" . urlencode($member_mb_id));

    exit; // 스크립트 종료

}

?>