본문 바로가기

웹개발45

http로 접속시 https로 redirect하기 > cd /etc/nginx/site-available > vi default server_name _; 아래에 다음과 같이 수정함 server_name _; if ($http_x_forwarded_proto = 'http'){ return 301 https://$host$request_uri; } > sudo serveice nginx restart nginx를 재시작하고 http로 접속해서 https로 리다이렉트 되는지 확인한다. 참조: aws.amazon.com/ko/premiumsupport/knowledge-center/redirect-http-https-elb/ ELB를 사용하여 HTTPS로 HTTP 트래픽 리디렉션 Classic Load Balancer에서 HTTP와 HTTPS 리스너를 사용.. 2021. 3. 17.
AWS ACM, 로드밸랜서, Route53을 이용한 https 적용하기 aws https를 적용하는 방법을 알아보자 여기서는 aws에서 제공하는 Route53과 ACM에서 제공하는 인증서를 사용해서 적용하는 방법이다. 그리고 도메인은 이미 생성이 되어 있다고 가정한다. 다음순서로 진행을 한다. 1. [ACM] Certificate Manager메뉴를 클릭한다. 2. [ACM] 인증서 프로비져닝 시작하기를 클릭한다. 3. [ACM] 공인인증서 요청이 선택되어 있고 인증서요청을 클릭한다. 4. [ACM] 도메인이름을 추가한다. 5. [ACM] 검증방법을 선택한다. DNS검증상태로 두로 다음을 클릭한다. 6. [ACM] 태그를 추가한다 인증서에 맞게 값을 입력한다. 입력안해도 별문제는 없다. 7. [ACM] 정보를 확인하고 확인요청을 클릭한다. 8. [ACM] 검증 보류상태에서 .. 2021. 3. 17.
우분투 jdk11설치 우분투에 open jdk11를 설치해보자 1. jdk 설치명령어 실행 2. 설치 확인 1. jdk 설치명령어 실행 > sudo add-apt-repository ppa:openjdk-r/ppa > sudo apt-get update > sudo apt install openjdk-11-jdk 2. 설치 확인 > sudo java -version openjdk version "11.0.10" 2021-01-19 OpenJDK Runtime Environment (build 11.0.10+9-Ubuntu-0ubuntu1.18.04) OpenJDK 64-Bit Server VM (build 11.0.10+9-Ubuntu-0ubuntu1.18.04, mixed mode, sharing) 2021. 3. 17.
리액트 404 Not found page 처리하기 리액트에서 404 not found를 처리하는 방버을 알아보자 1. Not found 컴포넌트를 작성한다. 2. 를 설정한다. 3. 없는 url을 호출한다. 1. Not found 컴포넌트를 작성한다. import {Container} from "react-bootstrap"; const NotFound = () => { return ( 404 not found ) } export default NotFound; 2. app.js에 를 설정한다. import {BrowserRouter as Router, Route, Switch} from "react-router-dom"; import './App.css'; import Signin from "./signin/Signin"; import Signup f.. 2021. 3. 16.
리액트 url redirect 리액트에서 url을 다른 url로 redirect 시키는 방법을 알아보자 1. react-router을 install한다. 2. useState를 사용하여 리다이렉트 변수를 선언한다. 3. 로직에서 setIsRedirect(true) 셋팅한다. 4. 컴포넌트를 이용하여 url을 redirect한다. 1. react-router을 install한다. npm install react-router 2. useState를 사용하여 리다이렉트 여부를 체크한다. const [isRedirect, setIsRedirect] = useState(false); 3. 로직에서 setIsRedirect(true) 셋팅한다. async function handleSubmit(e){ setLoading(true); await .. 2021. 3. 16.
Spring boot jwt 로그인 구현 Springboot 로그인을 구현해보자. 여기서는 jwt를 이용한 로그인을 구현한다 다음 순서로 진행한다. 1. spring security, jwt gradle 설정 2. property에 시크릿키 설정 3. Jwt util 클래스 작성 4. UserDetailService 작성 5. Jwt 인증 컨트롤러 작성 6. jwt request, response 작성 7. jwt request 필터 작성 8. jwt 인증 엔트리 포인트 작성 9. 스프링 시큐리티 설정 10. 유저 관련 클래스 11. json web token 생성 12. json web tocker 검증하기 1. spring security, jwt gradle 설정 implementation 'org.springframework.boot:s.. 2021. 3. 15.
스프링부트 서블릿 필터 Exception 핸들링 스프링부트에서 exception을 처리할때는 컨트롤러에서 발생한 exception만 핸들링할수 있다. jwt filter를 구현하던중 servlet filter에서 exception이 발생했을때 스프링부트 exception핸들링 처럼 처리하는 방법을 한번 알아본다 1. 에러를 핸들링할 filter를 작성한다. 2. jwt filter에서 오류발생시 exception을 던진다. 3. 사용자 exception을 작성한다. 4. ExceptionHandlerFilter를 JwtRequestFilter전에 호출하도록 설정에 등록한다. 5. 오류를 발생 시키고 오류 json을 확인한다. 1. 에러를 핸들링할 filter를 작성한다. 서블릿 필터에서 오류 발생시 처리할 excpetion handler를 작성한다. .. 2021. 3. 15.
react ant-design 회원 가입 폼 작업 react에서 ant-design을 이용해서 회원가입 폼 작업을 알아보자 순서는 다음과 같다. 1. 회원가입폼 작업 2. 회원가입 api 작업 3. 회원가입 테스트 그럼 작업을 시작해보자 1. 회원가입폼 작업 회원가입 폼은 ant-desing에서 제공해주는 샘플로 작업을 하였다. 기본 validation이 있어서 client-side 체크는 바로 된다. 서버의 경우는 다음과 같이 한다 const [form] = Form.useForm(); const [isValid, setIsValid] = useState(false); const [error, setError] = useState(""); function onFinish(values) { setIsValid(false); setError("") add.. 2021. 3. 12.
react bootstrap form validation 체크 하기 리액트 부트스트랩에서 form validation체크하는 방법을 알아보자. 순서는 다음과 같다. 1. form태크 속성등록 2. requried 추가 3. Feedback 추가 4. 폼 validation 체크 확인 5. 서버사이드 체크 6. 관련 소스 확인 7. validation 체크 스크린 캡쳐 1. form태크 속성등록 2. requried 추가 3. Feedback 추가 이름을 입력해주세요! 4. 폼 validation 체크 확인 const form = event.currentTarget; if (form.checkValidity() === false) { // validation 체크에 걸림 // todo... }else{ // validation 체크 통과 // todo... } 5. 서버사.. 2021. 3. 10.
Springboot Exception Handling(스프링부트 exception 핸들링) 스프링부트에서 exception을 처리하는 방법을 알아보자 순서는 다음과 같다 1. 에러코드 정리 enum 클래스로 작성 2. Exception 발생시 응답하는 에러 정보 클래스 작성 3. 사용자 정의 Exception 클래스 작성 4. Exception 발생시 전역으로 처리할 exception handler 작성 5. 사용자등록관련 클래스작성 서비스에서 중복 exception 발생 6. api 실행 및 exception 결과 확인 1. 에러코드 정리 enum 클래스로 작성 @AllArgsConstructor public enum ErrorCode { NOT_FOUND(404,"COMMON-ERR-404","PAGE NOT FOUND"), INTER_SERVER_ERROR(500,"COMMON-ERR-5.. 2021. 3. 10.