[js-util] 바닐라 js로 프론트엔드 기능 개발하기.

채팅 프로젝트를 어느 정도 마무리한 시점(귀찮아서 해당 내용들은 천천히 블로그에 올릴 예정이다.)

에서 추후 프로젝트인 인터렉티브 UI SDK 와 디자인 시스템을 진행전에 바닐라 js로 페이지네이션, 라우팅, 스크롤, 인터렉티브 기능 등 여러가지 자주 사용되는 또 유용한 기능들을 구현 해보고 리팩토링 하는 형식의 프로젝트를 시작하기로 했다.

 

해당 사이드는 구현 및 인터렉티브 개발 실력을 키우고 자주 쓰이는 기능들에 대한 깊이 있는 이해를 얻기 위함이 목적이다.

또 추후에 정리해서 지금은 컨셉만 잡아놓은 개인 디자인 시스템에 넣거나 그냥 결과물을 간편하게 다른 사람에게 보여주기 위한 형식으로 진행 할 생각이다.

https://github.com/yoonjonglyu/js-util

GitHub - yoonjonglyu/js-util: html, css, js, vanillajs, animation, module & util

1.https://yoonjonglyu.github.io/js-util/mouseTracking/

Mouse Tracking

인프런 에러 페이지에서 영감을 얻은 모듈로 마우스를 따라다니는 UFO 이미지와 클릭시 날아왔다 사라지는 별 이미지를 DOM 구조를 이용해서 간단히 구현한 내용이다. canvas를 사용해도 어렵진 않은데 두가지 버전을 공통화해서 정리하는게 조금 고민인 모듈.

2.https://yoonjonglyu.github.io/js-util/infinityScroll/

Infinity Scroll

비동기로 데이터를 제공할때 UX적인 측면에서 페이지네이션 보다 편해서 자주 사용되는 기능인 무한 스크롤을 intersectionObserver를 통해서 간단히 구현한 내용이다. 로딩이나 아이템등은 단순하게 progress 태그와 아무 의미 없는 배열로 구성했다.

3.https://yoonjonglyu.github.io/js-util/pagination/

Pagination

자주 쓰이는 기법인 페이지네이션을 간단히 구현했다. 코드적으로 리팩토링 할만한 부분이 많긴하지만 의미 있을거 같지는 않아서 비교적 간단한 수준의 데모만 구현했다.

4.https://yoonjonglyu.github.io/js-util/styledInJs/

Styled In Js

 

리액트에서 자주 쓰이는 스타일드 컴포넌트의 CSS IN JS 기능을 간단하게 구현 해본 내용이다. 여기서 세부적인 기능을 붙이고 에러 처리등 디테일을 견고하게 끌어올리면 그게 styled components가 된다.

5.https://yoonjonglyu.github.io/js-util/moduleLoader/

Module Loader

 

AMD(Asynchronous Module Definition)에 따라서 간단히 만들어본 모듈로더이다. require.js를 참고해서 config, require, define등을 구현했다. 컨텍스트 분리(클로저)를 통한 모듈화를 간단히 구현했고, 의존성 부분에서 개선이 필요하나 해당 사이드 내에서 쓰기에는 큰 무리가 없을거라 본다.

6.https://yoonjonglyu.github.io/js-util/promiseYou/

Promise You

promise 구현체를 직접 js로 구현해본 내용 간단하게 then, catch, finally 정도 구현해봤다. 여러모로 보완할 부분이 많기는 하지만 promise 구현체를 직접 구현해서 사용 할 필요가 없으므로 간단한 수준에서 마쳤다.

7.https://yoonjonglyu.github.io/js-util/rotion/

Rotion - 메모

노션 기능을 js로 간단하게 따라서 만들어본 내용이다. 기본적인 페이지 추가 & 텍스트 라인 추가, 드래그로 텍스트 순서 변경만 구현해보았다.

8.https://yoonjonglyu.github.io/js-util/tetris/

Tetris

어디선가 개발자라면 테트리스 정도는 간단히 만들줄 알아야한다는 소리를 들었다. 벽돌깨기나 공튀기기 정도는 canvas를 활용해서 만들어 본적이 있어서, 테트리스도 못 만들 것은 아니니 한번 만들어 보자는 생각과 + canvas를 활용하면 너무 쉬우니 순수 dom을 js로 조작해서 만들어보자는 생각으로 만들어본 테트리스다. 나름 재미있었고, 생각보다 어려웠다. 또 테트리스를 모르는 상태다 보니 만들면서 자료를 찾아보게 되었는데 겉보기와 다르게 상당히 복잡하고 섬세한 게임이라는 사실을 느꼈다. (하지만 난 엘든링 같은 게임이 재미있다.)

9.https://yoonjonglyu.github.io/js-util/store/

Store

바닐라js로 작업을 할때 아쉬움을 느낀 전역 상태 관리와 그로 인한 부분 리렌더링에 관한 필요성 때문에 React Hook 인터페이스를 모방해서 만들어본 전역 상태관리 스토어다. 옵저버 패턴으로 만들었으며, 발행 task 중복 처리나 동일 상태 변경 정도를 막아뒀다. v-dom처럼 컴포넌트 상태를 컴포넌트가 가지고 있지 않고 중복(변경이 없으면서 실행 되는 코드들)처리를 수동으로 해줘야 하는 것에서 한계점을 느꼈다.

10.https://yoonjonglyu.github.io/js-util/swipeSlide/

Swipe Slide

회사에서 슬라이드가 없는 스와이프 기능을 여러모로 커스텀하게 사용해야 할 일이 있어서 오픈소스를 찾아본 결과 적절한 패키지가 없어서 직접 모듈을 만들었다. 그리고 스와이프 기능에 대한 구현을 복습하기 위해서 바닐라 js로 만들어보았다. 생각 없이 짜다가 착각으로 역방향으로 스와이프 되긴하지만 심플하게 스와이프 기능 + 무지성 단방향 슬라이드를 구현 해보았다.