반응형
참고 : 바닐라 JS로 크롬 앱 만들기 repl 사용

JavaScript에서 변수 선언 방식 let, const, var

var - 재선언, 재할당 해도 에러가 나오지 않는다. 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있으나, 코드량이 많아진다면 파악하기도 힘들뿐더러 값이 바뀔 우려가 있다.

ES6 이후, var을 보완하기 위해 추가된 변수 선언 방식이 let과 const이다.

둘 다 변수 재선언이 되지 않는다.

  • let - 변수 재할당이 가능하다.
  • const - 변수 재할당 불가능하다. 변하지 않는 고정 값

 

※ 변수 표기법

  • 카멜(Camel) 표기법 : 소문자로 시작 & 스페이스가 필요하면 다음 단어에 대문자를 넣어준다. ex) myFirstVariable
  • 파스칼(Pascal) 표기법 : 대문자로 시작 & 스페이스가 필요하면 다음 단어에 대문자를 넣어준다. ex) MyFirstVariable
  • 팟홀(Pothhole) 표기법 : 밑줄 사용 ex)my_first_variable

 

Data Types

 

Data를 정렬하는 방법  Array, object

 

함수 만들기

 

JS DOM(Document Object Module) Function

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스로 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있습니다.

  • 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다.
  • 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다.
  • 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.
  • 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.
  • 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.
  • 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.
  • 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.
반응형

'잡동사니' 카테고리의 다른 글

[SSAFY] 싸피 6기 합격 후기(자소서, SW적성진단, Interview)  (1) 2021.07.23
AI면접 유형&꿀팁  (0) 2021.02.05
[Spring] Spring tomcat 오류  (0) 2020.06.18
[Mysql] Mysql 재설치  (0) 2020.06.18
[JSP] JSP 내장객체  (0) 2020.06.16

서버를 사용하는 이유

Local 서버란 내 컴퓨터 프로젝트의 서버환경으로 내 컴퓨터에서만 돌아간다. 내가 만든 웹 사이트에 다른 사람들도 접근할 수 있도록 하기 위해서는 서버 호스팅(다른 서버를 빌리는 작업)이 필요하다.

 

AWS EC2

서버 호스팅으로 AWS(Amazon Web Servers)를 사용한다.

EC2(Elastic Compute Cloud)란 쉽게 생각해서 한대의 컴퓨터를 임대해주는 것이라고 생각하면 된다.

여기에 자신이 선호하는 OS를 설치하고, 웹 서비스를 위한 프로그램(웹서버, DB...)을 설치한다.

AWS(Amazon Web Services)에서는 인터넷을 통해 접속할 수 있는 URL(Public DNS)를 제공하는데, 

이 URL을 통해 웹 서비스를 하거나, 자신이 구입한 도메인을 붙여서 서비스 할 수 있다.

 

AWS EC2 인스턴스 생성 = 가상 컴퓨팅 환경을 만든다.

(서버를 켜고 끄는 것이 인스턴스를 실행하고 종료하는 것을 의미)

  1. 인스턴스 시작
  2. AMI(Amazon Machine Image) 선택 : AWS에서 제공하는 이미지로 운영체제를 선택한다. ex) Ubuntu Server 16.04
  3. 키 페어(key pair) 선택 / 생성 : SSH 터미널로 인스턴스 접근 시 필요한 파일로 외부에 노출되면 안된다.
    • 새 키 페어 생성 -> 키 페어 다운로드(.pem)
    • AWS EC2 접속을 위해 PUTTY에 접속해야된다. 접속 할 때 인증을 위해 Private Key 파일을 넣는데 .pem 파일을 .ppk로 변환해주어야 한다. PUTTYGEN(Putty Key Generator) 사용한다.
    • Putty 접속 시
      • Host Name(Public DNS)
      • Connection > SSH > Auth : .ppk 파일 선택
      • login as : ubuntu
  4. 보안 그룹 구성(방화벽 설정) : HTTP(80), HTTPS(443) 포트 열어주기

https://jungeun960.tistory.com/33?category=393541

 

AWS EC2(Ubuntu) 인스턴스 생성하기

1. EC2 서버 구축 AWS Console에서 EC2 인스턴스를 생성을 위해 '인스턴스 시작'을 누릅니다. Ubuntu Server를 선택합니다. 확인 누르고 이제 새로운 창이 나옵니다. '새 키 페어 생성' 누르신 후, 키 페어 ��

jungeun960.tistory.com

 

phpstorm AWS 연동하기

 내 컴퓨터에서 작업한 파일을 서버로 바로바로 업로드 하기 위해서 서버와 FTP(File Transfer Protocol)/SFTP(Secure File Transfer Protocol) 를 통해 파일을 업로드 한다. 원격 서버 연결과 배포가 가능하다. 

  • FTP(File Transfer Protocol) : 파일을 전송하는 통신 규약 (기본 포트 21), 서버에서 서비스를 열면 클라이언트에서 접속을 해서 데이터(파일)을 가져가거나 업로드 함. 보안이 좋지 않아 실무에서 사용하지 않는다.
  • SFTP(Secure File Transfer Protocol) : ssh 방식을 이용하여 안전하게 암호화된 구간에서 ftp 기능을 이용하는 것 (기본 포트 22)
    • SSH(Sucure Shell Protocol) : 네트워크 프로토콜 중 하나로 컴퓨터와 컴퓨터가 인터넷과 같은 Public Network를 통해 서로 통신을 할 때 보안적으로 안전하게 통신을 하기 위해 사용하는 프로토콜이다.
      1. 데이터 전송 ex) 소스 코드 원격 저장소 Github
      2. 원격 제어 ex) aws의 인스턴스 서버에 접속하여 해당 머신에 명령을 내리기 위해서 SSH를 통한 접속을 해야한다.

https://jungeun960.tistory.com/41

 

Phpstorm AWS 연동하기(Remote Control)

phpstorm을 키고 새 프로젝트를 만든다. phpstorm에서 만든 작업물들을 AWS에 설치된 내 서버에 올려야 한다. Tools -> Deployment -> Configuration... 클릭 왼쪽 상단에 + 버튼을 눌러 아무 이름으로 정해준다..

jungeun960.tistory.com

 

AWS 서버에 도메인 붙이기

AWS에서 인터넷을 통해 접속할 수 있는 URL(Public DNS)를 제공하는데, 이 URL을 통해 웹 서비스를 하거나, 자신이 구입한 도메인을 붙여서 서비스 할 수 있다.

  • 도메인(domain)이란 각 ip에 이름을 부여한 것. ex) www.naver.com
  1. 무료 도메인 만들기 - freenom ( https://www.freenom.com/en/index.html?lang=en )
  2. AWS 외부 도메인 연결하기 - AWS Route53 이용 

 

서버 HTTPS로 설정하기

 HTTP(Hypertext Transfer Protocol)는 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜입니다. HTTP 프로토콜의 문제점은 서버에서부터 브라우저로 전송되는 정보가 암호화되지 않는다는 것이다. 이 말은 데이터가 쉽게 도난당할 수 있다는 것이다.

이에 반해 HTTPS(Hypertext Transfer Protocol Secure) 프로토콜은 SSL(보안 소켓 계층)을 사용함으로써 이 문제를 해결했다. SSL은 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고, 서버 브라우저가 민감한 정보를 주고 받을 때 이것이 도난당하는 것을 막아준다.

  • Let's Encrypt로 SSL 인증서를 발급받는다.
  • 전제 조건 : 인증서를 사용하려는 등록된 도메인 이름을 소유하고 있어야한다.

- Let 's Encrypt는 무료 TLS / SSL 인증서를 쉽게 얻고 설치하여 웹 서버에서 암호화 된 HTTPS를 사용할 수있는 새로운 인증 기관 (CA)입니다. 필요한 단계 대부분을 자동화하려고 시도하는 소프트웨어 클라이언트 인 Certbot을 제공하여 프로세스를 단순화합니다. 

https://jungeun960.tistory.com/38?category=393541

 

[Let 's Encrypt ] Let 's Encrypt 를 사용하여 Nginx https 설정하기(Ubuntu)

환경 - Utuntu - Nginx - aws 전제 조건 - 인증서를 사용하려는 등록 된 도메인 이름을 소유하거나 제어해야합니다.  1. 무료 도메인 발급하기 : freenom ( https://www.freenom.com/en/index.html?lang=en ) ht..

jungeun960.tistory.com

 

반응형
반응형

'잡동사니' 카테고리의 다른 글

AI면접 유형&꿀팁  (0) 2021.02.05
JavaScript의 기본  (0) 2020.07.13
[Mysql] Mysql 재설치  (0) 2020.06.18
[JSP] JSP 내장객체  (0) 2020.06.16
[JSP] JSP 기본 문법  (0) 2020.06.16
반응형

'잡동사니' 카테고리의 다른 글

JavaScript의 기본  (0) 2020.07.13
[Spring] Spring tomcat 오류  (0) 2020.06.18
[JSP] JSP 내장객체  (0) 2020.06.16
[JSP] JSP 기본 문법  (0) 2020.06.16
[JSP] 서블릿의 이해  (0) 2020.06.16

JSP 내장객체란? 

▪ JSP 내장객체란 ‘JSP 내에서 선언하지 않고 사용할 수 있는 객체’라는 의미에서 붙여진 이름.

▪ 구조적으로는 JSP가 서블릿 형태로 자동 변환된 코드 내에 포함되어 있는 멤버변수, 메서드 매개변수 등의 각종 참조 변수(객체)를 말함.

JSP 내장객체

◼ request 내장객체

▪ request는 사용자 요청과 관련된 기능을 제공하는 내장객체로 javax.servlet.http.HttpServletRequest 클래스에 대한 참조 변수임

주로 클라이언트에서 서버로 전달되는 정보를 처리하기 위해 사용한다. 

▪ 대표적으로 HTML 폼을 통해 입력된 값을 JSP에서 가져올 때 사용함. 

request 주요 메서드

 

◼ response 내장객체 

▪ response는 request와 반대되는 개념으로, 사용자 응답과 관련된 기능을 제공.

사용자 요청(request)을 처리하고 응답을 다른 페이지로 전달하는 등의 기능을 제공한다.

 javax.servlet.http.HttpServletResponse 객체에 대한 참조 변수로, request에 만큼 많이 사용되지는 않으나 setContentType, sendRedirect와 같은 메서드는 잘 알아두어야 한다.

response 주요 메서드

※ forward 액션과 response.sendRedirect() 의 차이점

 - forward 액션은 최종적으로 전달되는 페이지에 파라미터(HTML 폼 입력값 등)를 함께 전달함. 

 - sendRedirect() 는 단순히 지정된 페이지로 최종 화면이 이동됨.

 

◼ out 내장객체 

▪ out은 출력 스트림으로써, 사용자 웹 브라우저로 출력하기 위한 내장 객체임.

▪ 여러 예제에서 살펴본 것처럼 스크립트릿에서 브라우저로 텍스트를 출력하는데 사용. 

▪ out은 javax.servlet.jsp.JspWriter 객체의 참조 변수로, 버퍼 관련 메서드와 출력 관련 메서드로 구성되며 out을 이용해서 출력한 내용은 서버의 콘솔이 아닌 사용자에 전달된다.

out 주요 메서드

 

◼ session 내장객체

 ▪ HTTP 프로토콜이 비연결형 프로토콜이기 때문에 한 페이지가 출력된 다음에는 클라이언트와 서버의 연결이 끊어진다. 따라서 한번 로그인한 사용자가 로그아웃할 때까지 페이지를 이동해도 보관해야 할 정보가 있다면 이에 대한 처리가 매우 곤란해진다. 

▪ 이러한 HTTP 프로토콜 문제점을 해결하려고 나온 것이 쿠키와 세션이다.

▪ session 은 javax.servlet.http.HttpSession인터페이스의 참조 변수 이다.

▪ session 은 접속하는 사용자 별로 따로 생성되며 일정시간 유지되고 소멸된다.

▪ 이러한 세션의 특징을 이용해 setAttribute() 메서드를 이용해 임의의 값을 저장해 놓고 활용할 수 있음.

▪ 세션이 주로 사용되는 경우는 다음과 같다.
 ➊ 사용자 로그인 후 세션을 설정하고 일정 시간이 지난 경우 다시 사용자 인증을 요구 할 때.
 ➋ 쇼핑몰에서 장바구니 기능을 구현할 때.
 ➌사용자의 페이지 이동 동선 등 웹 페이지 트래킹 분석 기능 등을 구현할 때.

session 내장객체 메서드

 

JSP 내장객체와 속성 관리

주요 내장객체의 생성 시점과 소멸 시점

 

반응형

'잡동사니' 카테고리의 다른 글

[Spring] Spring tomcat 오류  (0) 2020.06.18
[Mysql] Mysql 재설치  (0) 2020.06.18
[JSP] JSP 기본 문법  (0) 2020.06.16
[JSP] 서블릿의 이해  (0) 2020.06.16
JSP  (0) 2020.06.16

01. 주석

▪ 주석은 프로그램 소스에 텍스트로 된 간단한 설명문을 넣는 것을 말한다

▪ HTML 주석 : 클라이언트로 전달되는 주석

• 일반적인 HTML 문서에서 사용 가능한 주석으로 화면에는 보이지 않지만 브라우저 소스보기를 하면 내용이 노출됨.

<!-– 주석입니다. -->

▪ JSP 주석 : 클라이언트로 전달되지 않는 주석

• JSP 파일에서만 사용 가능한 주석으로 브라우저 소스보기를 해도 내용이 노출되지 않음.

<%-- 주석 --%>

 

02. 지시어

▪ 지시어(Directives)는 JSP 파일의 속성을 기술하는 JSP 문법.

▪ JSP 컨테이너에게 해당 페이지를 어떻게 처리해야 하는지 전달하기 위한 내용을 담고 있다. 

▪ 지시어는 크게 page, include, taglib으로 나눌 수 있으며, 각각에서 다루는 속성이 다르다.

 

1. page 지시어 

▪ page 지시어는 현재 JSP 페이지를 컨테이너에서 처리하는 데 필요한 각종 속성을 기술하는 부분.

▪ 보통 JSP 페이지 맨 앞에 위치함.

<%@ page 속성1="속성값1" 속성2="속성값2“ … %>
//ex
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

page 지시어 속성

- session 

• 세션은 웹 브라우저와 웹 서버가 지속적인 클라이언트 인식을 위해 필요한 정보를 임시로 저장해두는 방법

• 주로 웹 사이트에 로그인하거나 쇼핑몰에서 장바구니 등을 구현할 때 사용된다.

 

- errorPage, isErrorPage 

▪ 두 속성은 jsp파일의 오류 처리를 위한 것으로, errorPage는 현재 페이지에 오류 발생시 호출할 페이지를 지정하는 속성이고 isErrorPage는 오류 처리를 위한 전용 페이지임을 알리는 속성이다.

 

2. include 지시어 

▪ include 지시어는 현재 JSP 파일에 다른 HTML이나 JSP 문서를 포함하기 위한 기능을 제공. 

▪ include 지시어는 다음 절에서 살펴볼 include 액션과 비슷한 기능을 한다. 

<%@ include file=“포함할 파일_이름” %>

▪ 네이버와 같은 인터넷 포털사이트의 화면처럼 여러 정보의 조합으로 한 화면을 구성할 때 유용하게 사용됨.

▪ include 지시어를 사용하면 기능 혹은 화면을 모듈화할 수 있어 화면 구성이나 재활용이 용이하다.

 

3. taglib 지시어 

▪ JSP 기능을 확장하기 위해 만들어진 커스텀 태그 라이브러리를 사용하기 위한 지시어.

<%@ taglib uri=“/META-INF/mytag.tld” prefix=“mytag” %>

 

03. 액션

1. JSP 액션의 종류 

▪ JSP 액션은 JSP 고유 기능으로 빈즈 클래스 연동 및 동적 페이지 관리를 위한 기능을 제공함.

▪ <jsp:action_name attribute=“value” /> 형태를 가짐.

▪ 주로 사용하는 액션은 useBean, get/setProperty 이며 자바 클래스와의 연동을 위해 사용함. 

▪ 액션(Action)은 JSP 주요 구성요소 중 하나로 다음과 같은 기능을 지원한다.

  -  JSP 페이지간 흐름 제어

  - 자바 애플릿 지원

  - 자바 빈즈 컴포넌트와 JSP 상호작용 지원

▪ 특히 useBean 액션은 JSP에서 자바 빈즈 클래스와의 연동을 지원해주는 액션으로 잘 알아둘 필요가 있다.

▪ include 액션은 단순히 페이지를 포함하는 것 뿐만 아니라 파라미터를 포함될 페이지로 전달하는 것이 가능함.

• 사용 예 ) <jsp:param name=“user”  value=“홍길동” />

대표적인 액션의 종류

 

04. 선언과 표현식

1. 선언

▪ JSP 페이지에서 메서드나 멤버변수를 선언하기 위한 구문.

▪ <%!   %>는 JSP 페이지에서 이러한 제약 사항 없이 멤버변수와 메서드 선언을 가능하게 함.

ex)
<%! 
	// 멤버변수 선언이나 메서드 선언이 올 수 있다. 
	String str = "test"; 
	public boolean check() { 
		return false; 
	} 
%>

2. 표현식 

▪ 표현식(Expression)은 이미 여러 소스를 통해 많이 살펴본 것처럼 <%= %>를 사용해서 간단한 데이터 출력이나 메서드 호출 등에 이용한다. 

▪ 코드 마지막에 ‘;(세미콜론)’을 사용하지 않는다는 것에 주의하도록 한다.

ex)
메서드 호출 : <%= calculator() %> 
변수 출력 : <%= result %> 
사칙 연산과 문자열 결합 : <%= “i+2=“+(i+2)+”입니다” %>

 

반응형

'잡동사니' 카테고리의 다른 글

[Mysql] Mysql 재설치  (0) 2020.06.18
[JSP] JSP 내장객체  (0) 2020.06.16
[JSP] 서블릿의 이해  (0) 2020.06.16
JSP  (0) 2020.06.16
[JSP] JSP 개발환경 구축  (0) 2020.06.16

01. 서블릿 개요

1. 서블릿(Servlet)이란? 

▪ 서블릿은 자바 플랫폼에서 컴포넌트를 기반으로 하는 웹 애플리케이션 개발의 핵심 기술.

▪ JSP 는 서블릿 기반의 웹 프로그래밍 기술로 내부적으로 JSP는 서블릿으로 변환 되어 실행됨.

▪ 따라서 JSP를 보다 잘 이해하고 고급 웹 프로그래밍 개발을 위해서는 서블릿에 대한 이해가 필요함.

 

◼ 서블릿의 장점 

➊ 자바를 기반으로 하므로 자바 API를 모두 사용할 수 있다.

➋ 운영체제나 하드웨어에 영향을 받지 않으므로, 한 번 개발된 애플리케이션은 다양한 서버 환경에서도
실행할 수 있다.

➌ 웹 애플리케이션에서 효율적인 자료 공유 방법을 제공한다. 

➍ 다양한 오픈소스 라이브러리와 개발도구를 활용할 수 있다. 

 

◼ 웹 애플리케이션 개발에 서블릿 사용 시 이점 

➊ MVC 패턴을 쉽게 적용할 수 있고 컨테이너와 밀접한 서버 프로그램을 구현할 수 있다.

➋ MVC 패턴을 적용할 때 콘텐츠와 비즈니스 로직을 분리할 수 있으며 컨트롤러와 뷰가 역할을
분담함으로써, 웹 디자이너와 개발자 간에 작업을 원활하게 할 수 있다.

➌ 리스너 및 필터 서블릿 등 고급 프로그래밍 기법을 통해 더욱 효과적인 웹 애플리케이션을 설계할 수 있다.

 

2. 서블릿과 서블릿 컨테이너 

▪ 서블릿 컨테이너는 서블릿을 실행하기 위한 서버 소프트웨어를 말하는 것으로 JSP나 서블릿으로 만들어진 웹 프로그램을 개발하고 실행하기 위한 환경임.

▪ 아파치 톰캣이 대표적임.

 

3. 서블릿 동작 과정 

▪ 서블릿은 개발자가 소스 작성 후 컴파일 과정을 거쳐 컨테이너에 배치(deploy)하게 되면 컨테이너에 의해 실행되어 관리된다. 

▪ 이후 사용자 요청에 따라 스레드 단위로 실행되면서 데이터베이스 연동 등 필요한 작업을 수행하고 처리 결과를 사용자에게 HTML 형식으로 전달하는 구조로 동작한다.

서블릿 개발과 실행 과정

 

02. 서블릿 구조와 생명주기

1. 서블릿 구조와 API

▪ JSP와 달리 서블릿은 일반적인 자바 클래스 구조를 가진다. 

▪ 이는 서블릿이 일반 자바 소스의 구조라 는 의미로 컴파일 과정이 필요함을 의미

▪ 또한 서블릿은 컨테이너에 의해 실행되므로 개발자가 임의로 프로그램 하는 것이 아니라 특정 클래스를 상속 받아야만 구현할 수 있는 구조임.

▪ 따라서 서블릿 프로그램을 하려면 서블릿 클래스의 상관 관계나 API의 기본 구조를 이해해야 한다.

▪ API(Application Programming Interface)는 특정 클래스를 다른 프로그램에서 사용하기 위해 필요한 정 보를 규격화 해놓은 것을 말함.

▪ 일반적으로 서블릿은 java.servlet.HttpServlet 클래스를 상속해서 구현 함.

javax.servlet.http.HttpServlet을 상속받은 서블릿 동작 구조

GET 방식

• 서버에 있는 정보를 클라이언트로 가져오기 위한 방법이다. 예를 들어 HTML, 이미지 등을 웹 브라우저에서 보기 위한 요청.

• 서버에는 최대 240Byte까지 데이터를 전달할 수 있다.

• ‘?’ 이후의 값들은 서버에서 QUERY_STRING을 통해 전달된다. ‘속성=값’ 형태로 사용해야 하며 ‘&’는 여러 속성 값을 전달할 때 연결해주는 문자열이다.

• URL이 노출되기 때문에 보안에 문제가 생길 수 있다.

 

 POST 방식 

• 서버로 정보를 올리기 위해 설계된 방법이다. 예를 들어 HTML 폼에 입력한 내용을 서버에 전달하기 위한 요청.

• 서버에 전달 할 수 있는 데이터 크기에는 제한이 없다. 

• URL에는 매개변수가 표시되지 않는다.

 

2. 서블릿 생명주기 

◼ 서블릿 초기화 : init() 메서드

▪ 서블릿 실행시 호출되는 메서드로 초기에 한 번만 실행된 다. 공통적으로 필요한 작업 등 수행 

◼ 요청/응답 : service() 메서드 

▪ 사용자 요청에 따라 스레드로 실행되는 메서드로 각각 service() 메서드를 통해 doGet() 혹은 doPost() 메서드가 호출된다.

▪ 파라미터인 HttpServletRequest 와 HttpServletResponse 를 통해 사용자 요청을 처리한다. 

◼ 서블릿 종료 : destroy() 메서드

▪ 컨테이너로부터 서블릿 종료 요청이 있을 때 호출되는 메서드.

▪ init()와 마찬가지로 한 번만 실행되며, 서블릿이 종료되면 서 정리할 작업이 있다면 destroy() 를 오바라이딩해서 구현함.

서블릿 생명주기

 

반응형

'잡동사니' 카테고리의 다른 글

[JSP] JSP 내장객체  (0) 2020.06.16
[JSP] JSP 기본 문법  (0) 2020.06.16
JSP  (0) 2020.06.16
[JSP] JSP 개발환경 구축  (0) 2020.06.16
[JSP] 웹 프로그래밍 언어와 주요 기술  (0) 2020.06.16

+ Recent posts