트러블슈팅

🖼️ 문제 상황React와 Next.js, 그리고 Typescript을 기반으로 한 프로젝트입니다.마이 페이지의 프로필 편집 기능에서 서버에 patch 요청을 보낼 때, body에 소개글을 제외한 프로필 이미지와 닉네임 값이 필수로 들어가야 했습니다.그리고 api는 이미지 파일을 미리 서버에 업로드하여 url을 응답으로 받고, 해당 url을 닉네임 및 소개글과 함께 담아 최종적인 프로필 편집 patch 요청을 보내는 방식이었습니다.사용자가 프로필 사진을 따로 지정하지 않은 경우도 있기 때문에 이미지 파일이 선택되지 않았다면 로컬에서 임포트 해 온 'defaultProfileImage'를 담아 요청을 보낼 계획이었습니다. 그러나 생각했던 것보다 다양한 이미지의 타입으로 인해 타입 오류가 발생하였습니다.로..

🌵 문제 상황next.js를 활용하여 유용한 링크를 모아두는 웹사이트(like 북마크)를 구현하는 프로젝트에서공유된 링크를 클릭하면 보이게 될, 공유된 폴더만을 위한 공유 페이지가 필요했습니다. 예를 들어 "유용한 링크"라는 이름을 가진 폴더를 공유하면https://l1 nkbrary.netlify.app/shared/463 와 같이 폴더의 아이디가 들어간 고유한 링크가 생성되고,해당 링크로 들어가면 아래와 같은 페이지를 볼 수 있습니다.next.js로 구현 중이었기 때문에 페이지 렌더링 시 SSG / SSR / ISR을 활용하고 싶었습니다.해당 페이지는 저장된 링크 목록이 실시간으로 업데이트될 필요가 없었으므로SSG를 사용하여 생성되어 있는 모든 폴더별 페이지를 빌드 시에 미리 렌더링하려고 하였습니다..

📅 Day.js란Day.js 라이브러리는 최신 브라우저에서 날짜와 시간에 대해 구문 분석, 유효성 검사, 조작, 출력과 같은 기능을 간편하게 처리하는 2KB의 아주 가벼운 자바스크립트 라이브러리입니다.- 공식 깃허브 설명(한국어)날짜 및 시간(이하 날짜)을 다루는 라이브러리에는 'moment.js'도 존재합니다.day.js보다 훨씬 많은 날짜 연산을 지원하지만, 235KB이라는 큰 용량과 사용되는 연산보다 그렇지 않은 연산이 더 많다는 문제점이 있습니다.(큰 용량의 단점: 다운로드 시간! 네트워크 비용! 렌더링 시간! 모두 증가) 따라서 공식 문서에서도 moment.js을 대체할 수 있는 라이브러리를 소개하고 있고, 그중 하나가 바로 day.js입니다.현재 공식적으로 moment.js는 더이상 업데이트..

문제 해결글로 작성하기엔 너무 사소한..실수 목록글로 정리해두고 같은 실수를 반복하지 않기 위해나중에 보고 웃으려고(과연..?)24.05.25 부터 정리 커맨드 창에서 단축키 사용 시 현재 입력 소스가 영문 키보드인지 확인하자커맨드 창에서 단축키 연습 중이었는데 갑자기 단축키가 먹히지 않음명령어가 작성되지 않아 키보드가 한글로 바뀌었는지도 몰랐음영문 키보드여야 단축키가 동작함 display: inline, block, inline-block은 속성을 적용하고 싶은 주체 요소에 직접 쓰자css에서 display: flex, grid 쓰다가 오랜만에 block 쓰려니까 부모 요소 안에 써버림그러고는 왜 태그에 너비랑 높이값이 적용되지 않는지 30분 고민함  justify-content는 여백이 있어야 잘 ..