저장이라고 적혀있는 것을 수정으로 변경 기존 일정 수정 모달에는 수정이라고 쓰여 있어야 하는 부분을 저장이라고 되어 있었습니다. {ismodify ? '일정 수정하기' : '일정 저장하기'} 그래서 위와 같은 조건부 렌더링으로 모두 변경해주었습니다. 모달에 일정 데이터를 불러오기 기존 수정 기능에는 아래 사진과 같이 썸네일과 제목 및 내용을 불러오지 않았습니다. 사용자가 수정을 눌렀으니 처음부터 수정하는게 좋지 않을까? 라는 생각으로 이렇게 구현한 것인데, 추후 다시 생각해보니 조금만 변경하고 싶을수도 있다는 생각이 들었습니다. 그래서 기존 데이터를 다시 넣어야겠다는 생각이 들어 변경하게 되었습니다. 장소와 일정 데이터 함께 불러오기 const dispatchDestinationList = async (..
서론 프로젝트를 시작하고 개발을 진행하며 어떻게 초기 로딩 속도를 줄일 수 있을까... 계속 고민했었습니다. 가장 먼저 적용해본 것은 React에서 제공해주는 Suspense 컴포넌트와 lazy 메서드를 활용한 코드 분할입니다. 사실 프로젝트에 적용하고 결과를 낸 것은 좀 됐지만... 정확하게 정량적인 숫자가 궁금해서 측정을 한 뒤 지금 기록을 남기게 되었습니다. 성능 측정 결과 (개발 환경) 빠른 3G 환경에서는 26.47초에서 13.84초 정도로 약 50% 가까이 로딩 속도를 줄일 수 있었습니다. 제한없음 환경에서는 약 783밀리초에서 약 632밀리초로 약 20% 가까이 로딩 속도를 줄일 수 있었습니다.
😃 meta 태그 description 넣기 😆 robots.txt 생성하기 User-agent: * Disallow: / Allow: /$ Allow: /favicon.ico Allow: /community Allow: /register Allow: /*.ts$ Allow: /*.tsx$ User-agent: * 모든 검색 엔진의 로봇에 대하여 수집을 허용합니다. Disallow: / Allow: /$ Allow: /favicon.ico Allow: /community Allow: /register Allow: /*.ts$ Allow: /*.tsx$ 루트 페이지, 파비콘, community, register, ts, tsx 파일을 제외한 모두를 수집 비허용합니다.
Intro 무사히 프로젝트를 끝냈지만 아직 리팩토링 할 것이 산더미였습니다. 리팩토링을 해야할 것들 중에서 오늘은 초기 로딩 속도를 조금 줄여보았습니다. 왜? 평소 저희들이 쓰는 인터넷 속도나 와이파이 속도에서는 느리다 라는 느낌을 받지 못했습니다. 하지만 공용 와이파이를 사용하거나 네트워크 탭을 켜고 제한없음에서 빠른 3G로 변경했을 경우에 상당히 느리게 로딩이 되고 있었습니다. 보통은 다들 속도가 빠른 환경에서 웹을 이용하고 있기 때문에 굳이 여기서 줄일 필요가 있을까? 라는 생각이 들었었지만 그래도 느린 환경이 분명히 존재하고 있고, 어딘가 하자가 있다는 것이 굉장히 신경이 쓰였기 때문에 로딩 속도를 줄여보기로 마음 먹었습니다. 본론 React.lazy와 Suspense로 코드 분할을 하여 나름대로..
🥯 프로젝트 소개 프로젝트 명: 하루메이트 프로젝트 기간: 23.06.29~23.07.26 Github: https://github.com/codestates-seb/seb44_main_006 GitHub - codestates-seb/seb44_main_006: 하루메이트는 당일 일정을 만들고 친구에게 손쉽게 공유할 수 있 하루메이트는 당일 일정을 만들고 친구에게 손쉽게 공유할 수 있는 서비스입니다. Contribute to codestates-seb/seb44_main_006 development by creating an account on GitHub. github.com 배포 링크: https://harumate.netlify.app/ HARUMATE: 하루메이트 당일 코스를 만들고 공유하는 나..
🧐 처음 생각한 인증 과정 현재 로그인이 된 유저라면 모든 페이지에서 처음에 /members 요청으로 유저가 인증된 유저인지 판단합니다. 만약 Access Token이 만료되어서 /members 요청에서 error status가 410이 온다면, /reissue 요청으로 Refresh Token을 사용하여 Access Token을 재발급합니다. 재발급이 되었다면 다시 /members 요청을 보내어 인증된 유저인지 다시 확인합니다. 만약 RefreshToken마저 만료되었다면 로그인을 해제합니다. 😡 문제 상황 Access Token이 만료된 상황에서 다른 페이지로 이동하면 reissue는 작동하지만, members 요청은 보내지 않아서 인증된 유저라고 판단하지 않게 되어 유저의 데이터를 불러오지 않는 에..
⭐️ 일정 수정 기능 기존에 만들어 놓았던 일정 등록 페이지를 재활용해서 조건부 렌더링으로 일정을 수정할 수 있는 기능입니다. 😇 useQuery 타입 에러 const dispatchDestinationList = async () => { const response = await GetCourse({ courseId, }); const { destinationList }: PostReadT = response.data as PostReadT; dispatch(scheduleListActions.updateList(destinationList)); }; useQuery({ queryKey: ['modify'], queryFn: dispatchDestinationList, refetchOnWindowFocu..
3일 동안 반응형 제작 지옥이었습니다... 3일 동안 했는데도 완벽히 못하고 무한으로 수정 중입니다... css 넘나 어렵네요... 3일 동안 반응형만 내내한 건 아니고, 계속 생기는 버그들과 디자인 수정들도 꽤 했습니다. 😇 일정 등록 페이지 반응형 😇 일정 생성 모달 반응형
