개발자, 트렌드를 버리다.

나는 왜 트렌드를 버렸는가?

  1. FrontEnd 프레임워크에 독립적인 UI 만드는 방식이 필요하다.
  2. jquery 를 쓰지 않는다.
  3. bootstrap 같은 특정 css 프레임워크도 쓰지 않는다.
  1. summernote 는 open source 이고 참여자가 많이 없기 때문에 만드는 방법이 심플해야 한다.
  2. 심플하지만 혼자서도 나름 완성도 있는 플러그인을 쉽게 만들 수 있어야 한다. (예를 들어 jquery 없이 파일업로드 컴포넌트 같은걸 만들 수 있어야 한다. )
  3. 쉽게 만드는 만큼 유지보수도 쉬워야 한다.

UI 를 쉽게 만드는 고민을 하다.

  1. html 관리 (요즘 다 Virtual DOM 쓰는데 여전히 그냥 DOM 을 써도 되나? )
  2. dom event 관리
  3. 그로 인한 성능 이슈
  4. 컴포넌트 기반 개발
  5. 테스트하기 쉬운가?
  • 가장 중요한 것은 html 을 통한 DOM 을 관리 하는 방식이다.
  • 두번째로 중요한 것은 Event Handling 이다.
  • 세번째로 이로 인한 성능 이슈가 나올 수 있다.
  1. jquery 로 하는 Dom 조작이 가장 큰 부분을 차지한다.
  2. Selector 를 사용하지 않도록 한다.
  3. reflow, repaint 를 최소한으로 일어나게 해서 rendering 성능을 극대화 한다.
  • 네번째로 중요한 지점은 Component 기반 개발
  • 다섯번째로 중요한 지점은 Test 의 용이성

실제 UI 를 만들다

  1. template 은 html 만 정의한다. 스크립트를 넣지 않는다.
  2. 이벤트 정의는 모두 메소드로 한다.
  3. DOM 이벤트에 대응하는 CLICK, CHANGE 같은 prefix 를 미리 정의해서 사용한다. 그렇게 해서 메소드의 목적에 대해서 명확히 한다.
  4. jQuery 와 유사한 DOM 라이브러리 패턴을 사용해서 실제 DOM 을 핸들링 한다.
  5. refs 를 둬서 element 를 바로 참조 할 수 있게 한다. 이렇게 하면 selector 를 써서 가지고 필요가 없기 때문에 dom 핸들링하는게 느리지 않다.
  6. 모델 바인딩은 사용하지 않고 특정 DOM 이벤트가 실행 될 때 그 행위를 그대로 정의한다.
  • 중첩 컴포넌트에서 이름이 같을 때 이벤트나 다른 DOM 핸들링에 문제가 있을 수 있다.
  • - 이벤트 정의가 중첩이 될 수 있다.

어플리케이션을 만들 수 있는가?

  1. html String 으로 DOM 을 넣어도 느리지 않다.
  2. refs 를 통해서 개별 element 의 속성만 제어 해도 느리지 않다.
  3. 컴포넌트 형태로 관리하니 확실히 편하다.
  4. html 기반이라 기타 다른 지식이 필요 없어서 접근하기 쉽다.
  5. 기존의 jquery 지식을 활용해도 무방하다.
  1. 이벤트 핸들링은 쉬워졌지만 drag 를 좀 더 정교하게 할 수 있는 장치가 필요하다.
  2. Component 에 property 를 정의하고 핸들링 하기 위한 규약이 필요하다.
  3. 더 큰 어플리케이션 만들기 위해서는 데이타를 관리하는 구조가 필요하다. Store 와 Action, Getter 등의 개념이 필요하다.

더 큰 곳을 향해서

마무리

  1. 우리가 알고 있던 과거 또는 현재의 방식은 최선의 도구가 아닐 수 있다.
  1. 내가 지금 하고자 하는 것들이 남들이 만들어 놓은 프레임워크가 해결책인가?
  2. 그렇지 않다면 나는 그것을 만들 수 있는가?
  3. 나는 왜 남들이 만들어 놓은 것들만 써야 하는가?
  4. 나는 왜 새로운 개념을 만들지 못하는가?
  5. 새로운 개념은 경력이 많아야 생기는가?
  6. 경력이 10년이 되도 왜 React, VueJS 같은 개념을 생각하지 못하는가?

걸작을 만드는 사람.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
easylogic

easylogic

걸작을 만드는 사람.

More from Medium

Track 2 Track: Everybody Knows

Sen. London Lamar passes first bill through Senate

Back to BADLANDS: a Retrospective of Halsey’s Debut Album

A photo of Halsey from the neck up. She is standing in front of tall desert rocks with her head thrown back. She has chin-length blue hair.