반응형 개발51 [Spring/Java] JWT 토큰 사용하는 이유 및 구현 방법 (Feat. 세션/쿠키) 프로젝트를 진행하는 과정에서 로그인 토큰 인증 방식을.사용하기 위해 JWT 토큰 인증 방식을 도입했다. 로그인 진행시 필요한 정보(id 등)를 담아서 요청할 필요가 있었다. 이를 원활하게 사용하기 위해 토큰에 인증 정보를 담아 전달하는 방식을 사용하는 JWT를 이용하는 방식이 이후 로직 처리에 있어 편리하게 동작할 것이라고 생각하여 세션과 쿠키 방식이 아닌 토큰을 통한 암화하는 방식을 이용했다. 특히, 정보를 담고 있는 토큰이 있으면 요청, 응답 시마다 DB를 확인할 필요가 없이 토큰에 연결된 저장 정보만으로 보여줄 수있다는 장점와 MSA구조에서는 JWT 사용 시 부하를 감소 시킬 수 있기에 채택했다. Cookie Cookie란? 클라이언트가 웹 사이트에 접속할 때 그 사이트가 사용하고 있는 서버에서 사.. 2023. 11. 23. [Spring/Java] CORS 이슈 처리 방법 Spring을 사용하여 프로젝트를 진행하는 과정에서 CORS 이슈가 발생했고, 이 과정에서 로컬에선 정상적으로 CORS처리가 됐으나, 배포 환경에서는 오류가 발생하여 원인을 찾느라 애먹었다. 결론부터 말하자면, 내가 작성한 부분이 원인이 아닌 MSA구조로 작성하는 과정에서 게이트웨이에서 CORS가 발생했던 이슈였다. 게이트웨이에서 CORS 처리를 해줬더니 정상 동작했다. CORS(Cross-Origin Resource Sharing) CORS란? 보안 이슈로 인해 웹 페이지에서 리소스에 대한 Cross-origin 요청을 관리하기 위한 보안 메커니즘으로 서버의 동의가 된 요청들에 대해서만 요청할 수 있도록 제한하는 것 모든 데이터 요청을 허용할 경우 데이터 무결성이 보장되지 않으며 다른 사이트에서 원래 .. 2023. 11. 21. [React/TypeScript] Context API를 활용한 전역 모달 관리하기 프로젝트를 진행하는 과정에서 경고창 등으로 React의 Alert을 직접적으로 사용할 경우 사용자 경험(UX) 적으로 부정적이라는 이슈가 있고, 커스터마이징을 할 수 없단 이슈가 있었다. 특히, Alert 함수를 직접 사용 시에 동기적인 실행으로 인해 경고창이 닫히기 전까지 코드 실행이 중단되는 이슈가 발생하기에, 모달을 이용해서 알림 창을 커스텀하고자 하였다. 이 과정에서 모달 하나를 만들 경우 컴포넌트에 계속해서 귀속되는 현상으로 모달을 관리하기 힘들고, 코드가 굉장히 지져분해져서 모달을 전역으로 관리하기로 했고, 이 과정에서 Context API를 적용해 보았기에 기록으로 남겨보고자 한다. Context API API Context란? React에서 지원하는 기능으로 부모 - 자식 간에 props를.. 2023. 11. 21. [React/axios] Post 메서드 사용 시 500에러 발생 해결 방법 Axios Post메서드 프로젝트를 진행하다보니 원인을 모를 500에러가 많이 발생했었는데, 처음에는 서버에서 발생하는 오류라고 생각하고 백엔드 쪽에서 많이 수정을 시도하고, 여러 가지 테스트를 진행하면서 해결하려고 시도했다. 단순하게 리액트에서 시도할 경우 500에러가 계속 발생했고, 포스트맨을 활용해서 진행한 결과 정상적으로 원하는 형태로 동작하는 모습을 확인했다. 이 과정에서 에러를 해결하기 위해서 Axios의 Post 메서드에 대해 많이 찾아보았고, 발견한 원인에 대해서 적어보자 한다. 기본적으로 axios로 백엔드랑 통신할 경우 아래와 같은 형태로 axios를 사용하는 경우가 대부분이다. const config = { method: 'post', // HTTP 메서드 url: 'https://e.. 2023. 8. 22. [React / Typescript] Openvidu를 활용한 WebRTC 구현 프로젝트를 진행하면서 WebRTC 기술을 사용해야 하고 이를 프론트에서 구현을 해주어야 했다. 이 과정에서 자바스크립트가 아닌 타입스크립트를 사용하였기에 테스트 코드를 찾기도 어려웠고, 전부 예시나 튜토리얼이 자바스크립트로만 진행되었기에 어려움이 많았다. 특히 타입스크립트를 활용하지면 ESLint를 적용하니 모든 곳에서 에러가 발생해서 하나하나 일일이 맞춰서 뜯어 고치는 등 오랜 시간을 소요했기에 기록을 남기고자 작성한다. WebRTC - Web Real Time Communication의 약자로 웹이나 앱에서 별다른 소프트웨어 없이 카메라와 마이크 등을 활용하여 커뮤니케이션을 할 수 있게 해주는 기술 - NAT 우회 과정인 시그널링을 통해 실시간으로 데이터를 교환할 수 있게 해주는 기술 Openvidu.. 2023. 8. 18. [React] 이벤트 핸들링 정리 이벤트 핸들링 - 웹 브라우저에서 DOM 요소들과 상호 작용하는 것 - 이벤트 이름은 카멜 표기법으로 작성 - 이벤트 설정 시 함수 형태의 값을 전달 - DOM 요소에만 이벤트 설정 가능 (직접 만든 컴포넌트에 이벤트 설정 불가) - Clipboard, Focus, Mouse, Form 등 OnChange 이벤트 // Event.js import React, { Component } from 'react' class Event extends Component{ render(){ return ( 이벤트 {console.log(event)} } > ) } } export default Event //App.js import React from 'react' import Event from './Event' .. 2023. 7. 7. 이전 1 2 3 4 5 ··· 9 다음 반응형
