본문 바로가기

프로젝트23

오픈소스 디자인시스템 만들기 -1- 디자인 토큰에 대한 기본적인 작업이 끝나고 (공간에 대한 부분 정의할 필요성 느낌) 디자인 시스템에 대한 기본적인 문서를 만들면서 이론적인 부분이 실제와 어느 정도 간격이 있는지 확인 해본 결과 색배합 적인 측면에서는 이론과 실제가 그럭저럭 괜찮은거 같다는 느낌을 받았다. 디테일한 부분들은 지속적으로 개선해나가기로 하고 일단 뼈대들을 차근차근 만들어가고 있는 중. 다음 단계로 리액트 컴포넌트를 설계하고 개발 한후 정리한 후 프로젝트를 공개해봐야겠다. 2022. 10. 14.
[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.

티스토리툴바