물론 언젠가 다시 사용할 수도 있지만, 특별한 이유가 생기지 않는한 저는 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곳은 댓..

시간이 조금 여유로워서 그동안 밀렸던 자잘한 이슈들을 쳐냈습니다. 1. 서비스의 로고를 바꾸었습니다. - 기존 로고 기존에 10분에 걸려서 ppt로 만든 산림청 산하같은 로고를 버리고. - 신 로고 제리(팀원)가 만들어준 새로운 로고를 반영하였습니다. 바꾸는 과정에서 알았는데, 로고 사진을 cloudfront로부터 가져오는 경우도 있었고, asset으로 가져오는 경우도 있었습니다. 이 부분은 성능 최적화와 함께 개선해야겠습니다. https://github.com/woowacourse-teams/2021-darass/pull/719 [FE][공통] 로고 변경 by zereight · Pull Request #719 · woowacourse-teams/2021-darass Hide details View d..

어느 웹사이트에서나 이용할 수 있는 댓글서비스 다라쓰!는 일반적인 html코드에 스크립트 태그를 삽입하여 서비스를 이용할 수 있음은 물론, Gatby와 같은 react 컴포넌트에서도 이용이 가능합니다. darass.co.kr 에서 스크립트 발급 방법에서도 확인하실 수 있습니다. 그리고 이러한 UI Component는 npm에 패키지를 배포하여 유저가 설치해서 사용할 수 있도록 하고있었는데요. https://www.npmjs.com/package/darass-react darass-react A package for integrating Darass services into React applications. www.npmjs.com repo가 아예 분리되어있다보니, 기존 스크립트 관련 로직이 업데이트되었..

다라쓰 프로젝트는 웹 페이지 어디서나 삽입가능한 댓글 서비스이다. 그리고 댓글과 관련된 각종 얼럿문구들을 "화면이 꽉차는" 모달로 제공하고 있다. 어느날 버그 리포트를 받았다. 모달을 띄웠는데, 삽입된 웹 페이지의 요소가 다라쓰 모달보다 위쪽에 나타나고 있는 것이다. 다라쓰는 사용자가 자신의 블로그에 삽입하고 싶은 위치에 를 삽입하면 그 태그 내부에 댓글영역과 모달을 렌더링하고 있었다. 그리고 모달은 거기서 position:fixed로 화면을 꽉차게하고 있었는데, 처음에는 z-index만 높이면 되겠다는 생각을 했다. 그런데 모달의 z-index를 많이 높였는데도 상황은 똑같았다. 원인을 찾고자 계속된 why질문을 던졌고, 레이어의 쌓임맥락에서 가 외부 요소의 fixed상태를 이기지 못한다는 결론에 도달..

간단한 버그를 해결하고, 자바스크립트 지식을 쌓는것에 집중했던 하루였습니다. 다라쓰의 댓글입력란은 textarea가 아니라, div contenteditable로 구현되어있습니다. 때문에, textarea 기능 처럼 동작하도록 해주어야 했습니다. textarea는 기본적으로, 텍스트가 textarea의 끝에 도달하면 자동으로 개행이 되었는데, div contenteditable은 가로 스크롤이 생기면서 계속 1줄로 가로로 길어지고 있었습니다. 그래서, 아래와 같은 코드를 추가해주었습니다. word-break: break-all; white-space: break-spaces; word-break는 https://developer.mozilla.org/ko/docs/Web/CSS/word-break 모든 ..

-시크릿 모드에서는 localStorage를 사용하지 못한다. 다라쓰에서는 react-query의 useQuery를 사용하여 user정보를 가져오고 있습니다. 여기서 단점은 react-query들의 정보들은 모두 메모리에 저장되어 있는 것이기 때문에, 새로고침하면 user를 요청하는 동안에는 빈 유저 이미지가 나타난다는 것입니다. 그것을 최대한 방지하기 위해서, 로그인된 상태면 로그인된 유저의 정보를 localStorage에 저장하고 새로고침할때 초기값으로 localStorage 값을 불러와서 먼저 렌더링하도록 했습니다. 물론 로그아웃을 하면, localStorage 정보를 날립니다. 유저 정보같은 경우는 민감한 정보가 없는 부분이라 localStorage에 저장해도 큰 문제가 없다는 판단도 있었습니다...

다라쓰 프로젝트 2개중 하나인, 댓글 모듈의 jest 테스트 커버리지가 평균 70%가 넘었습니다. 구문 커버리지: 82.13% 분기 커버리지: 61.6% 함수 커버리지: 71.17% 라인 커버리지: 82.28% 으로, 평균 74.295%의 커버리지가 나왔습니다. (원래는 16%였습니다 ㅎ) 커버리지가 70%이상이 되면, 그 이상부터는 (좋긴하지만) 유의미한 효과가 없다는 글을 보았기 때문에 목표를 70%로 잡았었는데, 다행히 시간을 갈아넣어서 달성했습니다. 사실, 테스트 파일 1개에 아무 유틸이나 테스트한다면, 유틸 1개만 테스트하는 것이므로 커버리지 100%가 나옵니다.ㅎ 하지만 저는 전체적인 프로그램의 테스트코드를 확인하기 위해서 거의 모든 컴포넌트와, 거의 모든 커스텀 훅에 대해 테스트 코드를 작성..