세상의 모든 URL, 다담다
1.[다담다] 웹에서 정확한 시간 사용하기
많은 서비스들에서 날짜 정보를 3일 전처럼 표기하는 경우가 많다. 대표적으로 현재 이 글을 적고 있는 벨로그도 이러한 표기를 사용한다. 이 몇 일 전 기능을 실제로 구현하려고 하면 어떻게 해야 할까? 하루하루가 지날 때마다 몇 일 전 표기가 바뀌므로 DB에는 실제 날짜
2.[다담다] 환장의 궁합 (vite + jest) - 1
현재 프로젝트에서 vite를 사용하고 있고, 최근 테스트 코드의 필요성을 느껴 jest를 추가하기로 하였다. 그 과정에서 다양한 오류가 발생하였고, 이를 어떻게 해결해나갔는지 정리하기 위해 블로그를 켰다!
3.[다담다] github action은 거짓말하지 않는다. (부제 : ts config 파헤치기)
오류 메시지프로젝트를 진행하던 중 github action에서 빌드 오류가 발생했다. 사용하지 않을 값을 선언했다는 typescript 오류가 발생한 것이었는데, 이전에 관련 ts lint 설정을 꺼두어 이상하다는 생각이 들었다. 이 때까지만 해도 우리 팀 CI/CD
4.[다담다] MUI 테마 적용하기
MUI를 사용하면 대부분의 예제가 아주 푸르다.푸르딩딩한 MUI 예제이는 MUI의 primary 컬러가 파란색으로 지정되어 있기 때문인데, 문제는 우리 서비스의 파란색과 다른 파란색이라는 것이다. 따라서, MUI가 정해놓은 primary 컬러를 우리 서비스의 prima
5.[다담다] import 경로 절대경로로 변경하기
코드를 작성하고 다른 파일에서 해당 코드를 불러오면 자동으로 상대경로가 입력된다. 이는 vscode에서 실행되는 자동 import 덕분인데, 그동안 이 자동 import된 상대경로를 통해 편하게 작업하였으나 오늘 문제가 발생했다.현재 프로젝트는 점점 규모가 커져서 현재
6.[다담다] 에러 처리하기
현재 프로젝트에서는 대부분의 통신에 React Query를 사용하고 있다. 리액트 쿼리 적용 후 요청의 상태(성공/실패/로딩)에 따라 어떤 행동을 하라고 지정하기 쉬워져서 삶의 질이 달라진 기분이었다.덕분에 특정 요청에 에러가 발생했을 때 해당 에러를 처리하는 것은 할
7.[다담다] Protected Routing 구현하기
만약에 로그인하지 않은 사용자가 유저 페이지로 이동하는 버튼을 클릭하면 어떻게 될까? 아마도 유저 페이지에서 유저 정보를 읽는 동작을 수행할 것이기 때문에 유저 정보가 없는 사용자가 접근한다면 오류가 발생할 것이다. Protected Routing이란 특정 페이지 및
8.[다담다] 우당탕탕 리액트 쿼리 오류 수습기 - 1
오늘 우연찮게 진행중인 프로젝트에서 오류를 발견했다. 현재 우리 프로젝트의 가장 열혈 사용자가 본인이다보니 이미 프로젝트에 저장된 스크랩이 꽤 있다. 그래서 여태껏 스크랩 추가, 삭제가 정상적으로 동작한다고 굳게 믿고 있었는데...!오늘 다른 팀원의 계정으로 스크랩을
9.[다담다] 유효성 검사하기
의욕 넘치던 시절엔 소프트웨어 공학 수업에서 배웠던 모든 걸 직접 해본다는 사실에 들떴었다.(모두를 놀라게했던 당시 플로우 차트...)아쉽게도 기획/설계 단계에서 여러 번 피봇팅을 거치면서 점점 저러한 합의나 문서화의 과정이 간소화되었다. 덕분에 약소한 와이어프레임만
10.[다담다] 화면 크기 별로 ~하는 법 정리
현재 작업하고 있는 프로젝트는 모바일 뷰와 데스크탑 뷰가 많이 달라 모바일 웹을 따로 만들어야할까 고민될 정도이다. 하지만, 절대적으로 프론트엔드 수가 부족해서 최대한 반응형으로 작업하기로 하였다.현재 합의된 서비스 요구사항 중 모바일과 데스크탑에서 서로 너무 상이한
11.[다담다] 깃허브에 스토리북 연결하기
한동안 작업을 마치고 PR을 날리면 다른 팀원들이 코드리뷰할 때 확인할 수 있도록, 작업한 UI의 스크린샷을 함께 첨부해왔었다. 그 동안은 하나 두 개 정도의 스크린샷만 첨부하니 크게 문제가 없었지만, 바로 어제 랜딩 페이지 작업을 마치고 PR을 날리려는데 스크린샷을
12.[다담다] 타입스크립트 프로젝트에서 jsx import하기
프로젝트 '보드' 기능에 DND 기능을 이용하기로 하였다. 공식 document에서 제공하는 예제와 유튜버의 코드를 클론코딩해보고 DND-kit라는 라이브러리를 사용하기로 하였다. 왜냐하면 제공되는 예제가 많았고, 그 중 한 예제가 제작중인 서비스와 아주 유사하여 코드
13.[다담다] 눼? 로그인된 유저는 메인으로 보내달라고요?
얼마 전, 드디어 우리 서비스 출시를 했다. (신개념 북마크 서비스 '다담다' 바로가기)출시를 하면 가장 하고 싶었던 유저 피드백을 열심히 모았고,그 중 이번 스프린트에 반영할 피드백을 1순위로 정해서 개발하고 있다.오늘은 이 피드백 중 '로그인된 유저가 서비스에 접속
14.[다담다] Jotai로 모달 관리하는 테스트코드 작성하기
오늘 작성할 내용은 이번 프로젝트에서 가장 만족스러운 코드이다.
15.[다담다] npm 의존성 충돌 해결하기
얼마 전, 작업을 하던 중 브랜치를 왔다갔다하면 의존성을 찾을 수 없다는 오류가 발생하기 시작했다. 문제 자체는 브랜치를 옮긴 후 node_modules와 package-lock.json 파일을 삭제 후 재설치하면 해결되긴 하였으나 시간이 너무 오래 걸려 다른 해결책이
16.[다담다] 라이브러리 없이 만료된 토큰 처리하기
인터넷에 리액트로 OAuth를 구현하는 방법에 대해 쳐보면 첫번째 그림 같은 코드가 대부분이다. 즉, 대다수의 예제가 클라이언트 쪽에서 OAuth의 provider에게 요청을 보내고 그 응답 결과를 다시 백엔드 쪽에 보내고 이에 대한 응답을 받음으로써 인증 절차를 처리
17.[다담다] amplitude로 사용자가 방문한 페이지 파악하기
amplitude란?서비스를 출시하게 된다면 꼭 알아봐야하는 것 중 하나는 amplitude이다. 이 툴을 사용한다면 우리 서비스를 방문한 사용자가 어떤 사용자인지, 어떤 행동들을 했는지 파악할 수 있다. 장단점만약 amplitude를 사용하지 않는다면 유사 서비스인