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..
AWS S3로 프론트엔드 배포하기
·
Programming/React
개발인턴 1주차 React, TypeScript로 프로젝트를 진행하고 있다.S3는 이전에 토이 프로젝트에 적용한 경험이 있는데, 정리를 안해놔서 그런지 구글링을 해야 했다.다음에는 더 잘 적용할 수 있게, [AWS S3로 프론트엔드 배포] 한 과정을 정리하고자 작성한다.AWS 접속 후 로그인을 하고, S3 메뉴로 접속한다.  1. S3 버킷 생성 [버킷 만들기] 버튼을 누르고 나서 버킷 이름을 입력한다. 나는 엑세스 차단 설정을 제외하고 나머지 항목 다 default 값으로 설정하였다.나중에 필요한 부분은 편집하여 수정하면 되기에.. 2. permission 설정 권한 칸에 접속한다. 추후 별도로 필요한 것들만 설정해두면 된다. 버킷 정책 칸에서 [편집] 버튼을 누른다. [정책 생성기] 버튼을 누른다. ..