전체 글

에러가 발생하면 Slack으로 알림이 가도록 Slack WebHooks를 설정했다.잘 되고 있었는데, 어느 순간부터Error: An HTTP protocol error occurred: statusCode = 403에러가 발생했다. `HTTP 403` 에러는 서버가 요청을 이해했지만, 접근 권한이 없을 때 발생하는 에러이다. Slack Webhook URL이 잘못되었을 가능성이 있기에, 확인을 해보았다.먼저 아래와 같은 순서로 클릭한다. 그럼 다음과 같은 페이지로 이동하는데 설치 된 앱이 없는 것을 볼 수 있다. 아무 앱도 설치되지 않은 것을 볼 수 있다. Incomming WebHooks를 검색하고, 슬랙에 추가하면 된다.  내가 알림을 주고 싶은 채널을 선택하고, Add를 클릭! 위와 같이 Webh..

채팅을 구현하는 도중 문제가 생겼다.한글을 입력하면 한글 끝이 2번씩 입력되는 현상이 있었다.영어나 특수문자를 입력하면 한번만 입력이 되는데, 한글만 입력하면 글자가 2번 입력되는 현상이었다. 먼저 문제의 원인은 한글이 조합문자라는 것이었다. 한글을 입력하면 마지막 글자 아래 검정색 줄이 있는것을 볼 수 있다.한글을 제외한 경우밑줄이 없는 것을 볼 수 있다.   해당 문제는 IME composition 때문에 발생한다.IME란 한글, 중국어, 일본어 등 언어를 브라우저에서 지원하도록 언어를 변환하는 OS 단계의 어플리케이션이다.IME를 하는 중 keydown 이벤트가 발생하면 OS와 브라우저에서 이벤트를 모두 처리하기에 keydown이 중복으로 발생한다.즉, 비영어권 언어를 표현하는 과정에서 이 값은 t..

아래 글로 리뉴얼 되었습니다.https://securityinit.tistory.com/248 토큰을 재발급 받는 로직은 다음과 같다.백엔드에선 단순히 토큰을 던져주고, 토큰 재발급을 위한 엔드포인트를 만들어주기만 하면 됐다.프론트에선 꽤 많은 어려움이 있었다.리액트에서 axios를 활용해 토큰을 재발급 받는 로직을 작성했다. axios엔 interceptors가 있다.axios의 intercpetors는 then 또는 catch로 우리 응답이 처리되기 전에 요청과 응답을 가로챌 수 있도록 해준다.현재 우리는 accessToken 관련 에러가 발생했을 때 catch로 처리되기 전, 가로채 accessToken을 재발급 받은 뒤 다시 요청을 보내려 한다. axios.interceptors.response...

아래 글로 리뉴얼 되었습니다.https://securityinit.tistory.com/248 React 에서 로그인을 관리하는 방법이번 프로젝트에서 프론트엔드로 리액트를 선택했다.리액트는 처음이었기에 많은 어려움을 겪었다.오늘은 그 중 로그인 관리를 어떻게 하고 있는지 적어보려 한다.인증을 jwt 토큰을 활용하기로 했고, 로그인에 성공하면 백엔드에서 accessToken을 보내준다.프론트엔드에서 로그인을 유지하기 위한 방법을 생각해봤다.백엔드에서 accessToken을 받았다면 로그인에 성공한 것으로 간주해, “로그인 성공 상태”를 저장한다.받은 AccessToken을 local stroage에 저장한다.추후 로그인이 필요한 요청을 보낼 땐 local Storage에 저장되어 있는 accessToken..

최종 프로젝트에서 채팅을 구현하던 도중 에러 핸들링이 되지 않는 문제가 생겼다.문제상황은 Websocket에서 createChat() 이벤트를 실행하던 도중 발생했다.// src/chats/chats.gateway.ts@WebSocketGateway({ namespace: 'chats',})export class ChatsGateway implements OnGatewayConnection { constructor( private readonly chatsService: ChatsService, private readonly messagesService: ChatMessagesService, ) {} @WebSocketServer() server: Server; ... @Subscr..