폰트 이슈첫 번째로 웹 figma 디자인을 바탕으로 폰트를 적용하였는데 figma와 미세한 굵기 차이가 있다. 구글링을 해본 결과 “Spoqa Han Sans Neo” 를 웹폰트로 적용하였을 때 이런 사례들이 꽤 있어보여 폰트를 다운받아 웹폰트로 적용해보고자 한다.Li
이번 스터디 프로젝트에서 뽀모도로라는 타이머 기능을 추가하자는 아이디어가 나와 구현을 맡게 되었다.❓ 뽀모도로 기법?뽀모도로 기법(Pomodoro Technique)은 시간 관리 방법론으로 1980년대 후반 ‘프란체스코 시릴로’(Francesco Cirillo)가 제안
이전 뽀모도로 문제점시간 저장이 되지 않는다. 사용자가 url 이동 혹은 브라우저를 껐다가 켰을 때 타이머가 0으로 초기화 되고 카운트가 작동하지 않는다.이 문제를 해결하기 위해 아래와 같은 기능을 만들고자 한다. 목표 시간을 localStroage에 저장 집중 시간과
디자인타이머는 완료했지만 아직 Progress bar와 집중타임 밑에 있는 step을 만들지 않았다. Progress bar 를 쉽게 만들어보기 위해서 라이브러리를 찾았다..!Progress bar 적용시키기https://www.npmjs.com/package
목표시간을 설정하는 Time Picker 만들기👆위와 같은 디자인의 타임 픽커를 만들기 위해 swiper라는 라이브러리를 찾았다. Swiper 설치Swiper 적용onSlideChange 를 통해서 현재 선택된 인덱스 값을 받아온 후 setter로 값을 저장하는 방식
최상위 파일에서 axios 디폴트 값을 세팅한다.로그인하였을 때 accessToken을 headers에 디폴트로 세팅한다.Access Token을 재발급 받아 재요청하는 기능 추가.이 방법으로 구현을 한다면 엑세스 토큰이 만료되었을 때 한 페이지에서 n만큼 요청을 보내
👆 위와 같이 게시글 데이터를 날짜별로 분류해 보여주고자 한다. diary 객체들을 담은 배열 diarys이다. dirays를 인자로 받아 날짜별로 분류해주는 함수 makeSections를 생성한다.날짜별로 분류해주기 위해 sections 를 생성한다. 전달 받은 배
이번 프로젝트에서 스터디 일지부분을 무한스크롤을 통해 원하는 게시글 수만큼을 추가로 불러오고 싶다. 이전에 사용했던 방법은 react-custom-scrollbars-2에서 제공하는 onScrollFrame이라는 속성을 사용해 스크롤 위치가 top인지를 확인하는 방법으
이번에는 사용자 경험을 더 좋게 하기 위해 낙관적 업데이트를 적용해보았다.낙관적 업데이트 (Optimistic Update)낙관적 업데이트란 클라이언트에서 먼저 UI를 업데이트 시켜주고 서버에 요청을 하는 것이다.기존 방식은 서버 요청 → 응답 → UI 업데이트였다면