6.3 코드 주석 및 오류 해결

약 4분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

6.3 코드 주석 및 오류 해결

코드 주석은 코드의 목적과 기능을 설명하고, 다른 개발자 혹은 향후 자신을 위한 참고 자료가 됩니다. 주석을 잘 달아야 코드 유지보수와 협업이 훨씬 수월해집니다. HTML, CSS, JavaScript 각각에 적절한 주석 작성을 통해 이해를 돕는 몇 가지 예제를 살펴보겠습니다.

코드 html

<!-- 헤더 영역 시작 -->
<header>
    <h1>나의 포트폴리오</h1>
    <nav>
        <!-- 네비게이션 링크들 -->
        <ul>
            <li><a href="#about">소개</a></li>
            <li><a href="#projects">프로젝트</a></li>
            <li><a href="#contact">연락하기</a></li>
        </ul>
    </nav>
</header>
<!-- 헤더 영역 끝 -->

CSS 주석은 주로 블록의 기능을 설명하거나, 특정 스타일을 적용한 이유를 명시하는 데 사용됩니다. 다음 예시는 CSS에서의 주석 사용 예입니다.

코드 css

/* 전체적인 레이아웃 스타일링 */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

/* 헤더 스타일 조정 */
header {
    background-color: #333;
    color: white;
    text-align: center;
}

JavaScript는 코드의 흐름과 함수의 역할을 설명하는 주석이 중요합니다. 아래 코드는 주석을 활용하여 함수가 어떤 기능을 하는지를 설명하는 예입니다.

코드 javascript

// 버튼 클릭 시 알림을 표시하는 함수
function showAlert() {
    alert('버튼이 클릭되었습니다!');
}

// 페이지가 로드될 때 이벤트 리스너 설정
window.onload = function() {
    const button = document.getElementById('alertButton');
    button.addEventListener('click', showAlert);
};

코드를 작성하다 보면 오류가 발생할 수 있습니다. 이를 해결하기 위해서는 다음과 같은 방식으로 접근할 수 있습니다.

콘솔 로그 사용: 코드의 흐름을 파악하기 위해 console.log()를 활용하여 변수가 어떤 값을 가지는지 확인합니다.
문법 체크: 자주 발생하는 오류는 주로 문법적 실수로 인해 발생합니다. 세미콜론 누락, 중괄호 짝 맞추기 등을 다시 한번 점검합니다.
이벤트 리스너 확인: 클릭, 입력 등의 이벤트가 올바르게 작동하는지 확인하여 잘못된 부분이 있는지 체크합니다.

실습 문제: 위의 코드 예제들에서 주석이 부족한 부분을 찾아 보완하고, 코드에서 발생할 수 있는 잠재적인 오류를 식별하여 해결해 보세요.

6.3 코드 주석 및 오류 해결

6.3 코드 주석 및 오류 해결

댓글 0