공부/XE

10. index.html 누구냐 넌?!

미친사람 2020. 2. 18. 11:10
반응형

 도메인으로 사이트(홈페이지)에 접속해 보기


이전 과정에서 XE 코어 프로그램을 서버에 설치했습니다.

그리고 정상적으로 XE 기본 데모 페이지까지 확인하고 웹브라우저 창을 닫았습니다.

이제 여러분의 홈페이지는 미리 등록해 두었던 도메인(사이트 주소)로 데모 페이지를 볼 수 있겠지요?


웹브라우저를 열고 주소입력란에 사이트 주소를 입력해주세요.



어이쿠 이런? 무슨일인지 에러가 떠버리네요?

- 기존에 있던 index.html 을 제거하지 않은 사람은 이 화면이 아니라 호스팅 회사 안내 또는 환영 페이지가 뜹니다.




 내 이름은 index.html


문서도 자기만의 이름이 있습니다. 아무리 작은 문서 파일이라도 자신의 이름을 정확히 불러주기를 원한답니다.

위와 같은 화면을 만들어내는 문서의 정확한 이름은 index.html 입니다.

그러고 보니 루트(root) 디렉터리 안에 index.html 문서를 본것 같지요? 삭제를 했지만 말이에요.

index의 의미는 (책 등의)색인, 표시, 지표 등으로 해석할 수 있는데 어원의 의미는 집게손가락으로 가리키는 것 을 의미합니다.

여러분 사이트의 주소만 입력 했을 때 서버에서는 누그를 찾는지 정확히 알 수 없었기 때문에 집게손가락으로 가리키며 "얘(index.html) 찾으시나요?"

하고 보여준 것 입니다.

- 물론 index.html을 우린 전 과정에서 삭제했기에 찾을 수 없어서 오류페이지가 뜨는 것 입니다.




 반장을 바꾸자 (index.html 만들기)


여러분이 만약 개인적인 서버를 만들고 홈페이지를 운영하려고 생각한다면 누구를 반장으로 세우든지 상관은 없습니다.

home.html을 세우든지 main.html을 세우든지 그것은 여러분의 마음입니다.

하지만 호스팅 계정을 이용하는 우리는 어쩔 수 없이 약속되어져 있는 이름값을 사용해야 합니다.

서버의 루트(root)디렉터리 안에는 이미 서버에서 설정된 순위에 따라 index.html이라는 웹문서가 있었습니다.

같은 루트 안에 반장과 부반장이 같이 있다면 서버가 순위를 정해놓은 순서대로 방문자에게 먼저 나갈 것 입니다.

그밖에 다른 문서들은 그 숫자와 상관없이 이름을 부르지 않으면 가만히 앉아 있게 됩니다.


아래 그림은 기존 루트에 있는 index.html과 하위 디렉터리 xe가 들어있는 index.php 입니다.

루트 디렉터리의 반장은 index.html이고 xe 디렉터리의 반장도 같은 이름의 index.php 군요.

하지만 학급이 다르기 때문에 서로 같은 파일이라고 말할 수는 없겠지요? 이름은 같아도 성격(조금은 여성스러운 php)이 무척 다릅니다.



XE 코어를 설치하고 난 후에는 가장 먼저 해야 할 일은 루트 디렉터리에 있는 index.html에게 xe 디렉터리의 학급반장(index.php)를 불러달라고 해야합니다.

나중에 xe 디렉터리 안에 있는 학급반장(index.php)와 그 구성원을 모두 루트(root) 디렉터리로 옮겨 놓을 수도 있겠지만

저희는 기본적으로 xe 디렉터리를 따로 구분해서 운영할 계획입니다.

왜냐하면 xe를 여러개 설치하는 경우 (xe2, xe3 또는 myhome처럼 디렉터리 이름을 바꾸어 설치가 가능합니다)

루트에 있는 반장이 해야 할 일을 다르게 시킬 수 있겠지요?


서버에는 이미 만들어져있는 호스팅 환영 안내를 위한 index.html 문서가 있지만 여러분의 컴퓨터에는 아직 index.html이 없습니다.

그래서 서버의 index.html 문서의 하는 일을 바꿔 줘야 하는데 여기서 첫 html 웹문서를 만들어 보려고 합니다.

html을 몰라도 어렵지 않습니다. 단 3줄로 끝나는 html 문서를 만들려고 하기때문에 너무나 쉽습니다.

걱정마시고 준비물이었던 문서 편집기인 브라켓(brackets)을 실행해주세요.

(스샷에 있는 브라켓 사진이랑 자기꺼랑 다른 이유는 저는 플러그인을 깔았기 때문입니다. 플러그인 추천 글 : https://madstorage.tistory.com/176)



빨간색 네모박스 쳐진곳을 클릭해서 사이트 관리용 폴더 경로로 자리잡고 오른쪽 클릭을 누르고 파일 만들기를 눌러줍시다.




index.html 라는 이름을 입력해서 파일을 생성해줍시다.


그리고 아래에 나오는 3줄의 코드를 차례대로 써주세요, 많은 코드가 아니기 때문에 천천히 입력해보세요.


<?php

header("Location:/xe/");

?>

잘 들어봐 친구, 너는 html의 문서이지만.. 나는 php로 네가 해야 할 일을 말하고 싶어.

만약 우리 홈페이지(root 경로로)에 손님이 온다면

가장 먼저 네가 해야 할 일(header)은 너보다 하위 디렉터리(location)에 있는 xe 디렉터리로 안내(/xe/)만 해주면 되는거야

그러면 xe 디렉터리에 있는 부반장(index.php)가 알아서 손님들을 안내할거야, 꼭 좀 부탁해!




물론 이 방법외에 다른 방법들도 있습니다.

○ meta 태그 이용 : HTML 문서의 <head>...</head> 사이에 추가하여 사용합니다.

<meta http-equiv='Refresh' content='0;url=/xe/'>


○ 스크립트 이용 방법 : HTML 문서의 <body>...</body> 사이에 추가하여 사용합니다.

<body>

<script type="text/javascript">

<!--

location.replace('/xe/');

//-->

</script>

</body>


입력이 끝나면 Ctrl + S 또는 파일 탭에서 저장을 눌러서 저장해줍시다.


이전에 만들어 두었던 사이트 관리용 폴더에 저장합니다. 인코딩 형식은 반드시 UTF-8 이여야 합니다(브라켓 우측 하단에 표시되어있습니다)




 FTP로 index.html 문서 업로드 하기


새로 만든 index.html 문서는 내 컴퓨터 사이트 관리용 폴더에 저장되어있습니다.

이제 FTP를 실행해서 서버와 연결한 후 새로 만든 index.html 문서를 계정의 최상위 루트(root) 디렉터리에 업로드 해야하는데

좌측 화면은 정확히 말하면 서버와 비슷한 트리구조로 관리하는 것이 좋기 때문에 내 컴퓨터의 사이트 관리용 루트 디렉터리 이고

우측 화면은 서버의 루트 디렉터리를 보여주는데 우리가 설치했던 XE 코어 압축파일과 xe 디렉터리가 있습니다.

(삭제안한 사람은 안내용 index.html도 보이겠죠?)


이제 새로 만든 index.html을 서버에 올려야 하는데, 서버에서 이제까지 일하고 있었던 index.html 문서는 삭제를 해도 좋습니다.

(저희는 사전에 삭제를 해뒀죠?)

하지만 해당 문서를 가지고 계시고 싶으신 분들은 삭제를 하지 말고 문서 이름변경을 통해 .bak 을 붙여서 가지고 계서도 됩니다. ^^



index.html 문서를 드래그 해서 서버의 루트 디렉터리로 옮겨 줍니다.


이제부터 이러한 과정은 사진을 통한 설명을 하지 않습니다.

파일 업로드와 다운로드시 디렉터리 위치 경로를 꼼꼼히 확인하시며 작업을 해주시길 바랍니다!




작업이 끝나면 FTP를 닫고 웹브라우저를 열어 사이트 주소(URL)[/xe/ 제외하고] 를 입력해보세요.

우리가 원했던 페이지가 바로 나타나게 되고 사이트 이름 뒤에는 /xe/가 자동으로 붙게 된다면 여러분이 처음으로 만든 index 문서가 제 역할을 하는겁니다.


XE 코어는 사이트 접속 시 기본으로 호출될 모듈(시작 모듈)을 미리 지정하여 두고 사용하게 됩니다.

여기서는 최초 설치시 기본으로 설정되어 있는 index 페이지 모듈을 찾아 출력합니다.

이 부분은 다음과정에서 다루게 됩니다.


예) http://domain.com/xe/index


TIP

xe 폴더 안의 코어 파일과 하위 폴더 전체를 루트(root) 디렉터리로 옮겨 설치한 경우 URL 뒤에 /xe/가 붙지 않습니다.

또한 index.html 문서를 별도로 작성하여 업로드 하지 않아도 시작 모듈을 찾아 출력합니다.

왜냐하면 XE코어가 가지고 있는 index.php 파일이 최상위 루트(root)에서 반장일을 대신하기 때문입니다.


반응형