[태그:] Javscript

고민 해결 웹앱 개발하기: PHP와 JavaScript를 활용한 마법의 책

여러분은 매일 어떤 고민을 하고 계신가요?

오늘 소개할 프로그램은 여러분의 고민을 해결해 줄 마법의 책입니다.

https://wizardofcode.kr/wg/happybook

이 프로그램은 PHP와 JavaScript를 사용하여 구현되었으며, 반응형 디자인으로 모바일에서도 완벽하게 작동합니다.

프로그램 소개

“마법의 고민 해결 책”은 사용자가 고민을 생각하고 책을 열면, 그 고민을 해결해 줄 만한 명언이나 조언을 제공하는 웹 애플리케이션입니다.

이 프로그램은 간단한 인터페이스와 직관적인 사용법을 제공하여 누구나 쉽게 사용할 수 있습니다.

구동원리

사용자가 고민을 생각하고 “열어보기” 버튼을 클릭합니다.
“열어보기” 버튼을 클릭하면 약 1초의 생각할 시간을 카운팅 후에 책이 열리는 애니메이션 효과가 나타납니다.
책이 열리면 고민을 해결해 줄 만한 명언이 책 페이지에 표시됩니다.

핵심 코드 설명

HTML 부분

HTML 구조는 간단합니다.

첫 페이지에는 책 표지가 표시되고, 사용자가 고민을 생각하는데 도움을 주는 문구와 “열어보기” 버튼이 있습니다.

<div class="book-cover" id="bookCover">
    <div class="book-cover-content">
        <h1>Happy Book</h1>
        <p>구체적이고 행동과 목표에 초점을 맞춘 고민을 생각해보세요.</p>
        <button id="openBookBtn">열어보기</button>
    </div>
</div>

css 부분

CSS는 반응형 디자인을 적용하여 모바일에서도 잘 보이도록 했습니다.

또한, 책이 열리는 애니메이션 효과를 구현했습니다.

.book-cover {
    background: #001f3f;
    border: 2px solid #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    width: 300px;
    height: 400px;
    text-align: center;
    transition: transform 1s, opacity 1s;
    transform-style: preserve-3d;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

JavaScript 부분

JavaScript는 “열어보기” 버튼 클릭 시 책이 열리는 애니메이션과 명언을 불러오는 기능을 담당합니다.

document.getElementById('openBookBtn').addEventListener('click', function() {
    var bookCover = document.getElementById('bookCover');
    bookCover.style.transform = 'rotateY(-180deg)';
    bookCover.style.opacity = '0';

    setTimeout(function() {
        bookCover.classList.add('hidden');
        document.getElementById('modal').style.display = 'flex';

        setTimeout(function() {
            fetch('get_quote.php')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('modal').style.display = 'none';
                    document.getElementById('answer').innerText = data;
                    document.getElementById('result').style.display = 'block';
                    document.querySelector('.book-opened').classList.add('show');
                });
        }, 3000);
    }, 1000);
});

PHP 부분

PHP는 명언 목록에서 무작위로 하나를 선택하여 반환합니다.

$quotes = [
    "고민은 시간만 늦출뿐 당장 실행해보자.",
    "시간은 새와 같다 날아가기 전에 잡아라.",
    // 추가 명언들...
];

echo $quotes[array_rand($quotes)];

마치며

이 프로그램은 간단하면서도 유용합니다.

여러분의 간단한 고민을 해결하는 데 큰 도움이 될 것입니다.

여러분도 직접 이 프로그램을 만들어보고, 더 나은 기능을 추가해보세요.

2024년 07월 26일

자바스크립트 팝업 차단 확인: 팝업 블록 방지 방법
웹 페이지에서 팝업 창을 활용하는 기능을 구현했는데, 사용자의 브라우저 설정에 따라 팝업이 차단되어 제대로 열리지 않는 경우가 있습니다.

이러한 문제를 방지하기 위해 자바스크립트로 팝업 차단 여부를 확인하고, 사용자에게 안내 메시지를 표시하는 방법을 알아보겠습니다.

핵심 코드 분석
```
function openNewWindow(url) {
  const popup = window.open(url, '_blank');

  if (!popup || popup.closed) {
    alert('팝업이 차단되었습니다. 팝업 차단을 해제하고 다시 시도해주세요.');
  } else {
    // 팝업이 성공적으로 열렸을 때 추가적인 작업 (선택 사항)
    popup.focus(); // 팝업 창에 포커스 주기
  }
}
```
코드 설명
1. 새창 열기
  - window.open(url, ‘_blank’)를 사용하여 주어진 url로 새 창을 엽니다. _blank는 새 창을 여는 표준적인 방법입니다.
2. 팝업 차단 감지
  - 팝업 창이 성공적으로 열렸는지 확인합니다. 팝업 차단 설정으로 인해 새 창이 열리지 않거나, 사용자가 팝업 창을 즉시 닫은 경우 등을 감지합니다.
3. 팝업 차단 알림
  - 팝업 창이 제대로 열리지 않으면 사용자에게 “팝업이 차단되었습니다. 팝업 차단을 해제하고 다시 시도해주세요.”라는 알림 메시지를 표시합니다.
코드 분석

popup 변수는 window.open() 함수의 반환값을 저장합니다.

이 값은 새로 열린 창(window 객체)을 나타내거나, 팝업 차단 등으로 인해 창이 열리지 못한 경우 null 값을 가집니다.
!popup 조건은 popup이 null인지 확인하여 팝업 차단 여부를 검사합니다.

popup.closed는 팝업 창이 닫혔는지 확인합니다.

typeof popup.closed == ‘undefined’는 일부 브라우저에서 팝업이 차단되었을 때 popup.closed 속성이 정의되지 않는 경우를 처리합니다.

주의 사항
- 팝업 차단 우회
  - 팝업 차단은 사용자의 의도적인 설정이므로, 이를 우회하려는 시도는 사용자 경험을 해칠 수 있습니다. 팝업 차단 알림을 통해 사용자가 직접 팝업 차단을 해제하도록 유도하는 것이 좋습니다.
- 브라우저 호환성
  - 팝업 차단 감지 로직은 대부분의 최신 브라우저에서 잘 작동하지만, 일부 오래된 브라우저에서는 완벽하게 작동하지 않을 수 있습니다.
이상 팝업 차단 여부를 확인하는 방법에 대한 포스팅을 마치도록 하겠습니다.

감사합니다.
2024년 07월 11일
자바스크립트 새창 POST 데이터 전송: 쉽게 배우는 가이드
웹 개발 중 새로운 창으로 열면서 POST 데이터를 전달해야 할 때가 있습니다.

단순히 페이지를 여는 것이 아니라, 정보를 안전하게 POST 방식으로 전송하고 싶다면 어떻게 해야 할까요?

이 글에서는 자바스크립트를 활용하여 새 창으로 POST 데이터를 전송하는 방법을 자세히 알아보겠습니다.

핵심 코드 분석:
```
function openNewWindow(content_id) {
  const form = document.createElement('form');
  form.method = 'POST';
  form.action = '팝업주소'; 
  form.target = '_blank'; 

  const hiddenField = document.createElement('input');
  hiddenField.type = 'hidden';
  hiddenField.name = 'content';
  hiddenField.value = content; 

  form.appendChild(hiddenField);
  document.body.appendChild(form); 
  
  form.submit();
}
```
코드 설명:
1. 폼 생성
  - document.createElement(‘form’);
  - 데이터를 담아 전송할 폼 요소를 동적으로 생성합니다.
2. POST 방식 설정
  - form.method = ‘POST’;
  - 데이터 전송 방식을 POST로 지정하여 보안을 강화합니다.
3. 새로 열 URL 설정
  - form.action = ‘팝업주소’;
  - 데이터를 받아 처리할 페이지의 주소를 설정합니다.
4. 타겟 설정
  - form.target = ‘_blank’;
  - _blank로 설정하여 새 창에서 페이지를 엽니다.
5. 숨겨진 필드 추가
  - const hiddenField = document.createElement(‘input’);
    hiddenField.type = ‘hidden’;
    hiddenField.name = ‘content’;
    hiddenField.value = content;
  - 전송할 데이터를 숨겨진 필드에 담아 사용자에게 노출되지 않도록 합니다.
6. 폼 제출
  - form.submit();
  - 자바스크립트를 통해 폼을 자동으로 제출하여 데이터를 전송합니다.
왜 POST 방식을 사용해야 할까요?

GET 방식은 URL에 데이터가 노출되어 보안에 취약할 수 있습니다. 민감한 정보를 다룰 때는 POST 방식을 사용하여 데이터를 안전하게 전송해야 합니다.

자바스크립트를 사용하여 새 창으로 열면서 POST 데이터를 전송하는 방법에 대한 설명을 마치도록 하겠습니다.

감사합니다.
2024년 07월 09일

[그누보드5] 회원관리페이지 여분필드 HOOK 이용해 명칭 변경 방법

그누보드5를 이용할 때 회원정보 여분필드를 사용하다가 추후에 사용용도를 잊어먹는 경우가 많는데 이럴 때 회원관리 관리자 페이지에서 여분필드의 명칭을 변경하는 방법을 알려드리겠습니다.

2가지 방법이 있는데 내부코어를 수정하는 방법과 내부코어를 변경하지 않고 그누보드 5.4부터 지원하는 HOOK(훅)을 통해 필드명칭을 변경하는 방법이 있습니다.

1. 관리자페이지 수정 방법

“/adm/member_form.php”파일을 열어서 568번째 줄을 보면 아래와 같은 코드가 있습니다.

<?php for ($i = 1; $i <= 10; $i++) { ?>
    <tr>
        <th scope="row"><label for="mb_<?php echo $i ?>">여분 필드 <?php echo $i ?></label></th>
        <td colspan="3"><input type="text" name="mb_<?php echo $i ?>" value="<?php echo $mb['mb_' . $i] ?>" id="mb_<?php echo $i ?>" class="frm_input" size="30" maxlength="255"></td>
    </tr>
<?php } ?>

for문을 이용해 총 10개의 여분 필드를 표시해주고 있는데 이 코드를 아래와 같이 고쳐주면 여분 필드의 이름을 수동으로 설정할 수 있습니다.

<tr>
    <th scope="row"><label for="mb_1">사원번호</label></th>
    <td colspan="3"><input type="text" name="mb_1" value="<?php echo $mb['mb_1'] ?>" id="mb_1" class="frm_input" size="30" maxlength="255"></td>
</tr>
<tr>
    <th scope="row"><label for="mb_2">입사일</label></th>
    <td colspan="3"><input type="text" name="mb_2" value="<?php echo $mb['mb_2'] ?>" id="mb_2" class="frm_input" size="30" maxlength="255"></td>
</tr>
<tr>
    <th scope="row"><label for="mb_3">소속부서</label></th>
    <td colspan="3"><input type="text" name="mb_3" value="<?php echo $mb['mb_3'] ?>" id="mb_3" class="frm_input" size="30" maxlength="255"></td>
</tr>
<!-- 중간 생략 -->
<tr>
    <th scope="row"><label for="mb_10">여분 필드 10</label></th>
    <td colspan="3"><input type="text" name="mb_10" value="<?php echo $mb['mb_10'] ?>" id="mb_10" class="frm_input" size="30" maxlength="255"></td>
</tr>

위와 같은 방법으로 여분 필드의 이름을 직접 수정할 수 있답니다.

2. HOOK으로 수정 방법

이번에는 adm 폴더의 member_form.php 파일을 직접 수정하지 않고 add_event(HOOK)을 이용해 여분 필드의 이름을 바꿔보는 방법을 알아보겠습니다.

“/adm/member_form.php” 파일 맨 하단에 보면 아래와 같은 코드가 있습니다.

<?php
run_event('admin_member_form_after', $mb, $w);

여기서 “run_event” 함수가 HOOK이며, “admin_member_form_after” 함수가 호출되는 지점입니다.

“admin_member_form_after” 이 이벤트가 실행될 때 회원 정보 여분 필드를 출력할 “member_add_column” 함수를 연결 시켜줄 것입니다.

add_event('admin_member_form_after', 'member_add_column', 10, 2);

위와 같은 코드를 수행하면 “admin_member_form_after” 이벤트가 실행될 때 “member_add_column”함수를 실행하게 됩니다.

숫자 10은 이벤트의 우선순위인데 기본값은 10입니다.

숫자 2는 “member_add_column” 함수에 들어가는 매개변수의 갯수입니다. “$mb”와 “$w” 이렇게 2개가 전달되고 있어서 2라는 값을 넣어줬습니다.

이제 “member_add_column”함수를 구현하면 됩니다.

function member_add_column($mb, $w)
{
    echo @"<script>
             $('label[for=mb_1]').text('사원번호');
             $('label[for=mb_2]').text('입사일');
             $('label[for=mb_3]').text('소속부서');
             $('label[for=mb_4]').text('직책');
             $('label[for=mb_5]').text('직위');
             $('label[for=mb_6]').text('여분6');
             $('label[for=mb_7]').text('여분7');
             $('label[for=mb_8]').text('여분8');
             $('label[for=mb_9]').text('여분9');
             $('label[for=mb_10]').text('여분10');
           </script>";
}

JQuery를 통해 각 레이블의 텍스트를 변경하는 방식으로 처리하였습니다.

아래의 코드는 위의 HOOK 코드를 extend 폴더안에 넣어서 내부코드를 건드리지 않고 작동하도록 구현해봤습니다.

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

add_event('admin_member_form_after', 'member_add_column', 10, 2);

function member_add_column($mb, $w)
{
    echo @"<script>
             $('label[for=mb_1]').text('사원번호');
             $('label[for=mb_2]').text('입사일');
             $('label[for=mb_3]').text('소속부서');
             $('label[for=mb_4]').text('직책');
             $('label[for=mb_5]').text('직위');
             $('label[for=mb_6]').text('여분6');
             $('label[for=mb_7]').text('여분7');
             $('label[for=mb_8]').text('여분8');
             $('label[for=mb_9]').text('여분9');
             $('label[for=mb_10]').text('여분10');
           </script>";
}
?>

위의 내용을 “member.extend.php”라는 이름으로 저장하고(파일 이름은 마음대로 지정하셔도 됩니다.) “/extend” 폴더에 넣어두면 됩니다.

참고

(그누보드 공식 홈페이지) Hook 개념 소개

2024년 05월 06일

랜덤 문단/단어 추출 – 통합편
여러 글을 작성해야할 때 여러 문단과 단어를 작성해두고 랜덤으로 문단과 단어를 추출해 글을 자동으로 작성해주는 기능을 Javascript로 만들어보겠습니다.

최근에 올렸던 랜덤 문단 추출 기능과 랜덤 단어 추출 기능을 합쳐볼 예정입니다.

랜덤 문단 뽑기

랜덤 단어 뽑기

랜덤 단어 양식

랜덤으로 “사과”, “배”, “바나나” 중 하나를 추출하는 것을 가정해보겠습니다.

일반 문장에서 자주 사용되지 않을 문자인 파이퍼(|)로 구분을 지어보겠습니다.
```
이것은 사과|배|바나나입니다.
```
어느 영역이 랜덤 단어가 모여있는지 구별하기 위해 대괄호([ ~]})로 감싸보겠습니다.
```
이것은 [사과|배|바나나]입니다.
```
이 문장을 변환하면 대괄호 안에 있는 ‘사과’, ‘배’, ‘바나나’ 중 하나가 선택되어 아래와 같이 출력 된 답니다.
```
이것은 배입니다.
```
랜덤 문단 양식

이번엔 여러 줄의 글을 작성하고 그 중 하나의 줄만 추출하는 것을 해보겠습니다.

각 줄은 엔터로 구분이 되고 처음과 끝을 나타내는 구역을 ‘[[‘와 ‘]]’로 묶는 방식을 이용해보겠습니다.
```
[[
첫 번째 문단입니다.
두 번째 문단입니다.
세 번째 문단입니다.
]]
```
위와 같이 입력하고 변환을 하면 세 개의 문단 중 임의 줄 하나가 선택되어 출력됩니다.
```
세 번째 문단입니다.
```
랜덤 문단/단어 양식

이번에는 위의 두 가지 방법을 모두 사용해보겠습니다.

아래와 같이 예제 문장을 만들어봤습니다.
```
[[
이것은 [사과|배|바나나]입니다.
저것은 [사과|배|바나나]입니다.
[이것|저것]은 [사과|배|바나나|과자][이다.|입니다.|네요.]
]]
```
위와 같이 입력하고 변환을 하면 아래와 같이 임의의 문단과 단어가 선택되어 출력됩니다.
```
저것은 바나나입니다.
```
랜덤 문단/단어 사용해보기

[[ 이것은 [사과|배|바나나]입니다. 저것은 [사과|배|바나나]입니다. [이것|저것]은 [사과|배|바나나|과자][이다.|입니다.|네요.] ]]

변환

사용된 코드는 아래와 같습니다.
```
<script>
function extractRandomString() {
  const inputString = document.getElementById('inputString').value;
  const delimiter = '|'; // 구분자
  const extractPattern = /\[(.*?)\]/g; // 추출할 구역 패턴, 글로벌 플래그 추가

  if (inputString === '') {
    alert('텍스트를 입력하세요.');
    return;
  }

  // replace 함수 내에서 랜덤 선택 로직을 적용
  const resultString = inputString.replace(extractPattern, (match, group1) => {
    const choices = group1.split(delimiter);
    const randomChoice = choices[Math.floor(Math.random() * choices.length)];
    return randomChoice;
  });

  document.getElementById('result').textContent = RandomSentence (resultString); // 결과를 화면에 출력
}

function RandomSentence(str) {
  const regex = /\[\[([\s\S]*?)\]\]/g;
  let sentences = [];
  let match;

  while (match = regex.exec(str)) {
    sentences = match[1].split(/\r?\n/).filter(Boolean);
    const randomIndex = Math.floor(Math.random() * sentences.length);
    const selectedSentence = sentences[randomIndex].trim();
    str = str.replace(match[0], selectedSentence);
    regex.lastIndex -= match[0].length - selectedSentence.length;
  }

  return str;
}  
</script>
```
2024년 04월 30일
랜덤 문단 뽑기
이전 포스팅에서는 Javascript를 통해 특정 영역안에 단어를 임의로 추출하는 기능을 만들어봤는데요.

이번에는 특정 영역안에 문단글을 넣어놓고 임의로 추출하는 기능을 만들어볼게요.

랜덤 문단 추출 함수
```
function RandomSentence(str) {
  const regex = /\[\[([\s\S]*?)\]\]/g;
  let sentences = [];
  let match;

  while (match = regex.exec(str)) {
    sentences = match[1].split(/\r?\n/).filter(Boolean);
    const randomIndex = Math.floor(Math.random() * sentences.length);
    const selectedSentence = sentences[randomIndex].trim();
    str = str.replace(match[0], selectedSentence);
    regex.lastIndex -= match[0].length - selectedSentence.length;
  }

  return str;
}  
```
1. 정규 표현식 활용: [[…]]로 둘러싸인 부분을 찾기 위해 정규 표현식을 사용합니다. 이는 대괄호 안에 포함된 모든 내용을 찾아낼 수 있게 해 줍니다.

2. 문장 분리 및 선택: 찾아낸 텍스트에서 각 줄을 분리한 후, 비어 있지 않은 줄만을 골라내어 배열에 저장합니다. 이 배열에서 무작위로 한 문장을 선택합니다.

3. 텍스트 교체: 원래 문자열에서 [[…]] 부분을 무작위로 선택된 문장으로 대체합니다.

4. 인덱스 조정: 문자열 내에서 다음 매칭을 위해 현재 위치를 조정합니다. 이는 선택된 문장 길이에 따라 동적으로 변경됩니다.

랜덤 문단 추출기능

[[ 문단1 문단2 문단3 ]]

변환

랜덤 단어 뽑기 글 보러가기

랜덤 단어 뽑기
2024년 04월 24일
랜덤 단어 뽑기
텍스트에서 특정 구분자를 기준으로 랜덤한 단어를 추출하는 Javascript 코드를 만들어봤습니다.

예를 들어, “이것은 [사과|바나나|포도] 입니다.”라는 문자열을 입력하면 [ ~ ] 사이에 있는 “사과”, “바나나”, “포도” 중 하나의 과일 이름이 랜덤하게 선택되어 출력되는 기능입니다.

우선 문자열을 입력할 textarea를 만들어보겠습니다.
```
<textarea id="inputString" placeholder="이것은 [문자1|문자2|문자3] 입니다."></textarea>
```
그리고 텍스트에서 랜덤 문자열을 추출하는 스크립트를 만들어보겠습니다.
```
<script>
function extractRandomString() {
  const inputString = document.getElementById('inputString').value;
  const delimiter = '|'; // 구분자
  const extractPattern = /\[(.*?)\]/g; // 추출할 구역 패턴, 글로벌 플래그 추가

  if (inputString === '') {
    alert('텍스트를 입력하세요.');
    return;
  }

  // replace 함수 내에서 랜덤 선택 로직을 적용
  const resultString = inputString.replace(extractPattern, (match, group1) => {
    const choices = group1.split(delimiter);
    const randomChoice = choices[Math.floor(Math.random() * choices.length)];
    return randomChoice;
  });

  document.getElementById('result').textContent = resultString; // 결과를 화면에 출력
}
</script>
```
위의 코드를 활용해서 아래에 직접 구현을 해봤습니다.

랜덤 단어 추출

변환

랜덤 문단 뽑기

랜덤 문단 뽑기
2024년 04월 17일

[태그:] Javscript

프로그램 소개

구동원리

핵심 코드 설명

HTML 부분

css 부분

JavaScript 부분

PHP 부분

마치며

핵심 코드 분석

코드 설명

코드 분석

주의 사항

핵심 코드 분석:

코드 설명:

왜 POST 방식을 사용해야 할까요?

1. 관리자페이지 수정 방법

2. HOOK으로 수정 방법

참고

랜덤 단어 양식

랜덤 문단 양식

랜덤 문단/단어 양식

랜덤 문단/단어 사용해보기

랜덤 문단 추출 함수

랜덤 문단 추출기능

랜덤 단어 추출