구글 브로거 '이전글 다음글' 코드, chatGPT든 인간이든 명령프롬프트 이렇게 짜야...

 구글 브로거는 인기가 없다.

구글 자체 내에서 검색어로 밀어주는 것도 없고,

html도 xml이라는 특이구조를 택해서, 커스텀 하기 어렵다.

또, 카테고리도 없네?(기본적인 것인데...)

반대로 장점도 있다.

수위가 높은 글은,

광고만 안 줄 뿐, 크게 제재는 없다.

차피 들어 오는 인원도 적으니, 장점인지 단점인지 모르겠으나,

광고 수익 때문에 구글 브로거를 쓴다?

말도 안 된다.

여튼 이런 구글 브로거도 정상적인 페이지로 보이기 위해,

이전글 다음글을 넣었다.

이왕이면, 이미지도 넣고.

당연히 코드는?

chatGPT가 짠 것이다.

 <style>

  .post-nav {

    list-style: none;

    padding: 0;

    margin: 20px 0;

  }

  .post-nav li {

    display: inline-block;

    margin-right: 20px;

  }

  .post-nav li a {

    text-decoration: none;

    color: #333;

    font-weight: bold;

  }

  .post-nav li span {

    margin-left: 5px;

    color: #777;

  }

  .post-nav li img {

    width: 100px; /* 이미지 크기 조절 */

    height: 100px; /* 이미지 크기 조절 */

    margin-right: 5px; /* 이미지와 제목 사이 여백 조절 */

    vertical-align: middle; /* 이미지를 텍스트와 수직정렬 */

    border: 2px solid #333; /* 테두리 추가 */

    border-radius: 5px; /* 테두리 둥글게 처리 */

  }

</style>

<ul class='post-nav'>

  <li class='next'>

    <b:if cond='data:newerPageUrl'>

      <a class='newer-link' expr:href='data:newerPageUrl'>

        <img alt='다음 글 이미지' class='newer-image' src=''/> <!-- 이미지를 표시할 이미지 태그 추가 -->

        <strong>다음 글</strong><span class='newer-title'/>

      </a>

    <b:else/>

      <strong>다음 글</strong><span>현재 글이 최신 글입니다</span>

    </b:if>

  </li>

  <li class='previous'>

    <b:if cond='data:olderPageUrl'>

      <a class='older-link' expr:href='data:olderPageUrl'>

        <img alt='이전 글 이미지' class='older-image' src=''/> <!-- 이미지를 표시할 이미지 태그 추가 -->

        <strong>이전 글</strong><span class='older-title'/>

      </a>

    <b:else/>

      <strong>이전 글</strong><span>현재 글이 마지막 글입니다</span>

    </b:if>

  </li>

</ul>

<script>    

document.addEventListener(&#39;DOMContentLoaded&#39;, function() {

  var newerLink = document.querySelector(&#39;.newer-link&#39;);

  var olderLink = document.querySelector(&#39;.older-link&#39;);

  if (newerLink) {

    var newerTitleElement = newerLink.querySelector(&#39;.newer-title&#39;);

    var newerImageElement = newerLink.querySelector(&#39;.newer-image&#39;); // 이미지를 표시할 요소 선택

    var newerUrl = newerLink.getAttribute(&#39;href&#39;);

    if (newerTitleElement &amp;&amp; newerUrl) {

      fetch(newerUrl)

        .then(response =&gt; response.text())

        .then(data =&gt; {

          var tempDiv = document.createElement(&#39;div&#39;);

          tempDiv.innerHTML = data;

          var newerTitle = tempDiv.querySelectorAll(&#39;.post-title&#39;)[1].innerText;

          var newerImageUrl = tempDiv.querySelector(&#39;.post-body img&#39;).src; // 이미지 URL 가져오기

          newerTitleElement.textContent = newerTitle;

          newerImageElement.src = newerImageUrl; // 이미지 URL 설정

        });

    }

  }

  if (olderLink) {

    var olderTitleElement = olderLink.querySelector(&#39;.older-title&#39;);

    var olderImageElement = olderLink.querySelector(&#39;.older-image&#39;); // 이미지를 표시할 요소 선택

    var olderUrl = olderLink.getAttribute(&#39;href&#39;);

    if (olderTitleElement &amp;&amp; olderUrl) {

      fetch(olderUrl)

        .then(response =&gt; response.text())

        .then(data =&gt; {

          var tempDiv = document.createElement(&#39;div&#39;);

          tempDiv.innerHTML = data;

          var olderTitle = tempDiv.querySelectorAll(&#39;.post-title&#39;)[1].innerText;

          var olderImageUrl = tempDiv.querySelector(&#39;.post-body img&#39;).src; // 이미지 URL 가져오기

          olderTitleElement.textContent = olderTitle;

          olderImageElement.src = olderImageUrl; // 이미지 URL 설정

        });

    }

  }

});

</script>

이 긴 코드를 1분만에 내가 어떻게 짜...

그런데, 쉬운 일이 아니였다.

처음에는 이런 변명을 하는 것이였다.

"불행히도, 외부 웹페이지의 데이터를 직접 가져와서 사용하는 것은 일반적으로 보안상의 이유로 제한됩니다. 브라우저는 CORS (Cross-Origin Resource Sharing) 정책을 적용하여 외부 사이트에서의 AJAX 요청을 차단하므로, 클라이언트 측에서 직접 외부 페이지의 데이터를 가져오는 것은 일반적으로 불가능합니다.

그러나 서버 측에서 프록시를 사용하거나 API를 통해 데이터를 가져오는 방법이 있을 수 있습니다. 예를 들어, 외부 페이지가 데이터를 제공하는 API를 제공하는 경우 해당 API를 사용하여 데이터를 가져올 수 있습니다.

서버 측에서 프록시를 설정하는 방법에 대한 예시를 제공할 수는 있지만, 이는 서버 구성에 따라 다르므로 상세한 내용은 서버 설정에 의존합니다."

그럴리가 없을텐데...

그래서 인터넷 검색을 잠깐 하니, 구현한 사람이 있었다.

여튼 누가 사람이 만든 것이 아니랄까봐, AI도 어디서 못 된 것만 배웠다.

그래서 명령어를 약간 틀었다.

자, 여기에 구현한 코드가 있는데, 분석 해 볼래?

그래도 안 된단다.

...

...

내 생각에는 이 코드와 이 코드를 섞으면 될 것 같은데,

대략 이런 느낌으로.

그랬더니, 드디어 위와 같은 제대로(?) 된 코드를 짜준다.

(아니, 내가 짠 건가?)

그래, 스타일이나 혹시 틀린 코드 있으면 다듬어줘...

인간이든 기계든,

명령이나 부탁을 할 때는 가능성 있는 모델을 보여주고,

시켜야 한다.

걍 해봐, 짜줘! 하면, 할 생각은 아니하고, 어떻게든 불가능하다는,

변명 거리를 먼저 찾는 것이 인간이다.(AI다.)

그래서 지난 번에도 말했다시피, 팀장급만의 덕목 중 하나인 멀티테스크는,

그 분야에 대해 전문적인 지식까지는 필요 없지만, 최소한 어떻게 굴러가는지는 알아야 

조직 내 협업이 잘 된다 이 말이다.

평가의 기초가 되는 것이고.

억지로 부하들에게 시키지 마라.

열 뻗을 필요가 없다.

걍 시켜보고 못 하면,

다음에 일을 안 주면 그만이다.

그 사람이 스스로 진화하고자 하는 노력이 보이면, 그 때 도와주면 되는 것이고.

자료 다 만들어서 떠 먹여줘도 못 한다면, 뭐...

아니, 최소한 자료를 줬는데, 현장에서 그게 맞는지 안 맞는지 피드백을 줘야지,

현장에서 그거 피드백 안 줄 거 같으면, 뭣하러 같이 일하겠는가.

차라리 나 혼자 일하고 말지...

꼭 책임지기 싫어가지고, 받은 자료 그대로 진행하고...

근디 그렇게 만드는 것은 결국 그렇게 명령 프롬프트를 짠 사람이다.

chatGPT도 자세히 보면, 거짓말 많이 한다.

그것을 기인지 아닌지 판단하는 주체는 결국 사용자이다.

남탓 할 필요 없다.

다 체크하고 있다.