쇼핑몰의 어느 정도 틀을 마련하고... 이제 어떻게 API를 백엔드로부터 받아올지에 대한 고민이 생겼다. 사실상 백엔드를 구현해본적이 없기 때문에 클라이언트 측에서는 어떻게 코드를 미리 작성할지 감이 안오는 것이다. 그렇다고 WEB-API를 그대로 들고 오기에는 프로젝

처음에는 socket.io를 구현해서 React로 채팅할 수 있는 화면을 간단히 구현해보려고 했다.그러다보니... 소켓 통신 자체를 로컬끼리해서 의미가 있나 싶었다. 그래서 배포를 해보려고 시작하는데...서버 코드랑 클라이언트 코드는 생략하겠습니다!https:

⭐ 사이드 프로젝트 시작 말은 E-commerce PJT 라고 거창하지만, 그냥 쇼핑몰 웹사이트를 만들어 보는 것이다. 다만 최대한 백엔드와 프론트엔드 모두를 구현해보려고 한다. 이번에 현대오토에버 이커머스에 지원하면서, 이커머스에 지원했지만... 해당 도메인과 관련된

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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