Programmer's Progress

이전에 C언어로 작성한 랜덤 미로 생성 알고리즘은 성공적이었다. 정상적으로 원하는 형태의 미로가 구현되는 것을 확인할 수 있었다. 그런데, 마침 이번에 친구가 웹 그래픽스 수업을 들으면서 미로를 탈출하는 간단한 게임을 구현하고자 하는데 미로를 어떻게 하면 만들 수 있을지 그 조언을 구하였고, 이에 웹에서 사용할 수 있도록 Java Script 버전으로 재설계하여 그 소스코드를 전달하기로 했다. 아래는 이것을 그래픽으로 출력한 예제를 구현한 것이다. 버튼을 누르면 미로가 무작위로 생성이 되며, 빨간색 사각형에서 파란색 사각형으로 이동하는 것이 목표다. $(document).ready(function () { var wall = '-1', start = '0', end='1', empty = '2'; var..

JavaScript에는 동일 출처의 원칙(Same-Origin Policy)이라는 것이 존재한다. 이는 같은 도메인을 지닌 사이트 간의 데이터 송수신 작업은 가능하지만, 도메인이 서로 다른 사이트 간 데이터 송수신 작업은 불가하다는 것을 말한다. 이는 잠재적으로 해로울 수 있는 문서를 분리하여 보안성을 확보하기 위함이라 한다. 그렇다면 언론 사이트나, 기상청 같은 다른 사이트에서 제공하는 데이터를 JavaScript에서 전혀 활용할 수 없느냐 하고 묻는다면, 대답은 No라고 말할 수 있다. 서버 스크립트 페이지 언어를 사용하면 교차 도메인을 활용해서 XML 데이터를 얻을 수 있다. 그리고 나는 PHP를 활용해보려 한다. HTML : Source Code CSS : Source Code table{ bor..

Binding이란 비동기 통신 기술을 이용해서 DB에 데이터를 요청하고 이를 받아서 HTML 태그에 결합하는 것이다. 나는 이전에 Ajax를 이용해서 JSON 데이터를 HTML 태그에 결합시키는 Binding 하는 방법을 공부했었다. 이번에는 DB에서 XML데이터를 요구해서 전달받은 이후의 과정은 완료됐다는 가정하에 Binding 하는 것을 배웠다. JSON(JavaScript Object Notation) 형식의 경우 JavaScript에서 객체를 리터럴 형식으로 생성한 것과 마찬가지로 각각의 Key와 이에 대응하는 Value값을 나열한 객체 표기법이다. 반면에 XML(Extensible MarkUp Language) 형식은 앞서 말했듯이 데이터를 구조적이고 체계적으로 나타내는 데에 중점을 둔 것이 특..

오늘이 돼서야 드디어 말로만 듣던 Ajax에 대해 공부하기 시작했다. Ajax란 Asynchronous JavaScript XML의 약자로, 비동기식 JavaScript와 XML을 의미한다. 동기 방식은 클라이언트가 서버에 신호를 보내면 서버가 이에 응답하기 전까진 다른 작업을 수행할 수 없다. Ajax를 사용하지 않을 경우, 클라이언트가 서버에 파일을 요청하면, 잠시 동안 페이지가 서버 스크립트 페이지로 갱신되면서 파일 전송 요청이 완료되기 전까진 클라이언트가 어떤 작업도 수행하지 못한다. 비동기 방식은 클라이언트가 서버에 신호를 보내면 서버가 이에 응답하기 전에 다른 작업을 수행할 수 있다. 서버 스크립트 페이지를 거치지 않아도 자료를 받을 수 있는데, 블로그에 댓글을 달면 페이지가 전환되지 않고 바..

블로그에 작업한 소스코드를 여럿 올리고 있지만, 언젠가는 나만의 웹페이지를 구성하고 그곳에 나의 결과물들을 업로드하거나, 소개하는 등의 포트폴리오 사이트를 구현해야겠다는 문득 생각이 들었다. 그래서 다른 사람들의 포트폴리오 사이트를 여럿 구경하던 중, 신기한 포트폴리오를 발견했다. 스크롤 한 번만 하면 화면 자체가 페이지 크기만큼 이동하면서 다른 페이지를 보여주었다. 그것은 상당히 인상적인 방식의 포트폴리오였기에 내게 "나도 한 번 구현해보자"라는 식의 동기부여를 해주었다. 처음에는 mousewheel 이벤트만 등록할 생각이었으나, 키보드 위, 아래 방향키로도 조작할 수 있으면 상당히 편리하겠다 싶어서 keydown이벤트도 등록했다. 우측에 있는 내비게이터에는 click이벤트를 등록했다. JavaScri..

앞서 구현했던 내비게이터는 Horizontal 한 방식이었다. 따라서 웹 페이지 중에서도 수평적 크기에 여유가 많은 웹페이지에서 활용도가 좋을 것이다. 알라딘 사이트의 경우 PC 사이트의 창 크기를 줄이거나 늘여도 레이아웃 자체가 변하지 않았다. 즉, 미디어 쿼리가 적용되지 않았다는 것인데, 이는 사이트 특성상, 도서와 관련된 많은 정보를 담기 위함으로 추측한다. 도서의 장르에도 여러 가지가 있고, 도서의 상태에도 중고나 신품 같은 차이가 있을 수 있으며, 최근에 나온 책, 베스트셀러, 추천도서, 그 외의 이벤트 광고 등, 다양한 정보를 고객들에게 전달해야 하기 때문이다. 그러나, 브라우저의 창 크기를 제 아무리 늘린다 한들, 고객의 디스플레이 수평 크기가 작다면, 결국 이 많은 정보를 한눈에 보기 어려..

지난번에 수평 내비게이터를 구현하면서 Mouseenter와 Mouseleave이벤트를 사용했다. 이 둘은 하위요소에 마우스를 올리거나 치워도 발생하는 특성이 있기 때문이었다. 그러나, hover를 사용하면, 이 두 이벤트에 대한 처리를 동시에 할 수 있다는 사실을 깨달았으며 불필요하게 div#wrapper 같은 랩핑 요소를 추가할 필요가 없다는 것을 알았다. 또한, 마우스 오버시에 하위 메뉴가 slideDown( )되는 것뿐만 아니라, 삼각형 표시를 추가하여 시각적으로 자신이 어떤 상위메뉴에 포커스 하였는지 쉽게 알아볼 수 있게 설계했다. 그러나 ::before, ::after 같은 가상 요소는 제이쿼리에서 메서드로 동작을 제어하기 힘들다. 그래서 생각한 것이 특정클래스를 가진 요소에만 이 가상 요소를 ..

애니메이션 구현을 배웠으니 본격적으로 애니메이션을 활용한 내비게이터를 구현해보았다. 구현에 앞서 내비게이터 설계의 감을 잡기 위해 이미 구성된 소스코드를 차근차근 분석했다. 기본적으로 ul, li, a 태그를 적절히 조합한 후에 float:left 속성을 적용해 수평으로 배치하였다. 대략적인 원리를 설명하자면, 우선 학과 소개, 교육과정, 입학안내 등의 텍스트에 마우스를 올리면(Mouseenter) slideUp( ) 되어있던 인사말, 연혁, 수행사업 등의 하위 메뉴가 slideDown( )된다. 이때 페이지에 처음 방문했을때나 새로 고침 했을 때 slideDown( )을 통해 하위 메뉴를 집어넣고 시작하면 잠깐 동안은 하위 메뉴가 노출되는 문제가 발생한다. //하위메뉴는 처음에 hidden 상태임 $(..