[웹 서비스 개발] Xampp 환경에서 AJAX 경험하기

지금까지 Xampp 환경을 세팅하고 Apache와 MySQL을 실행하여 페이지에 접근하고, phpmyadmin에 접근하는 과정까지 알아봤습니다.

 

이제 앞으로의 실습 동안 Xampp에 설치된 Apache에 xml, html, css, xsl 등의 파일을 넣고 해당 파일에 엑세스하는 실습을 진행할 것입니다. 그를 위해서는 가장 먼저 Xampp 저장공간, 자세히 말하면 Apache가 할당받은 저장 공간에 접근하는 과정을 알아야 합니다. 가장 기본적으로 알아야하는 부분이기 때문에 이 방법에 대해서 먼저 알아보도록 하겠습니다.

 

이 글은 Mac OS 상에서 Xampp -vm 버전으로 설치했음을 가정하고 진행합니다. m1 프로세서를 사용하셔서 -installer 버전을 설치하시거나 Windows 환경에서 사용하시는 경우에도 크게 다르지 않으니 참고하시기 바랍니다.

 

Xampp 저장공간 접근하기

우선 Xampp를 실행 후 Start를 클릭하여 모든 서비스들 (Apache & MySQL)을 실행해줍니다. 아래와 같이 정상적으로 실행된 것을 먼저 확인 합니다.

정상적으로 서비스가 시작된 모습

이제 여기서 상단 메뉴를 보면 "Volumns" 라는 메뉴가 있습니다. 해당 탭으로 이동합니다.

해당 탭으로 이동하면 "Mount" 라는 버튼이 활성화 되어 있는 것을 확인할 수 있습니다. 해당 버튼을 클릭합니다. 여기서 "마운트(Mount) 란, 컴퓨터 과학에서 저장장치에 접근할 수 있는 경로를 디렉터리 구조에 편입시키는 작업"을 말합니다. 말 그대로 Xampp의 저장소를 Finder에서 읽을 수 있도록 하기 위해서 디렉터리 구조에 편입시키는 작업이라고 생각하시면 됩니다. 그리고 "Explore" 버튼을 클릭합니다.

Explore 버튼을 클릭하면 다음과 같이 Xampp에 할당된 저장공간에 접근할 수 있게 됩니다. -vm 버전의 경우 이와 같은 방식으로 접근하시면 되고, 그 외에 Mac OS에서의 -installer 버전의 경우 Finder에서 "lampp"를 찾아 접근하시면 되고, Windows의 경우 C드라이브에서 xampp 라는 이름을 가진 폴더에 접근하시면 됩니다.

 

그리고 여기서 "htdocs" 라는 폴더에 접근합니다. "htdocs"는 xampp에 설치된 Apache가 기본적으로 참조하는 공간이 됩니다. 앞으로 실습을 진행하시면서 사용하는 모든 xml, html, css, xsl 등의 파일들이 모두 이곳에 위치하게 됩니다. 여기에 파일을 넣고 해당 파일에 어떻게 접근하는 지는 뒤에서 다루도록 하겠습니다.

 

 

Xampp를 종료할 때 주의할 점

위와 같이 Xampp 공간을 마운트해서 사용하다가 종료할 때 주의할 점은 반드시 "언마운트(Unmount)"를 진행해야 한다는 점 입니다. 간혹 언마운트를 진행하지 않고 마운트한 상태에서 Xampp를 바로 꺼버리는 경우 문제가 생기는 경우가 있습니다. 꼭 그런 것은 아니지만 그렇게 사용하는 경우 Xampp 저장공간에 문제가 생기는 경우가 많이 있으니 서비스들을 Stop하면서 언마운트도 같이 진행해주시기 바랍니다.

 

 

Xampp Apache 환경에서 AJAX 예제 실행해보기

수업시간에 다뤘던 내용처럼 AJAX는 Asynchronous JavaScript And XML의 줄임말로서 내부적으로 서버와의 통신을 위해서 "XMLHttpRequest" 라는 객체를 사용하게 됩니다. AJAX가 가지는 가장 큰 특징은 페이지 전체를 새로고침하지 않고도 수행되는 비동기성을 가진다는 점입니다. 즉, 페이지 새로고침없이 서버에 어떤 요청을 보낼 수 있고, 이 과정을 비동기적으로 수행함으로서 서버에 요청을 보내고 받아오는 과정이 웹페이지 전체 사용성 측면에 영향을 주지 않는다는 것 입니다.

 

수업시간의 마지막 쯤에 진행했던 내용은 Apache 서버로부터 books.xml 이라는 파일을 읽어서 책의 이름을 parsing 하여 html 파일을 구성하여 웹 페이지 상에 출력하는 실습이라고 생각하시면 됩니다.

W3Schools online HTML editor

우선 해당 링크의 소스코드를 복사하여 하나의 ".html" 파일을 생성합니다. 추가로 읽어오는 데이터를 구성하기 위한 books.xml 파일도 함께 다운로드 합니다.

저의 경우 위의 링크의 소스코드를 복사하여 test.html 이라는 파일을 생성하였고, books.xml의 경우 LMS에서 다운로드하여 사용하시면 됩니다. 이제 이전 과정에서 언급한 것처럼 htdocs 폴더에 하나의 폴더를 만들어서 2개의 파일을 위치할 것입니다.

그래서 저의 경우 htdocs 폴더에 xml이라는 폴더를 생성한 후 다음 2개의 파일을 위치시켜줬습니다. 이렇게 구성하였다면 테스트를 진행할 준비가 완료된 것 입니다. 그리고 웹 브라우져에 다음과 같이 htdocs에 생성한 폴더의 이름/파일명의 형식으로 링크를 구성하면 다음과 같이 웹브라우져 상에 xml 파일을 읽어서 4개의 책 제목을 불러온 것을 확인할 수 있습니다.

여기서 링크를 구성할 때 "생성한 폴더의 이름 / 조회하고 싶은 파일명"을 사용하는 것은 어느 환경이나 동일하나, Mac OS나 Windows 환경, Xampp 세팅에 따라서 localhost, localhost:8080 으로 구성될 수 있습니다.

또는 -vm 버전의 경우 실행한 Apache가 할당받은 Private IP가 다음과 같이 노출되는 데 해당 ip를 사용해서도 접근이 가능합니다.

 

이것으로 Xampp 환경에서 Apache에 파일을 넣고, 이를 로컬환경에서 테스트해보는 실습을 진행해보았습니다. 짧은 글이지만 학습을 진행하시는 데 도움이 되셨으면 좋겠습니다. 감사합니다.