티스토리 뷰

카테고리 없음

Chat GPT와 함께 HTML, CSS, Jquery를 이용한 코딩 실력 확 늘리는 노하우!!

IT개발 2024. 2. 12. 18:39

코딩 실력 팍!! 늘려 줄 노하우!!

코딩 시작하는 분이라면 꼭 읽어보시고 인사이트 가져가세요.!!!

저와 같이 코딩 초보는 꼭 읽으시고,

코딩 선수분들은 시간 낭비가 될 수 있으니,

읽지 말고 댓글 조언 주시면 감사하겠습니다.

우습지만 저는 코딩 초보입니다.

시작한 지 겨우 1달 정도 넘어가는 것 같습니다.

직업은 일반 사무직으로 전산개발과는 아주 먼 업무를 하고 있습니다.

다만, 학창 시절 basic, cobol과 같은 언어로

기능사, 기사 시험에 합격하여 자격증은 가지고 있으나,

30년 넘도록 써먹어 본 적이 없어서, 코딩은 그냥 옛 추억에나 있는 사람입니다.

그래서 이런 노하우 글을 쓰는 것이 적절한지 모르겠네요.

하지만 코딩을 시작하고 아직은 부족하지만

웹 앱 3개를 만들어 보면서 겪었던 시행착오를 토대로 작성합니다.

아마 저와 같은 코딩 초보자는 꼭 읽고 이해하신다면

반드시 성과가 크게 날 것이라고 확신합니다.

오늘 설명할 내용만 제대로 이해한다면 갑자기 실력이 확실하게 늘 것입니다.

HTML, CSS, jquery를 이용해 개발 시 오류를 빠르게 수정

가능하며 실력이 확실하게 좋아지는 방법 공유 드립니다.

이제는 계산 오류에 시간 허비하지 말고,
오류가 어디에서 발생되고 있는지 쉽게 확인하고
즉시즉시 해결 하면서
아주 행복한 개발자가 될 것입니다!!

이렇게 "행복한 개발자"가 되기 위해서는 다음과 같은 순서로 개발을 시도하세요!!

<코딩기획>

⭕ 1. 어떤 페이지(웹앱)를 만들지 수작업으로 페이지의 큰 그림을 명확하게 그려봅니다.

외부 이미지 위치, 광고 위치 ==> 위치만 잡습니다. CSS는 어떻게 하겠다.라는 생각만 합니다.
사용자가 입력하는 DB위치 ==> 위치만 잡습니다.- CSS는 이렇게 하면 좋겠다.라는 생각만 합니다
계산된 값이 화면에 노출될 위치 ==> 위치 잡고, 멋진 CSS요소를 생각합니다.!!
계산을 위한 버튼 효과 고려 - 어떤 CSS 요소, 멋진 버튼 효과를 생각합니다.
보다 더 다양한 내용 삽입할 위치 ==> 상동
타 URL과 연결할 위치 ==> 상동

여기서 큰 스케치가 완료되었다면 시간 끌지 말고, 바로 작업을 시작하며 이 부분에서 시간이 너무 소요되면 안 되고, 10분 내에 간략하게 완료합니다. 중요한 것은 직접 연필, 볼펜으로 그려 보는 것입니다.

⭕2. 페이지 내에 있는 어떤 것을 계산해야 하는지 확정합니다.

큰 그림이 완성되었다면 분명 계산이 필요한 내용이 많이 있겠지요.
계산할 내용이 몇 개인지 파악합니다. 계산이 가능한지 산식을 써 봅니다.
필요하다면 별도 DB 구성요소와 DB를 구성합니다.
DB구성이 필요 없다면 html요소의 어떤 것을 jquery로 계산할지 확정합니다.

⭕3. 계산에 필요한 데이터가 필요한지 점검합니다.

계산에 필요한 DB가 사전에 필요한지 확인합니다.
외부 DB가 필요한 경우에는 수집 가능 OR 불가능한지 파악합니다.

⭕4. 계산 방법 수식화 하고 계산할 내용을 순서화합니다.

계산할 내용을 목록화 후 우선순위를 확정합니다.
목록화를 통한 순서대로 계산이 쉽게 가능하도록 계산식을 직접 작성합니다.

코딩기획 1~4단계는 단순하게는 10분, 조금 복잡하다면 1시간 안에 모두 완료합니다.
만약, 1시간 이내에 이러한 설계가 안되었다면 절대 코딩을 시작하지 마세요!!
막 코딩을 하면 한번 프로그램 꼬이면 시간만 날리고, 화가 나며, 코딩이 싫어지게 됩니다.
1시간 이상 걸렸다는 것은 아직 무엇을 왜 어떻게 할지 본인 스스로도 정리가 되지 않았다고 봅니다.
스스로 정리되지 못한 것을 개발하는 것은 코딩을 즐기지 못하고 힘들게 됩니다. (명심 명심 또 명심하세요!!)

<코딩시작>

⭕5. 이제부터 코딩을 시작합니다. 우선 html 골격을 작성합니다.

GPT에게 1에서 큰 그림으로 설계한 자신의 웹 앱에 대하여 설명 후 html 문서 기본 골격을 작성완료 합니다.

아래 박스와 같이 GPT에게

"당신은 웹개발 전문가이며, 구글, 아마존, 마이크로소프트의 선임 프로그래머로 근무하고 있는 최고의 웹개발 디자이너이기도 합니다."
라고 먼저 이야기해 보세요. 이 경우 반드시 GPT가 아래와 같이 답변할 때 이후 내용을 진행하세요!!

간혹, GPT의 답변 내용에 "저는 개인적인 내용은 잘 모르고 근무한 적이 없고, 잘 모른다."라는 취지로 답변하는 경우 새로운 창을 열어서 GPT가 아래의 답변이 될 때까지 다시 하시길 바랍니다. 바로 아래와 같은 답변을 얻게 될 것입니다.

이제 개발하려고 하는 앱페이지를 설명하고 html 문서를 작성해 달라고 하면 html 기본 골격을 잘 작성해 줍니다. 이내용을 바탕으로 기본 골격을 수정하여 html을 완성시킵니다.

이때 CSS 요소를 개발하려고 하지 말고, html의 기본 골격 구조와 전체적인 윤곽을 확정시키는 것을 목적으로 합니다. CSS 요소를 동시개발 하려고 하면 정말 오래 걸립니다.
실력이 쌓일 때까지는 절대 동시 개발 하지 마세요!!

이때 반드시 개발된 결과물이 화면의 중앙에 결과물이 출력되도록 설계해야 합니다.

🎯결과물이 Center 처리 및 반응형으로 처리하는 방법🎯

🔴방법 1. head와 head에 코드를 삽입하는 방법 : GPT가 알려준 코드

아래의 코드를 실행하면 제 경우에는 오류가 발생합니다. 따라서 아래 코드는 사용하지 않고 있습니다.

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--반응형앱-->
<meta name="viewport" content="width=device-width">
<!--모바일 반응형으로 변경하는 코드 -->
<!-- 모바일에서는 첫번째 width크기를 그대로 따라가는 경향이 있으므로 첫 페이지에 광고가 있는 경우 해당광고의 크기를 따라간다-->
<!--따라서, 광고 width크기가 명확한 경우에는 위 코드는 필요가 없다.-->
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* 화면 전체 높이에 대한 100%로 설정하여 화면 중앙에 위치시킵니다. */
      margin: 0; /* 기본 마진 제거 */
    }
  </style>
  </head>

🔴방법 2. 강제적으로 <center> 코드 </center>로 처리

아래와 같이 <center> html코드 묶음 </center>을 넣어서 모니터 중앙에 결과물이 노출되도록 합니다.
이렇게 하니 티스토리, 구글블로거 등 다양한 설치형 블로그에서도 아주 잘 작동됩니다.
그러나, 방법 1로 개발하는 경우 제가 원하는 결과물이 산출되지 않고 계산된 결과물이 뒤죽박죽 섞이고 숫자가 엉켜서 보이는 느낌이 듧니다.

따라서, 어떤 결과물이 이쁘고 일관적으로 화면에 출력되도록 하려면 출력물의 공간을 <div style="width:000px;">와 같이 결과물이 출력될 위치를 강제적으로 화면 폭을 설정한 후 해당 div로 확정된 공간을 <center>와 </center>로 묶어 버리면 화면 중앙에 멋지게 결과물이 깨지지 않고 출력이 되었습니다.

이 부분은 제가 2주 넘게 고생해서 발견(?)한 내용이니 꼭 이용해 보시길 바랍니다.

<center>
<div style="width:750px;">
    <a href="https://goldhub.co.kr/%EA%B5%B0%EC%A0%81%EA%B8%88%EB%A7%A4%EC%B9%AD%EC%A7%80%EC%9B%90%EA%B8%88%EB%B0%8F%EB%A7%8C%EA%B8%B0%EA%B8%88%EC%95%A1%EA%B3%84%EC%82%B0%ED%95%98%EA%B8%B0.html">
    <button class="favorite styled" style="font-size:22px;" type="button"><b>복무유형별 군적금 매칭지원금 계산하기</b></button></a>
    <button class="help23 styled" style="font-size:22px;" type="button" id="helpButton"><b>도움말</b></button>
    <p class="bl-text">공군이 아닌 경우 "복무유형별 군적금 매칭지원금 계산하기" 버튼을 클릭하세요!!</p>
    <figure class="niniz-emoticon">
        <img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/006.gif" width="150" />
        <span class="explosion-text">명중! 충성!</span>
      </figure>
</div>

<div id="popupContainer" class="popup-container"> <!--팝업 내용 css와 script가 동시에 있어야 함-->
    <h3>😍매칭지원금 간편 계산기 사용방법😍</h3>
    <div style="text-align: left;">
    <p data-ke-size="size16">1. <b style="border-bottom:solid 3px #ef2828;">우선적으로 입대일자를 입력합니다.</b> 전역일자와 적금 만기일자가 자동 계산됩니다.</p>
    <p data-ke-size="size16">2. <b style="border-bottom:solid 3px #ef2828;">군인적금 📅가입일자</b>를 입력합니다. 자동으로 매월불입가능한 매월불입 횟수가 자동 확정됩니다.</p>
    <p data-ke-size="size16">3. 가입 첫달 입금 또는 미입금 여부를 선택합니다. <br> 💞가입 첫달에는 월불입금을 입금하지 않아도 됩니다. 하지만, 첫달 부터 불입액을 입금하는 것이 무조건 유리합니다. 그 이유는 중간에 한번 미납했을 때 만회를 할 수 있기 때문입니다. 만약 미납하였다면 전역일자 등에 따라 매우 불리하게 됩니다. 따라서, 신규 가입을 고려하는 경우에는 무조건 첫달부터 챙겨서 입금하시기 바랍니다.</p>
    <p data-ke-size="size16">4. 계산하기 버튼을 클릭합니다. 자동으로 매칭지원금과 만기수령금액이 산출됩니다.</p>
    <p data-ke-size="size16">5. 자동으로 산출된 금액은 일반적인 예시이므로 🅾회차별 입금 내역🅾에 자신의 상황에 맞게 월불입내역을 입력하고 다시 계산하기 버튼을 클릭하면 정확하게 매칭지원금과 만기수령금액을 산출할 수 있습니다.</p>
    <button id="closeButton" class="close-button">닫기</button>
    </div>
</div>


<div>    
<h1 id="wpwpwp"><b style="color: red;">[공군]</b> 군인적금 장병내일준비적금 <br>매칭지원금 만기수령금액 간편 계산하기</h1>
</div>


<div style="border:solid 5px #a987ed; width:750px;padding:10px;margin-bottom: 5px;border-radius: 10px">


    <h2>🪖공군 군복무 관련정보🪖</h2>
    <label for="enlistmentDate">⭕입대일자:</label>
    <input type="date" id="enlistmentDate">

    <label for="dischargeDate">⭕전역일자:</label>
    <input type="date" id="dischargeDate" ><br>
<p>▪입대일자를 입력하면 전역일과 만기일자가 자동산출됩니다!!</p>

    <p style="font-size:17px;margin-bottom: 5px;" id="turmdischargeDate"></p>

</div>
</center>

제가 개발하려는 웹앱의 목적에 적합하지 않은 코드 같더라고요!! 그래서 지금은 강제적인 방법으로

명령어를 html에 직접 넣어서 사용하고 있어요. 이 골격이 완료되면 이제 가장 중요한 5번으로 넘어갑니다.

골격은 30분 내외로 거의 완료되더라고요.

⭕6. 목록화된 계산 순서에 따라 계산 함수를 코딩합니다. (중요-오늘의 핵심)

이 부분에서 정말 중요한 것은 여러 가지 기능이 있는 <script>여러 가지 기능 수행코드 </script>로 만들지 말라는 것입니다.
아래의 코드에서 <script> 코드 </script> 코드는 2개의 기능을 수행합니다. 이렇게 2개의 기능이 모두 수행되도록 하는 경우에는 아래 코드에서는 쉽게 오류를 찾을 수 있지만, 복잡한 경우에는 오류를 찾았다고 하더라도 그 오류를 수정하는 과정에서 또 다른 기능이 오류를 일으키게 됩니다.
한마디로 이걸 고치면 이것이 오류가 되고, 뒤죽박죽 섞이면서 코딩이 짜증 나게 됩니다. 특히, 저처럼 코드들이 무슨 기능을 하는지 정확하게 이해하지 못하는 경우에는 정말 답답해 죽어요..
이 부분은 정말 중요하니 계산코드는 한 개의 <script> 묶음에 하나의 계산이 완료되도록 하세요!!
아래의 코드를 Test상태로 돌려보면 정말 잘 돌아갑니다. 하지만, 티스토리 등 여타 블로그로 코드를 옮기면 코드가 먹통이 됩니다. 따라서, 정확하게 뭐가 오류인지? 알 수가 없어서 애간장 녹아내립니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>만 나이 계산기</title>
</head>
<body>

    <div class="age-section">
        <h2 class="age-title">🎉 만 나이 계산기 🎉</h2>

        <div class="age-input-section">
            <label for="birthdate">생년월일:</label>
            <input type="date" id="birthdate" class="age-input">
            <label for="basedate">기준일:</label>
            <input type="date" id="basedate" class="age-input">
            <button class="age-button" onclick="calculateAge()">나이 계산하기</button>
        </div>

        <h3 id="result"></h3>
    </div>

    <script>
        // 기준일을 오늘 날짜로 설정
        document.getElementById('basedate').valueAsDate = new Date();

        function calculateAge() {
            var birthdate = new Date(document.getElementById('birthdate').value);
            var basedate = new Date(document.getElementById('basedate').value);

            var age = basedate.getFullYear() - birthdate.getFullYear();
            var m = basedate.getMonth() - birthdate.getMonth();
            if (m < 0 || (m === 0 && basedate.getDate() < birthdate.getDate())) {
                age--;
            }

            var ageString = age + "세";

            // 날짜 차이 계산
            var days = Math.floor((basedate - birthdate) / (24 * 3600 * 1000));
            var ageDays = days - (age * 365);
            var ageMonths = Math.floor(ageDays / 30); // 단순 계산을 위해 1개월을 30일로 가정
            ageDays -= ageMonths * 30;

            ageString += " (만 " + age + "세 " + ageMonths + "개월 " + ageDays + "일)";

            document.getElementById('result').innerText = "만 나이: " + ageString;
        }
    </script>

</body>
</html>

아래와 같이 Test에서는 위 코드가 잘 돌아갑니다.!!

그런데 위 코드를 티스토리 등 다른 테마가 있는 코드에서 돌리면 먹통이 됩니다.

원인은 정말 다양합니다.

CSS style명, html 변수명(Id="result"), 함수 변수명('birthdate')이 워드프레스에서 충돌이 발생하는 경우가 있고,

ttj회원님 노하우 오류 원인 글 확인

위에서 설계한 <script> 코드 </script> 코드를 본문에 넣어서 워드프레스로 그냥 발급하는 경우에도 오류가 발생하게 됩니다.

워드프레스에서는 반드시 <script> 코드 </script>를 넣을 때는 특정 플러그인을 통해 함수를 넣어야 합니다.

워드프레스 오류 원인 확인

따라서, 반드시 <script> 기능 </script>에는

기능이 1개만 수행되도록 코드를 구성하세요!!

아래의 코드는 원래 코드를 다시 수정한 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎉 만 나이 계산기 🎉</title>
</head>
<body>

    <div class="age-section">
        <h2 class="age-title">🎉 만 나이 계산기 🎉</h2>

        <div class="age-input-section">
            <label for="birthdate">생년월일:</label>
            <input type="date" id="birthdate" class="age-input">
            <label for="basedate">기준일:</label>
            <input type="date" id="basedate" class="age-input">
            <button class="age-button">나이 계산하기</button>
        </div>

        <!-- 수정된 부분: 결과를 표시할 부분에 id="result" 추가 -->
        <h3 id="result"></h3>
    </div>

    <script>
        // 페이지 로드 시 기준일을 오늘 날짜로 설정
        document.addEventListener('DOMContentLoaded', function() {
            var currentDate = new Date();
            var year = currentDate.getFullYear();
            var month = String(currentDate.getMonth() + 1).padStart(2, '0');
            var day = String(currentDate.getDate()).padStart(2, '0');
            var formattedDate = year + '-' + month + '-' + day;
            
            document.getElementById('basedate').value = formattedDate;
        });

        // "나이 계산하기" 버튼에 이벤트 리스너 추가
        document.querySelector('.age-button').addEventListener('click', function() {
            calculateAge();
        });

        function calculateAge() {
            var birthdate = new Date(document.getElementById('birthdate').value);
            var basedate = new Date(document.getElementById('basedate').value);

            var age = basedate.getFullYear() - birthdate.getFullYear();
            var m = basedate.getMonth() - birthdate.getMonth();
            if (m < 0 || (m === 0 && basedate.getDate() < birthdate.getDate())) {
                age--;
            }

            var ageString = age + "세";

            // 날짜 차이 계산
            var days = Math.floor((basedate - birthdate) / (24 * 3600 * 1000));
            var ageDays = days - (age * 365);
            var ageMonths = Math.floor(ageDays / 30);
            ageDays -= ageMonths * 30;

            ageString += " (만 " + age + "세 " + ageMonths + "개월 " + ageDays + "일)";

            // 결과를 id="result"에 표시
            document.getElementById('result').innerText = "만 나이: " + ageString;
        }
    </script>

</body>
</html>

위와 같은 정상 작동 코드를 만들려고 하면 다음과 같이 하면 됩니다.

우선 원래 오류가 발생되고 있는 코드를 GPT의 입력창에 넣고 <SCRIPT>를 기능별로 나눠서 다시 작성해 줘라고 하면
코드를 2개의 <SCRIPT>로 작성해 줍니다. 물론 이 2개의 코드가 정상적으로 작동된다는 보장은 없습니다.

따라서, 각각 실행해 보면 어떤 부분에서 오류가 있는지 확실하게 알 수 있습니다.

오류 처리가 있는 <SCRIPT> 코드를 GPT 대화창에 입력하고, 다음과 같이 질문을 합니다.

( 결과 값이 id=result에 표시되어야 하므로 아래와 같이 질문합니다.)

나이계산하기 버튼을 클릭하면 위 함수는 계산을 하지 못하고 있거나, 계산이 정상적으로 계산되고 있더라도 그 값이 html요소 "result"에 값이 화면에 노출되고 있지 있습니다. 그 원인이 무엇인지 확인하고 설명 후에 코드를 수정해 줘

그러면, GTP는 원래 코드의 오류 원인을 다음과 같이 설명하고

위와 같이 수정된 정상 코드를 작성하였습니다.

현재 코드에서는 "나이 계산하기" 버튼에 대한 이벤트 리스너가 페이지 로드될 때 아직 존재하지 않는 요소에 바로 추가되고 있습니다. 따라서 해당 요소가 존재하지 않는 상태에서 이벤트 리스너를 등록하고 있어서 발생하는 문제입니다. 이를 해결하기 위해 아래와 같이 코드를 수정할 수 있습니다. 두 번째 <script> 블록 내부에 이벤트 리스너 등록 부분을 DOMContentLoaded 이벤트 핸들러로 감싸서 페이지가 로드된 후에 실행되도록 변경합니다.

만약, 처음부터 SCRIPT의 기능을 기능별로 각각 작성하였다면 이렇게 복잡하게 원인을 찾을 필요는 없었을 것입니다.

그래서 처음부터 기능별로 SCRIPT를 잘 작성하는 것이 좋아요!!

이외에도 코드 확장을 위해 HTML의 특정 기능이 수행되는

속성코드는 사용을 피해야 합니다.!!

또한, 원래 코드에는 티스토리에서 HTML모드로 삽입하게 되면

특정 코드가 깨지는 현상이 있습니다.

이렇게 코드가 깨지는 HTML고유의 명령어는 사용하지 않는 것이 좋아요.

이것을 모르면 나중에 만든 코드를 여러 플랫폼으로

확장할 때 어려움을 겪게 되고 고통스러운 코딩을 하게 되니

이번 기회에 꼭 알아 두세요!!