저번에 웹소켓을 이용하여 React로 채팅을 구현한 경험이 있다. [바로가기] 리액트 웹소켓(Stomp) 이번 토이프로젝트로 MBTI 유형을 선택해서 채팅을 할 수 있는 서비스를 구현했다. 서버는 Java, Spring을 사용했고 클라이언트는 React, Typescript를 사용했다. 처음에 버전이 안 맞아서 조금 헤매었었 1yoouoo.tistory.com 위의 글에선 사용자가 채팅을 이용할 때 네트워크 연결에 성공한 케이스만 다뤘었다. 하지만 언제나 그렇듯 항상 행복한 상황만 나오진 않는다. 실패 케이스도 처리를 해줘야 한다. 그래서 어떠한 방법이 있는지 구글링을 통해 알아냈고, 이를 블로깅 하려고 한다. 어렵지 않은 내용이니 글을 모두 읽으면 구현하는데 어렵지 않을 거라고 믿는다. 우선, 네트워크..
개발을 진행하면서 HTTP 요청을 다루게 되는데, 이때 많은 경우에 반복되는 패턴이나 코드를 발견할 수 있다. 토큰을 헤더에 포함시키거나, 공통된 에러처리 등이 그 예다. 이러한 반복적인 코드를 줄이고, 더 효과적으로 코드를 관리하기 위해 Axios 인스턴스와 인터셉터를 사용하는 방법에 대해 알아보자. Axios 인스턴스 생성 먼저, 반복적으로 사용되는 Axios 설정을 추상화하기 위해 Axios 인스턴스를 생성한다. Axios 인스턴스는 주어진 설정으로 초기화된 새로운 Axios 요청을 만들어낸다. 이렇게 생성된 인스턴스는 설정이 미리 적용되어 있으므로, 각 요청에서 이 설정을 반복하지 않아도 된다. // customApi.ts import axios, { AxiosInstance } from 'axi..
배경 개발을 하다 보면 항상 에러를 마주하기 마련이다. 그리고 터미널에 띄워주는 오류는 문제해결을 할 수 있는 아주 큰 도움을 주는 건 사실이다. 하지만 위에 보여주는 에러는 내가 믿고 거르는 에러이다. 보통은 오류의 권고는 아주 유용하지만 이 케이스는 유용하지 않은 경우이다. 오류 메세지를 보면 act에서 코드를 감싸라고 권고하는데 여기서는 그렇게 해선 안된다. 비슷한 에러중 하나는 Warning: Cant' perform a React state update on an unmounted component. 라고 하는 에러다. 이 두 가지 오류 중 하나가 나타났다면 아마도 원인은 테스트가 끝난 뒤에 컴포넌트가 바뀌기 때문이다. 이게 무슨 소리냐면, 일부 비동기 상태 업데이트가 완료되기 전에 테스트 함수..
배경 다음과 같은 간단한 페이지를 테스트하려고 했다. _app.tsx const App = ({ Component, ...rest }: AppPropsWithLayout) => { const { store, props } = wrapper.useWrappedStore(rest); const getLayout = Component.getLayout ?? ((page) => page); return ( {getLayout()} ); }; export default App; Login.tsx const Login = () => { const dispatch = useAppDispatch(); useEffect(() => { dispatch(routerSlice.actions.loadLoginPage()); }..
1. 요즘.. 현재 진행 중인 토이프로젝트인 https://www.link-archive.com/ 는 북마크가 가능한 SNS 서비스이다. 관심 있는 URL을 저장할 수 있고 다른 사람의 URL을 둘러볼 수 있으며 북마크를 해서 가져올 수 있는 서비스이다. 요즘 구직활동 + 이슈해결 + 스터디로 블로깅을 최근에 못했다. 많고 많은 이슈 중에 오늘은 토큰을 재발급하는 이슈를 해결해서 블로그를 작성하려고 한다. 2. 정책 우선 현재 우리 서비스 정책을 간단하게 알려보자면, AccessToken, RefreshToken을 이용 중이고 AccessToken은 JWT로 stateless 하게 보안을 확인 중이다. AccessToken은 만료기한은 2시간, RefreshToken은 만료기한이 30일이다. Refres..
라이브러리에 대한 나의 생각 라이브러리를 사용해서 똑같은 기능을 아주 쉽게 가져다가 쓸 수 있다. 하지만 나는 라이브러리를 사용해서 기능을 붙이는 것에 대해 보수적으로 생각한다. 왜냐하면 사용한 라이브러리는 내가 직접 조작할 수 없고 만들어 놓는 대로. 그대로 사용해야 한다. 나중에 그 라이브러리가 더 이상 업데이트를 하지않거나 업데이트 과정에서 핵심적인 기능이 변경되면 나는 그 라이브러리에 또 맞춰 코드를 수정해야 한다. 즉, 의존성이 생겨버린다. 이러한 이유로 최대한 라이브러리는 안 쓰려고 노력하고, 바닐라로 직접 구현하는 것을 선호한다. 그래서 이번 캐러셀도 직접 구현을 할 생각이다. 설계 우선 평평한 캐러셀 말고 이번엔 좀 독특하게 입체적으로 구현해보고 싶단 생각이 들었다. 각 카드가 원형으로 둘..
프로젝트 시작 계기 거의 6개월 동안 프론트는 혼자서 공부하다 보니까 점점 내 실력에 대해서 체크를 해보고 싶었다. 협업은 회사 들어가기 전에 꼭 경험해 보고 싶었고 Git관련해서 브랜치전략, 충돌에 대한 경험 등을 겪고 싶었다. 그리고 이제는 사람들이랑 프로젝트를 시작해도 피해는 주지 않겠다 싶어서 인프런에서 스터디 공고를 쭉 봤다. 인프런이 확실히 개발자들이 스터디 구하기 좋은 플랫폼인 거 같다. 물론 강의도 훌륭하지만. 쭉 보던 중 바로 시작하고 싶어서 인원이 어느 정도 차있고 금방이라도 시작할 거 같은 스터디에 카톡을 보냈다. 연락은 거의 바로 왔고 내 github 주소를 보내주고 그쪽 팀원분들도 오케이 하셔가지고 참여하게 됐다. 프로젝트 시작 인원은 백앤드 2명, 프론트 4명이었다. 원래 2명 ..
근황 코로나 이슈 + 기존에 하던 프로젝트 마무리 + 새로 시작하는 프로젝트 + 프론트엔드 인턴십으로 너무 정신없이 시간이 지나가서 블로깅을 못했다... 새로운 과제 이번 두번 째 과제는 검색기능을 구현하는 것이다. 기업과제이고 기업에서 api를 제공해 준다. 이번 과제의 핵심은 검색기능을 구현할 때 API호출을 최소한으로 할 수 있도록 구현하는 것이다. 일단 이 부분을 들었을 때 가장 먼저 떠 올린 건 '디바운스'이다. 디바운스는 사용자 인터페이스에서 일반적으로 발생하는 빈번한 이벤트를 처리하는 방법 중 하나이다. 내가 구현한 디바운스 훅은 import { useState, useEffect } from 'react'; function useDebounce(value: T, delay: number):..
