오늘은 코드 작업량이 조금 많았습니다. 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이후에는 빠르게 데이터를 가..

개발자는 특히 끊임없이 공부해야하는 직업으로 유명합니다. 끊임없이 공부를 하다보니 당연히 목표로 삼는 것들도 많아질것이기 때문입니다. 그리고 그 목표는 지금껏 이룬적이 없는 목표일 확률이 매우 큽니다. 지금껏 이룬적이 없는 목표를 이루려면 어떻게 해야할까요. 행동을 바꿔야합니다. 같은 행동을 하는데 같은 결과가 나오지, 새로운 결과가 나타날리 만무하기 때문입니다. (혹시 순수함수가 생각나셨나요? 잠깐 바람 쐬고 오세요.) 그럼 행동을 바꾸려면 어떻게 해야할까요? 바로 사람의 감정상태를 바꿔야합니다. 사람은 감정에 지배당하기 쉽습니다. 주변의 동료들이 많이 앞서나가서 나 자신을 비관하거나, 내 미래가 불안하다거나, 사업이 잘 안된다거나, 연인과 헤어졌다거나, DB가 초기화되었다거나, 리액트 라이프사이클이 ..

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를 찍어가면서 확인해야했다. 라이브러리를 사용하는 것보다, 라이브러리를 직접만들어쓰고 싶다는 생각이 강했지만, 로우레벨의 견고한 라이브러리는 대체하는 것에 수개월이 걸릴것같다는 생각이 들었다. 내가 구현하지 못할것같은 기능들에 한해서 라이브러리를 사..

물론 언젠가 다시 사용할 수도 있지만, 특별한 이유가 생기지 않는한 저는 react-query를 사용하지 않기로 마음을 먹었습니다. 이 리포트는 2일분량입니다. 왜냐하면 그 1일에 react-query와 엄청난 사투를 벌였기때문입니다. react-query의 useQuery는 2번째 인자로, 비동기 요청함수를 받습니다. 그리고 그 결과를 반환하여, 정상값이면 data라는 반환값으로 주는게 원칙입니다. 원래 코드는 위와 같았습니다. useGetAllComments라는 커스텀훅에서 useQuery가 getAllComments라는 비동기 요청을 보내고 있는것이죠. 그리고 refetch를 요청하면, 다시 getAllComments가 호출되고 data가 갱신되게 됩니다. 문제는 여기서 발생했습니다. 1. 정상일때..

프로젝트에서 마크업을 살짝 개선했습니다. 개선하려고 목표를 잡은 사항은 다음과 같습니다. 1. html의 언어를 ko로 바꾸기 2. 크롬 OpenWAX 확장 프로그램을 돌렸을때 경고하는 부분 수정 3. 크롬 HeadingsMap 확장 프로그램을 돌렸을때 섹션별 헤딩태그가 검사 4. 페이지별로 document.title을 조작하여 페이지 제목 수정 1번은 아주 간단하게 바꾸었습니다. 이것을 해준 이유는, 스크린 리더가 페이지를 읽을때 언어를 설정하는데 영향을 주기 때문입니다. 2번은 정량적으로 마크업/접근성을 개선할 수 있는 요소를 파악해주는 확장프로그램이라서 개선할 포인트를 잡으려고 사용했습니다. 1곳 빼고 모두 개선해주었습니다. (대부분 이미지의 alt 속성이 누락되었다는 경고였습니다.) 그 1곳은 댓..