Intro 무사히 프로젝트를 끝냈지만 아직 리팩토링 할 것이 산더미였습니다. 리팩토링을 해야할 것들 중에서 오늘은 초기 로딩 속도를 조금 줄여보았습니다. 왜? 평소 저희들이 쓰는 인터넷 속도나 와이파이 속도에서는 느리다 라는 느낌을 받지 못했습니다. 하지만 공용 와이파이를 사용하거나 네트워크 탭을 켜고 제한없음에서 빠른 3G로 변경했을 경우에 상당히 느리게 로딩이 되고 있었습니다. 보통은 다들 속도가 빠른 환경에서 웹을 이용하고 있기 때문에 굳이 여기서 줄일 필요가 있을까? 라는 생각이 들었었지만 그래도 느린 환경이 분명히 존재하고 있고, 어딘가 하자가 있다는 것이 굉장히 신경이 쓰였기 때문에 로딩 속도를 줄여보기로 마음 먹었습니다. 본론 React.lazy와 Suspense로 코드 분할을 하여 나름대로..
🚩 문제 주소 📄 접근 방법 구현 더보기 틱택토에서 승리 조건은 8가지 밖에 없기 때문에 직접 구현해주었습니다. 주어진 게임판을 1차원 배열로 바꿔준 후, O와 X의 개수를 구해주었고, O와 X가 승리했는지 구했습니다. - O의 개수가 X의 개수보다 적다 - O가 성공했는데 X의 개수와 같거나 적다 - X가 성공했는데 O의 개수보다 적다 - O와 X가 동시에 성공했다 이 4가지 조건 중 하나라도 걸리면 0을 반환했고, 걸리는게 없다면 1을 반환했습니다. 👨💻 나의 코드 const checkWin = (board, shape) => { if (board[0][0]===shape) { if (board[0][1]===shape && board[0][2]===shape) return true; if (boa..
🥯 프로젝트 소개 프로젝트 명: 하루메이트 프로젝트 기간: 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일 동안 반응형만 내내한 건 아니고, 계속 생기는 버그들과 디자인 수정들도 꽤 했습니다. 😇 일정 등록 페이지 반응형 😇 일정 생성 모달 반응형
🔥 오늘 한 일 중 메인 https://highero.tistory.com/entry/react-beautiful-dnd-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%A1%9C-%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-%EC%B0%A2%EA%B8%B0 [하루메이트] react-beautiful-dnd로 드래그 앤 드롭 찢기 🔍 직접 구현하지 않고 라이브러리를 쓴 이유가 무엇인가요? 직접 구현해 보는 게 실력 향상에 도움도 될 것이고 재미도 있을 것 같지만, 굉장한 시간이 소모될 것이라고 생각했습니다. 현재는 highero.tistory.com 프로젝트에 드래그앤드롭을 적용 시켜봤읍니다. 😇 나머지 그 ..
🔍 직접 구현하지 않고 라이브러리를 쓴 이유가 무엇인가요? 직접 구현해 보는 게 실력 향상에 도움도 될 것이고 재미도 있을 것 같지만, 굉장한 시간이 소모될 것이라고 생각했습니다. 현재는 솔로 프로젝트를 진행하는 것이 아니고 정해진 시간 안에 팀원들과 협업하여 프로젝트를 완성해야 하는 상황이기 때문에, 라이브러리를 사용하여 어떤 느낌인지 맛 좀 보고, 빠르게 완성했습니다. 🔍 react-dnd가 아니라 react-beautiful-dnd를 선택한 이유가 무엇인가요? react-dnd는 react-beautiful-dnd에 비해 자유도도 높고 커스텀하기도 훨씬 편하다고 합니다. 하지만 변경 애니메이션이나 위치 변경을 직접 정의해야 한다는 단점이 있었습니다. 저는 굳이 커스텀을 해야할 정도로 영역이 크지도 ..
