React Hook Form 렌더링 최적화
·
Programming/React
회사에서 개인의 기술 성장을 위하여 3주에 1번씩 사내 기술 세션 발표가 열리는데, 비록 2주차였지만 더욱 몰두하고자 자원하여 발표한 사내 기술 세션 발표 내용입니다.최근에 회사에서 새로운 기능을 개발하면서, 자연스럽게 react-hook-form을 처음 접하게 되었습니다. 처음엔 단순히 폼 상태를 다루기 위한 도구 정도로 생각했지만, 실제로 기능을 만들다 보니 생각보다 많은 개념들이 녹아 있었고, 특히 "렌더링 최적화" 관점에서 매우 중요한 포인트들이 존재한다는 걸 알게 되었습니다. 이 최적화를 진행한 배경이 기능은 고객에게 직접적으로 맞닿는 인터페이스가 아니었기 때문에 백오피스 성능이 상대적으로 중요하지는 않았습니다. 하지만 react-hook-form 라이브러리를 사용하면서 고객의 데이터를 입력한 ..
React 프로젝트 의존성 버전 업그레이드 하기 - axios (0.18.0 → 1.7.7)
·
Programming/React
개발 인턴 3개월 차, 4년 전부터 이어오던 프로젝트를 담당하면서 처음 하는 것들이 많았다.이번에 보안 검사를 진행하던 중, axios에서 취약점 점수가 7.5로 나타났고, 그 결과 취약점 개선을 담당하게 되었다. 해당 라이브러리의 버전 업그레이드를 진행하면서 발생한 여러 문제를 해결해야 했고, 이번 기회에 보안 관련 개념을 새롭게 학습할 수 있었다.CVSS (Common Vulnerability Scoring System) 란?- 보안 취약점의 심각도를 정량적으로 측정하고, 0.0~10.0 사이의 점수를 부여하는 시스템 점수 범위 심각도 예시 0.0 없음 (None) 취약점 영향 없음 0.1~3.9 낮음 (Low) 미미한 영향 4.0~6.9 보통 (Medium) 조치 필요하지만 긴..
Kakao 소셜 로그인: Local 환경에서는 되고, S3 + Cloudfront 배포 후는 안되는 문제 해결
·
Programming/React
카카오 로그인 redirect URI 이슈를 3일간 붙잡고 있던 기록을 푼다.. 로컬에서 redirect URI의 경로를 /auth/callback으로 설정했을 때 정상적으로 동작했다. AWS S3와 CloudFront로 배포했을 때 redirect URI를 인식하지 못해 404 에러가 발생했다. 2가지 원인을 추측했다.정적 웹 호스팅으로 S3에 배포했기 때문에 카카오 소셜 로그인을 사용할 수 없다.경로를 인식하지 못한다. 리액트 라우터 문제일 수 있다.CloudFront를 처음 다뤄보았기 때문에 구글링을 엄청 했다. 퇴근 전에 다른 개발자분께 조언을 받아 2 가지 솔루션을 받았다.BrowserRouter 대신 HashRouter를 사용해보라. URL이 복잡해질 수 있지만 이 방법으로 해결한 경험이 있다..
카카오 소셜 로그인
·
Programming/React
프로젝트 중에 해당 서비스 회원가입은 카카오 소셜 로그인 + 추가 정보 받아오기 방식으로 진행하기로 했다.  처음 해보는 방식이라 경험이 있던 백엔드 분께 방법을 물어보니, 1. 프론트 → 카카오한테 인가코드 받아오기 → 인가코드 전송해서 카카오한테 엑세스 토큰 받아오기 → 백엔드한테 엑세스 토큰 전달하기 (프론트 복잡도 ↑)2. 프론트 → 카카오한테 인가코드 받아오기 → 백엔드한테 인가코드 전달하기 (프론트 복잡도 ↓)  2가지 방법 중에 선택하라고 하셨는데, 한 번 할 거 프론트가 해야할 게 많은 걸 해보고 싶었기에 1번을 선택하였다. 우선 카카오 소셜 로그인은 kakao developers에서 애플리케이션을 추가해야한다. https://developers.kakao.com/ Kakao Develop..