리팩토링

이 파일은 오디오를 재생하는 페이지 컴포넌트를 정의하고 있습니다.페이지가 로드되면, 오디오를 재생합니다. (useEffect 이용)페이지가 바뀔 때 오디오를 멈춥니다. (useEffect 이용)일정 시간이 지나면 지정한 페이지로 이동합니다. (useEffect 이용)오

상태관리를 할 때, 해당 컴포넌트에서 모두 마무리하면 다행이지만, 보통은 props를 하게 되어있다. 그래서 depth가 깊어지곤하여 코드의 복잡도가 높아졌었었다. 그래서 이를 해결하기 위해서 전역으로 상태관리를 해야겠다는 생각이 들었고, 그리하여 Redux를 사용하게

코드의 복잡성을 낮추고, 유지보수를 위해서 한다. 여러 함수형태로 하는 것이 있지만, 리액트이기 때문에 커스텀 훅을 만들어서 해야겠다는 생각이 들었다. 그래서 시도하였고, 나름 커스텀 훅을 만드는 것에 대한 위화감을 없애고, 어쩌면 당연하게 생각하게 되기도 했다. 나름

백엔드가 API를 만드는 동안에 프론트엔드에서 API를 간단하게 미리 만들어서 테스트를 해놓으면, 나중에 요청 시, 백엔드 코드의 에러로 간주하여 빠르게 코드를 마무리 할 수 있기 때문에 미리 해놓은 것이다.이 파일에서는 React 앱을 렌더링합니다. 앱이 개발 모드(

백엔드에서 받는 것도 실시간으로 적용되는 것이고, 프론트엔드에서 API 요청을 받아오는 것도 똑같이 실시간 적용이라서 프론트에서 받는게 1차적으로 빠르게 할 수 있다고 생각해서 반영하였다.먼저, useState를 통해 celsius(기온), windspeed(풍속),

LightHouse라는 확장프로그램을 통해서 렌더링 관련 브라우저 성능 테스트를 할 수 있다. 이러한 프로그램을 통해서 프로젝트의 퀄리티를 판단 할 수 있기 때문에 이를 고려해서 해야하지 않을까 하는 생각이 들어서 진행하게 되었다.KioskHeader.js: 이 파일은

로그인 기능을 구현하기 위해서, 로그인이 성공하면 accessToken을 받는 식으로 해서 로그인을 처리해야하는데, 거기에 대한 로직을 연습하는 겸해서 코드를 작성했다.참고로 node_modules/msw/lib/mockServiceWorker.js를 public 폴더

일단 Redux인 이유는 props를 최대한 하지 않고 Redux를 통해서 상태관리하는 것이 유지보수 측면에서 안정성이 있다고 생각하였다.ReduxSaga는 제너레이터 함수에 대한 이해와 call, select, put, fork 등의 Redux-saga에 대한 공부를

이전 프로젝트 때, 커스텀 훅을 본인이 담당해서 만든 적이 있었다. 하지만, 그 당시에 만들었던 커스텀 훅은 굉장히 부실해 보였고, 이를 보완하기 위해서 다시 만들었다. 테스트는 해봤고, 아주 잘된다. 그래서 문제 없이 사용 가능하다.이 코드는 커스텀 훅인 useAPI

애초에 three.js가 반영된 프로젝트라서 렌더링 측면에서 문제가 좀 있었다. 로그인을 하고나면, 다른 라우터로 이동하기가 안되었다. 하지만, 로그인 성공 후, 해당 조건으로 홈화면에서 window.reload()를 통해서 해결했지만, 성능이 문제였다. 그래서 모든

그냥 직접 사용하면 되지, 굳이 커스텀 Custom Class를 만든 이유가 무엇인가? > 맞다. 하지만 렉시컬 스코프를 사용해서, 외부에서 accessToken을 직접 접근하지 못하게하기 위해서 만들었다. 작성 코드를 보면 각 클로저가 외부 변수를 참조하는데, 비공

일단 무한스크롤을 msw로 구현할 수 있는지 궁금해서 시작했고, 결과적으로 성공했습니다.로그인의 경우는 해당 페이지가 기존에 라우팅 가드가 걸려있었기 때문에 로그인 기능을 급하게 구현하여 진행했습니다. 아 그리고 정렬 기능도 시도하여 성공하였습니다.이 파일은 React

중앙화된 토큰 관리로그인 토큰을 한 곳에서 관리하면 다른 부분에서 토큰에 접근할 때 일관된 방식으로 처리할 수 있습니다. 이로 인해 코드의 중복성을 줄이고 유지 보수를 간편하게 할 수 있습니다.보안 강화비공개 클래스 속성 (편리한 인증 처리해당 클래스는 토큰의 저장,

원래의 버튼 컴포넌트 코드는 특정한 목적에만 사용되었고, 다른 환경에서 재사용하기 어려운 구조로 되어 있었습니다. 또한, 이벤트 핸들러가 onClick으로 제한되어 있어, 다양한 상황에서의 처리가 불가능했습니다.onClick에서 onSubmit으로의 변화: 버튼의 역할

기존 로그인 시스템의 코드는 작동은 했으나, 코드의 재사용성, 유지보수, 효율성 측면에서 더 개선될 수 있는 여지가 있었습니다. 리팩토링을 통해 다음과 같은 목표를 달성하려 했습니다:토큰 관리의 효율화: TokenStorage 클래스의 도입으로 토큰 관리가 일관되고 효

이 코드는 사용자의 현재 위치와 관련된 기능을 수행하며, 객체 목록을 무한 쿼리로 가져오는 로직을 구현하고 있습니다. 리팩토링의 주된 목적은 다음과 같습니다.코드 효율성 향상: 기존 코드에서 중복되는 로직을 제거하고, 가독성과 유지보수성을 높이기 위해 수정하였습니다.향

무한 스크롤은 사용자 경험을 향상시키는 인기 있는 기능입니다. 기존 구현 방식에서는 성능과 관리가 복잡한 문제가 있을 수 있으며, 이를 해결하기 위해 Intersection Observer를 활용한 새로운 리팩토링을 진행하였습니다. 주요 변경 사항은 다음과 같습니다:성

사용자 인터랙션에 따른 상태 관리는 복잡성이 빠르게 증가할 수 있는 영역입니다. 리팩토링의 주된 목적은 다음과 같습니다:코드 재사용성: 좋아요와 싫어요 기능을 효율적으로 재사용할 수 있는 Hook을 만들기 위함입니다.상태 관리의 단순화: React Query를 사용하면

성능 최적화: Intersection Observer를 사용하여 필요할 때만 데이터를 불러오고 렌더링하도록 최적화합니다.코드 재사용성 향상: Custom Hooks(useLikeMutation, useIntersectionObserver)를 사용하여 코드의 재사용성을

컴포넌트 분리: Dialog 컴포넌트와 SpeedDial 컴포넌트를 분리하여 각 컴포넌트의 책임을 명확하게 만듭니다.스타일 리팩토링: 인라인 스타일을 줄이고, 재사용 가능한 스타일을 적용함으로써 코드의 유지보수성을 향상시킵니다.훅 활용: 커스텀 훅 (useTermsCo

효율적인 토큰 관리: 토큰을 처리하는 방식을 클래스로 구조화하여 효율적인 토큰 관리를 가능하게 합니다.재사용성: RouterGuard 컴포넌트를 도입하여 다양한 경로에서 재사용 가능한 인증 로직을 구현합니다.사용자 경험 향상: 인증 실패 시 사용자에게 적절한 경고 메시

재사용 가능한 로직: useTermsContent라는 커스텀 Hook을 만들어서 다양한 컴포넌트에서 사용 약관을 불러올 수 있도록 함.효율적인 데이터 처리: 사용 약관을 문자열 배열로 변환하여 컴포넌트에서 쉽게 사용할 수 있도록 함.보안: 인증 토큰을 헤더에 포함시켜

이 코드는 특정 시간 문자열을 분석하고 현재 시간과의 차이를 사람이 읽을 수 있는 형식으로 반환하는 역할을 합니다. 원본 코드의 문제점과 개선의 필요성을 설명해봅시다:코드 복잡성: 중첩 조건문이 많아 코드의 복잡성이 높아질 수 있음.가독성: 여러 단계의 문자열 분할과

개발 중인 프론트엔드에서 서버와의 통신을 테스트하려면, 실제 백엔드 서버가 필요하다. MSW(Mock Service Worker)를 사용하면, 서버 없이 클라이언트 측에서 API 응답을 모방할 수 있다. 이 코드는 게시물 검색, 정렬, 필터링 기능을 테스트하기 위해 M

기존의 커뮤니티 페이지 로직은 사용자의 요구 사항을 충족시키기에는 다소 제한적이었습니다. 새로운 코드는 React Hook과 상태 관리를 활용하여 유동적인 정렬, 검색 및 페이지네이션 기능을 제공합니다. 이로써 사용자 경험이 향상되며, 코드의 유지보수와 확장성 또한 증