본문 바로가기

프로젝트22

[JS] 테트리스를 간단히 만들어보며. 바닐라 js로 간단하게 만들어 볼 수 있는 것들을 만들어 보는 사이드 프로젝트인 js-util repo의 8번째 기능으로 간단한 테트리스를 구현해보았다. https://github.com/yoonjonglyu/js-util GitHub - yoonjonglyu/js-util: html, css, js, vanillajs, animation, module & util html, css, js, vanillajs, animation, module & util - GitHub - yoonjonglyu/js-util: html, css, js, vanillajs, animation, module & util github.com 당연한 말이지만 바닐라 js로 직접 만든 모듈 로더와 css in js 모듈 외에는 .. 2022. 3. 20.
[웹챗] 컨텍스트 정리하기 해당 사이드의 경우 특정 상태관리 오픈소스에 대한 종속성을 없애기 위해서 React hook중 context 와 state 훅 만을 사용해서 글로벌 state를 관리한다. 일단 기존의 context 사용 방식의 경우 여러 컨텍스트를 각 도메인(영역)에 맞게 여러개 만들어서 각 context가 필요한 영역에서 가져다 쓰는 방식이였는데 해당 프로젝트 목적인 사용자 커스텀 기능을 추가하기 위해서 글로벌 state를 많이 추가해야 할 필요성을 느꼈고, 그럴 경우 기존의 방식으로는 너무 난잡하고 코드 스멜이 심해지는 점 때문에 각 state를 도메인 별로 또 state별로 분리해서 관리할 필요성을 느꼈다. Context를 정리하는 가장 쉬운 방식은 Recoil이나 RTK 같은 상태관리 오픈소스를 사용하는 것이겠지.. 2022. 3. 8.
[JS]노션 기능을 간단히 따라 만들어보며 의외로 사람들이 노션 기능 구현 자체를 어려운 것으로 생각한다는 소리를 듣고 간단히 구현해보았다. 나도 노션은 잘 만든 소프트웨어라고 생각하고 잘 사용하고 있지만 사실 기능 자체를 구현하는데 어려운게 있을거라고 생각해본 적은 없었기에 그냥 바닐라 js로 간단히 생각대로 만들어보고 그 점에 대해서 간단히 정리해본다.(물론 기능이 아닌 노션의 UI/UX는 만들기 쉽지 않다.) 먼저 노션은 본질적으로 메모장처럼 데이터를 저장하고 불러오고 수정하는 기능을 지원해야한다. 노션 자체의 기본 틀은 여러 페이지의 관계로 구성 되어 있어서 간단하게 자료구조를 잡아보면 페이지 목록 과 그 페이지에 해당하는 컨텐츠 2가지로 나뉠 수 있다. 그리고 초기 로딩시 그 데이터를 불러오는 것과 데이터를 저장하는 부분이 필요하다. l.. 2022. 3. 7.
[js-util] 바닐라 js로 프론트엔드 기능 개발하기. 채팅 프로젝트를 어느 정도 마무리한 시점(귀찮아서 해당 내용들은 천천히 블로그에 올릴 예정이다.) 에서 추후 프로젝트인 인터렉티브 UI SDK 와 디자인 시스템을 진행전에 바닐라 js로 페이지네이션, 라우팅, 스크롤, 인터렉티브 기능 등 여러가지 자주 사용되는 또 유용한 기능들을 구현 해보고 리팩토링 하는 형식의 프로젝트를 시작하기로 했다. 해당 사이드는 구현 및 인터렉티브 개발 실력을 키우고 자주 쓰이는 기능들에 대한 깊이 있는 이해를 얻기 위함이 목적이다. 또 추후에 정리해서 지금은 컨셉만 잡아놓은 개인 디자인 시스템에 넣거나 그냥 결과물을 간편하게 다른 사람에게 보여주기 위한 형식으로 진행 할 생각이다. https://github.com/yoonjonglyu/js-util GitHub - yoonj.. 2022. 1. 30.

티스토리툴바