2023. 7. 17. 23:57ㆍClass review
.23 .7 .17 로그인 페이지 만들기
자바스크립트와 HTML이란?
- 자바스크립트와 HTML은 웹 개발에서 함께 사용되는 두 가지 주요한 기술입니다.
HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어이며, 웹 페이지의 레이아웃, 텍스트, 이미지, 링크 등을 작성하는 데 사용됩니다.
자바스크립트는 웹 페이지의 동적인 기능과 상호작용을 구현하기 위해 사용되는 프로그래밍 언어입니다. 자바스크립트를 사용하면 웹 페이지의 요소들을 조작하고, 사용자와의 상호작용을 처리하며, 데이터를 검증하고, 외부 서버와의 통신 등을 수행할 수 있습니다. 자바스크립트는 클라이언트 측에서 실행되는 언어로, 웹 브라우저에서 직접 실행되기 때문에 사용자 경험을 향상시키는 다양한 기능을 제공할 수 있습니다.
HTML과 자바스크립트는 서로 보완적인 역할을 수행합니다. HTML은 웹 페이지의 구조를 정의하고, 자바스크립트는 이 구조를 동적으로 조작하고 상호작용을 처리하여 웹 페이지를 보다 동적이고 사용자 친화적인 경험으로 만들어줍니다.
HTML 파일 내에서 자바스크립트 코드를 포함시키려면 <script> 태그를 사용합니다. 이 태그 안에 자바스크립트 코드를 작성하거나 외부 자바스크립트 파일을 참조할 수 있습니다. 자바스크립트 코드는 이벤트 처리, 폼 유효성 검사, 요소 조작, 애니메이션 등과 같은 다양한 작업을 수행할 수 있으며, HTML 문서의 요소들과 상호작용할 수 있습니다.
자바스크립트를 사용하여 HTML 요소들을 선택하고 조작하는 데에는 DOM(Document Object Model) API가 사용됩니다. DOM API는 웹 페이지의 요소들을 객체로 나타내고, 이를 조작하고 변경하는 메서드와 속성을 제공하여 자바스크립트로 HTML을 동적으로 조작할 수 있도록 합니다.
요약하면, HTML은 웹 페이지의 구조를 정의하고, 자바스크립트는 웹 페이지의 동적인 기능을 구현하고 상호작용을 처리합니다. 자바스크립트는 HTML과 함께 사용되어 웹 애플리케이션을 더욱 풍부하고 인터랙티브하게 만들어줍니다.
학습 목표
- .html / .jsp 파일을 하나의 Webcontent 안에 만들기
- 아이디가 이메일 양식에 맞게 입력되었으면 넘어가고, 그렇지 않은 경우엔 다시 입력하라는 경고창 띄우기
- .jsp 를 통해 연결할 페이지는 만들지 않았기 때문에 경고창이 아니라, '연결할 수 없는 페이지' 로 넘어가면 성공
입력 코드
코드 실행 결과
로그인 화면까지는 정상적으로 구현됨을 확인할 수 있습니다.
입력란에 이메일 양식 ({ } @ abcde.fg) 이 아닌 아이디를 입력한다면 경고창 띄우기까지 구현된다면 성공이에요.
오늘의 질문
질문 1. 'Get' 함수와 'Post'함수
HTTP 프로토콜에서는 클라이언트가 서버에 정보를 요청하거나 전송하는 방법을 정의하는 데 사용되는 여러 메서드가 있습니다. 이 중에서 가장 많이 사용되는 메서드는 GET과 POST입니다.
- GET 메서드: 서버로부터 정보를 조회하기 위해 사용
클라이언트의 요청 정보는 URL에 포함되어 전송됩니다. 예를 들어, http://www.example.com?query=OpenAI라는 URL은 example.com 서버에 query라는 키의 값이 OpenAI인 정보를 요청합니다.
GET 요청은 브라우저 히스토리에 기록되며, 북마크를 생성할 수 있습니다.
GET 요청은 브라우저에서 캐시될 수 있습니다.
GET 요청을 통해 전달할 수 있는 데이터의 크기는 제한적입니다.
GET은 민감한 데이터(비밀번호 등)를 전송하는데에는 사용되어서는 안 됩니다. 왜냐하면 요청 URL에 해당 정보가 포함되므로 보안에 취약하기 때문입니다.
- POST 메서드: 서버에 정보를 제출하기 위해 사용 (예: 양식 제출, 파일 업로드)
클라이언트의 요청 정보는 HTTP 메시지의 본문에 포함되어 전송됩니다.
POST 요청은 브라우저 히스토리에 기록되지 않으며, 북마크를 생성할 수 없습니다.
POST 요청은 브라우저에서 자동으로 캐시되지 않습니다.
POST를 통해 전달할 수 있는 데이터의 크기는 GET에 비해 매우 큽니다.
POST는 서버의 상태를 변경하거나, 민감한 데이터를 전송하는데 사용됩니다.
Summary :
차이점 1.
GET과 POST의 가장 큰 차이점은 GET이 서버로부터 정보를 조회하는데 사용되며, POST는 클라이언트가 서버에 데이터를 제출하는데 사용된다는 것입니다.
차이점 2.
GET은 정보를 URL에 포함시켜 전송하는 반면, POST는 HTTP 메시지 본문에 정보를 포함시켜 전송한다는 차이점도 있습니다.
질문 2. 유효성 검사
유효성 검사란?
- 사용자로부터 입력받은 데이터가 원하는 형식이나 조건을 충족하는지 확인하는 프로세스
- 웹 애플리케이션에서 사용자가 폼을 제출하거나 데이터를 입력할 때, 유효성 검사는 입력된 데이터가 올바른 형식이며 요구되는 조건에 맞는지 확인하여 데이터의 유효성을 보장합니다.
- 사용자가 부적절한 데이터를 제출하는 것을 방지하고, 애플리케이션의 안정성과 신뢰성을 향상시키는 데 도움이 됩니다. 일반적으로 입력 필드에서 유효성을 검사하고, 잘못된 데이터가 발견되면 사용자에게 오류 메시지를 표시하여 수정하도록 안내합니다.
- 유효성 검사는 다양한 종류의 데이터에 대해 수행될 수 있습니다. 예를 들어, 이메일 주소, 비밀번호, 전화번호, 날짜, 숫자 등의 데이터에 대한 유효성을 확인할 수 있습니다. 각 유효성 검사는 해당 데이터 형식에 맞는 패턴, 규칙 또는 조건을 사용하여 구현됩니다.
유효성 검사 없이, 클라이언트의 정보 및 요청을 'submit' 하면 안되는 이유
- 사용자 경험 저하 : 클라이언트 측에서 유효성 검사를 수행하지 않고, 서버에서 유효성 검사 후에 에러 메시지를 전송하면, 사용자는 자신의 입력이 잘못되었음을 알기까지 서버의 응답을 기다려야 합니다. 이는 사용자 경험을 저하시킵니다. 반면에 클라이언트 측에서 유효성 검사를 수행하면, 사용자는 입력이 잘못되었음을 즉시 알 수 있습니다.
- 보안 취약점 : 유효성 검사를 하지 않고 데이터를 전송하면, 악의적인 사용자가 서버에 대한 공격을 시도하는 데 이용할 수 있는 여지를 제공하게 됩니다. 예를 들어, SQL Injection 같은 공격 기법을 이용할 수 있습니다. 클라이언트 측에서 유효성 검사를 수행함으로써, 이런 공격의 위험을 줄일 수 있습니다.
- 서버 부하 증가 : 유효성 검사 없이 사용자가 입력한 모든 데이터를 서버로 전송하게 되면, 잘못된 또는 유효하지 않은 데이터까지 서버로 전송되게 됩니다. 이는 서버가 불필요한 데이터를 처리하게 만들어, 서버 부하를 증가시킵니다. 클라이언트 측에서 유효성 검사를 수행함으로써, 유효하지 않은 데이터의 서버 전송을 사전에 차단할 수 있습니다.
'Class review' 카테고리의 다른 글
| [.7 .25 - .7 .26 / .7 .30] PCA(Principal Component Analysis) 주성분분석 (0) | 2023.07.31 |
|---|---|
| [.7 .24] SVM : Support Vector Machin (0) | 2023.07.31 |