Groo - class로 구조 변경!! (vanilla.js로 spa 구현, binding 문제 발생)

기존 프론트 구조

- 함수만을 이용

- 페이지마다 html 파일을 두고 새로운 페이지를 렌더링 하도록 구현

- localStorage에 필요한 정보를 모두 저장해두고 있음

 

 

발생한 문제

- 중복되는 기능이 있는 함수를 페이지마다 만들어야 함

- 마크업에 있는 태그가 아니라면 오류가 발생함 (당연하지만,,, )

   -> 이거 때문에 중복이 더 많아짐

   -> 해결방법이 있을 것 같은데 내가 못 찾는 느낌!! (이것도 찾아봐야겠다)

 

 

변경한 프론트 구조

- 클래스를 이용

- SPA 구현 ( data-href 라는 옵션을 태그에 추가해서 구별할 수 있도록)

- 페이지 별로 클래스를 생성

- habit, user, comment 클래스를 생성해서 각 기능별로 load, save 기능을 수행할 수 있도록 함

 

 

 

클래스로 변경하는 이유??

프로젝트를 진행할 때 함수만을 이용해서 프로젝트를 했다

물론 class도 함수이자 객체이긴 하지만,

class를 이용할 때 어떤 장점이 있을 수 있을지 생각해보고 싶고,

class를 사용하게 되면 다양한 문제들이 생길 텐데

그런 것들을 해결하면서 많은 공부를 할 수 있을 것 같기 때문에 변경하려고 마음 먹었다!!

 

 

 

binding문제 발생!!

클래스로 변경 중에 바인딩에 대한 문제가 생겼다.

바인드를 사용해서 해결하면 된다고 하는데

일단 나는 스코프와 클로저를 제대로 이해하고 싶어서 이 공부가 어느정도 끝난 후 다시 프로젝트를 할 것 같다.