본문 바로가기

기술 공부20

HandlerMethodArgumentResolver 인터페이스를 사용한 파라미터 조작 HandlerMethodArgumentResolver 인터페이스 1. 개요 공식 설명은 다음과 같이 적혀있다. /** * Strategy interface for resolving method parameters into argument values in * the context of a given request. * * @author Arjen Poutsma * @since 3.1 * @see HandlerMethodReturnValueHandler */ 즉, 파라미터를 주입시켜주는 전략적인 인터페이스이다. 그럼 전략적으로 파라미터를 주입시켜준다는 말은 무슨 뜻일까? 이는 파라미터를 그대로 사용하지 않고 일부 처리가 필요한 경우에 사용한다. 예를 들어 컨트롤러에서 pageable 객체를 파라미터 off.. 2022. 4. 23.
AWS Certificate Manager를 이용한 HTTPS 설정 1. AWS 콘솔 -> Cerificate Manager에서 인증서 프로비저닝 시작하기 ( or 인증서 요청) 2. 공인 인증서 요청 선택 후 인증서 요청 클릭 3. 도메인 이름 추가에 "*." 을 추가 4. 검증 방법 선택 에서 DNS 검증 선택 후 다음 5. 내용 검토 후 확인 및 요청 6. Route 53에서 레코드 생성 클릭 7. 대기 후 새로고침하여 발급 완료 도메인 확인 백엔드 애플리케이션 HTTPS 설정 1.AWS 콘솔 -> Elastic Beanstalk -> 환경 창에서 백엔드 애플리케이션 -> 구성 2. 로드 밸런서의 편집 클릭 3. 편집 화면에서 리스너 추가 4. 프로토콜 : HTTPS, SSL 인증서 : "*." 선택 후 저장 5. 리스너에서 HTTP 비활성 프론트엔드 애플리케이션 .. 2022. 4. 15.
Route 53 도메인 설정 1. 도메인 구입 1) AWS 콘솔 -> Route53으로 이동 2) 도메인 등록에 원하는 도메인 등록 후 확인 3) 결제 후 확인 이메일에서 링크 활성화 2. 호스팅 영역 생성 - 개요 : 프론트 엔드 애플리케이션와 백엔드 애플리케이션을 위한 서브 도메인 설정 - 호스트 영역 : DNS 영역으로 생성한 도메인이 다수의 레코드를 관리함 - 레코드 : 이름과 IP를 연결해 놓은 파일 or 엔트리 1) SOA 레코드 ( Start of Authority) : 영역을 관리하는 관리자 정보 2) NS 레코드 (Name Server) : 도메인의 IP를 물어볼 서버 3) A 레코드 : app.도메인 or api.도메인 과 같이 특정 IP 또는 다른 도메인으로 연결하는 레코드 - 방법 1) AWS 콘솔 -> Rou.. 2022. 4. 15.
AWS 엘라스틱 빈스톡을 이용한 프론트엔드 배포 1. 로컬 디렉터리 엘라스틱 빈스톡 환경 초기화 eb init 프로젝트명-frontend - select a default region : 백앤드와 동일 지역 선택 - It appears you are using Node.js. Is this correct? : Y(Node.js 사용) - select a platform : 알맞은 버전 Node.js 선택 - Do you wish to contiue with CodeCommit? : n - Do you want to set up SSH for your instances? : n 2. eb create - app-config.js 변경 : 로컬인 경우 8081, 아닐 경우 빈스톡 주소로 변경 //backend uri를 가져오도록 구현 let backend.. 2022. 4. 15.
AWS 엘라스틱 빈스톡을 이용한 백엔드 배포 AWS CLI 설치 1. AWS 계정 생성 2. 파이썬 3 설치 3.AWSCLIV2.msi 설치 - 설치는 긍정적으로, aws --version으로 확인 4. AWS CLI 설정 - 로그인 후 IAM 서비스 접속 : Identity and Access Management - 역할마다 다른 접근 권한 부여 - 왼쪽 메뉴에서 엑세스 관리 - 사용자 - 오른쪽 대시보드 상단 사용자 추가 클릭 - 세부 설정 : 원하는 사용자 이름 입력 후 프로그래밍 방식 액세스 선택 - 액세스 키와 시크릿 키 자동 생성 - 권한 설정 : 기존 정책 직접 연결 클릭 후, AdminstratorAccess (모든 리소스 권한 / EC2, RDS, EMR 등) - 태그 추가 : 선택사항 - 검토 후 사용자 만들기 클릭 후 액세스 키.. 2022. 4. 14.
AWS 프로덕션 환경 0) 작동 방법 프론트 엔드 주소 입력 -> 프론트 엔드 서버에 연결된 애플리케이션 로드 밸런서 -> 로드 밸런서에 연결 된 오토 스케일링 그룹 내 EC2 인스턴스 중 하나에 트래픽 전달 -> EC2 인스턴스 내부에서 실행 중인 프론트 애플리케이션이 브라우저에 React.js 애플리케이션 반환 ID/비밀번호 로 로그인 -> 백앤드 서버의 애플리케이션 로드 밸런서 -> 백앤드 애플리케이션 ->Mysql 서버와 통신 -> 데이터 교환 *필요 리소스 1) EC2 : Elastic Compute Cloud : 서버 컴퓨터 - 애플리케이션에 접근하려면 EC2의 IP나 EC2의 퍼블릭 도메인을 이용하여 접근 - 프론트엔드 서버 + 백엔드 서버 2개를 운영 2) 라우트 53 - DNS : 도메인과 IP 맵핑 (+IS.. 2022. 4. 13.
로컬 스토리지 1. 웹스토리지 웹 스토리지는 사용자의 브라우저에 데이터를 key-value 형태로 저장한다. 1) 세션 스토리지 : 브라우저 종료시 사라짐 2) 로컬 스토리지 : 브라우저 종료시에도 유지 2. 로컬 스토리지 도메인마다 따로 저장 엑세스 토큰을 저장해 유저 확인 3. 전략 1) 로그인 시 웹 스토리지에 토큰을 저장한다. (ApiService.js) export function signin(userDTO) { return call("/auth/signin", "POST", userDTO).then((response) => { alert(response.token); if (response.token) { //로컬 스토리지에 토큰 저장 localStorage.setItem("ACCESS_TOKEN", res.. 2022. 4. 12.
인증 프론트엔드 통합 - React Router Dom 라우팅이란? 라우팅은 사용자가 웹사이트의 다른 페이지로 이동하는 프로세스로 라우팅과 렌더링은 애플리케이션의 효율성과 속도에 미치는 영향을 추측하는데 도움이 됩니다. 클라이언트 측 라우팅은 페이지의 JavaScript에 의해서만 처리됩니다. 사용자가 링크를 클릭할 때마다 URL 표시줄이 변경되고 페이지에 다른 뷰가 렌더링됩니다. 이러한 SPA는 전체 페이지를 새로 고치지 않기 때문에 이용자에게 부드러운 UI와 UX를 제공합니다. 리액트를 이용해서 SPA을 구현할 때 리액트 라우터를 사용하면 어떤 메뉴를 클릭했을 때 페이지를 이동하지 않고 업데이트되는데 이 때 url 역시 바뀝니다. 브라우저의 이전페이지, 다음페이지 버튼 역시 정상적으로 일반적인 웹페이지를 이동하듯이 적용됩니다. 이러한 클라이언트 사이드 라.. 2022. 4. 11.
반응형