Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- react
- SSR
- react.js
- excutionContext
- 우아한테크러닝
- scope
- Hooks
- Binding
- 취업준비
- npm
- 상태관리
- 코딩테스트
- state
- Groo
- Modules
- 함수 바인딩
- JavaScript
- 취준
- useState
- CSR
- vanilla.js
- 리액트
- closure
- Redux
- lexicalEnvironment
- 환경오염
- 리액트를 다루는 기술
- 개발일기
- 카카오페이
- mobx
Archives
- Today
- Total
개발하자
Groo - class로 구조 변경!! (vanilla.js로 spa 구현, binding 문제 발생) 본문
기존 프론트 구조
- 함수만을 이용
- 페이지마다 html 파일을 두고 새로운 페이지를 렌더링 하도록 구현
- localStorage에 필요한 정보를 모두 저장해두고 있음
발생한 문제
- 중복되는 기능이 있는 함수를 페이지마다 만들어야 함
- 마크업에 있는 태그가 아니라면 오류가 발생함 (당연하지만,,, )
-> 이거 때문에 중복이 더 많아짐
-> 해결방법이 있을 것 같은데 내가 못 찾는 느낌!! (이것도 찾아봐야겠다)
변경한 프론트 구조
- 클래스를 이용
- SPA 구현 ( data-href 라는 옵션을 태그에 추가해서 구별할 수 있도록)
- 페이지 별로 클래스를 생성
- habit, user, comment 클래스를 생성해서 각 기능별로 load, save 기능을 수행할 수 있도록 함
클래스로 변경하는 이유??
프로젝트를 진행할 때 함수만을 이용해서 프로젝트를 했다
물론 class도 함수이자 객체이긴 하지만,
class를 이용할 때 어떤 장점이 있을 수 있을지 생각해보고 싶고,
class를 사용하게 되면 다양한 문제들이 생길 텐데
그런 것들을 해결하면서 많은 공부를 할 수 있을 것 같기 때문에 변경하려고 마음 먹었다!!
binding문제 발생!!
클래스로 변경 중에 바인딩에 대한 문제가 생겼다.
바인드를 사용해서 해결하면 된다고 하는데
일단 나는 스코프와 클로저를 제대로 이해하고 싶어서 이 공부가 어느정도 끝난 후 다시 프로젝트를 할 것 같다.
'Project > Groo' 카테고리의 다른 글
Groo - 실시간 상태 업데이트 (State 클래스 만들기, vanilla.js) (0) | 2021.07.14 |
---|---|
Groo - 프로젝트 목표 (0) | 2021.05.08 |
Groo - 기획 (0) | 2021.04.07 |
Comments