개발 공부중

[사이드 프로젝트 회고 #3] 새 글 알림이 두 번 와요

개발자 leelee — Wed, 8 Jul 2026 21:53:08 +0900

2편에서 FCM 웹 푸시를 어떻게 구성했는지 정리했다. 그런데 그 글 마지막에 살짝 흘렸던 문제가 하나 있었다 — 개발 중에 PC 토큰이 정리되지 않은 채 fcm_tokens 테이블에 그대로 남아 있었던 것. 이번 글은 그 잔여 토큰이 실제로 어떤 문제를 일으켰고, 어떻게 찾아서 고쳤는지에 대한 이야기다.

https://console.firebase.google.com/

증상 — 글 하나 등록했는데 알림이 두 번

새 글 알림 기능을 테스트하던 중이었다.

글을 하나 올렸는데, 폰에 알림이 두 개씩 뜨는 거다. 당연히 코드에 버그가 있다고 생각했다.

첫 번째 의심 — 서비스워커

가장 먼저 의심한 건 서비스워커였다. 포그라운드/백그라운드에서 알림을 각각 처리하는 로직이 겹쳐서 중복으로 뜨는 게 아닐까 싶어서, 이것저것 손을 댔다.

showNotification 호출 제거
onBackgroundMessage 핸들러 수정
포그라운드에서 띄우는 Notification 코드 제거

그런데 뭘 바꿔도 증상이 똑같았다. 하나를 지우면 알림이 아예 안 뜨거나, 그대로 두 번 뜨거나 둘 중 하나였다. 서비스워커 쪽 로직을 아무리 뜯어고쳐도 원인에 접근하지 못하고 있다는 느낌이 들었다.

결정적인 힌트 — PC를 끄면 알림이 하나로 줄어든다

계속 테스트하다가 패턴이 하나 보였다.

PC를 켜두면 알림이 2번 온다. PC를 끄면 알림이 1번만 온다.

이 힌트를 보고서야 방향을 잘못 잡고 있었다는 걸 깨달았다. 문제는 서비스워커 코드가 아니라, 애초에 내가 "한 사람"에게 알림을 보낸다고 생각한 것 자체였다.

FCM은 사용자에게 보내는 게 아니라, 토큰(Token)에 보내는 시스템이다. PC Chrome과 iPhone PWA는 같은 계정으로 로그인해 있어도 서로 다른 토큰을 가진다. 그러니 새 글이 등록되면 서버는 이 계정에 연결된 토큰 전부에 푸시를 보내고, PC를 켜두면 PC 토큰으로 간 알림이 PC에서, 폰 토큰으로 간 알림이 폰에서 각각 뜬다. 내 입장에서는 "두 번 왔다"고 느껴지지만, 사실은 각각 다른 기기에 정확히 한 번씩 간 것이었다.

여기까지 이해하고 나니 "PC를 켜두면 2번, 끄면 1번"이라는 현상 자체는 설명이 됐다. 그런데 이상한 점이 하나 남아 있었다. 폰 하나만 켜둔 상태로 테스트할 때도, 가끔 알림이 두 번 오는 경우가 있었던 거다. 기기는 분명 하나인데 왜 두 번이 오는 걸까.

진짜 원인 — 정리되지 않은 옛날 토큰

fcm_tokens 테이블을 직접 열어서 확인해봤다. 그리고 원인을 찾았다.

개발 초기에 테스트하면서, PC에서 '새 글 알림 받기' 버튼을 눌러 토큰을 저장했다. 이후 같은 계정으로 모바일에서도 알림을 허용했는데, 이 과정에서 기존 PC 토큰이 정리되지 않은 채 테이블에 그대로 남아 있었다. 여기에 더해서, 브라우저를 껐다 켜거나 알림 권한을 다시 요청하는 과정에서 토큰이 재발급되는 경우도 있었는데, 이때도 옛날 토큰을 지우지 않고 새 토큰을 그냥 추가로 저장하고 있었다.

즉 테이블 안에는 "이미 유효하지 않거나 중복된 옛날 토큰"들이 계속 쌓이고 있었던 거다. 겉으로는 기기 하나만 쓰는 것처럼 보여도, 실제로는 그 사용자에게 연결된 토큰이 여러 개 저장돼 있었고, send_notification()은 저장된 토큰 전부에 성실하게 알림을 보내고 있었을 뿐이었다.

$stmt = $pdo->prepare("SELECT token FROM fcm_tokens WHERE user_id = :uid");
$stmt->execute([':uid' => $to_user_id]);
$tokens = $stmt->fetchAll(PDO::FETCH_COLUMN);

foreach ($tokens as $token) {
    fcm_send_to_token($token, $title, $message, $url);
}

이 코드 자체는 잘못된 게 없었다. 문제는 fcm_tokens 테이블에 지워졌어야 할 옛날 토큰이 계속 살아있었다는 것이었다.

해결 — 테이블을 정리하다

당장 눈앞의 증상을 없애기 위해 fcm_tokens 테이블을 한 번 초기화했다. 정리하고 나니 중복 알림 증상이 말끔히 사라졌다.

다만 이건 임시방편에 가까웠다. 근본적으로는 토큰을 저장하는 시점에 같은 기기(또는 같은 사용자)의 옛날 토큰을 정리하거나 갱신하는 로직이 필요하다는 걸 이 과정에서 깨달았다. 지금처럼 매번 새로 INSERT만 하는 구조로는, 토큰이 재발급될 때마다 테이블에 쓰레기 데이터가 계속 쌓일 수밖에 없는 구조였다.

돌아보며

처음엔 "알림이 두 번 온다"는 증상 하나를 두고 서비스워커 코드를 확인했다. 그런데 진짜 원인은 코드 로직이 아니라 데이터 관리 쪽에 있었다. FCM이 "토큰 단위로 발송하는 시스템"이라는 걸 이해하는 것과, 그 토큰을 DB에서 어떻게 깨끗하게 관리할지는 완전히 다른 문제였다는 걸 이번에 배웠다.

[사이드 프로젝트 회고 #2] 푸시 기능을 앱 대신 FCM(Firebase Cloud Messaging)으로 해결하기

개발자 leelee — Sun, 5 Jul 2026 16:15:37 +0900

1편에서 닷홈빌더의 한계 때문에 PHP로 새로 사이트를 만들기로 했다. 사이트를 다 완성하고 알림 기능을 추가하기 전에 그다음 고민으로 "이걸 어떤 방식으로 구현할까" 생각해봤다.

알림이 필요하면, 앱을 만들어야 하는 거 아닌가?

새 글 알림, 댓글 알림 기능이 필요하다는 결론을 내리고 나서, 가장 먼저 떠오른 방법은 사실 "앱으로 만들기"였다. 푸시 알림이라는 게 원래 앱에서 흔히 쓰는 기능이라, "그냥 앱 하나 만들면 되지 않을까"라는 생각이 자연스럽게 들었다.

근데 생각해볼수록 앱으로 가는 건 이 프로젝트의 규모와 전혀 맞지 않았다.

안드로이드/iOS 각각 개발해야 하거나, 최소한 크로스플랫폼 프레임워크를 새로 익혀야 한다
앱스토어/플레이스토어 등록 절차와 심사를 거쳐야 한다
이미 PHP로 만든 웹사이트가 있는데, 그걸 앱으로 다시 만드는 건 중복 작업이다

이용자가 적은 익명 글쓰기 사이트 하나에 알림 기능을 붙이려고 앱까지 새로 만드는 건, 배보다 배꼽이 큰 선택이었다.

차라리 네이버 카페 기능을 쓰는게 나을 정도...

아이폰의 "홈 화면에 추가" 기능이 힌트가 됐다

찾아보니 아이폰의 홈 화면에 추가 기능으로 웹사이트를 어플처럼 이용할 수 있었다. 사파리에서 웹사이트를 열고 "홈 화면에 추가"를 누르면, 그 사이트가 마치 하나의 앱처럼 아이콘으로 홈 화면에 생긴다. 이 상태로 열면 브라우저 주소창도 사라지고, 진짜 앱을 켠 것 같은 느낌을 준다.

이렇게 홈 화면에 추가한 상태에서도, 푸시 알림을 받을 수 있을까?

FCM (Firebase Cloud Messaging)

이 질문에 대한 답을 찾다가 Firebase Cloud Messaging(FCM)을 알게 됐다. FCM은 원래 안드로이드/iOS 앱을 위한 푸시 서비스로 많이 알려져 있지만, 웹 푸시(Web Push) 도 지원한다. 그리고 확인해보니 이 웹 푸시가 홈 화면에 추가한 PWA(Progressive Web App) 상태에서도 정상적으로 동작한다는 걸 확인했다.

정리하면 이렇게 방향이 잡혔다.

앱을 새로 만드는 대신, 기존 PHP 웹사이트를 그대로 유지한다
아이폰/안드로이드 사용자는 "홈 화면에 추가"로 앱처럼 쓰게 한다
알림은 FCM 웹 푸시로 처리해서, PC 브라우저와 홈 화면에 추가된 모바일 상태 모두에서 받을 수 있게 한다

이 방향이면 앱스토어 심사도, 별도 앱 개발 비용도 없이 "새 글이 올라오면 알려주는 앱 같은 사이트"를 만들 수 있었다.

좌 온라인 / 우 모바일

푸시 알림 구조

방향을 정하고 나서 실제로 붙인 흐름을 정리하면 이렇다.

사용자
   │
   ▼
'새 글 알림 받기' 버튼 클릭
   │
   ▼
Notification API 권한 요청
   │
   ▼
FCM getToken()
   │
   ▼
fcm_tokens 테이블 저장
   │
   ▼
게시글 작성
   │
   ▼
send_new_post_notification()
   │
   ▼
send_notification()
   │
   ├── notifications 테이블 저장
   │
   └── fcm_tokens 조회
            │
            ▼
     사용자의 모든 토큰 조회
            │
            ▼
     fcm_send_to_token()
            │
            ▼
 Firebase HTTP v1 API
            │
            ▼
      PC / 모바일 푸시

이걸 크게 세 단계로 나눠보면 이렇다.

1. 프론트에서 알림 권한을 요청하고 토큰을 발급받는다.

async function requestNotificationPermission() {
  const permission = await Notification.requestPermission();

  if (permission === "granted") {
    const token = await messaging.getToken({
      vapidKey: "발급받은_VAPID_KEY"
    });

    // 발급받은 토큰을 서버로 전송해서 저장
    fetch("save_token.php", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token })
    });
  }
}

2. 게시글이 등록되면 구독자를 먼저 조회한다. 게시글이 등록됐다고 모든 사용자에게 알림을 보내는 건 아니었다. 게시판을 구독한 사용자만 조회하도록 구현했다. 실제로는 send_new_post_notification()에서 먼저 구독자를 가져온다.

$stmt = $pdo->prepare("
    SELECT user_id
    FROM board_subscriptions
    WHERE board_type = :type
      AND user_id != :writer_id
");

$stmt->execute([
    ':type' => $board_type,
    ':writer_id' => $writer_id
]);

$subscribers = $stmt->fetchAll(PDO::FETCH_COLUMN);

작성자는 제외하고, 구독한 회원에게만 알림을 보내도록 했다.

3. send_notification() 하나에서 모든 알림을 처리하도록 만들었다.

처음에는 게시글 알림, 댓글 알림, 답글 알림마다 각각 FCM을 호출하려고 했다. 그런데 같은 코드가 계속 반복됐다. 그래서 알림 저장 + 푸시 발송을 모두 처리하는 send_notification() 함수를 하나 만들었다. 이 함수는 다음 세 가지를 모두 담당한다.

notifications 테이블 저장
사용자의 FCM 토큰 조회
모든 토큰으로 푸시 발송

4. 먼저 사이트 알림을 저장한다.

푸시만 보내면 사용자가 알림을 놓쳤을 때 확인할 방법이 없다. 그래서 가장 먼저 notifications 테이블에 저장하도록 만들었다.

INSERT INTO notifications
(
    user_id,
    type,
    target_id,
    message,
    url
)

이렇게 저장해두면

사이트 안에서도 알림 목록을 볼 수 있고
읽음 처리도 가능하며
삭제도 할 수 있다.

5. 저장된 모든 토큰으로 푸시를 보낸다. 그다음이 FCM이다.

$stmt = $pdo->prepare("
    SELECT token
    FROM fcm_tokens
    WHERE user_id = :uid
");

$stmt->execute([
    ':uid' => $to_user_id
]);

$tokens = $stmt->fetchAll(PDO::FETCH_COLUMN);

foreach ($tokens as $token) {
    fcm_send_to_token(
        $token,
        $title,
        $message,
        $url
    );
}

여기서 fetchAll()을 쓴 이유는, 한 사용자가 PC와 모바일 두 곳 모두 로그인한 경우 두 기기로 모두 알림을 보내기 위해서였다.

6. 실제 유저가 푸시 알람을 설정하는 방법

상단 클릭 후 푸시 켜기 버튼을 누르면
댓글, 답글, 새 글 알림(+개별페이지에서 클릭 필수)을 받을 수 있습니다.

아이폰은 Safari에서 사이트 접속 후
공유 버튼 → 홈 화면에 추가 → 홈 아이콘으로 실행해야 푸시 알림이 작동합니다.

갤럭시는 Chrome 브라우저에서
푸시 켜기 버튼을 누르면 바로 사용할 수 있습니다.

7. 그런데 이 구조 때문에 버그도 발생했다.

이 방식은 여러 기기를 쓰는 사용자에게는 편리했지만, 개발하면서 테스트를 반복하다 보니 문제가 생겼다. 처음엔 같은 계정으로 PC에서 '새 글 알림 받기' 버튼을 눌러 토큰을 저장했다. 이후 모바일에서도 같은 계정으로 알림을 허용했다. 그런데 개발 과정에서 기존 PC 토큰이 정리되지 않은 채 fcm_tokens 테이블에 그대로 남아 있었다.

당장은 두 기기 모두에 알림이 잘 가는 것처럼 보였지만, 초기화가 제대로 안 된 토큰들이 결국 "알림이 중복으로 오는 버그"로 나타났다.

이 선택이 이후 구현에 준 영향

이 결정은 이후 알림 기능을 구현하는 방식 전체에 영향을 줬다. 앱 하나만 있었다면 "이 사용자에게 보낸다"는 개념으로 끝났을 텐데, "웹사이트 + PWA + FCM" 조합에서는 한 사용자가 여러 토큰(기기)을 가질 수 있다는 걸 구조적으로 감당해야 했다. 바로 위에서 언급한 PC 토큰이 정리되지 않고 남아있던 문제도 결국 이 구조 때문에 생긴 일이었다.

돌아보며

앱을 만들지 않기로 한 선택으로 배포·심사·업데이트 같은 앱 특유의 운영 부담 없이 빠르게 기능을 붙이고 고칠 수 있었다.

개인이 혼자 운영하는 사이드 프로젝트에는 이 쪽이 훨씬 현실적인 선택이었다고 생각한다.

[사이드 프로젝트 회고 #1] 닷홈빌더를 쓰다가 PHP로 다시 제작한 이유

개발자 leelee — Sun, 5 Jul 2026 00:04:42 +0900

이 글은 익명 글쓰기 사이트를 차음에는 닷홈빌더로 제작했다가 PHP로 새로 만들면서 겪은 과정을 정리한 글이다.

원래는 빌더로 만든 사이트가 있었다

최근 친구들과 사용하려고 만든 사이트가 있었다. 익명으로 매달 주제에 맞춰서 글을 올리는 사이트였다. 우리끼리만 편하게 쓸 수 있는 공간을 만들고 싶어서, 간편하고 빠르게 사이트를 띄울 수 있는 닷홈빌더로 먼저 시작했다.

워드프레스를 사용해본 나에게는 닷홈빌더가 익숙했다. 디자인 템플릿 고르고, 어느정도 사이트 구색을 맞춰서 친구들에게 공개하기까지 하루 밖에 안 걸렸다. "일단 사람들이 쓸 수 있는 형태로 빨리 내놓자"는 목표에는 정확히 맞는 선택이었다.

그런데 운영을 해보니 보이는 게 있었다

문제는 사이트를 열어두고 나서부터였다. 가끔 올라오는 글들을 바로 못보고 놓칠 때가 많았다. 나는 scripttable로 최신글을 가져오는 RSS 위젯을 만들어서 확인했다. 근데 친구들에게 하나하나 방법을 설명하고 해주려고 해도 알겠다고 하면서도 귀찮아서 안하니... 처음에는 수동으로 글이 올라오면 단톡방에 알려줬었는데 점점 피곤했다. 특히 이런 익명 게시판형 서비스는 "글이 올라온 걸 바로바로 아는 맛"이 재미의 절반인데 시간이 지나니 글 조회수도 많이 떨어졌다. 결국 이런 사이트는 "알림이 없으면 재방문이 줄어드는" 구조라는 걸 운영하면서 체감했다.

닷홈빌더 안에서 해결할 수 있을까 고민했다

바로 새로 만들자고 결심한 건 아니었다. 먼저 지금 쓰는 빌더 안에서 해결할 방법이 있는지부터 열심히 찾아봤다. 그러다 발견한 게 OneSignal이었다. 웹 푸시를 붙일 수 있게 해주는 서비스다. 무료고.. 워드프레스에서도 사용할 수 있다.

설정을 마치니 구독 알림 팝업까지는 정상적으로 떴다. 여기까지는 순조로웠다. 그런데 정작 구독을 눌러도 푸시가 오지 않았다.

원인을 찾아보니, OneSignal이 웹 푸시를 보내려면 서비스워커 파일을 사이트 루트 폴더에 직접 올려둬야 하는 구조였다. 브라우저가 이 파일을 통해서 백그라운드에서 푸시 이벤트를 받는 방식이라, 이 파일이 없으면 권한 팝업만 뜨고 실제 푸시는 절대 오지 않는다.

근데 진짜 문제는, 닷홈빌더로 만든 사이트는 파일질라(FTP)로 폴더에 직접 접속할 수가 없다. 빌더가 사이트 파일 구조 자체를 감싸서 관리하는 방식이다 보니, 내가 임의로 파일을 하나 추가해 넣을 방법이 없었던 거다. 설정도 다 끝냈고 팝업까지 띄웠는데, 마지막 파일 하나를 못 넣어서 완성이 안 되는 상황이 답답했다.

빌더 자체에서 제공하는 알림/푸시 관련 기능이 있는지 확인 → 없었다
OneSignal 같은 외부 웹 푸시 서비스로 우회할 수 있는지 확인 → 설정은 가능했지만, 필수 파일을 서버에 올릴 방법이 없어 결국 막혔다
이메일 알림 같은 대안이라도 있는지 확인 → 있어도 사용자가 이메일을 잘 확인하지 않는다는 점에서 실효성이 떨어진다고 판단했다

결국 "파일 하나를 내 마음대로 올릴 수 있는 서버 환경"이 없으면 웹 푸시 자체가 불가능하다는 걸 이때 알게 됐다. 빌더는 "빠르게 만들 수 있다"는 장점과 정확히 맞바꾼 만큼, 서버 파일 구조를 직접 건드리는 영역에서는 한계가 뚜렷했다.

그래서 PHP로 새로 만들기로 했다

결국 결론은 하나였다. 알림 기능을 제대로 넣으려면 서버 로직을 내가 직접 짤 수 있어야 한다.

이왕 다시 만드는 김에 목표를 조금 더 구체적으로 잡았다.

게시글/댓글이 등록되는 시점을 서버 코드로 직접 감지할 수 있을 것
그 시점에 원하는 대상에게 알림을 보낼 수 있을 것 (누구에게, 어떤 내용으로 보낼지 세밀하게 제어)
앱을 새로 만들지 않고도, 웹사이트 상태에서 모바일 알림까지 받을 수 있을 것

3번 조건이 사실 가장 까다로운 부분이었다. "앱스토어에 올리지 않고, 웹사이트만으로 폰에 알림을 보낼 방법이 있을까?"라는 질문에서 이후 FCM(Firebase Cloud Messaging) 웹 푸시를 알아보게 됐는데, 이 부분은 다음 글에서 자세히 풀어보려 한다.

돌아보며

빌더로 사이트를 운영해본 경험이 없었다면 아마 "그냥 처음부터 코드로 만들 걸"이라고 후회했을 수도 있다. 그런데 반대로, 빌더로 먼저 운영해보면서 어떤 기능이 실제로 필요한지를 사용자 반응으로 먼저 검증할 수 있었던 건 나쁘지 않은 순서였다고 생각한다. 처음부터 완벽하게 설계하려 했다면 오히려 우선순위를 놓쳤을 수도 있었을 것 같다.

[error] Could not initialize class sun.awt.X11GraphicsEnvironment 오류 해결

개발자 leelee — Fri, 22 May 2026 22:10:31 +0900

1. 문제상황

spring 을 사용하는 화면들에서만 엑셀 다운로드시 아무 반응이 없었다.

관련 코드 반영한 건 한참 전...

운영만 안되고 개발은 또 됨

2. 오류확인

브라우저 콘솔 : 500 Internal Server Error

tomcat 로그 :

Handler dispatch failed; nested exception is
java.lang.NoClassDefFoundError: Could not initialize class sun.awt.X11GraphicsEnvironment

3. 에러 흐름 확인

엑셀 다운로드 클릭
↓
SXSSFWorkbook.createSheet()
↓
Apache POI가 엑셀 시트 생성하면서 기본 글자 너비 계산 시도
↓
서버의 폰트/X11 그래픽 환경 초기화 실패
↓
500 에러

4. 원인 파악

Apache POI + SXSSFWorkbook + 폰트 계산 때문에 터진 것

찾아보니 apache POI가 엑셀 컬럼 너비를 계산하다가 기본 글자 폭을 계산하는 과정에서 서버의 폰트 정보를 읽으려고 했고,

이 과정에서 Java의 AWT 그래픽 환경이 초기화 됐다.

하지만 운영 서버는 일반적으로 GUI 환경이 없는 리눅스 서버이기 때문에 X11GraphicsEnvironment 초기화에 실패했다.

Spring Boot 애플리케이션은 실행 시 내부적으로 java.awt.headless=true 속성을 기본값으로 자동 설정하는데

환경설정이 뭔가 초기화 된 거 같았다.

5. 해결방법

톰캣을 사용하고 있다면,

tomcat/bin/catalina.sh 파일 제일 위에 아래 코드를 넣어주면 된다. 그리고 톰캣 재기동

#!/bin/bash    #맨 윗줄

export CATALINA_OPTS="$CATALINA_OPTS -Djava.awt.headless=true"    #입력

JVM에게 "이 서버는 모니터 화면이 없는(Headless) 환경이니, 화면 출력 시스템(X11)을 찾지 말고 메모리 상에서 자체적으로 폰트 크기만 계산해라"라고 지시하여 에러를 우회한 것

(참고)

vi catalina.sh 		#vi 편집기로 셸 파일 열기
파일 수정 후-> esc -> :wq! -> enter    #vi 편집기 저장

바로 해결됐다.

끝

[LINUX] 셸 스크립트를 자동으로 실행시키는 크론탭(crontab) 사용하기

개발자 leelee — Thu, 21 May 2026 00:14:27 +0900

특정 폴더에 있는 파일들을 매월 1일에 자동으로 옮기고 싶었다.

그래서 셸 스크립트를 매월 1일에 자동으로 실행하는 크론탭을 사용하기로 했다.

진행 흐름정리

쉘스크립트 파일을 먼저 만들고 → 수동 테스트하고 → 크론탭에 등록

전체 순서

1. 쉘스크립트 파일 생성
2. 스크립트 내용 작성
3. 실행 권한 부여
4. 수동 실행 테스트
5. 로그 확인
6. 크론탭 테스트 등록
7. 실제 매월 1일 스케줄로 변경

1단계. 쉘스크립트 파일 만들기

vi /log.sh #파일 생성/수정

2단계. 스크립트 내용 작성

입력 모드 : i

저장 방법 : ESC => :wq => Enter

#!/bin/bash

# 1. 경로 및 기준일 설정
SRC_DIR="/var/log/myapp"
DEST_DIR="/backup/log/myapp"
TODAY=$(date +%Y%m%d)

echo "[$TODAY] 로그 이동 작업을 시작합니다."
mkdir -p "$DEST_DIR"

# 2. 로그 파일 확인 및 이동 (for문 사용)
for file in "$SRC_DIR"/log.log.*; do
    
    # 파일이 실제로 존재하는지 확인
    [ -f "$file" ] || continue
    
    # 파일명 끝의 날짜(YYYYMMDD)만 추출
    file_date="${file##*.}"

    # 3. 추출한 날짜가 오늘보다 과거일 경우(-lt)에만 이동
    # 2>/dev/null 은 날짜가 아닌 문자가 섞였을 때 나는 에러를 조용히 무시합니다.
    if [ "$file_date" -lt "$TODAY" ] 2>/dev/null; then
        mv "$file" "$DEST_DIR/"
        echo " -> 이동 완료: $(basename "$file")"
    fi

done

echo "로그 이동 작업이 종료되었습니다."

스크립트 파일 확인

nl -ba /log.sh

3단계. 실행 권한 부여

chmod 755 /log.sh

권한부여 확인

ls -al /log.sh
#실행결과 -rwxr-xr-x  x가 있는걸 확인

4단계. 수동 실행 테스트 + 로그 남기기 / tail 로 log 결과 확인

/log.sh >> /log.log 2>&1

5단계. 크론탭 백업

crontab -l > ~/crontab_backup_$(date +%Y%m%d).txt

백업 확인

ls -al ~/crontab_backup_*.txt

6단계. 크론탭 테스트 등록 ( 매분 실행 테스트 )

crontab -e
* * * * * /log.sh >> log.log 2>&1

저장 후 확인

crontab -l
tail -f log.log

7단계.실제 매월 1일 스케줄 등록

매월 1일 새벽 1시 0분에 log.sh 실행하고 결과는 log.log에 저장

crontab -e
0 1 1 * * /log.sh >> /log.log 2>&1

(로그에 대한 고민

로그를 연속으로 쌓을건지, 날짜 별로 쌓을건지

로그는 쉘스크립트 내부에서 로그 저장할지, 크론탭 자체적으로 로그를 만들어 저장할지

정리는 다음 글에서 정리)

[TIL] PHP로 DB 다루기: MySQLi vs PDO, 무엇을 선택할까?

개발자 leelee — Tue, 5 May 2026 14:51:06 +0900

엄청 오랜만에 PHP... 기억이 하나도 안난다.

개인적으로 새로운 PHP 프로젝트를 시작하려는데,

데이터베이스를 연결 하는 단계에서 쓸 수 있는게 MySQLi와 PDO 가 있었다.

데이터베이스(DB)를 어떤 방식으로 연결하고 관리할 것인가? 에 대한 고민

그래서 써보는 MySQLi와 PDO 정리

1. MySQLi 와 PDO 란?

MySQLi (MySQL Improved): 딱 이름부터 "나 MySQL 전용이야"라고 말하고 있음. MySQL/MariaDB에 최적화된 드라이버.
PDO (PHP Data Objects): 일종의 '통번역기' . MySQL뿐만 아니라 SQLite, PostgreSQL 등 다양한 DB를 같은 방식으로 다룰 수 있게 해주는 추상화 계층.

2. MySQLi 와 PDO 비교

	MySQLi	PDO
지원 DB	오직 MySQL/MariaDB	12종 이상의 다양한 DB
코딩 스타일	절차지향 + 객체지향	객체지향 (Modern)
Named Parameter	지원 안 함 (? 사용)	지원 (:name 사용)
에러 처리	조금 번거로움	Exception(예외) 처리 우수
성능	미세하게 빠름	아주 미세하게 느림

3. 사용법

[MySQLi 방식] :위치 기반

$stmt = $mysqli->prepare("INSERT INTO users (name, email, age) VALUES (?, ?, ?)");
// ?가 많아지면 나중에 힘듦
$stmt->bind_param("ssi", $name, $email, $age);

[PDO 방식] : 이름 기반

$stmt = $pdo->prepare("INSERT INTO users (name, email, age) VALUES (:name, :email, :age)");
// 순서 상관없이 이름으로 매칭
$stmt->execute(['name' => $name, 'email' => $email, 'age' => $age]);

4. 추천 방식?

MySQLi를 추천하는 경우:
1. 오직 MySQL만 사용함이 확실하고
2. 극한의 성능 최적화가 필요한 특수한 상황일 때
PDO를 추천하는 경우:
1. 현대적인 PHP 개발 표준을 따르고 싶을 때
2. 가독성 좋고 유지보수가 쉬운 코드를 원할 때
3. 미래에 DB가 바뀔 가능성이 단 1%라도 있을 때

나의 경우, PDO 방식을 선택했다.

MySQLi는 MySQL 계열의 DB에서만 작동하지만, PDO는 다른 디비도 지원가능하다.

그리고 이름을 직접 지정할 수 있어서 코드가 훨씬 직관적임

끝.

[javascript/jquery] 자바스크립트 url 파라미터 숨기기 (history.replaceState)

개발자 leelee — Sun, 15 Mar 2026 21:39:58 +0900

history.replaceState로 URL 파라미터 숨기기

웹 개발 중 파라미터가 노출된 URL을 지워야하는 상황

https://example.com/search?keyword=자바스크립트&userId=1234&token=abcxyz

보안이 중요한 데이터가 주소창에 그대로 보이거나, URL을 깔끔하게 유지하고 싶은 상황에서 유용하게 쓸 수 있는 방법을 정리했다.

      history.replaceState({}, null, location.pathname) 한 줄로 URL 파라미터를 숨기는 방법
  

✅ 핵심 코드 한 줄

history.replaceState({}, null, location.pathname);

이 한 줄이 하는 일은 현재 URL에서 쿼리스트링(? 이후)을 전부 제거하고, 경로(path)만 남긴다. 페이지는 새로고침되지 않는다.

인자 하나씩 뜯어보기

history.replaceState( state,  title,  url )
                      ↓       ↓       ↓
history.replaceState( {},     null,   location.pathname )

① {} — state 객체

히스토리에 함께 저장할 데이터다. 빈 객체 {}를 넘겼다는 건, 따로 저장할 데이터 없이 URL만 바꾸겠다는 의미다.

// 데이터를 함께 저장하고 싶다면 이렇게
history.replaceState({ keyword: '검색어' }, null, location.pathname);

② null — title

원래 페이지 타이틀을 지정하는 인자인데, 현재 모든 브라우저가 이 값을 무시한다. 관례적으로 null 또는 ""을 넣는다.

③ location.pathname — 변경할 URL

여기가 핵심이다. location 객체의 속성들을 비교해보면 이해가 쉽다.

// 현재 URL: https://example.com/search?keyword=테스트&page=1

location.pathname  →  "/search"                           (? 이전 경로만)
location.search    →  "?keyword=테스트&page=1"   (쿼리스트링)
location.href      →  "https://example.com/search?keyword=테스트&page=1"

location.pathname만 넘기면 쿼리스트링이 포함되지 않으므로, URL에서 파라미터가 사라진다.

⚙️ 동작 흐름

페이지 진입
↓ https://example.com/search?keyword=테스트&page=1

파라미터 읽어서 처리 (검색 실행 등)
↓

history.replaceState({}, null, location.pathname);
↓

주소창 URL 변경
→ https://example.com/search ✅ 파라미터 사라짐
(페이지 새로고침 없음, 히스토리 스택 교체)

pushState vs replaceState

// replaceState: 현재 히스토리를 덮어씀
// → 뒤로가기 해도 파라미터 있던 URL로 못 돌아감
history.replaceState({}, null, location.pathname);

// pushState: 새 히스토리를 쌓음
// → 뒤로가기 하면 파라미터 있던 URL로 돌아감
history.pushState({}, null, location.pathname);

메서드	히스토리 처리	뒤로가기 시	적합한 상황
`replaceState`	현재 항목 교체	파라미터 URL 차단 ✅	파라미터 완전히 제거
`pushState`	새 항목 추가	파라미터 URL 복원	히스토리 유지 필요 시

파라미터를 완전히 지워버리고 싶을 때는 replaceState가 맞다. 뒤로가기로 파라미터가 다시 노출되는 상황을 막을 수 있기 때문이다.

실제 활용 패턴

기본 패턴 — 파라미터 읽고 → 즉시 제거

const params = new URLSearchParams(location.search);
const keyword = params.get('keyword');

if (keyword) {
  // ① 파라미터 값으로 필요한 처리 먼저
  doSearch(keyword);

  // ② 처리 후 URL에서 파라미터 제거
  history.replaceState({}, null, location.pathname);
}

⚠️ 순서가 중요하다. 반드시 파라미터를 읽고 처리한 후에 제거해야 한다. 제거 후 읽으면 이미 파라미터가 없으므로 null이 반환된다.

jQuery AJAX 조합 패턴

$('#searchForm').on('submit', function(e) {
  e.preventDefault();

  const keyword = $('#keyword').val();

  $.ajax({
    url: '/api/search',
    method: 'GET',
    data: { keyword: keyword },
    success: function(response) {
      // AJAX로 데이터를 가져오되, URL에는 파라미터 노출하지 않음
      history.replaceState({}, null, location.pathname);
      renderResult(response);
    }
  });
});

⚠️ 주의사항

항목	내용
새로고침 시 state 소멸	replaceState에 저장한 state는 새로고침하면 사라진다. 중요한 데이터는 `sessionStorage`와 병행 사용 권장
서버 라우팅 주의	존재하지 않는 URL로 변경 후 새로고침하면 404 발생 가능. 서버에서 해당 경로를 처리할 수 있어야 함
완전한 보안 X	URL에서 숨길 뿐, 클라이언트 단의 조작이다. 민감한 데이터는 POST + HTTPS와 함께 서버 인증을 병행해야 함

한 줄 요약

    history.replaceState({}, null, location.pathname) 는 "URL은 깔끔하게 바꾸되, 페이지는 그대로 유지" 하는 가장 심플한 파라미터 은닉 방법이다.
  

[error] 이클립스 안 켜짐 해결방법 (로딩화면에서 응답없음)

개발자 leelee — Mon, 9 Feb 2026 21:46:25 +0900

나의 상황

이클립스를 열어야되는데

로딩되다가 중간에 자꾸만 멈춰서 응답없음 상태가 되는 상황

원인

용량 정리한다고 바탕화면과 폴더 정리를 했는데 뭔가 그때 이클립스 폴더도 왔다갔다 해서 그런지

이클립스 상태 정보 파일이 꼬인 것 같았다.

이클립스가 켜지면서 그 파일이 깨져 있으니 무한 루프에 빠져버린 것

해결방법

cmd를 열어서

이클립스 설치 경로로 이동하여 아래 명령어를 입력해 실행한다.

eclipse.exe -clearPersistedState

이렇게 하면 기존에 배치했던 창 위치나 열려있던 파일 탭들이 초기화된다.

설정해둔 테마나 폰트 같은 핵심 설정은 유지됨!!

끝

[LINUX] 서버 용량(디스크) 체크하는 방법 (du/df)

개발자 leelee — Tue, 27 Jan 2026 23:16:40 +0900

갑자기 파일업로드가 안 되는 상황

로그를 확인해보니 어느 순간부터 저장이 안되고 있어서 찾아보니

서버 용량이 가득차 있었다.

서버 용량(디스크) 체크하는 방법

1. 서버 전체 디스크 용량 확인

df -h

결과예시

$ df -h
Filesystem      Size  Used Avail Use% Mounted on
/dev/sda1        50G   46G  2.0G  96% /
tmpfs           1.9G     0  1.9G   0% /dev/shm
/dev/sdb1       100G   20G   75G  22% /home

size : 전체용량

used : 사용중인 용량

avail : 남은 용량

use % : 사용률

mounted on : 실제 경로

2. 디렉토리 별로 뭐가 제일 많이 차지하고 있는지 확인

du -h | sort -rh | head -n 10

결과예시

12G     ./var
9.5G    ./var/log
4.8G    ./var/log/syslog
3.9G    ./var/log/nginx/access.log
1.2G    ./var/lib/docker

나의 경우, 로그 파일이 계속 쌓이고 있어서 용량을 많이 차지하고 있었다.

날짜를 확인하고 과거의 로그는 지워줬다.

서버가 터지기 전에

정기적으로 확인하는게 중요한 것 같다.

끝

[HTML/CSS] 홈페이지에 rss로 최신 뉴스기사 불러오기 (닷홈빌더 활용)

개발자 leelee — Tue, 27 Jan 2026 00:29:19 +0900

누군가에게 필요할까 싶어서 써보는

닷홈빌더로 만든 홈페이지에 rss로 최신 뉴스기사 불러오기

사이트 이름은 가렸음

빠르게 홈페이지를 만들고 싶어서 뭘 써볼까 고민하다가

닷홈에서 손쉽게 홈페이지를 만드는 기능이 있는 걸 발견했다.

그래서 닷홈빌더를 활용해서 친구들과 사용할 홈페이지를 만들었다. 놀랍게도 하루만에 만들었다.

그런데 홈페이지가 너무 허전해서 최신정보를 볼 수 있는 메뉴를 만들었다.

완성 화면

1. 프레임을 나누고 요소 코드를 추가해준다.

그럼 아래처럼 화면이 된다.

2. 코드를 입력하고 적용하기

<style>
    .news-widget-box {
        font-family: 'Malgun Gothic', sans-serif;
        border: 1px solid #ddd;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
        max-width: 100%;
        margin-bottom: 20px; /* 박스 간 간격 */
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .news-widget-header {
        background: #0b0e23; /* 배경색 */
        color: #fff;
        padding: 15px;
        font-weight: bold;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .news-widget-list { padding: 0; margin: 0; list-style: none; }
    .news-widget-item { padding: 15px; border-bottom: 1px solid #eee; transition: background 0.2s; }
    .news-widget-item:hover { background-color: #f9fbfc; }
    .news-widget-item a { text-decoration: none; color: #333; font-size: 15px; font-weight: 500; display: block; margin-bottom: 5px; }
    .news-widget-item a:hover { color: #1a73e8; text-decoration: underline; }
    .news-widget-meta { font-size: 12px; color: #888; }
    .news-loading { padding: 20px; text-align: center; color: #666; }
</style>

<script>
    // 이 함수가 뉴스를 가져와서 박스에 넣어줍니다.
    function loadNewsWidget(boxId, searchKeyword, titleText) {
        // 1. 박스 찾기
        const box = document.getElementById(boxId);
        if (!box) return;

        // 2. 제목 설정
        const titleArea = box.querySelector('.widget-title-text');
        if (titleArea) titleArea.innerText = titleText || searchKeyword + " 뉴스";

        // 3. RSS 주소 생성
        const baseUrl = "https://news.google.com/rss/search";
        const params = `?q=${encodeURIComponent(searchKeyword)}&hl=ko&gl=KR&ceid=KR:ko`;
        const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(baseUrl + params)}`;

        // 4. 데이터 가져오기
        fetch(apiUrl)
        .then(res => res.json())
        .then(data => {
            const listArea = box.querySelector('.news-widget-list');
            
            if (data.status === 'ok' && data.items.length > 0) {
                let html = '';
                data.items.slice(0, 5).forEach(item => {
                    // 날짜 포맷
                    let dateStr = item.pubDate;
                    try {
                        const d = new Date(item.pubDate);
                        dateStr = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
                    } catch(e) {}

                    html += `
                        <div class="news-widget-item">
                            <a href="${item.link}" target="_blank">${item.title}</a>
                            <div class="news-widget-meta">${dateStr} | ${item.author || '뉴스'}</div>
                        </div>`;
                });
                listArea.innerHTML = html;
            } else {
                listArea.innerHTML = '<div class="news-loading">검색 결과가 없습니다.</div>';
            }
        })
        .catch(err => {
            const listArea = box.querySelector('.news-widget-list');
            if(listArea) listArea.innerHTML = '<div class="news-loading">불러오기 실패</div>';
        });
    }
</script>

<div id="news-1" class="news-widget-box">
    <div class="news-widget-header">
        <span class="widget-title-text">뉴스 로딩 중...</span>
        <span style="font-size:11px; opacity:0.8;">Live</span>
    </div>
    <div class="news-widget-list">
        <div class="news-loading">뉴스를 검색하고 있습니다...</div>
    </div>
</div>

<script>
    // loadNewsWidget('아이디', '검색어', '박스제목');
    loadNewsWidget('news-1', '핸드볼', '핸드볼 최신 뉴스');
</script>

첫번째 code/ 박스

<div id="news-2" class="news-widget-box">
    <div class="news-widget-header">
        <span class="widget-title-text">뉴스 로딩 중...</span>
        <span style="font-size:11px; opacity:0.8;">Live</span>
    </div>
    <div class="news-widget-list">
        <div class="news-loading">뉴스를 검색하고 있습니다...</div>
    </div>
</div>

<script>
    // 아이디를 news-2 로 맞춰줍니다.
    loadNewsWidget('news-2', '여자축구', '여자축구 최신 뉴스');
</script>

두번째 code/ 박스

style 과 script 는 이미 첫번째 박스에서 써서 훨씬 간단하게 작성할 수 있다.

코드 전문 맨 아래에 있는

loadNewsWidget('아이디', '검색어', '박스제목');

아이디만 각 박스 별 div id와 맞추고, 검색어와 박스제목만 바꿔주면 끝~

구글서치콘솔에 등록했는데 한번 실패하고 다시 개선해서 재등록 중이다.

등록이 잘 되길...

끝