- 브라우저 - 서버 - 데이터베이스 => 3계층 구조(3tier architecture) 조사
- CRUD 조사
조사해서 7월 1일 까지 레포트 제출
이메일에는 과제 제목, 과정, 이름을 반드시 기입해서 제출
양식은 자유 양식이며 상대 평가 요소로 점수화 예정
[과제1] 3계층 구조 조사
3tier architecture란?
: 3개의 논리적, 물리적인 컴퓨팅 계층을 분리한 소프트웨어 어플리케이션 아키텍처
WEB(Frontend Tier) - WAS(Backend Tier) - Database(DB Tier)
클라이언트 계층, 어플리케이션 계층, 데이터베이스 계층이 있으며
모든 통신은 어플리케이션 계층을 통과하며 클라이언트와 데이터베이스 계층은 직접 통신할 수 없습니다.
쿠팡에서 물건을 주문한다고 가정합시다.
클라이언트가 브라우저에서 쿠팡사이트에 연결을 하고자 요청하면 어플리케이션 계층에서는 웹사이트를 Response해주며 Database에서는 계정 정보나 이전 구매내역 등을 가져와서 WAS에서 화면에 뿌려줍니다. 구매하기 버튼을 클릭하면 쿠팡의 어느 서버 컴퓨터에 고객정보, 주문내역을 포함한 메시지를 보내며 WAS에서 실직적인 결제 로직을 실행하여 DB에 업무를 넘기거나 참조를 하는 기능을 합니다.
3 Tier
- 클라이언트(웹서버, 프리젠테이션) 계층: 랩톱, 휴대폰, 태블릿 등을 이용하여 우리가 보는 브라우저 화면 및 기능적인 요소들을 말하며 사용자로부터 정보를 수집하는 역할을 합니다. 일반적으로 HTML, CSS 및 JavaScript를 사용하여 개발됩니다.
- 어플리케이션(WAS) 계층: 논리계층으로 클라이언트 계층에서 수집된 정보가 처리되며 클라이언트와 데이터베이스 사이의 인터페이스 역할을 하며 통신을 돕고 보안을 제공합니다. WAS는 Python, Java, PHP 등을 이용하여 개발합니다.
- 데이터(Database) 계층: 어플리케이션이 처리하는 정보가 저장 및 관리되는 곳으로 관계형 데이터베이스 관리 시스템(MySQL, PostGreSQL, Oracle등) 또는 NoSQL데이터베이스 서버(MongoDB 등)일 수 있습니다.
장점
- 각 계층이 동시적으로 효과적인 개발이 가능하며, 독립적으로 확장 가능합니다. 또한 서로의 계층의 성능에 영향을 미치지 않아 리스크를 줄일 수 있고 클라이언트와 데이터베이스의 직접 통신이 불가능하다는 점에서 보안적인 측면에 장점을 갖습니다.
단점
- 1tier나 2tier에 비해 인력이 상대적으로 많이 필요하며 장애가 발생할 수 있는 부분들 또한 많습니다. 이것을 극복하고자 HCI 시스템을 이용하기도 합니다.
참고: https://www.ibm.com/kr-ko/topics/three-tier-architecture
https://youtube.com/SuperSimpleDev
[과제2] CRUD 조사
CRUD는 데이터베이스 명령으로 작성하기, 보여주기, 수정하기, 삭제하기를 묶어서 CRUD라고 합니다.
회원가입 기능으로 예를 들면
- Create (계정 생성)
회원가입을 취해 정보를 입력하고 설정해둔 조건에 만족하면 회원가입이 완료되었다는 알림을 해주고 계정이 생성됩니다. 하지만 프론트엔드만으로는 DB에 저장은 되지 않습니다. - Read(계정 확인)
가입이 완료된 후에 회원임을 조회하는 기능입니다. - Update(갱신)
비밀번호 변경이나 배송지를 입력하는 등 요소들을 변경하는 기능입니다. - Delete(삭제)
탈퇴 기능으로 회원정보를 삭제하는 기능입니다.
이외에도 게시물 작성하기, 보여주기, 수정하기, 삭제하기로 적용할 수 있고 댓글 CRUD도 있다.
Rest API에서는 POST, GET, PUT/PATCH, DELETE가 비슷한 역할을 합니다.
<html>
<head>
<title>Form test</title>
</head>
<body>
<form action="http://127.0.0.1:8000/accounts/register/" method="post">
<input type="text" name="username" placeholder="사용자 이름">
<input type="text" name="email" placeholder="이메일">
<input type="text" name="nickname" placeholder="닉네임">
<input type="password" name="password" placeholder="패스워드">
<input type="password" name="password2" placeholder="패스워드 확인">
<input id='btnSubmit' type="submit" value="제출">
</form>
</body>
</html>function signUp() { // 회원가입하는 함수
var id = document.getElementById("id").value;
var pw = document.getElementById("pw").value;
var confirm_pw = document.getElementById("confirm-pw").value;
var display_name = document.getElementById("display-name").value;
var pattern_spc = /[~!@#$%^&*()_+|<>?:{}]/; // 특수문자
var blank_pattern = /[\s]/g; // 공백
console.log(`id: ${id}, pw: ${pw}, confirm_pw: ${confirm_pw}, display_name: ${display_name}`); // 확인
if(id.length > 12 || blank_pattern.test(id)) {
alert("아이디 길이 or 공백 포함!"); // 아이디 틀림
return 0;
}
else {
if(pw.length < 8 || !(pattern_spc.test(pw))) {
alert("비밀번호 길이 or 특수문자 미포함!"); // 비밀번호 틀림
return 0;
}
else{
if(pw != confirm_pw) {
alert("비밀번호가 일치하지 않습니다!"); // 비밀번호 확인 틀림
}
else {
alert("회원가입 완료!"); // 회원가입 완료!
console.log("회원가입 완료!");
var elem = document.createElement('ul');
elem.innerHTML =
`<li>--------------------------</li>
<div class="createMember">
<input type="checkbox" class="checkBox">
<div>
<li>이름: ${display_name}</li>
<li>아이디: ${id}</li>
<li>비밀번호 : ${pw}</li>
</div>
</div>`;
document.querySelector('.check_data').append(elem); // 회원가입이 완료되면 회원조회에 추가
var id = document.getElementById("id").value = '';
var pw = document.getElementById("pw").value = '';
var confirm_pw = document.getElementById("confirm-pw").value = '';
var display_name = document.getElementById("display-name").value = ''; // 회원가입 완료 후 입력되어 있던 값들 사라지게 함
}
}
}
}
교육개발, 웹서비스개발, 수학강사