토이프로젝트 1
본격적으로 실시간 강의와 필수 영상 시청을 통해 html,css,javascript 기반으로 공부한 학습 내용을 토이 프로젝트를 통해 구현하여 학습을 진행하였습니다.
조마다 4~5명씩 1팀이 되어 과제를 수행합니다.
정해져 있는 토이 프로젝트 주제와 주제에 맞는 요구사항과 선택사항을 전달하고 요구사항을 기반으로 프로젝트를 진행하며 추후 조에 따라 선택사항도 같이 개발합니다.
요즘 대세는 React, Next.js인데 왜 바닐라 자바스크립트로 프로젝트를 진행했는가?
React와 Next.js가 각광받고, 비교적 간편하다는 이야기가 많습니다. 그래서 저는 순수 자바스크립트로 프로젝트를 진행해 보면서 어떤 점이 불편한지, 그리고 왜 사람들이 React와 Next.js를 선택하게 되는지 직접 경험해보고 싶었습니다. 이러한 비교를 통해 두 기술의 장단점을 더 깊이 이해하고자 순수 자바스크립트를 선택하게 되었습니다.
순수 자바스크립트에서 어떤 점이 어려웠나요?
순수 자바스크립트로 SAP(Single Page Application)를 구축해야 했기 때문에, 직접 Router를 구현하거나 class를 활용해 프로젝트를 진행하는 데 어려움이 있었습니다.
특히, 최근 리액트는 주로 함수형 컴포넌트를 사용하기 때문에 class에 대한 공부를 소홀히 했습니다. "리액트가 함수형 중심인데 class를 굳이 공부할 필요가 있을까?"라는 생각도 했었죠. 하지만 이번 기회를 통해 class와 함수형의 차이점을 명확히 이해할 수 있었습니다.
class의 장점
제가 프로젝트를 진행하며 느낀 class의 가장 큰 장점은 상속입니다.
extends 키워드를 사용하면 상위 클래스의 기능을 하위 클래스에서 간편하게 활용할 수 있습니다. 이로 인해 코드 재사용성이 높아지고, 유지보수가 수월해집니다.
간단한 예시 코드를 통해 설명해보겠습니다.
export default class Container {
constructor(element) {
this.$container = document.querySelector(element);
}
}위 코드는 하위 클래스에서 전달받은 값을 사용해 document.querySelector로 해당 DOM 요소를 찾고, 이를 this.$container에 저장합니다.
import Container from "./Container";
export default class Page extends Container {
constructor() {
super(".main");
}
render() {
this.$container.innerHTML = `
<div>
123
</div>
`;
}
}여기서 super 키워드를 사용해 상위 클래스인 Container에 .main이라는 값을 전달하여 DOM 요소를 찾고, this.$container로 해당 요소에 접근해 HTML을 렌더링할 수 있습니다.
이처럼 상속을 통해 각 컴포넌트마다 DOM 요소에 접근하는 코드를 반복하지 않아도 되므로, 코드의 가독성이 향상되고 편리하게 사용할 수 있습니다.
마지막으로, class 선언 시 주의할 점은 클래스 이름을 항상 파스칼 케이스로 작성해야 한다는 것입니다.
후기
이번 프로젝트에서 순수 자바스크립트를 사용하면서, 기본적인 웹 개발의 흐름과 작동 원리를 깊이 있게 배울 수 있었습니다. React나 Next.js 같은 프레임워크가 얼마나 개발을 편리하게 해주는지 체감할 수 있었고, 동시에 그 편리함 뒤에 숨겨진 자바스크립트의 본질을 이해하게 되었습니다.
Router를 직접 구현하거나, 컴포넌트를 관리하는 과정에서 많은 시행착오를 겪었지만, 이를 통해 자바스크립트의 강력함과 한계를 동시에 경험했습니다. 특히, 코드의 유지보수성과 재사용성에서 프레임워크의 장점이 두드러지게 느껴졌고, 그동안 당연하게 생각했던 React와 Next.js의 기능들이 얼마나 효율적인지 다시 한번 깨달았습니다.
결과적으로, 이번 프로젝트는 저에게 단순한 기술적 도전이 아닌, 왜 현대 웹 개발자들이 특정 도구를 선택하는지에 대한 통찰을 제공해주었고, 앞으로의 개발 방향성에도 많은 도움이 되었습니다.
