Web2020. 1. 14. 22:51

아파치 서버는 PHP와 MySQL(MariaDB)의 조합으로 사용되는 경우가 많습니다.

PHP는 문법이 쉽다는 장점과 다양한 함수를 제공하고 있다는 장점이 있습니다. 그리고 MySQL은 오픈소스 무료이면서 성능이 우수하다는 장점이 있기 때문에 아파치 서버 + PHP + MySQL의 조합이 많이 사용되고 있습니다. 그리고 모든 프로그램이 무료로 사용할 수 있는 오픈소스이기 때문에 이 세 개의 조합으로 웹 서버를 구성한다면 아무런 비용도 들지 않는다는 장점도 있습니다. 이 세 개의 조합은 짧게 줄여서 APM(Apache PHP MySQL)이라고 부릅니다.

아파치 서버와 PHP, MariaDB의 설치 파일은 다음 URL을 통하여 다운로드할 수 있습니다.

  1. Visual Studio 2015용 Visual C++ 재배포 가능 패키지: vc_redist.x64.exe
    https://goo.gl/kncWH3
  2. Apache 2.4 (for Windows x64): httpd-2.4.41-win64-VS16.zip
    원본 페이지 바로가기 (최신버전 다운로드)
  3. MariaDB 10 (for Windows x86, x64): php-7.3.13-Win32-VC15-x64
    원본 페이지 바로가기 (최신버전 다운로드)
  4. PHP 7 (for Windows x64 on VC15): mariadb-10.5.0-winx64
    원본 페이지 바로가기 (최신버전 다운로드)

 

이 글에서는 64비트 윈도우즈에 64비트 아파치 서버를 설치할 것입니다. 따라서 위 링크를 통하여 다운로드되는 설치파일이나 소스코드 압축파일은 모두 64비트용입니다. 64비트 아파치 서버를 사용한다면 PHP도 역시 64비트용으로 설치해야 합니다.

참고로 64비트 윈도우즈라 하더라도 32비트 소프트웨어도 설치는 가능합니다. 왜냐하면 윈도우즈에는 32비트 시스템 파일과 64비트 시스템 파일이 따로 존재하기 때문입니다.

※ 중요: 최신 버전의 아파치 서버와 PHP를 실행하기 위해서는 Visual C++ 2015 라이브러리가 필요합니다. Visual C++ 2015 라이브러리는 위의 1번 URL을 통하여 다운로드할 수 있습니다.

아파치 서버와 PHP를 설치하기에 앞서, 위에서 다운로드한 Visual C++ 2015 라이브러리를 가장 먼저 설치하시기 바랍니다. 이 라이브러리가 우선적으로 설치되지 않는 경우에는 아파치 서버와 PHP가 정상적으로 작동하지 않기 때문입니다. 다운로드한 파일을 실행하면 자동으로 설치가 진행됩니다. Visual C++ 2015 라이브러리도 64비트를 설치하시기 바랍니다.

 

아파치 서버 설치

다운로드한 httpd-2.4.27-Win64-VC15.zip 파일은 컴파일된 윈도우용 아파치 서버 파일이 포함되어 있는 압축파일입니다. 리눅스용 아파치 서버는 사용자가 직접 컴파일을 해야 하지만, 윈도우용은 미리 컴파일되어 배포되고 있습니다.

접근하기 쉬운 적당한 경로에 아파치 서버 압축 파일을 풀어줍니다. 이 글에서는 아파치 서버의 기본 설치 폴더인 C:\Apache24 에 압축을 풀었습니다.

압축을 풀었으면 다음 명령어를 실행하여 Windows 서비스에 아파치 서버를 등록합니다. 만약 접근 거부 오류 메시지가 나타난다면, 관리자 권한으로 실행을 해야 합니다. 이 때에는 아래의 내용을 커맨드 파일(*.cmd)에 저장한 후 관리자 권한으로 실행하면 됩니다.

  1. C:\Apache24\bin\httpd.exe -k install

C:\Apache24 가 아닌 다른 곳에 압축을 풀었다면, 아파치 서버 설정 파일(httpd.conf)을 수정해야 합니다. {아파치 서버 설치 경로}\conf\httpd.conf 를 실행한 후, c:/Apache24 로 되어 있는 기본 설치 경로를 현재 설치되어 있는 아파치 서버의 설치 경로로 적당히 변경해줍니다. 메모장에서 c:/Apache24 를 검색한 후 수정하면 편합니다.

Windows 서비스에 아파치 서버가 잘 등록되었는지는 Windows 서비스 관리자에서 확인할 수 있습니다. Windows 서비스 관리자는 [제어판] – [시스템 및 보안] – [관리 도구] – [서비스] 로 접근이 가능합니다. 아니면 services.msc을 직접 실행해도 됩니다. 서비스 목록에 Apache 2.4 항목이 있다면 아파치 서버가 정상적으로 설치된 것입니다.

※ 참고: httpd.conf 의 내용 중에 서버 이름을 지정하는 ServerName 속성이 있을 것입니다. 서버의 도메인과 포트번호를 이용하여 ServerName의 값을 지정하면 됩니다. 예를 들면, localhost:80.

 

PHP 설치

위에서 다운로드한 php-7.1.7-Win32-VC14-x64.zip 파일은 64비트 윈도우용 PHP 파일이 포함되어 있는 압축파일입니다. 아파치 서버를 설치할 때와 마찬가지로 접근하기 쉬운 경로에 압축을 풀어줍니다. 이 글에서는 윈도우용 PHP의 기본 폴더인 C:\PHP 에 압축을 풀었습니다. 압축을 풀었다면 다음 과정을 통하여 PHP 설치를 마무리하도록 합니다.

PHP가 설치된 경로에 있는 php.ini-development 파일의 이름을 php.ini로 변경합니다. php.ini 파일은 PHP를 설정할 때 사용되는 파일입니다. 확장기능을 추가하거나 가상 호스트를 설정할 때 이 파일이 사용됩니다.

PHP 설치를 마무리하기 위해서는 php.ini 파일의 내용을 조금 수정해야 합니다. 수정하지 않으면 PHP에서 MySQL, GD와 같은 확장기능을 불러올 때 문제가 발생할 수도 있기 때문입니다.

우선 ; extension_dir = “./” 을 extension_dir = “C:\PHP\ext\” 로 수정합니다. 문자열 앞의 세미콜론은 꼭 삭제하시기 바랍니다. php.ini 에서 세미콜론은 주석으로 사용됩니다. 메모장에서 검색한 후 수정하면 편합니다.

그리고 Windows Extensions 부분에 있는 확장기능 설정 중에서 PHP가 MySQL 관련 확장기능 DLL 파일을 사용할 수 있도록 해야 합니다.

  • extension=php_mysql.dll PHP 7에서 지원 종료된 확장 → php_mysqli.dll로 대체
  • extension=php_mysqli.dll
  • extension=php_pdo_mysql.dll

이렇게 세 개두 개의 확장을 사용할 수 있도록 문자열 앞에 있는 세미콜론을 삭제해줍니다.

모든 내용을 수정했다면, php.ini 파일을 C:\Windows 폴더로 잘라내기/붙여넣기(이동O, 복사X)합니다. 복사/붙여넣기가 아니라 꼭 잘라내기를 하시기 바랍니다. 왜냐하면 PHP 폴더에도 php.ini가 존재하는 경우에는 Windows 폴더의 php.ini와 서로 충돌이 발생할 수도 있기 때문입니다.

 

아파치 서버와 PHP의 연동

아파치 서버와 PHP의 설치를 모두 마쳤으니, 이제는 아파치 서버와 PHP를 서로 연동시켜야 합니다. 아파치 서버와 PHP는 따로 설치되었기 때문에, 이 둘을 연동시켜주는 작업은 꼭 필요합니다.

우선, 아파치 서버의 기본 설정 파일을 수정해야 합니다. C:\Apache24\conf\httpd.conf 파일을 메모장에서 불러옵니다. 그리고 맨 아래쪽에 다음의 내용을 추가합니다.

  1. PHPIniDir "C:/Windows"
  2. LoadModule php7_module "C:/PHP/php7apache2_4.dll"
  3. AddType application/x-httpd-php .html .php

위의 내용을 아파치 서버 설정 파일에 추가함으로써 아파치 서버와 PHP는 서로 연동됩니다. 모든 설정을 저장한 후, Windows 서비스 관리자에서 아파치 서버를 재시작하면 PHP와 아파치 서버가 함께 시작됩니다.

 

MariaDB 설치

윈도우즈용 MariaDB는 Windows Installer을 통하여 설치가 진행되기 때문에 설치 과정이 매우 간단합니다. 다운로드한 mariadb-10.2.7-winx64.msi 설치파일을 실행합니다. MariaDB를 실행하기 위해 필요한 부가적인 프로그램이 필요하면 추가적으로 설치를 진행하고, MariaDB 설치가 진행됩니다.

MariaDB를 설정하는 대화상자에서는 ROOT 계정의 패스워드와 MariaDB의 자동실행 여부를 지정할 수 있습니다. 본인의 취향에 맞게 설정하면 됩니다. 만약 자동실행 옵션을 선택하지 않는다면 MariaDB를 직접 실행해야 합니다. 직접 실행하는 방법으로는 윈도우 서비스 도구를 사용하는 방법과 MariaDB 콘솔을 사용하는 방법이 있습니다.

MariaDB 설치를 모두 마쳤다면, 아래의 PHP 소스코드를 이용하여 MariaDB가 제대로 동작하는지 확인합니다.

  1. <?php
  2.  
  3. // 기본 타임존 설정
  4. date_default_timezone_set('Asia/Seoul');
  5.  
  6. // 데이터베이스 테스트
  7. $mysqli = new mysqli('localhost', 'root', 'password', 'information_schema');
  8. if ($mysqli->connect_errno) {
  9. die('Connection Error ('.$mysqli->connect_errno.'): '.
  10. $mysqli->connect_error);
  11. }
  12.  
  13. // PHP 정보 출력
  14. phpinfo();

PHP 정보가 출력된다면 MariaDB와 아파치 서버, PHP가 제대로 작동하고 있다는 것을 의미합니다. 참고로 아파치 서버의 기본 문서 루트 경로는 C:\Apache24\htdocs 입니다. 이곳에 PHP 파일과 각종 HTML 파일을 저장하면 인터넷에서 확인할 수 있습니다. 이 경로는 httpd.conf 파일을 수정함으로써 바꿀 수 있습니다.

원글: http://www.walterz.net/2017/07/19/%EC%9C%88%EB%8F%84%EC%9A%B0%EC%97%90-%EC%95%84%ED%8C%8C%EC%B9%98-%EC%9B%B9-%EC%84%9C%EB%B2%84-php-mysql-%EC%84%A4%EC%B9%98/

Posted by iWithJoy
Web2012. 1. 30. 15:53

XP 서버에 XAMPP 1.6.4 (Apache + php + mysql) 환경에서 구동하는 경우,

트래픽이 그다지 없고, 대역폭이 여유로운 상황에서 서버 사양이 P4 3.0 Ghz 에 Ram 1G 환경이라
웹서버가 느려질 이유가 전혀 없음에도 불구하고, 상당히 느린 반응 속도가 고질 적인 문제 였습니다.

현재 한참 개발 중인 Zeroboard XE 문제도 아니었던 것이 Zeroboard 4 나 Wordpress 를 사용할 때에도
상당히 느린 반응 속도를 가지고 있었습니다.

생각 날때마다 mysql 이나 httpd.conf 설정을 살펴 보긴 했지만 해결이 되지 않았었는대, 문제 해결을 위한
가장 기본적인 접근 방법을 잊고 있었더군요. (서버를 만지는걸 어느 순간 신경 안쓰게 된 탓이겠지요)

Apache 의 error 로그를 뒤져 보았습니다.

[Fri Sep 08 04:02:33 2006] [warn] (OS 121)세마포어 시간 초과 기간이 만료되었습니다. : winnt_accept: Asynchronous AcceptEx failed.
[Fri Sep 08 04:02:33 2006] [warn] (OS 64)지정된 네트워크 이름을 더 이상 사용할 수 없습니다. : winnt_accept: Asynchronous AcceptEx failed.


 위와 같은 에러가 정말 많더군요. 이상 적인 CPU 점유율과 느린 반응의 원인이 MS 환경 (Win32- xp,2000 서버) 의 멀티 프로세스 모듈과 어우러진 아파치의 버그 더군요.

해결 방법은 httpd.conf 에 다음과 같은 라인을 추가 하는 것 입니다.

Win32DisableAcceptEx


"Win32DisableAcceptEx"  이 라인 핵심 라인 입니다.

추가 시켜 주시고 아파치를 재구동 하면 됩니다.

http://www.mydigitallife.info/2006/03/09/winnt_accept-asynchronous-acceptex-failed-error-in-apache-log/  (영문)

이곳에서 확인하시면 서버 안정성에 문제를 발생 시킬 수도 있다고는 하는대, 서비스가 엄청나게
느려지는 것 보다는 나아서 httpd.conf 를 바꾸고 반응 속도를 보았더니 속이 다 시원합니다.

acceptEX 는 MS 가 만든 확장 Network API 라더군요. Linux 나 다른 OS 환경에서는 발생하지 않는 오류입니다.
개인적인 생각에 확장 API 를 사용하지않는 설정 이기 때문에 안정성과는 큰 관련이 없을 것이라 여겨집니다.

오류가 나온지 한참 되었는대도 아파치에서 수정되지 않는 걸 보면 MS 쪽 문제 일려나요


<추가>

Win32DisableAcceptEx 는 Apache version 2.0.49 부터 이후 버전에만 가능합니다

Apache 1.X 버전을 사용하고 있는 분들은 다른 해결책을 찾으셔야 합니다.


참고로 JSP환경에서 톰캣 서블릿 엔진과 아파치를 연동하여 사용할 경우에도 위와 같은 상황은 적용됩니다.
혹시, 아파치 2.2 버전에서 Win32DisableAcceptEx 구문을 넣었는데 이번에는 다른이유로 웹속도가 느려진다면
다음과 같이 지정해 주세요. 그러면, 속도가 눈에 띄게 향상될 것입니다.
참고로 이 설정은 MS에서 만든 확장 Network API 인 AcceptEx를 사용하지 않고 오리지널 Accept를 사용하도록 하는 설정입니다.
<IFModule mpm_winnt_module>
    Win32DisableAcceptEx
</IFModule>
 

Posted by iWithJoy
Web2011. 12. 15. 16:48
= Meta 태그 사용법 =

== 검색 엔진을 위한 메타 태그 ==

* 메타 태그 형식
{{{
<META NAME="태그이름" CONTENT="태그내용">
}}}

* 태그 종류
||'''이 름'''||'''설 명'''||
|| Subject     || 주 제 ||
|| Title       || 제 목 ||
|| Author      || 만든 사람 ||
|| Email       || 만든 사람 E-Mail 주소 ||
|| Publisher   || 만든 곳 ( 기업이나 단체, 조직 등 ) ||
|| Other Agent || 웹 책임자 / 관리자 ||
|| Date        || 만든 날짜 ||
|| Description || 페이지에 대한 설명 ||
|| keywords    || 검색 키워드 ||


* 태그 예
{{{
<META NAME="Subject"     CONTENT="">
<META NAME="Title"       CONTENT="">
<META NAME="Author"      CONTENT="">
<META NAME="Email"       CONTENT="">
<META NAME="Publisher"   CONTENT="">
<META NAME="Other Agent" CONTENT="">
<META NAME="Date"        CONTENT="">
<META NAME="Description" CONTENT="">
<META NAME="keywords"    CONTENT="">
}}}

== 웹 페이지 효과를 위한 메타 태그 ==

* 메타 태그 형식
{{{
<META HTTP-EQUIV="태그이름" CONTENT="태그내용">
}}}

* 태그 종류
||'''이 름'''||'''설 명'''||
|| Refresh    || 다른 페이지로 전환 ( 이동 ) ||
|| Page-Enter || 페이지로 들어갈때 효과 ||
|| Page-Exit  || 페이지를 떠날때 효과 ||


* 태그 효과 사용법
{{{
<META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=시간,Transition=효과번호)">
}}}
  * Transition - 화면 전환 효과 번호
  * Duration - 효과가 실행되는 시간


* 태그 효과 종류
||'''효과 번호'''||'''설 명'''||'''효과 번호'''||'''설 명'''||
|| 0  || 가운데로 모으기 ( 박스 ) || 12 || 흩어 뿌리기 ||
|| 1  || 밖으로 펼치기 ( 박스 ) || 13 || 수직 안쪽으로 나누기 ||
|| 2  || 가운데로 모으기 ( 원 ) || 14 || 수직 바깥쪽으로 나누기 ||
|| 3  || 밖으로 펼치기 ( 원 ) || 15 || 수평 안쪽으로 나누기 ||
|| 4  || 위로 닦아내기 || 16 || 수평 바깥쪽으로 나누기 ||
|| 5  || 아래로 닦아내기 || 17 || 계단 모양 왼쪽 아래로 ||
|| 6  || 오른쪽으로 닦아내기 || 18 || 계단 모양 왼쪽 위로 ||
|| 7  || 왼쪽으로 닦아내기 || 19 || 계단 모양 오른쪽 아래로 ||
|| 8  || 세로 블라인드 || 20 || 계단 모양 오른쪽 위로 ||
|| 9  || 가로 블라인드 || 21 || 가로 실선 무늬 ||
|| 10 || 가로 체크 무늬 || 22 || 세로 실선 무늬 ||
|| 11 || 세로 체크 무늬 || 23 || 순서없이 전환 ||


* 태그 예
{{{
<META HTTP-EQUIV="Refresh"    CONTENT="20; URL=http://kr.yahoo.com">
<META HTTP-EQUIV="Page-Enter" CONTENT="blendTrans(Duration=0.5)">
<META HTTP-EQUIV="Page-Exit"  CONTENT="blendTrans(Duration=0.5)">
}}}


= CSS Tips =

== 배경에 이미지를 넣고 싶을때 ==

글 아래에 이미지를 넣고 싶을때 CSS 코드에 다음과 같이 추가한다.

{{{
background-image: url("back.jpg"); // 이미지 주소
background-repeat: no-repeat; // 반복하지 않고 한번만 출력
background-position: 50% 50%; // 이미지 위치
}}}

{{{참고>}}} http://www.trio.co.kr/webrefer/css2/colors.html#background-properties
Posted by iWithJoy
Web2011. 7. 1. 14:20
웹페이지에서 MAC Address 구하는 ActiveX 컨트롤입니다.
웹에서 인증 처리할 때 아이디, 암호와 같이 사용하면 좋을 것 같습니다.
기능:
1. 맥어드레스 구하기 - 네트워크 카드가 여러 개 일 경우 모두 구함(한 줄에 하나씩)
2. 컴퓨터 이름 구하기
3. 작업 그룹 구하기

사용법은 아래와 같습니다.

<SCRIPT language=JavaScript for="auth" event=OnError(ErrMsg)>
    alert("에러 발생:" + ErrMsg);
</SCRIPT>

<OBJECT id="auth" classid="clsid:7C159314-7E2C-4E6E-B580-5DF25610F581" codebase="./AuthByMAC.cab#Version=1,1,9,0">
    <PARAM name=copyright value="http://isulnara.com">
<div style="position:absolute;top:276;left:320;width:300;height:68;border:solid 1
 #99B3A0;background:#D8D7C4;overflow:hidden;z-index:1;visibility:visible;"
>
<FONT style='font-family: "굴림", "Verdana"; font-size: 9pt; font-style: normal;'>
<BR>&nbsp;&nbsp;인증 컴포넌트가 설치되지 않았습니다.&nbsp;&nbsp;
<BR>&nbsp;&nbsp;<a href="./AuthByMAC.EXE"><font color=red>이곳</font></a>
을 클릭하여 수동으로 설치하시기 바랍니다.&nbsp;&nbsp;</FONT></div>
</OBJECT>

<SCRIPT LANGUAGE="JavaScript">
<!--
    alert("맥어드레스: " + auth.MAC);
    alert("컴퓨터 이름: " + auth.ComputerName);
    alert("작업그룹: " + auth.WorkGroup);
//-->
</SCRIPT>


누구나 무료로 사용할 수 있습니다.

[데모 페이지]
[다운로드]
[다운로드 - 수동 설치프로그램]

업데이트 사항(v1,1,9,0)
------------------------
+OnError(ErrMsg) 이벤트 추가
+몇몇 컴퓨터에서 Error Code 1 나오던 버그 해결
Posted by iWithJoy
Web2011. 4. 28. 18:30

호환성 모드를 제공하는데 문제는 그림에 보이는 부분을 클릭하기 전까지는 동작하지 않는다.





이와같은 불편을 해소하기 위해,
<head></head> 사이에 아래의 메타태그를 추가하면 된다.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

또한, 서버단의 HTTP Header 수정이 가능하다면,
"X-UA-Compatible"의 헤더값으로 "IE=EmulateIE7" 을 설정하면, 본문의 메타태그 없이 호환모드로 웹페이지가 랜더링된다.

또한, IIS7.0 혹은 IIS7.5, 그 이상의 IIS버젼에 대해서 ASP.NET의 web.config에 아래처럼 코드를 구성해도 된다.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer> 
  <httpProtocol> 
   <customHeaders>   
    <add name="X-UA-Compatible" value="IE=EmulateIE7">
   </customHeaders>
  </httpProtocol>
 </system.webServer>
</configuration>

강제 호환모드 적용하기 안내 페이지
http://msdn.microsoft.com/ko-kr/ie/cc405106.aspx

Posted by iWithJoy
Web2011. 4. 28. 18:04

마이크로소프트사가 Internet Explorer 8 정식 버전을 내놓으면서 IE7과의 호환성에 대한 가이드라인을 공개하였다. 현재 IE8은 웹표준에 맞추어졌다는 특징이 있지만, 이것 때문에 기존 IE7의 실행에 맞추어진 일부 사이트는 IE8과의 호환성 문제가 있다. 특히, 스크립트나 CSS 문제가 가장 크다.

IE8은 이런 문제를 대처하기 위해 표준 기반의 IE8 Standards mode과 이전 브라우저와 호환성을 생각하는 Compatibility view라는 2가지 종류가 있어 IE7에 맞추어진 사이트에 그대로 이용할 수 있도록 처리하고 있다. 그러나, 호환 모드도 일부 문제가 있는 경우가 있어, 이번에 IE8에 맞춘 사이트를 위한 재검토 포인트를 마이크로소프트 개발팀에서 공개한 내용을 정리해보고자 한다.

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /> 

IE8 Compatibility View IE7가 다르다는 점이 가장 화두가 될 것 같다. 내가 얼마전 MSDN 세미나였던 IE8 개발자 세미나에서 질문받았던 내용 중에 IE7 호환모드로 처리하여도 똑같지 않게 나온다는 지적사항이 있었다. 실제로 마이크로소프트사에서는 새로운 기능 추가와 몇 가지 사양 변경 때문에 100% 호환성을 제공할 수 없다라는 답변을 하였다. 크게 문제가 되는 것들 것 정리해보면 다음과 같다.

 

l  Cross Document Communication

보안상 이유로 크로스 도메인/크로스 문서 통신이 사용 못한다.

해결방법: Cross Document Messaging (XDM) 사용    

l  Event Object Properties

XDM등 특정 Ajax 기능을 추가 시 IE8 새로운 속성이 추가된 문제로 인해 IE8 Compatibility View에 대한 특정 이벤트 객체로 속성명이 충돌이 난다.(source 속성 등)

event.source = myObject; // IE8 읽기전용

해결방법: 충돌나는 사용자지정 속성명을 변경한다.

event.mySource = myObject;

l  Attribute Ordering

속성의 우선 순위가 바뀌어 컬렉션이나 내외 HTML값에 영향을 받는다. 만약 속성의 순서에 의존하는 페이지가 있는 경우 정상적으로 표시되지 않는다.

attr = elm.attributes[1];

해결방법: 컬렉션 내 속성을 이름으로 명시한다.

attr = elm.attributes[“id”];

l  Unsupported CSS Values

IE버전에 의해 CSS값 지원 유무가 존재하지만 이것을 이용하여 버전을 구분하는 경우 문제가 있다.

try {

elm.style.display = “table-cell”;

} catch(e) {

// IE7 실행, IE8은 안됨

}

해결방법: CSS에 의한 버전 구분을 하지 않는다. 어려운 문제지만 만약 페이지에 이에 대한 실행이 의존적이라면 IE8 Standards Mode로 실행되도록 변경하는 것이 좋다.

IE팀 블로그 내용을 보면 IE8 Standards Mode에서는 호환성 문제가 대부분 파악된 것으로 나와 있다. 이는 기존 사이트가 IE8에 지원 대상이 아닌 경우의 기능을 이용하는 경우를 생각한 것으로 장기적인 해결책으로 보면 IE8 Standards Mode로 실행되는 사이트로 변경하는 것이 좋다라는 결론이다. 하지만 잠장적인 해결책은 IE8 IE7호환모드를 이용하는 것도 방법이며 이에 대해서는 IE 블로그의 포스팅 을 참고하여 정리해보면 주의해야 할 것들이 몇 가지 있다.

l  Version Detection

버전 구분 처리에 대한 오작동은 조건부 주석, 스크립트, 서버측에서의 처리가 원인으로 자주 발생하지만, 그 원인 대부분은 조건부 주석이며 많은 사이트에서 버전 구분 기술로서 이용되고 있다.

<!--[if IE]>

<link rel=”stylesheet” type=”text/css” src=”ie.css” />

<![endif] -->

해결방법: 정상적인 버전 구분을 할 수 있도록 사이트를 변경하던지, 가능하면 아래와 같은 오브젝트에 의한 구분 방법을 이용한다.

<!--[if lte IE 7]>

  <link rel=”stylesheet” type=”text/css” src=”ie.css” />

<![endif] -->

l  Object Detection

객체 검사를 할 때, 어느 기능 검사에 다른 기능 호출을 하는 경우, 양쪽 모두의 기능이 특정 버전으로 동시 지원하지 않으면 오작동하게 된다.

if(window.postMessage) {

window.addEventListener (

  “load”, myHnadler, false

);

}

해결방법: 코드끼리 의존관계를 없애고 알맞은 객체 검사용 코드를 추가한다.

if(window.addEventListener) {

window.addEventListener (

  “load”, myHandler, false

);

}

l  Malformed HTML

HTML문법 오류 수정방법이 IE8 Standards Mode에서 변경되고 있다. 결과적으로 IE7 실행에 의존하던 페이지는 IE8로 실행에 문제를 초래한다.

<ul>

   <li>1.1

      <ul>

         <li>1.1.1</li>

       </li>

         <li>1.1.2</li>

      </ul>

   </li>

</ul>

해결방법: 정확한 형태의 마크업 언어로 작성한다.

l  Element’s Class

IE7은 속성명으로 className을 사용하는 경우, 같은 속성의 클래스를 추출할 수 있었지만, IE8 Standards Mode에서는 표준에 맞추어진 형태로 변하고 있다. 그렇기 때문에, IE8에서는 className사용하여도 원래 결과를 얻을 수 없다.

return elm.getAttribute(“className”);

해결방법: className 대신 class 사용한다.

return elm.getAttribute(“class”);

l  GetElementById

같은 메소드는 Case Sensitive , 알파벳의 대소문자를 구별하고 있어 이름 속성을 찾지 못한다.

<div id=”Test”></div>

<script type=”text/javascript”>

var test = document.getElementById(“test”);

</script>

해결방법: 대소문자를 정확하게 구분하여 작성하며 이름속성 검색에는 getElementsByName 메소드를 사용한다.

<div id=”Test”></div>

<script type=”text/javascript”>

var test = document.getElementById(“Test”);

</script>

l  Generic CSS Prefix Selectors

CSS 구문 분석에 있어 표준에 맞춘 이유로 제네릭 CSS 프리픽스 선택기는 IE8 Standards Mode에서는 지원되지 않는다. 이것에 영향을 주는 것은 VML요소에 행동 부여 위해 페이지가 CSS를 읽어들일 때, 스크립트 오류를 발생하거나 CSS에 대한 하드코딩을 하고 있는 경우 실행이 오류가 난다. 궁극적으로는 VML이 페이지내에 표시되는 않는 등의 문제가 발생한다.

v\:* { 

    behavior:  url(#default#VML); 

}

해결방법: CSS 프리픽스 선택기를 사용하는 경우 합치고 싶은 개별 이름태그를 명시한다.

v\:polyline, 

v\:line { 

    behavior:  url(#default#VML); 

}

l  CSS Expressions

CSS Expressions IE8 Standards Mode에서는 지원되지 않는다.

/* CSS */ 

#main { 

    background-color:  expression( 

        (new Date()). getHours()%2 ?  "#000" :  "#fff" 

    ); 

}

해결방법: 강화된 CSS지원 또는 DHTML든 이용한다.

/* Script */ 

var elm = document.getElementById("main"); 

if((new Date()). getHours()%2)  { 

    elm.style.backgroundColor = "#000"; 

} else { 

    elm.style.backgroundColor = "#fff"; 

}

l  Native JSON Object

IE에서는 티브 JSON 를 지원한다. 이는 ES 3.1 Proposal Working Draft에 작성된 기준에 맞추어진 것으로 일부 페이지는 JSON객체를 인식하여 이를 비표준형태로 처리되는 경우가 있다. 이는 결과적으로 스크립트 오류를 발생하여 AJAX 요청순서를 망가트린다.

if(! window.JSON)  JSON = myJSON; 

JSON.encode(obj);  // Not part of the standard

해결방법: 비표준 문법을 사용자지정 JSON객체로 정의하던가, 표준에 맞추어진 코드로 재작성한다.

JSON = myJSON; 

JSON.encode(obj);

l  Initial CSS Property Values

currentStyle 객체로 값 설정이 되어 있지 않은 속성은 현재 각각 가지고 있는 초기값을 리턴하게 된다. 만약, z-index CSS속성이 기존 초기값 상태에 의존하고 있는 경우 문제를 발생시킨다. 이는 ASP.NET 메뉴 컨트롤의 트러블 원인이 된다.

var zIndex = elm.currentStyle.zIndex; 

if(zIndex == 0)  { 

    // custom code 

}

    해결방법: 기존과 호환성을 가지는 값과 표준에 맞추어진 초기값 양쪽 모두로 실행하도록 재

    재검토한다.

var zIndex = elm.currentStyle.zIndex; 

if(zIndex == 0 ||  zIndex == "auto")  { 

    // custom code 

}

 

l  Unspecified CSS Property Values

스타일 객체의 속성은 현재 DOM Level 2 Style Specification에 맞쳐 문자열을 리턴하게 된다.

정확하게는 정의되어 있는 않은 값을 가지는 z-index와 같은 CSS속성이 있는 경우에 문제가 발생한다.

var zIndex = elm.style.zIndex; 

if(zIndex === 0)  { 

    // custom code 

}

해결방법: 기존과 호환성을 가지는 값이나 문자열 양쪽 모두의 값으로 실행하도록 재검토한다.

var zIndex = elm.style.zIndex; 

if(zIndex === 0 ||  zIndex === "")  { 

    // custom code 

}

l  Attributes Collection

속성 컬렉션에 대해서는 모든 속성의 구성이 IE에서는 인식되는 것은 아니다. 만약 IE7에서는 존재하던 속성에 의존하는 경우, 스크립트가 오류를 발생할 가능성이 있다.

var attr = elm.attributes["checked"]; 

// Potential script error in IE8 

return attr.specified;

해결방법: 속성 컬렉션에 모든 속성이 존재한다고 생각하지 말고, 우선 그 존재유무를 확인하다.

var attr = elm.attributes["checked"]; 

if(attr) return attr.specified; 

else return false;

 

이상으로 IE팀블로그에 나온 내용을 토대로 정리해보았다. IE8이 나온지 얼마 안된 시점에서 점차 점유율이 높아지고 있는 상황에서 디자이너나 개발자들이라면 이에 대한 내용에 대해서 대처를 원활하게 처리하길 바란다.

Posted by iWithJoy