바닐라 js에서 생성자의 역할

전체적 바닐라 js의 구성 그림

 

바닐라 js를 통한 코드 작성은 index.html의 요소를 main.js 라는 애가

 

controller로 우선 하나씩 생성자 하나씩으로 자기의 하위 생성자를 자신의 하위 속성으로 만들면서

거기에 각 태그와 연결지어넣고 그 연결지을 때마다 메소드를 구현하는 것.

그리고 controller를 통해서 서버나 db와 잇기도 한다.

 

1. DOM 요소와의 연결: index.html에 정의된 DOM 요소들을 자바스크립트 파일(예: main.js)에서 선택하여 사용합니다. 이를 위해 document.querySelector와 같은 DOM API를 사용하여 HTML 문서의 요소들을 자바스크립트 객체로 가져옵니다. 이 과정을 통해 웹 페이지의 구조(HTML)와 행동(JS)을 연결지어 줍니다.
2. 클래스와 생성자 함수 사용: 웹 애플리케이션의 다양한 부분들을 관리하기 위해 클래스와 생성자 함수를 사용합니다. 이들은 특정 기능을 가진 객체를 생성하고, 그 객체의 초기 상태를 설정하는 데 사용됩니다. 예를 들어, 위에서 본 Store 클래스는 애플리케이션의 상태 관리를 담당하는 객체를 생성합니다.
3. 메소드를 통한 기능 구현: 클래스 내에 정의된 메소드들을 통해 특정 기능을 구현합니다. 이러한 메소드들은 이벤트 리스너, 데이터 처리, DOM 업데이트 등 다양한 작업을 수행할 수 있습니다.
4. 컨트롤러 역할: main.js 같은 자바스크립트 파일은 애플리케이션의 '컨트롤러' 역할을 할 수 있습니다. 이는 애플리케이션의 데이터 로직과 UI 간의 상호작용을 관리하고, 필요에 따라 서버나 데이터베이스와의 통신을 담당합니다. AJAX 요청, Fetch API, Axios 등을 사용하여 이러한 통신을 구현할 수 있습니다.
5. 이벤트 핸들링: 사용자의 입력과 상호작용에 반응하기 위해 이벤트 리스너를 설정합니다. 이벤트 리스너는 특정 이벤트(클릭, 키보드 입력 등)가 발생했을 때 실행될 콜백 함수를 정의합니다.

---

constructor 이해해보기

 

생성자의 constructor는 생성자의 속성을 만들어내고... 그 속성들은 각 태그 요소들과 잇거나, 메소드를 선언해놓고 불러 쓰게끔하는 거

 

생성자들은 이런식으로 this를 통해 객체인 자신에게 속성, 메서드를 갖다 붙임.

---

<상세설명>

스크립트에서 클래스의 constructor 메소드는 새로운 객체 인스턴스가 생성될 때 자동으로 호출되며, 이 객체의 초기 상태를 설정하는 데 사용됩니다. 여기서 초기 상태를 설정한다는 것은, 객체에 속성(데이터)을 추가하고, 필요한 초기화 작업을 수행하는 것을 말합니다.

 

속성 추가

생성자 내에서 this.속성명 = 값 형태로 속성을 추가함으로써, 각 객체 인스턴스마다 이 속성들을 가지게 됩니다. 이러한 속성들은 객체의 상태를 나타내며, 객체가 수행할 수 있는 행동(메소드)에 의해 사용되거나 변경될 수 있습니다.

태그 요소와 연결

웹 개발에서는 DOM(Document Object Model) 요소(즉, HTML 태그)와 자바스크립트 객체를 연결하여, 사용자 인터페이스(UI)와 상호작용하는 동적인 웹 애플리케이션을 만듭니다. 생성자 함수에서는 이러한 DOM 요소를 찾아서 객체의 속성으로 저장할 수 있습니다. 이렇게 하면, 객체의 메소드에서 이 속성을 통해 DOM 요소를 쉽게 참조하고, 조작할 수 있게 됩니다.

메소드 선언 및 사용

클래스 내에서 메소드를 선언하고, 생성자 함수나 다른 메소드에서 이 메소드들을 this.메소드명() 형식으로 호출할 수 있습니다. 이 메소드들은 객체의 상태를 변경하거나, 계산을 수행하거나, DOM을 조작하는 등의 작업을 수행할 수 있습니다.

 

---

느낀점.

 

웹 개발을 내가 프론트부터, 베포까지 다해보고 cs를 공부하기 시작한 후에 기초를 다시 봐보니,

내가 이전에 공부할 때, 못보던 부분을 보게되어 신기하고 재밌다.