3-tier architecture
클라이언트와 클라이언트의 요청을 받는 부분을 분리를 시킨다.
클라이언트에선 화면을 보여주기만 하고 요청이라는 것을 만들어내서 요청을 서버라는곳에 전송을 하게 만들어준다.
서버에서 처리를 다 한 후 응답이라는것을 해준다. 요청을 보내고 응답을 받는 과정을 네트워크 요청을 통해서 할 수 있다.
서버에 중요한걸담고 클라이언트에는 넣지 않으면 되므로 보안의 문제에서 좀더 자유로워질 수 있다.
네트워크 기초
1. 인터넷(Internet) 개념
인터넷은 컴퓨터로 연결하여 TCP/IP 라는 통신 프로토콜을 이용해서 정보를 주고받는 컴퓨터 네트워크이다.
인터넷은 종단 시스템, 통신망, 프로토콜, 주소체계, 인터넷 접속 제공으로 구성되어 있다.
| 구성요소 | 설명 |
| 종단 시스템 | 호스트, 서버, 통신 링크, 처리량 |
| 통신망 | 근거리 통신망(LAN), 무선랜 통신망(WLAN), 원거리 통신망(WAN) |
| 프로토콜 | IP, TCP, UDP |
| 인터넷 주소체계 | IP 주소 방식, 도메인 주소 방식(DNS 방식) |
| 인터넷 접속 제공 | ISP, URL, 웹 브라우저 |
2. 통신망
| 통신망 | 설명 |
| 근거리 통신망(LAN; Local Area Network) | 지역적 네트워크망. 근거리 통신망은 네트워크 매체를 이용하여 집, 사무실, 학교 등의 건물과 같은 가까운 지역을 한데 묶는 컴퓨터 네트워크이다. |
| 무선랜 통신망(WLAN; Wireless Local Area Network) | 무선랜 통신망은 유선 LAN과 무선 단말 사이를 무선주파수를 이용하여 전송하는 네트워크이다. 흔히 무선랜, 와이파이라고 부르는 무선 근거리 통신망을 위한 컴퓨터 무선 네트워크에 사용되는 기술이다. |
| 원거리 통신망(WAN; Wide Area Network) | 광역 통신망. WAN은 국가망 또는 각 국가의 공중통신망을 상호 접속시키는 국제정보통신망으로 설계 및 구축, 운용되는 네트워크이다. 거리에 제약이 없으나 다양한 경로를 지나 정보가 전달되므로 LAN보다 속도가 느리고 에러율도 높다. |
3. 프로토콜
프로토콜은 서로 다른 시스템에 있는 두 개체 간의 데이터 교환을 원활히 하기 위한 일련의 통신규약이다.
통신을 위해 프로토콜이 가져야 하는 일반적인 기능에는 데이터 처리기능, 제어 기능, 관리적 기능이 있다.
프로토콜의 기본요소에는 구문, 의미, 타이밍이 있다.
4. 인터넷 주소체계
인터넷 주소체계에는 IP 주소 방식과 도메인 주소 방식이 있다.
IP 주소 방식은 32Bit의 주소체계를 기준으로 인터넷상에 존재하는 호스트나 서버의 위치를 지정해주는 방식이다.
도메인 주소 방식(DNS 방식)에서 도메인 네임 시스템(DNS)은 호스트의 도메인 이름을 호스트의 네트워크 주소로 바꾸거나 그 반대의 변환을 수행할 수 있도록 개발되었다. 특정 컴퓨터의 주소를 찾기 위해 사람이 이해하기 쉬운 도메인 이름을 숫자로 된 식별 번호(IP 주소)로 변환한다.
웹 서버(Web Server)
웹 서버는 웹 브라우저로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹 페이지를 반환하는 컴퓨터 프로그램이다.
웹 서버의 콘텐츠는 정적 콘텐츠와 동적 콘텐츠가 있다.
웹 서버의 주된 기능은 요청한 페이지를 브라우저에게 응답하는 것이다.
브라우저와 웹 서버 사이의 통신은 HTTP나 HTTPS를 사용하여 수행된다.
웹 서버 주요 제품에는 아파치 웹 서버, 마이크로소프트의 IIS, 구글 웹 서버가 있다.
tomcat
1. 톰캣 설치하기
https://tomcat.apache.org/download-90.cgi
Apache Tomcat® - Apache Tomcat 9 Software Downloads
Welcome to the Apache Tomcat® 9.x software download page. This page provides download links for obtaining the latest version of Tomcat 9.0.x software, as well as links to the archives of older releases. Unsure which version you need? Specification version
tomcat.apache.org
2. 톰캣 서버 구동
폴더위치\apache-tomcat-9.0.70\apache-tomcat-9.0.70\bin
*startup.bat 실행
*실행 후 > 주소창에 'localhost:8080' 입력 > 연결 확인
*shutdown.bat 종료
3. HTTP 요청과 응답
서버는 http 응답이라는 형태로 자원을 그대로 전송하며, 글자를 주고받고 할 수 있다.
http://localhost:8080/first/first.txt 세부경로 (first 폴더안 first.txt 파일) 입력 후 엔터 > http 요청을 만든다.
> 해당컴퓨터에 요청 전송 > 요청했던 경로에 대한 정보를 같이 넘겨서 전송이 된다.
새로운 요청이 오게 되면 요청 중 달라고 했던 경로에 대한 자원이 있는지 확인을 하고 자원의 내용을 그대로 전송하는 작업이 이루어진다.
+) 글자가 깨지는 이유
요청한 것과 응답한 것의 서로 해석하는 인코딩이 달랐기 때문이며, 응답을 보내줄때 조금 더 많은 정보를 담아서 보내주면된다.
Java EE 설치
Eclipse IDE for Enterprise Java Developers 다운
https://www.eclipse.org/downloads/packages/release/2020-06/r
2020-06 R | Eclipse Packages
444 MB 4,979 DOWNLOADS The Modeling package provides tools and runtimes for building model-based applications. You can use it to graphically design domain models, to leverage those models at design time by creating and editing dynamic instances, to collabo
www.eclipse.org
HTML
하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다.
또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>텍스트 태그들</title>
</head>
<body>
<p>
<strong>중요한 내용</strong> <!-- 진하게 -->
<br>
<b>강조된 내용</b> <!-- 진하게 -->
</p>
<p>
<em>이탤릭</em>
<br>
<i>이탤릭</i>
</p>
</body>
</html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="춘식1.png"/>
<img src="춘식2.png"/>
</body>
</html>
VSCode
1. Visual Studio Code 설치하기
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
2. VSCode 확장프로그램(extension)
*Korean → 한글
*IntelliCode / IntelliCode Completions → 자동완성
*Live Server → 가상으로 쉽게 볼수 있음
3. VSCode 단축키
| Ctrl + Shift + P | 검색 |
| Ctrl + Shift + K | 한줄 삭제 |
| Shift + Alt + F | 자동정렬 |
MDN
모질라 재단 및 다른 IT기업들이 사용하는 웹 개발을 위한 문서 저장소이자 수많은 프로그래밍 입문자들을 위한 학습 장소이다.
https://developer.mozilla.org/ko/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
HTML entity characters
| < | < |
| > | > |
| & | & |
| " | " |
| ' | ' |
CSS 프로퍼티 값의 단위
| 단위 | 설명 |
| px | 픽셀(화소)단위. 1px은 화소1개의 크기 의미. px은 요소의 크기나 이미지의 크기 지정에 주로 사용 |
| em | 배수 단위의 상대 단위. 요소에 지정된 사이즈에 상대적인 사이즈를 설정 폰트 사이즈 설정이나 콘텐츠를 포함하는 컨테이너의 크기 설정에 사용하면 상대적인 설정이 가능 |
| rem | 최상위 요소(html)의 사이즈를 기준 |
| % | 백분률 단위의 상대 단위 |
| vh | viewport 높이의 1/100 |
| vw | viewport 너비의 1/100 |
로그인창 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>입력 요소 배치하기</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap"
rel="stylesheet"
/>
<style>
body {
margin: 0;
height: 100vh;
font-family: "Gowun Dodum", sans-serif;
}
#container {
background-image: url("배경3.jpg");
background-position: center;
background-size: cover;
display: flex;
height: 100%;
justify-content: space-around;
align-items: center;
}
form {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border: 1px solid #c6c6c6;
border-radius: 15px;
box-shadow: 0 5px 15px 2px rgb(68 68 68);
}
fieldset {
display: flex;
flex-direction: column;
border: none;
margin: 3em 1em;
}
label {
width: 4em;
display: inline-block;
}
input {
display: inline-block;
font-family: inherit;
height: 2em;
margin: 3px;
}
legend {
font-size: 2em;
margin-bottom: 2rem;
text-align: center;
}
::placeholder {
font-family: inherit;
}
input[type="button"] {
width: 5rem;
font-size: 1em;
height: 2em;
margin-top: 2rem;
background-color: rgb(240, 232, 248);
border: 1px solid gray;
cursor: pointer;
}
input[type="button"]:hover {
background-color: rgb(209, 186, 233);
}
div {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<form>
<fieldset>
<legend>회원정보관리</legend>
<div>
<label for="my-text">아이디</label>
<input id="my-text" type="text" placeholder="아이디를 입력하세요" />
</div>
<div>
<label>패스워드 </label>
<input id="my-password" type="password" placeholder="비밀번호를 입력하세요" />
</div>
<div>
<input id="btn1" type="button" value="로그인"/>
<input id="btn2" type="button" value="회원가입"/>
</div>
</fieldset>
</form>
</div>
</body>
</html>
