1. 서론Spring Security는 클라이언트의 요청이 여러개의 필터를 거쳐 DispathcerServlet(Controller)으로 향하는 중간 필터에서 요청을 가로챈 후 검증(인증/인가)을 진행한다. 클라이언트 요청 -> 서블릿 필터 -> 서블릿(Controller) 순으로 진행된다. 아래 사진을 참고하면 왼쪽(FilterChain)에서 DelegatingFilter를 등록하면 오른쪽(SecurityFilter)으로 가로채서 검증을 진행한다.검증 진행 후 서블릿으로 요청을 전달한다.SecurityFilterChain의 필터 목록과 순서 1.2 Form 로그인 방식에서의 UsernamePasswordAuthenticationFilterForm 로그인 방식에서는 클라이언트단이 username과 pa..

1. 서론EC2 인스턴스를 만들었고, 프리티어를 사용한다면 스왑 메모리를 설정하여 가상메모리까지 확보했을 것이다.이제 docker-compose를 사용하여 Springboot와 mysql을 docker 컨테이너 내에서 동시에 실행시켜보자. 2. 로컬환경에서 세팅2.1 application.properties 환경변수 설정spring.application.name=# MySQL #spring.datasource.url=jdbc:mysql://db:3306/{docker-compose db이름}spring.datasource.username=rootspring.datasource.password={docker-compose설정 비번}# JPA #spring.jpa.properties.hibernate.for..

1. 서론개인 프로젝트 배포 시 서비스를 운영할 충분한 지갑사정이 여유롭지 않으면 EC2 프리티어를 사용하게 된다...하지만 프리티어를 사용할 수 있는 AMI는 램이 1GB밖에 되지않아 서버를 빌드 및 실행하게 되면 CPU과 과부화되어 작동을 멈추게 된다. API 연결도 못해보고 빌드할 때 터진다니... 이를 해결하기 위해 우리는 가상메모리를 사용할 것이다. 가상 메모리는 보조기억장치 용량을 주기억장치 용량으로 사용한다라고 배웠다. 2. 스왑 메모리 사용하기 (EC2 인스턴스 접속 필요)RAM 2GB 이하에서는 스왑 공간은 최소 32MB 이상이며, RAM 용량의 1배 크기로 잡는 것을 권장한다고 한다. 2.1 128MB를 16번 사용하여 2GB 용량을 사용 (128MB * 16 = 2GB)$ sudo d..

1. 서론프론트와 백엔드를 개발 완료가 됐으면 로컬환경에서만 접속할 수 있는게 아닌, 외부, 외부 사람들이 접속해서 서비스를 이용하게 해보고 싶다. 로컬환경에서 ip와 포트 설정을 통해 Web Server만 배포해서 본인 컴퓨터를 WAS로 사용할 수 있지 않을까라고 생각 할 수 있지만 24시간 풀가동과 보안, 협업과 배포 등 여러가지 요인에서 본인 컴퓨터를 WAS로 사용하기엔 현실적인 어려움이 있다.따라서 EC2(가상컴퓨터)를 사용하여 Springboot를 배포하여 WAS를 구축할 수 있다. 프론트는 Web Server에 배포하고 백엔드는 WAS에 분리 배포하여 외부에서도 접속 할 수 있게 한다.분리 배포의 간단한 이유는 서버 부하 방지를 위함이다. Web Server는 정적 컨텐츠만 처리하고 동적인 컨..

1. react-router-dom이란?리액트랄 사용하여 페이지를 이동할 때 필요한 라이브러리이다.기존에는 A페이지를 보여준다면 A.html파일을 이용하고 B페이지를 보여준다면 B.html 파일을 보여주는 방식이였지만,리액트에서는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다.이를 SPA(Single Page Application)이라고 부른다. SPA에서 페이지 전환은 HTML 5의 History API를 사용하여 보여준다.자바스크립트 영역에서 Histroy API를 이용해 현재 페이지 내에서 페이지 이동이 일어난 것 처럼 보인다. History API내용History.back()세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드History.forward()세션 ..

1. 더미데이터 data.json{ "days" : [ {"id":1, "day":1}, {"id":2, "day":2}, {"id":3, "day":3} ], "words" : [ { "id":1, "day":1, "eng":"book", "kor":"책", "isDone":false }, { "id":2, "day":1, "eng":"apple", "kor":"사과", "isDone":false }, ..

1. node.js 설치React는 js환경에서 실행되기 때문에 node.js를 설치해야된다.node.js를 설치하면 npm, npx, yarn 같은 명령어를 사용할 수 있다. https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  2. npx crate-react-app {프로젝트명}npx명령어로 프로젝트를 생성해준다. 3. 끝

1. Expo란?React Native 앱 개발을 더 간편하게 만들기 위한 도구이다.기존 React Native로 iOS를 개발하기 위해선 mac OS가 필요하지만 Window에서 Expo를 사용하면 Expo 별도 앱을 설치하여 에뮬레이터 없이 핸드폰으로 바로 테스트가 가능하다. 단점은 네이티브 기능(블루투스, 백그라운드 task 등)를 이용하려면 ejct해야됨 2. node.js 설치expo는 js환경에서 실행되기 때문에 node.js를 설치해야된다.node.js를 설치하면 npm, npx, yarn 같은 명령어를 사용할 수 있다. https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built ..