우테코의 미션으로 나만의 UI 라이브러리를 만드는 미션이 있습니다. 첫 미션은 Virtual DOM을 구현하는 것이었고, 완전한 Virtual DOM을 구현해내진 못했었습니다. 그래도 렌더링된 요소 중 바뀐 요소만 렌더링 시키는 것에는 성공했었습니다. 그래서 이제 다음미션인 상태관리 부분을 구현하려했습니다. 근데 개인적으로 vDom의 구현과 jsx 파서를 구현안해보고 넘어간다는게 마음에 걸렸습니다. (사실 다음 미션인 상태관리 구현하기는 쉬워보였습니다.) 그래서 JSX 파서를 만들어보기로 했습니다. jsx 파서는 tagged template literal 을 이용해서 구현을 하면되었었는데요. 제가 지금까지 구현한 코드는 다음과 같습니다. const TAGGED_TEMPLATE_LITERAL_PARAM_F..

불과 하루 전, 다라쓰에 커스텀 ui를 적용할 수 있는 기능이 추가가 되었다. vs code를 4개를 키고해야하는 개발과 테스트를 완료했다. 그리고 배포를 하고 몇가지 이슈가 있긴 했지만, 기능 자체는 정확하게 동작했었다. 문제는 기존에 다라쓰를 사용하던 블로그에서 발생했다. 커스텀 UI 기능은 다라쓰 script에 data-* 속성을 넣어주면 그에 맞는 쿼리스트링을 넘겨서 댓글모듈을 렌더링하는 방식으로 구현되었었다. 근데, 기존 사용자들은 스크립트를 새로 넣지 않는 이상, 새로추가된 data-* 속성이 없을 것이고 undefined 값으로 들어갔을 것이다. 당시 코드에서는 이렇게 처리하고 있었다. $darass.dataset.isShowSortOption === "false" ? false : true..

모든것은 다른 프로젝트를 하고있는 크루로부터 부탁을 받은 시점이었다. 자신이 진행하고 있는 팀프로젝트의 어떤 파트에 다라쓰 댓글 서비스를 삽입할 계획인데, 댓글 색상 테마를 변경하고, 몇가지 UI를 제거하고 싶다는 의견이었다. (물론 그런기능이 있으면 좋겠다고 생각하고 있었지만, TODO로만 있을 뿐 실제로 개발이 이루어지지는 않았었다.) 부탁을 받는순간 고민에 빠졌다. 현재 기능을 고정하고, 리팩터링과 테스트코드를 작성하는것에 집중할 것이냐, 아니면 기능을 추가로 구현해서 사용자의 만족을 줄것이냐였다. 프론트엔드 개발 인력도 팀내에 나 뿐이라서, 분업할 여력도 되지 않았다. 하지만 빠른시일내에 해주기로 했다. 모든 서비스는 고객을 만족시키는 방향이 우선시되어야한다고 생각했기 때문이다. 그래서 어떻게 문..

오늘은 코드 작업량이 조금 많았습니다. 1. textarea의 link부분을 자동으로 하이퍼링크 처리하기 - 원래는 div contenteditable 이었다. 원래 다라쓰는 나중에 작업할 수도 있는 markdown 문법을 위해서, 댓글입력요소를 textarea가 아니라, div contenteditable로 관리하고 있었습니다. div contenteditable은 입력하는 요소들이 html 로 변환되어 들어가는데요. 그래서 textContent로 text 문자만 추출해서 댓글로 쓰고 있었습니다. 그러다보니 엔터입력이 무시되었고, 이는 사용자에게 조금 불편할 수 있는 요소였습니다. 그래서 innerHTML를 사용하여 사용자가 엔터를 입력시에 들어가는 태그를 그대로 넣어서, 그대로 렌더링하면 엔터가 정상..

며칠전에는 다라쓰의 댓글모듈 프로젝트에서 react-query를 제거했었는데요. 오늘은 다라쓰의 관리자 페이지 프로젝트에서 react-query를 제거했습니다. 인터페이스를 크게 다르지 않게 했기 때문에, 컴파일 오류없이 마이그레이션하는것은 쉬웠지만, 여기저기서 버그가 나왔었습니다. 예를 들어서, react-query는 기본적으로 데이터를 캐싱합니다. 하지만 저는 react-query를 사용하면서 캐싱으로 제가 원하는 대로 동작하지 않았던 경험때문에 캐싱기능을 일부러 제가 만든 유틸에 넣지 않았습니다. 그러다보니, 매번 페이지에 접속할때마다 fetching이 일어났고 화면의 깜빡거림이 있었습니다. fetching자체는 브라우저 자체에서 캐싱이되어서 그런지, 한번 fetching이후에는 빠르게 데이터를 가..

1. 어떤 데이터를 DB에 저장해야 하는가. 다크모드 로직을 구현하고나서, 고민이 생겼었습니다. https://github.com/woowacourse-teams/2021-darass/discussions/741 다크모드를 추가하면 좋을 것 같아요 ! · Discussion #741 · woowacourse-teams/2021-darass 😃 github.com 1. 다크모드 토글버튼을 유저에게 온전히 넘기고, 초기 상태에 대해서 아무런 조치를 하지 않느냐. 2. 다크모드 토글버튼을 관리자 페이지로 넘겨서, 삽입한 사람의 결정대로 고정하느냐. 3. 다크모드 토글버튼을 관리자 페이지로 넘겨서, 삽입한 사람의 결정대로 고정하고 사용자에게 다크모드 토글 ui도 보여주어 알아서 조절할 수 있게 하느냐. 이 3가..

어느 웹사이트에서나 사용가능한 댓글 서비스 다라쓰에 곧 다크모드가 추가될 예정입니다. 기본적인 UI위치나 로직들을 구현했고, 배겐드 서버에 저장없이 돌아갈 수 있도록 구상하고 있습니다. 다크모드를 구현하기 위해서 사용하고 있던 styled-component의 ThemeProvider를 사용하여, 삽입된 페이지가 다크모드인지 여부를 boolean값으로 쏴주었고, 다크모드일때 읽기 어려운 값들에 대해서 분기를 쳐주었습니다. 토글버튼도 만들었습니다. svg부분빼고 100% 수제 컴포넌트입니다! 예쁘지않나용? 그리고 원래라면 팀원과 했을텐데.. 혼자라도 잘해내는 나를 보니 뿌듯합니다. 또한, 구현하면서 filter: invert(100%); css 속성을 사용하면, 이미지를 반전시킬 수 있다는 사실을 깨달았습니..

Fact: 무슨일이 있었는지, 뭘 했는지 주말동안에는 우테코의 글쓰기 미션과, react의 virtual dom과 렌더러를 만들어보는 미션을 수행했습니다. https://github.com/woowacourse/javascript-own-ui-library/pull/8 Feeling: 무엇을 느꼈는지 React.createElement와 React.renderDOM 메서드를 직접 만들어보면서, JSX가 파싱되었을때 어떠한 형식으로 바뀌는지 console.log를 찍어가면서 확인해야했다. 라이브러리를 사용하는 것보다, 라이브러리를 직접만들어쓰고 싶다는 생각이 강했지만, 로우레벨의 견고한 라이브러리는 대체하는 것에 수개월이 걸릴것같다는 생각이 들었다. 내가 구현하지 못할것같은 기능들에 한해서 라이브러리를 사..