[Ajax] Ajax 사용 준비 - 웹서버 (localhost) 구축하기 (Windows)

내가 코딩하는 환경은 vsc (Visual Studio Code) 이다. 최근까지도 vsc로 파이썬을 공부하고 있고, jquery, Ajax도 vsc를 사용해서 쓰고 있다. 파이썬과 달리 HTML이나 CSS, 프론트단 js는 간단히 보여지는 html문서 이므로 'live server' extension을 사용해서 확인할 수 있다. 하지만

" Ajax는 비동기식 웹 서버통신 방식, 웹 서버와 브라우저 사이의 통신을 담당하므로 웹서버 구축이 필요하다 "

Ajax를 공부할때는 자신의 pc가 호스트가 되는 내부접속방식인 localhost 서버를 쓰면 된다. 

음 나는 mac os와 window 운영체제 두 개를 쓰기 때문에 둘 다 알아보자!

 

1) Windows

windows는 'autoset 10'이라는 프로그램을 설치하면 localhost 서버를 사용할 수 있다.

일단 autoset 10 다운로드 사이트에 접속한다. ( http://autoset.net/xe/download_autoset_10_7_2 )

그 다음, 오토셋 10 (PHP7.2) 버전을 선택하고, 자신의 운영체제 비트에 맞는 다운로드 링크를 누르고 설치하면 된다. 

한국어로 설정하고

'사용자 계약에 동의' 체크

'다음'

설치 버튼을 누르면 설치가 완료된다. 그 다음 시작탭에 autoset10 ... 하는 폴더가 생길텐데 거기서 '오토셋 10.7 매니저 실행' 을 눌러 실행한다.

그 다음 '웹서버 시작' 과 'MySQL 시작' 버튼을 클릭해서 localhost 서버를 시작한다. 이제 서버를 구축했으니 localhost 서버를 한번 확인해보자.

 

자 chrome이나 edge같은 브라우저 주소창에 localhost를 입력하고 접속해보면? 웹페이지가 정상적으로 만들어진다!!

※ 주의할 점

처음 주소창에 localhost를 치고 접속하면 'Forbidden' 에러가 뜰 것이다. 이는 localhost가 기본 html문서인 indedx.html 파일을 로드하지 못해서다. (주소창에 localhost와 localhost/index.html과 똑같은 주소이다.) 

자신의 autoset 10 설치 폴더에 들어가보면 public_html 디렉토리에 html문서 (CSS, Js 등이 포함된)가 있어야 localhost 서버가 정상적으로 동작한다.

참고로 localhost로 접속하려면 주소창에 localhost 또는 localhost/name.html 또는 localhost/folder/name.html로 접속하면 된다. 

localhost/9/ 쳐도 같은 페이지가 나온다.

정상적으로 localhost 서버가 구축되었다.