407 포텐데이X클로바 스튜디오 해커톤에 참여해  HyperCLOVA X 를 활용한 AI 발표 준비 도우미, 또랑또랑을 출시했다.또랑또랑 : https://www.ttorang.site/프로젝트를 진행하면서 마주친 문제 중 하나인 text/event-stream 에 대해 정리해 보았다배경서비스 특성상 사용자 요청이 2~3천 자 이상이면 요청시간이 너무 길어져 Caused by: io.netty.handler.timeout.ReadTimeoutException: null 에러가 발생했습니다. 동기식 처리 방식으로 인해 모든 응답이 완료될 때까지 시간이 너무 길어져 에러가 발생하고 있다고 판단했습니다.이 문제를 해결하기 위해 백엔드에서 적은 리소스로 더 많은 요청을 효율적으로 처리할 수 있는 방식인 Flux..

웹 보안에서 쓰이는 JWT에 대해 정리해 보았다.JWTJson Web Token의 줄임말로 자바스크립트의 JSON 자료구조를 가지고 있으며, Web Token으로써 사용할 수 있다는 의미이다. 주로 JWT 토큰은 사용자 인증과 로그인 유지를 위해 쓰인다.JWT의 구조JWT는 헤더, 페이로드, 시그니처 구조로 이루어진다.aaaaaaa.bbbbbbb.ccccccc // 헤더.페이로드.시그니처 헤더서명 시 사용하는 키(kid). 토큰 타입(typ), 서명 암호화 알고리즘(alg) 정보가 들어있다.// 예{ "kid" : "Key ID", "typ" : "JWT", "alg" : "ES256"}kid : 서명 시 사용하는 키(Public/Private Key)를 식별하는 값typ : 토큰 유형alg : 서명 암..

로그인 같은 폼을 만들 때 자주 사용한 react-hook-form에서 제공한 useForm에 대해 정리 해보았다. 사용하는 이유유효성 검사를 쉽게 할 수 있는, 성능이 우수하고 유연하며 확장 가능한 form을 제공하는 라이브러리이다비제어 컴포넌트 방식으로 구현되어있기에 렌더링 이슈를 해결하면서도, form의 데이터와 상태를 Provider 아래라면 어느 곳에서든지 props drilling 없이 사용할 수 있다코드 단순화 및 유지보수 비용을 낮춘다 제어 컴포넌트와 비제어 컴포넌트제어 컴포넌트HTML에서,, 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 s..