#2018.12.15 개발일지
1. 개인적인 개발공부 시작하고 첫 주말 토요일.
나름 진도 뺀다고 했으나, 생각만큼은 못뺐다.
금요일에 기가 쏙 빨려서, 오전에 좀 푹 쉬고 공부 시작.
게시판 만들기는 현재진행중이다. -ing
2. 게시판만들기 Summary
* 오늘의 진도는 하기 포스팅을 바탕으로 진행한 개인적인 공부 입니다.
[본격 게시판짜기 Part1.2 - 게시판도 HTML부터] 글 입력폼 http://cusmaker.tistory.com/53
[본격 게시판짜기 Part1.3 - Dom 맛보기 ] 글입력폼 검사 http://cusmaker.tistory.com/48
* 작일 수행한 개발은 정적인 리스트 페이지 (http://syeon02.tistory.com/25 참고).
오늘은 소스를 추가해서 글쓰는 페이지를 만들 예정
Ⅰ. [본격 게시판짜기 Part1.2 - 게시판도 HTML부터] 요약
1)
1 | <a href="write.html">글쓰기</a> | cs |
- intex.html의 </table> 밑에 하기 코드 추가.
index.html 의 글쓰기 링크를 클릭하면, 404 에러가 발생.
write.html 파일을 미생성 했기 때문 → index.html과 동일한 디렉토리에 write.html 파일을 추가
동일한 디렉토리에 write.html을 생성하지 않았다면, 절대 혹은 상대경로로 경로를 명확히 지정해준다.
[ 절대경로 Vs 상대경로 ]
절대경로 |
① URL의 전부를 적어줌. WebContent를 사용하므로 경로는 아래와 같음 http://localhost:8000/board/write.html ② '.'을 사용하지 않고 '/'만 활용하여, 프로젝트 이름부터의 경로를 적어줌 /board/write.html |
상대경로 |
① 말 그대로 상대적인 경로. ② WebContent 폴더가 기준이 되는 루트폴더 ( WebContent 폴더에서 아무리 ../../로 접근하여도 더 이상 상위폴더로 이동X ) |
2)
1 2 3 | <form action="index.html" method="post"> </form> | cs |
- <form> 태그 추가: <form>태그는 데이터가 담긴 input 태그들의 값을 전송하기 위해서 사용 됨.
<table> 태그 처럼 안의 태그들을 감싸는 태그라고 생각하기.
- action 속성: 데이터들을 가진 form을 action에 지정 된 페이지로 보내주겠단 의미
- method: form을 보내는 방식으로 대표적으로 get과 post가 있음. 몇 가지 더 있었던 것 같은데 정리가 필요해보임
GET |
POST |
① 모든 파라미터 값을 url에 query string 형식으로 전환 ② 파라미터 값이 길어질 수록 url이 길어지기 때문에 값의 길이 제한이 있음 ③ url 형식에 맞지 않는 파라미터 이름/값은 encoding 되어야 할 필요성이 있음 ④ 요청 url에 text형식으로 포함 됨 → 웹브라우저 사용자의 눈에 직접적으로 표시 될 수 있음(예: 구글에 검색 할 때) ⑤ 사용자의 눈에 직접적으로 표시 되기 떄문에, 로그인 비밀번호 정보를 get 방식으로 전달하면 문제가 발생 할 가능성이 있음 ⑥ ①~⑤의 이유로 단순한 페이지 요청에 많이 쓰임 |
① 모든 파라미터는 HTTP Body에 포함 되어 전달 ② Body에 포함되어 전달되므로, 길이 제한 없음 ③ HTTP Body에 포함되므로, 웹브라우저 사용자의 눈에 직접적으로 표현되지 않음 ④ 사용자의 눈에 직접적으로 표시 되지 않기 떄문에, 사용자가 원하지 않는 정보가 서버로 전달 될 가능성 有. BUT, 사용자가 입력하지 않은 정보가 전달 될 가능성은 거의 없음. ⑤ 따라서, 대부분의 웹 브라우저에서는 post 방식의 요청에 대한 응답 페이지를 새로고침으로 요청할 때는 경고를 통해서 사용자에게 정보 전송에 대한 confirm을 받음. (예: 체크아웃 페이지에서 새로고침시) ⑥ 사용자의 눈에 직접 표시되지 않는다고 하더라도, http response message를 분석 했을 때는 얼마든지 유지될 수 있으므로 단순하게 post방식을 썼다고 보안성이 높아지지 않음 ???? 그럼 어떻게 해야 보안성이 높은거지 ⑦ 따라서 서버로 데이터 전송을 할 목적으로 많이 사용 됨. |
3)
1 2 3 | 제목: <input type="text" name="title" /><br/> 작성자 : <input type="text" name="writer" /><br/> 날짜 : <input type="text" name="regdate" /><br/> | cs |
- input 태그 채워넣기 (form 태그 안에 입력하기)
- name: 해당 값이 DB로 넘어갔을 때, 이를 인지할 수 있도록 해주는 변수명이라고 생각하면 됨.
- <br/>: break의 약자로 개행해주는 역할
4)
1 | <input type="submit" /> | cs |
- 해당 fom을 전송하는 기능을 가지고 있음
▶Ⅰ. 1) ~4) 까지 수행한 최종코드
1 2 3 4 5 6 7 8 | <body> <form action="index.html" method="post" onsubmit="return formCheck();"> 제목 : <input type="text" name="title" /><br/> 작성자: <input type="text" name="writer" /><br/> 날짜: <input type="text" name="regdate" /><br> <input type="submit" /> </form> </body> | cs |
Ⅱ. [본격 게시판짜기 Part1.3 - Dom 맛보기 ] 글입력폼 검사 요약
*Javascript를 이용하여, 입력 값 유효성 검증하기
- Javascript: 스크립트 언어로써 HTML과 마찬가지로 웹브라우저의 엔진에서 작동.
스크립트는 언어 특성상 문법이 엄격하지 않고, 자유도가 넓어서 많은 라이브러리들이 존재하는 강력한 언어임.
1)
1 2 3 | <script> alert(document.forms[0].title.name); </script> | cs |
- write.html 소스안 </form> 바로 밑에 입력
: 보통은 <head>태그 안에 집어 넣는 것이 일반적인데, 스크립트는 페이지가 순차적으로 로드 되기 때문에 form 태그 위쪽에 소스가 위치하게 되면 동작하지 않을 수 있음
- document 자세한 내용은 직접 찾아보기
: 하위 객체에 접근하기 위해서는 . 으로 접근
: 아이디를 지적하고 getElementById() 함수를 사용하여 직접 접근도 가능
- document.forms[0]: 문서내에서 form 태그들을 찾아 첫번째 form 객체를 선택
- title: input 태그에서 name 속성에 지정한 값에 접근 가능
- alert으로 경고창 띄움: title에서 name 값을 alert() 함수를 통해 출력하게 되는 것.
▶ Ⅱ. 1)까지 수행한 최종코드 및 결과
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <body> <form action="index.html" method="post" onsubmit="return formCheck();"> 제목 : <input type="text" name="title" /><br/> 작성자: <input type="text" name="writer" /><br/> 날짜: <input type="text" name="regdate" /><br> <input type="submit" /> </form> <script type="text/javascript"> function formCheck(){ alert(document.forms[0].title.name); } </script> </body> | cs |
2) 입력값 검사하기
: 페이지에서 값이 모두 입력 된 후에, submit 버튼을 누르는 시점에서 검사가 이루어져야겠다.
1 | <form action ="index.html" method="post" onsubmit="return formCheck();"> | cs |
- onsubmit : input태그 중 type이 submit인 버튼을 클릭했을 때, 폼을 전송하기 전에 이벤트를 캐치하여, 이때 동작 할 자바스크립트 구문을 연결해주는 이벤트 속성. 여기서, return은 formcheck() 함수가 반환하는 Boolean 값을 토대로 submit을 할 것인지 안 할 것인지를 정하게 됨.
3) formcheck() 함수 완성하기
- 정규식을 사용하여, 유효성 검사를 디테일하게 진행하기
① 숫자인지 판별 정규식
: .match(/^\d+$/ig)
② asdf@asdf.com 형식을 판별 정규식
: .match(/^(\w+)@(\w+)[.](\w+)$/ig)
③ sdf@asdf.co.kr 형식을 판별하는 정규식
: .match(/^(\w+)@(\w+)[.](\w+)[.](\w+)$/ig)
▶ Ⅱ. 3) 최종코드 및 결과
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <script type="text/javascript"> function formCheck() { var title = document.forms[0].title.value; var writer = document.forms[0].writer.value; var regdate = document.forms[0].regdate.value; var content = document.forms[0].content.value; if (title == null || title == ""){ alert('제목을 입력하세요'); document.forms[0].title.focus(); return false; } if (writer == null || writer == ""){ alert('작성자를 입력하세요'); document.forms[0].writer.focus(); return false; }else if(writer.match(/^(\w+)@(\w+)[.](\w+)$/ig) == null){ alert('이메일 형식으로 입력하세요'); document.forms[0].writer.focus(); return false; } if (regdate == null || regdate ==""){ alert('날짜를 입력하세요'); document.forms[0].regdate.focus(); return false; }else if(regdate.match(/^\d\d\d\d\d\d+$/ig) == null){ alert('숫자형식(6자리)으로 입력하세요'); document.forms[0].regdate.focus(); return false; } } </script> | cs |
4) DB로 데이터 넘기기 (다음 개발일지 진도 내용...)
- 현 방식대로해도, 역시나 데이터 삽입은 불가 ( html에서 DB로 바로 접속하는 것은 불가능)
* DB 연결가능 언어: 서버에 접속하기 위한 언어로만 가능
- Server side 언어(=백 엔드 언어): JSP, PHP, ASP 등의 웹 프로그래밍 언어
: 웹 언어가 DB에서 데이터를 가져옴 → html, javascript로 표현되어 웹 페이지로 보여줌 ▶ 이런게 웹 프로그래밍
: JSP(Java Server Page)는 웹 언어의 확장자를 가지고, html코드를 포함하기도 함. 자바기반의 웹 프로그래밍 언어
- index.html페이지로 넘어간 form 데이터들을 어떻게 받을 수 있을까?
① html과 javascript만으로는 불가!
② html, javascript: 사용자가 사용하는 웹브라우저의 엔진에서 작동(Client Side언어, 프론트 엔드)
+ 1-1, 1-2, 1-3에서 사용한 html, javascript는 웹 브라우저에게 돌아가기 때문에 웹 서버를 구동하지 않아도 되지만, JSP 파일을 사용하기 위해서는 웹서버가 필요.
'개발 이야기 > 개발일지' 카테고리의 다른 글
| 2018.12.17 개발일지 (0) | 2018.12.17 |
|---|---|
| 2018.12.13 개발일지 (0) | 2018.12.13 |
