웹 프로그래밍 15

[Web 2.0&Mash Up] 웹 2.0과 메쉬 업의 의미

* Web 2.0 - Web 1.0에서 2.0으로의 변화 Web1.0 Web 2.0 정적 동적 폐쇄적 개방적 사업자 중심 사용자중심 통제 참여, 공유 - 특징 > 플렛폼으로서의 웹(웹 자체로 하나의 플렛폼을 형성) > 집단지성(사람들의 의견이 쌓여서 형성)의 활용 > 데이터의 중요성 급증 > S/W릴리즈 주기의 종말 // 지속적인 S/W변화가 바로바로 사용자에게 제공된다. > 가벼운 프로그래밍 모델 > 단일 디바이스를 넘어선 S/W ( PC위주에서 PC, mobile, table, ... ) > 풍부한 사용자 경험을 제공 (Ajax를 통해서...) - 주요 개념 > Folksonomy : Folk(대중) + Taxonomy(분류) = 사용자에 의해서 데이터 분류(ex> blog의 테그) > Collect..

[Ajax] 에이젝스, 아약스

* Ajax(Asynchronous Javascript and XML) - 비동기 자바스크립트 & XML - 비동기 : 응답을 기다리지 않고, 특정 조건의 이벤트 실행 - 자바스크립트 : 자바스크립트를이용하여 통신한다는 뜻 - XML : 주고받는 데이터 형태로 지금은 Text나 JSon이 더 많이 사용되는 추세 * 장단점 - 장점 : reload 없이 서버와 통신하면서 보다 상호적인 환경을 제공 - 단점 : 브라우져간 호환성이 미흡하며, 독립적으로 사용이 힘들다. * Ajax 통신 가능여부 - 보안상의 이유로 현재 페이지와 동일한 프로토콜, 포트번호, 도메인을 가진 곳만 접근이 가능하다. ex) 현재 페이지 http://www.daum.net/main.php http://www,daum.net/main...

[JQuery] 제이쿼리

* 특징 : 가볍다. CSS3호환해준다. 다양한 브라우져에서 사용이 가능하다. * 사용 : find.do 형식 ex) $("div").hide(); - find : css selector와 동일한 방식으로 html에서의 특정 클래스를 지칭한다. - selector를 이용한 결과는 배열로 돌아오는데, JQuery에 제공해주는 each 문으로 쉽게 순회가 가능하다. - do : selector로 선택한 것으로 무엇을 할 것인가? (> 레퍼런스를 참조합세) * JQuery가 Html 문서가 모두 ready가 된 이후에 수행되는 것이 안전하다. - $(function(){ ... }); //...에 다양한 JQuery함수를 사용하는 것이 이상적!! - 예제 소스 - Tab 1 Tab 1 Tab 2 Tab 2

[기타] SQL Injection, Cross-site scripting

■ 서 론 최근 우리나라는 다른 나라로부터 웹 서버 공격을 받은 적이 많다. 이는 예전의 서버의 약점이 절실히 들어난 것도 있지만, 우리가 해킹과 그에 대한 대안에 대해서 무감각했던 면을 보여주었다고 생각한다. 이번 조사를 통해서 여러 가지 해킹법에 대해서 알아보고, 그에 대한 대안을 조금이나마 알기를 원한다. 그렇다면 SQL Injection부터 알아보도록 하자. ■ SQL Injection 공격법 SQL Injection을 알아보기 전에 SQL에 대해서 알아보도록 하자. SQL이란, 관계형 데이터베이스에서 정보를 얻거나 갱신하기 위한(자료의 검색이나 관리) 데이터베이스 관리언어이다. SQL Injection이란, 데이터베이스로 전달되는 SQL의 Query값을 변경시키기 위해서 Web Applicati..

[PHP] PHP Session/Cookie

1. HTTP Cookie - Connection/State가 없으면 보안의 문제가 발생할 수도 있음 (Connection/State가 없어서 여러 사람을 동시에 수용이 가능하다) - Cookie 작동원리 > 사용자가 특정 html문서를 요청하면 서버에서 브라우저에 cookie를 세팅해서 돌려보냄. ( Set-Cookie: name=value) > 그다음부터 html문서는 cookie를 해더에 달고선 서버에 접속을 하여, cookie값에 따라 다른 값을 보여줌. 2. Cookie in PHP - html요소들 보다 먼저 나와야한다. - Set:setcookie(name,value,expire,path,domain)을 주워서 세팅을하며, > name=value라고 서버(domain/path)에 알려주며, ..

[PHP] PHP 기초

1. PHP - C/Perl의 장점을 이어받은 객체 지향 언어 - 웹 개발을 위해 만들어진 스크립트 언어 - 장점 > 범용성을 지닌 오픈소스 프로젝트 > 다양한 플랫폼/DBMS 지원 > 설치, 개발, 운용이 쉬움 > 저렴한 가격, 고성능, 대규모 프로젝트도 가능!! - 작동원리 > php파일을 사용자가 웹서버로 전송하면, php모듈에 의해 HTML파일로 해석 (PHP모듈에서 필요시 DBMS로의 데이터 수신및 발신) > 해석된 html파일을 웹서버를통해 사용자에게 전달 / 랜더링 후 출력 - PHP와 조합되는 가장 많은 형태(Cost Free) > Linux + Apache + MySQL + PHP / LAMP 2. PHP 기초적 문법 - PHP 생성 블럭 : - 블럭 내에서의 주석 : //, /* */(..

[JavaScript] 자바스크립트

1. JavaScript란 - 인터프리터 방식의 Script언어 - HTML에 기능을 추가하기 위해서 사용 > HTML은 정적인 요소를 나타낸다면, JavaScript는 동적인 요소를 나타낸다. - 가격이 무료이며, 대부분의 브라우져에서 지원해준다 - ECMA에 의해 표준화가 되었다. 2. JavaScript적용하기 - HTML 내부에 삽입 : 여기서 주석이 들어가는 이유는 Javascript를 지원하지 않는 브라우져를 위해서 사용된다. - 외부 JavaScript 파일 사용 ex) 외부에 선언후 태그에 속성갑쳐럼 스크립트의 함수를 불러다 쓴다. 3. Java와의 비교 - 결론부터 말하면, 비슷하긴하지만 전혀 다른 언어이다. - 공통점 ⓐ 대/소문자 구분 ⓑ 문장은 ';' 에 의해 구분 ⓒ 기본적인 제어..

[HTML/CSS] 웹 개발

1. 웹 표준/웹 접근성 - W3C의 권장 표준 준수 - 논리적이고 의미에 맞는 HTML/CSS사용 - 내용과 디자인의 분리 - 브라우저간의 호환성 유지 - 웹 접근성 : 웹 접근간 장애제거(장애우, 노약자, 외국인의 접근편리 유도) - 웹 표준에 맞는가를 확인 하는 방법(Validation) > 통합검사기 : http://validator.w3.org/unicorn/ > HTML/XHTML : http://validator.w3.org/ > CSS : http://jigsaw.w3.org/css-validator/ > 브라우져의 Add-on ⓐ chrome : pendule ⓑ firefox : html Validator 2. 웹 개발 과정 - 요구 분석/조사 > 목표 및 요구 사항 분석 > 관련 사이..

[HTML 5.0] 새로 추가된 주요 태그들

어서오세요 피빛하늘블러그 소개 페이지에... 피빛하늘 블러그의 탄생... 피빛하늘 블러그는 2008년 2월 그냥... 취미로 만들어진 블러그 입니다. 처음에는 저의 개인적인 내용들이 올라오다가... 3월에 대학에 진학하게 되죠... 대학에서 배운 내용을 어딘가에 저장해놓고, 제 지식을 왠 만하면 다 올리고 싶어서 이렇게 발전하게 되었죠... 현 단계에서의 단순 계획... 이대로만 진행 되었으면 좋겠내요... 이 문서는2011년 09월 25일 에 작성되었습니다. abc123@zyx.com ------------------------------------------------------------------------------------------------- 새로 나온 주된 태그들입니다. 1. / - :..

[HTML 5.0] Semantic Element / Semantic Tag

1. header - 사이트 전체의 머리말 이나 블러그 포스트의 머리말이 된다(그냥 머리말이라고 생각해라) - img 태그를 사용하여 이미지를 넣거나, form 태그를 써서 검색으로도 사용 가능 - 사이트 전체의 머리말의 일반적 위치는 상단이나 왼쪽에 배치 - 와 다르게 여러개의 header가 올수 있다. 2. hgroup - 제목과 그에 해당하는 부제목을 묶어주는 태그 3. nav - html문서상에서 어느 부분이 정확히 네비게이션 위치인지 알기 쉽다. - header나 footer, aside 태그안에 정의 가능하며, 독립적으로 사용이 가능하다. - 즉, 위치 영향이 없다. 4. article - 웹 상의 실제 내용 - 다른 곳에 배포 가능한 내용을 담고 있다. 5. section - 콘텐츠 그룹을 ..