[ETC] 하나의 웹사이트를 만들기까지

1. DB테이블 작성
 - 데이터 중복을 피한다.
 - 테이블의 이름을 연관성있게 한다.
 - 검색 속도와 저장 공간을 고려 테이블을 분리시킨다.
 - 별도의 검색용 테이블을 만들어 여러개의 테이블에 쌓이는 데이터를 한눈에 볼 수 있게한다.

2. 파일 연동 구조잡기
 - 공유해서 써야 되는 파일과 분리해서 써야되는 파일을 나눈다.

3. 기본 레이아웃 잡기
 - 주로 쓰는 태그는 <h1~2> <div> <ul> <li> <span> <a> 등등이 대부분
 - CSS 작성
 - HTML 태그 속성에 자바 스크립트 코드를 넣지 않는다.(HTML, CSS, JavaScript를 완전히 분리시킨다.)
 - 1) 페이지에 들어가는 모든 HTML 태그 작성
 - 2) 각각의 항목들을 화면에 배치하기 위해 적당한 그룹을 만들어 분리. 그룹으로 나누어 묶을때는 순서를 적절한 위치로 이동시켜 다시 정렬. 이렇게 그룹을 형성시켰으면 각각의 그룹을 <div>~</div>로 묶는다. 그리고 각각의 div 그룹에 적절한 id명을 부여.
 - 3) CSS로 화면상의 좌표값을 이용해 내가 원하는 위치에 원하는 그룹을 고정 배치
 - 4) 중복되는 부분은 따로 분리시켜 include시킨다.
 - 5) 많이 사용되는 루틴은 함수로 만들어 놓는다.

서버 스크립트 부분은 공용 변수 + 공용 함수 + 개별 함수
HTML 구조는 시작은 독립된 인트로 페이지 서브는 Head + Side + Talk + Foot의 4영역으로 나눈다.
CSS/JavaScript 부분은 기본 CSS + 개별 CSS + 기본 JavaScript + 개별 JavaScript
AJAX 연동 처리 부분은 클라이언트 자바스크립트와 서버 스크립트 함수가 1:1로 연동되어 처리
서버 스크립트 파일을 URL로 직접 호출하는 결과와 AJAX방식으로 호출하는 결과는 대부분 동일하게 처리

폼 태그 : 웹 브라우저에서 어떤 사이트의 웹서버로 데이터를 보낼 때 사용

이런 폼 태그를 통해서 데이터를 주고 받을 때는 보안이 중요하다. 그래서 보통 브라우저에 전송된 폼 데이터를 그대로 사용하기 전에 검사를 거친다. 이런 데이터는 보통 문자열로 이루어져 있어 검사를 통해 위험성 있는 문자를 제거하거나 변경 차단시켜 준다.

※ 정규 표현식
 - 어떤 문자열의 집합을 묘사하는데 사용되는 텍스트 스트링
 - 정해진 구문 규칙에 따른다
 - 텍스트 패턴을 기준으로 검색 혹은 조작하는데 사용된다.
정규 표현식에 대한 예는 JavaScript 참조.

이런 보안을 위해서는 정규 표현식을 잘 알아야 된다. 또한 브라우저에서 자바 스크립트 정규식을 써서 보안을 유지할 수 있는데 이럴 경우 브라우저에서 자바 스크립트 기능을 죽여버리면 무용지물이 된다. 그래서 검증은 서버단에서 이루어져야 된다.

요즘에는 대부분의 페이지를 AJAX 방식으로 처리하는데 이런 페이지는 AJAX가 잘 작동하는 환경에서는 편하지만 자바 스크립트가 제한되거나 안되는 환경에서는 서비스가 마비된다. 완벽한 웹 표준을 구현하려면 AJAX가 작동하지 않는 환경에 대비해서 순수한 방식으로 돌아가게끔 두가지 경우를 고려해서 이중적인 작동 구조를 가지게 해야한다. 이렇게 하면 JavaScript나 AJAX 방식이 작동을 하지 않더라도 서버와 데이터를 주고 받을 수 있다. 대신 서버단의 스크립트 코드의 양은 많아진다. 그리고 데이터 전송 결과를 표시해주기 위한 별도의 페이지도 필요하다.

이렇게 AJAX 방식과 옛날 방식을 동시에 하기 위한 원리는 다음과 같다.
웹 페이지의 폼 입력 부분에 숨겨진 input 태그를 두어 이름을 ajax 라고 주고 기본적인 값을 off 로 준다.
AJAX/자바스크립트 가 되는 환경에서 AJAX 비동기 전송시 위 ajax 값을 on 으로 바꾸어서 전송한다.
그러면 서버에서는 ajax 가 on 이라는 값으로 AJAX가 가능함을 인식하고 비동기 통신에 걸맞는 값을 반환해 준다.
자바 스크립트가 안되거나 호환이 안되는 환경에서는 스크립트가 작동하지 않기 때문에 전송시 ajax 값을 on 으로 설정 할 수 없다. 그렇기 때문에 기본으로 설정된 off 값이 서버로 전송된다.
그럼 서버는 ajax 값이 off 이기 때문에 비동기 통신이 안된다고 판단하고 예전 방식대로 페이지를 출력해준다.

회원가입, 로그인, 인증 기능을 만들 때 팁

1. 정보를 입력하기 위해 폼테그를 포함한 HTML 문서를 작성. 그 안에 JavaScript 코드나 CSS는 필요없다.
2. 브라우저에서 보내준 폼 데이터를 처리하기 위해 서버 스크립트를 작성
1) 전송된 폼 데이터를 검증한다. 문제가 발생할 만한 코드는 차단
2) 검증에 통과하면 적절한 처리를 하고 처리의 결과값 코드를 구분하기 쉽게 단어 식으로 만든다.
3) 결과값을 가지고 AJAX처리 전송일 때와 일반적인 전송일 때를 나누어 출력값(HTML 태그 또는 JSON 문자열)을 만든다.

※ JSON 이란?

http://www.json.org 에서 제공하는 경량 데이터 포맷
해당 홈페이지에 가면 json의 문법과 여러 정보에 대해 볼 수 있다.
이건 xml보다 사용법도 훨씬 간단하고 여러 언어에서 두루 사용될수 있다.
EX : ajax를 사용할때 서블릿의 리턴값으로 json object를 받아서 사용
java에서 이것을 사용하기 위해서는 org.json.JSONObect 라는 클래스가 필요하고
javascript에서 이것을 사용하기 위해서는 위 홈페이지에서 제공해주는 json.js 파일이 필요하다.
org.json은 jar 파일로 제공되지 않기 때문에 프로젝트에 패키지로 설정한 후 추가 해 주어야 된다.
 

3. JavaScript를 이용해 HTML과 분리된 별도의 .js 파일에 AJAX 비동기 처리나 애니메이션 효과 같은 다이나믹 기능을 구현한다.
4. CSS를 이용해 이미지/색/크기 등을 표현하여 사이트를 꾸민다.

결국 모든 웹페이지는 .html .js .css .해당하는 언어(asp, php, jsp 등)

HTML, 서버 스크립트, DB, 폴더 등 기본 구조를 다 잡았으면

본격적인 AJAX를 구현

AJAX 시작의 난관은 서버로부터 받은 비동기 데이터를 자바스크립트를 이용해 내가 원하는 위치에 원하는 형태로 데이터를 출력해 주는 것이다. 서버로부터 받은 데이터는 HTML 형태일 수도 있고.. ( 이때는 innerHTML 을 이용해 출력 ) 배열이나 객체 형태의 데이터 일수도 있다.. ( 이것이 JSON )


출처 : beconfident.tistory.com
         http://blog.daum.net/comdomi