💡배운점
웹 개발을 공부하면서 처음에는 모든 코드를 한 HTML 파일에 몰아넣는 방식으로 작업했었다.
_처음에 썼던 코드 구조_
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>요구사항 페이지</title>
<style>
body, html {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
gap: 20px;
}
img {
width: 150px;
height: auto;
}
input {
padding: 8px;
font-size: 16px;
}
button {
padding: 8px 12px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<img src="logoyogo-1-80.jpg" />
<button type ="button" onclick="console.log('안녕하세요!')">인사하기</button>
<form onsubmit="handleSubmit(event)">
<input type="text" id="userInput" placeholder="값을 입력하세요" required />
<button type="submit">출력</button>
</form>
</div>
<script>
function handleSubmit(event) {
event.preventDefault();
const input = document.getElementById('userInput').value;
console.log(input);
}
</script>
</body>
</html>
이런식으로 항상 <style> 태그 안에 CSS를 쓰고, <script> 태그 안에 JavaScript 코드를 넣는 방식으로 작업을 했었다. 이렇게 하면 구조도 단순하고 한 눈에 보이긴 했지만, 실제로 프로젝트가 길어지면 유지보수가 너무 불편했다.
이번주 HTML, CSS, JavaScript를 각각의 파일로 분리하는 방법을 배웠다.
introduce.html: 구조 표현
introduce.css: 스타일만 따로 모음
form.js: 자바스크립트 동작만 따로 작성
<!-- introduce.html -->
<link rel="stylesheet" href="introduce.css">
<script src="form.js"></script>
이렇게 나누고 나니까 변경 사항이 생겨도 각 파일을 들어가서 수정하면 되어서 편했다.
✍️ 느낀점
파일을 분리하여 작업을 하면 가독성을 향상할 수 있고, 유지보수가 편리하며, 협업할 때에도 효율적일 수도 있겠다는 생각이 들었다. 앞으로 파일을 분리해서 작업을 해야겠다!!!
코드를 쪼개는건 확실히 중요한거 같아요! 하나에 몰아서 짜놓았다가 나중에 다시 쪼개는 과정을 거치는게 오히려 도움이 되겠다는 생각도 드네용