레거시 코드, IR 효과 시멘틱 태그
HTML & CSS
해당 포스팅에서는 레거시 코드, IR 효과 시멘틱 태크를 다룹니다.
HTML & CSS 목차
- 웹 표준, 웹 접근성
- 반응형 작업
- 레거시 코드, IR 효과 시멘틱 태그 ✔️
- CSS 우선순위, Position 속성
- block, inline-block, inline 차이
- data 속성
- seo, 최적화 방법, ID vs class 차이
레거시 코드
레거시 코드의 개념
레거시 코드(Legacy Code) 는 기존의 소프트웨어 시스템에 존재하는 오래된 코드로, 유지보수나 확장에 어려움이 있는 코드 를 말합니다. 이 코드는 일반적으로 오래된 기술, 프레임워크, 라이브러리 등을 사용 하며, 종종 문서화가 부족하거나 테스트가 잘 되어 있지 않은 경우가 많습니다. 레거시 코드는 현대의 요구사항을 만족시키지 못하거나 새로운 기능을 추가하는 데 제약이 되는 경우 가 많습니다. 그러나 올바른 접근 방법과 개선 전략을 통해 레거시 코드의 문제를 해결하고, 시스템의 안정성과 확장성을 높일 수 있습니다.
레거시 코드의 특징
오래된 기술 스택
- 최신 기술, 라이브러리, 프레임워크가 아닌 오래된 버전의 기술 을 사용합니다.
- 예를 들어, 최신 JavaScript 프레임워크 대신 오래된 jQuery 코드, 최신 Java 버전 대신 Java 1.4 등 이 있습니다.
부족한 문서화
- 코드와 관련된 문서가 부족하거나 아예 없습니다.
- 새로운 개발자가 이해하고 수정하는 데 어려움을 겪습니다.
테스트 부족
- 단위 테스트, 통합 테스트 등의 자동화된 테스트가 부족하거나 존재하지 않습니다.
- 코드 변경 시 발생할 수 있는 버그를 예측하기 어렵습니다.
높은 결합도
- 모듈 간의 의존성이 높아 하나의 변경이 전체 시스템에 영향을 미칠 수 있습니다.
- 코드가 복잡하게 얽혀 있어 수정이나 확장이 어렵습니다.
유지보수 어려움
- 기존 시스템을 유지보수하는 데 많은 시간이 소요됩니다.
- 버그 수정이나 새로운 기능 추가가 어려울 수 있습니다.
레거시 코드의 문제점
버그 발생
- 코드 변경 시 예상치 못한 버그가 발생할 가능성이 높습니다.
- 테스트 부족으로 인해 변경의 영향을 미리 파악하기 어렵습니다.
비용 증가
- 유지보수 및 확장에 많은 비용이 소요됩니다.
- 새로운 기능을 추가하기 위한 시간이 더 오래 걸립니다.
개발자 생산성 저하
- 이해하기 어렵고 복잡한 코드로 인해 개발자의 생산성이 저하됩니다.
- 신규 개발자가 적응하는 데 오랜 시간이 필요합니다.
기술 부채
- 레거시 코드는 기술 부채(technical debt) 로 간주될 수 있습니다.
- 기술 부채가 쌓이면 시스템의 성능과 안정성에 악영향을 미칩니다.
레거시 코드의 개선 방법
리팩토링(Refactoring)
- 기존 코드를 개선하여 가독성과 유지보수성을 높입니다.
- 코드 구조를 개선하되, 기존 기능은 동일하게 유지합니다.
테스트 추가
- 단위 테스트, 통합 테스트 등을 추가하여 코드 변경의 영향을 최소화합니다.
- 테스트 커버리지를 높여 코드의 안정성을 확보합니다.
점진적인 개선
- 시스템 전체를 한꺼번에 개편하지 않고, 점진적으로 개선합니다.
- 작은 단위로 코드를 변경하고 테스트하며 안정성을 유지합니다.
모듈화 및 분리
- 코드를 모듈화하여 각 모듈의 독립성을 높입니다.
- 의존성을 줄이고, 각 모듈을 개별적으로 테스트하고 유지보수할 수 있도록 합니다.
문서화
- 코드와 시스템의 문서를 작성하고 유지합니다.
- 새로운 개발자가 시스템을 쉽게 이해할 수 있도록 합니다.
새로운 기술 도입
- 가능하면 최신 기술 스택을 도입하여 유지보수성과 확장성을 높입니다.
- 새로운 기능 추가 시 최신 프레임워크와 라이브러리를 사용합니다.
한번 읽어보면 좋은 레거시 코드와 관련된 책
“Working Effectively with Legacy Code” by Michael Feathers
- 레거시 코드를 다루는 방법과 개선 전략을 다룬 책입니다.
- 레거시 코드에 테스트를 추가하고 점진적으로 리팩토링하는 방법을 제시합니다.
IR 효과 시멘틱 태그
IR 효과 시멘틱 태그의 개념
IR 효과(Information Retrieval 효과) 는 시멘틱 태그를 사용 하여 검색 엔진 최적화(SEO)와 접근성을 개선하는 방법을 의미 합니다. 시멘틱 태그는 HTML5에서 도입된 의미론적 태그로, 문서의 구조와 콘텐츠의 의미를 명확하게 설명 합니다. 이를 통해 검색 엔진과 보조 기술(예: 스크린 리더)이 웹 페이지의 내용을 더 잘 이해하고, 사용자에게 더 나은 정보를 제공할 수 있게 합니다.
시멘틱 태그의 종류와 역할
시멘틱 태그는 문서의 구조를 명확히 하여 검색 엔진이 콘텐츠를 보다 쉽게 파악할 수 있도록 도와줍니다. 주요 시멘틱 태그는 다음과 같습니다.
<header>: 문서나 섹션의 헤터(머리말) 부분을 정의 하며, 사이트나 섹션의 제목, 로고, 네비게이션 링크 등이 포함 될 수 있습니다.<nav>: 네비게이션 링크를 정의 합니다. 주요 네비게이션 메뉴를 나타내며, 사용자와 검색 엔진이 페이지 간의 관계를 이해 하는데 도움이 됩니다.<section>: 문서의 일반적인 섹션을 정의 하며, 논리적으로 관련된 콘텐츠 그룹을 나눌 때 사용 합니다.<article>: 독립적으로 구분되어 배포될 수 있는 콘텐츠를 정의 하며, 블로그 글, 뉴스 기사, 포럼 포스트 등 독립적인 내용 을 담습니다.<aside>: 페이지의 주요 콘텐츠와 관련된 부가 콘텐츠를 정의 하며, 사이드바, 광고, 관련 링크 등 을 나타냅니다.<footer>: 문서나 섹션의 푸터(바닥글) 부분을 정의 하며, 저작권 정보, 연락처 정보, 사이트 맵 등이 포함 될 수 있습니다.<main>: 문서의 주요 콘텐츠를 정의 하며, 한 문서에서 유일하게 사용되어야 하며, 문서의 핵심 콘텐츠 를 담고 있습니다.<figure>,<figcaption>: 자립형 콘텐츠(이미지, 도표 등)와 그에 대한 캡션을 정의 하며, 콘텐츠와 캡션을 함께 그룹화하여 문서의 흐름을 방해하지 않도록 합니다.<mark>: 강조하거나 하이라이트할 텍스트를 정의 하며, 검색 엔진 결과 페이지에서 강조된 텍스트로 자주 사용 됩니다.
IR 효과와 시멘틱 태그의 장점
검색 엔진 최적화(SEO)
- 검색 엔진은 __시멘틱 태그를 통해 페이지의 구조와 콘텐츠의 의미를 더 잘 이해 할 수 있습니다.
- 중요한 콘텐츠와 관련성을 파악하여 검색 순위에 긍정적인 영향 을 미칩니다.
접근성 개선
- 스크린 리더와 같은 보조 기술은 시멘틱 태그를 통해 사용자에게 더 정확한 정보를 제공 할 수 있습니다.
- 문서의 구조를 명확히 하여 접근성을 높입니다.
코드 가독성 향상
- 멘틱 태그를 사용하면 HTML 코드의 가독성이 향상됩니다.
- 개발자와 디자이너가 문서의 구조를 더 쉽게 이해하고 유지보수할 수 있습니다.
일관된 구조 제공
- 일관된 태그 사용으로 문서의 구조를 표준화합니다.
- 협업 시 일관된 구조를 유지하는 데 도움이 됩니다.
시멘틱 태그 사용 예시
아래 예시에서는 다양한 시멘틱 태그를 사용하여 웹 페이지의 구조를 명확히 하고, 검색 엔진과 접근성 도구가 콘텐츠를 더 잘 이해할 수 있도록 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- header -->
<main>
<section id="home">
<h2>Welcome to My Website</h2>
<p>This is the home page content.</p>
</section>
<section id="about">
<h2>About Us</h2>
<article>
<h3>Our History</h3>
<p>We have a long and rich history.</p>
</article>
<article>
<h3>Our Vision</h3>
<p>Our vision is to create a better world.</p>
</article>
</section>
<!-- section -->
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
</ul>
</aside>
<!-- aside -->
</main>
<!-- main -->
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
<!-- footer -->
</body>
</html>