🌴 모동숲 마켓

솔로 프로젝트에서 게시판에서 게시글이 올라온 시간을 "n분 전" 이런 식으로 나타내고 싶어서 현재 시간을 기준으로 얼마나 지났는지 구해주는 함수를 만들었다.이때 date에 들어가는 값은 숫자로 이루어진 timestamp이다.1679652249193timestamp를 n

게시판 기능을 구현하던 중... 나는 게시글들을 Boards라는 컬렉션에 저장했고, 컬렉션 안에 있는 도큐멘트들은 아래처럼 생겼다. (컬렉션은 폴더 같은 개념이고, 도큐먼트는 폴더 안에 있는 데이터라고 보시면 됩니다!) 이제 여기서 게시글마다 댓글들을 저장해야하는데,

채팅창에서는 내가 메세지를 보낼 때마다, 또는 상대가 나에게 메세지를 보낼 때마다 스크롤이 맨 아래로 내려가도록 해야한다.생각보다 간단하지만 그래도 정리하고 넘어가려고 한다!먼저 메세지 맨 아래에 div를 하나 만든다. 콘텐츠는 비운 채로 둘 것이다.useRef로 re

React Slick은 캐러셀 컴포넌트를 쉽게 만들 수 있게 도와주는 라이브러리다.settings 객체를 정의해준다음 Slider 객체에 전달하면 된다. 내가 쓴 것 외에도 엄청 다양한 옵션이 있다.이렇게 간단하게 작성한 코드가 아래와 같이 아름다운 캐러셀이 된다!진작

오랜만에 Github Pages로 배포하려 했더니 까먹어서.. 다시 정리해본다!homepage라는 키와 배포할 경로를 값으로 입력해준다.predeploy와 deploy 두개를 추가해준다.predeploy는 npm run build 명령어를 실행하는 명령어로, deplo

Github Actions로 main 브랜치에 푸쉬하거나 풀 리퀘스트를 했을 때 자동으로 배포되도록 설정을 완료했다.그런데 배포된 사이트에 들어가니 config파일에서 .env 안에 저장한 API 키들이 전부 노출되는 것을 확인할 수 있었다. 이를 해결하기 위해 Git

마지막으로 미루고 미루던 이미지 업로드 기능을 구현 중에, img에 hover했을 때, 휴지통 버튼이 나타나고 휴지통 버튼을 누르면 이미지를 삭제할 수 있는 기능을 만들고 있었다.

MyPage 컴포넌트에는 boolean 값을 가지는 상태가 2개가 있다. 프로필을 수정 중인지 아닌지를 나타내는 상태 isEditing 모달이 열려있는지 닫혀있는지를 나타내는 상태 isModalOpen 두 상태 모두 같은 기능을 하는 토글 상태이므로 재사용 가능한 u

모동숲 마켓에서 사용하는 여러번 사용하는 버튼 디자인은 크게 3가지가 있다.1\. 민트색 버튼 2. 흰색 버튼 3. 회색 버튼TailwindCSS를 사용해서 만들면서 그때 그때 className을 복사해서 만들었는데, 디자인이 겹치기 때문에 버튼 컴포넌트를 만들어서 재