안녕하세요. Codinglee입니다.
왕초보도 이해할 수 있는 웹 프로그래밍 시간입니다.
지난 포스트에서 웹 개발 단계별 가이드에 대해 알아보았습니다.
이번 포스트의 주제는 웹 개발을 처음 하는 ” 초보자들이 자주 하는 실수 ” 입니다.
웹 개발을 처음 시작하면, 누구나 크고 작은 실수를 합니다.
실수는 코드를 이해하고 배우는 데 많은 도움이 됩니다.
하지만, 단순한 실수 때문에 너무 많은 시간을 쏟게 될 경우가 많습니다.
이 글에서는 단순하지만 정말 많은 실수의 사례를 알아보겠습니다.
오늘의 학습 순서입니다.
[ 초보자들이 자주 하는 실수 & 해결 방법 ]
1. HTML에서 자주 하는 실수
1.1 태그가 제대로 닫히지 않음
1.2 잘못된 속성 사용
1.3 파일 경로를 잘못 지정함
2. CSS에서 자주 하는 실수
2.1 중복된 스타일 규칙
2.2 선택자를 잘못 사용함
2.3 상속과 우선순위 이해 부족
3. Javascript에서 자주 하는 실수
3.1 변수 선언을 잊음
3.2 오탈자
3.3 함수를 호출하지 않음
4. 자주 발생하는 오류 해결하기
4.1 개발자 도구 사용하기
4.2 구글 검색과 개발자 커뮤니티
그럼 오늘 내용 ” 초보자들이 자주 하는 실수 ” 시작해보겠습니다.
1. HTML에서 자주 하는 실수
1.1 태그가 제대로 닫히지 않음
HTML에서 모든 태그를 열었다면 닫아야 합니다.
<div>, <p>, <h1> 같은 태그를 열었는데 닫지 않으면
레이아웃이 깨지거나 다른 요소들이 이상하게 표시됩니다.
<!-- 실수한 코드 -->
<p>이 문장은 태그를 닫지 않아서 문제가 생길 수 있습니다.
<!-- 올바른 코드 -->
<p>이 문장은 태그를 닫아서 안전합니다.</p>
- 해결 방법
– HTML을 작성할 때 항상 열린 태그와 닫힌 태그가 짝을 이루는지 확인하기
– VSCode 같은 IDE는 자동으로 닫힌 태그를 생성해주는 기능 있어요.
1.2 잘못된 속성 사용
HTML 요소에 속성을 잘못 사용할 때도 문제가 생깁니다.
예를 들어 img 태그에 href 속성을 쓰거나 a태그에 src 속성을 쓰면 안됩니다.
<!-- 실수한 코드 -->
<img href="image.jpg"> <!-- href는 잘못된 속성입니다 -->
<!-- 올바른 코드 -->
<img src="image.jpg" alt="이미지 설명">
- 해결 방법
– 각 태그가 어떤 속성을 사용하는지 확인하기
– MDN 웹 문서에서 참고할 수 있습니다.
1.3 파일 경로를 잘못 지정함
이미지나 링크의 파일 경로를 잘못 지정하면 브라우저에서 파일을 찾을 수 없습니다.
예를 들어, img 태그의 경로가 틀리면 이미지는 표시되지 않습니다.
<!-- 실수한 코드 -->
<img src="wrong-folder/image.jpg">
<!-- 올바른 코드 -->
<img src="images/image.jpg">
- 해결 방법
– 파일 경로 작성 시 파일이 실제 있는 위치를 정확히 확인합니다.
– 상대 경로와 절대 경로에 대해 잘 알아야 합니다.
2. CSS에서 자주 하는 실수
2.1 중복된 스타일 규칙
초보자들은 동일한 요소에 여러 번 스타일을 적용하면서 중복된 규칙을 작성합니다.
이렇게 하면 코드가 복잡해지고 혼란스러울 수 있습니다.
/* 실수한 코드 */
h1 {
color: red;
}
h1 {
color: blue;
}
/* 올바른 코드 */
h1 {
color: blue; /* 하나의 스타일로 통일 */
}
- 해결 방법
– CSS를 작성할 때는 스타일을 한 번에 정리합니다.
– 불필요한 중복을 제거합니다.
2.2 선택자를 잘못 사용함
CSS에서 특정 요소를 선택할 때 잘못된 선택자를 사용하는 실수도 자주 발생합니다.
예를 들어 클래스 이름을 잘못 작성하거나 #id와 .class를 혼동하는 경우가 있습니다.
<!-- HTML 코드 -->
<p class="text">이 문장을 스타일링하고 싶습니다.</p>
/* 실수한 코드 */
.texts { /* 잘못된 클래스 이름 */
color: green;
}
/* 올바른 코드 */
.text {
color: green;
}
- 해결 방법
– 클래스 이름이나 id 이름을 확인합니다.
– 개발자 도구를 이용해 제대로 적용되고 있는지 확인합니다.
2.3 상속과 우선순위 이해 부족
CSS에서는 스타일이 상속될 수 있습니다.
그리고 우선 순위에 따라 다르게 적용됩니다.
<!-- HTML 코드 -->
<div>
<p class="text">이 문장을 스타일링하고 싶습니다.</p>
</div>
/* 부모 요소에 스타일을 적용하면 자식 요소에 상속될 수 있습니다 */
div {
color: red;
}
p {
color: blue; /* 이 스타일이 더 우선합니다 */
}
- 해결 방법
– CSS 우선 순위를 기억합니다.
– ID > 클래스 > 태그
3. JavaScript에서 자주 하는 실수
3.1 변수 선언을 잊음
JavaScript에서 변수를 선언하고 사용하면 오류가 발생합니다.
let, const, var 키워드를 사용해서 변수를 선언해야 합니다.
// 실수한 코드
name = "John"; // 선언하지 않은 변수 사용
// 올바른 코드
let name = "John";
- 해결 방법
– 변수를 사용할 때에는 선언부터 해야합니다.
3.2 오탈자
초보자들이 자주 하는 실수 중 하나는 오타입니다.
오타는 가장 단순한 실수이지만, 가장 찾기 어렵습니다.
// 실수한 코드
console.log(naem); // 오타: naem 대신 name이어야 함
// 올바른 코드
let name = "Alice";
console.log(name);
- 해결 방법
– 코드를 작성할 때 주의 깊게 변수와 함수 등 이름을 확인합니다.
– 그래도 오타를 발견하지 못하면 주위 다른 사람에게 부탁합니다.
3.3 함수를 호출하지 않음
함수는 정의만 하면 안됩니다.
함수는 호출을 해야 코드가 실행됩니다.
// 실수한 코드
function greet() {
console.log("안녕하세요!");
}
// 함수 호출이 없음
// 올바른 코드
function greet() {
console.log("안녕하세요!");
}
greet(); // 함수 호출
- 해결 방법
– 함수를 정의했을 때는 반드시 호출합니다.
4. 자주 발생하는 오류 해결하기
4.1 개발자 도구(F12) 사용
웹 브라우저에는 개발자 도구가 내장되어 있습니다.
F12 키를 누르면 콘솔에서 오류 메시지를 확인할 수 있습니다.
여기서 오류가 발생하는 부분을 찾아 수정할 수 있습니다.
4.2 구글 검색과 개발자 커뮤니티
에러 메시지가 이해되지 않을 때에는 구글에 검색합니다.
대부분의 문제는 다른 개발자들이 이미 겪은 문제입니다.
Stack Overflow 같은 사이트에 답변이 많이 있을 것 입니다.
Chat-GPT를 사용하면 금방 해결책을 찾아 줍니다.
오늘의 내용은 여기까지입니다.
웹 개발을 처음 시작하면 오류가 발생하는 건 당연합니다.
오류가 무서워서 개발을 시작하지 않으면 절대 안됩니다.
Try & Error 을 반복해야지만 실력이 늘어납니다.
오류가 발생하면 기뻐하며 해결해보세요.
프로그래밍의 재미에 빠질 수 있습니다.
감사합니다.
지금까지 Codinglee였습니다.
2024. 11. 05. (화) 이른 아침 판교에서 씀.
