AJAX 프로그램을 개발하는 과정에서 많은 사람들이 몇 가지 일반적인 실수를 저지르게 되는데, 어떤 실수는 AJAX 프로그램의 기능과 성능을 위험에 빠뜨리고 AJAX 프로그램의 모든 장점을 잃게 할 수도 있습니다. 여기서 저자는 AJAX 프로그램을 개발할 때 주의해야 할 일곱 가지 대죄를 소개한다.
AJAX는 좋은 점입니다. 이를 통해 개발자는 더욱 역동적인 애플리케이션을 보다 빠르고 효율적으로 구축할 수 있습니다. 그러나 그 자체의 단점도 있습니다.
언뜻 보면 약간의 상식이 이러한 함정을 예방할 수 있는 것처럼 보일 수 있으며 어느 정도는 그렇습니다. 그러나 경쟁사인 DHTML과 비교하면 AJAX 프로그램의 아키텍처는 완전히 다릅니다. 애플리케이션 개발 노력에 있어 아무리 상식적인 지식이 있더라도, 앞서 살았던 사람들의 교훈을 배워야 합니다. 본 글에서는 이러한 오류를 '일곱 개의 대죄'라고 부르지만, 이것이 모든 오류를 대표하는 것은 아닙니다.
AJAX 개발의 7가지 치명적인 실수에 대해 알아보기 전에 덜 심각한 7가지 실수를 살펴보겠습니다. 누구나 이런 실수를 합니다. Google 검색을 수행하면 이러한 오류가 얼마나 흔한지 알 수 있습니다.
일곱 가지 경범죄
1. 뒤로 버튼 남용 - 많은 사람들이 이런 실수를 저지르는데, 뒤로 버튼은 많은 웹 경험 프로그램에서 필수 요소가 되었습니다. 많은 초보 AJAX 개발자는 다양한 이유로 AJAX 프로그램에 뒤로 버튼을 추가하지만 뒤로 버튼이 프로그램 기능에 영향을 미친다는 사실을 알게 되었습니다. 이는 주로 Javascript가 사용자 친화적인 프로그래밍 언어가 아니기 때문입니다. 둘째, 개발자는 AJAX의 개발 아이디어를 다시 배워야 합니다.
AJAX를 처음 접하는 사람들에게는 뒤로 버튼이 좋은 해결책이 아니라는 생각을 받아들이기가 쉽지 않습니다. 페이지 새로 고침 지점에 있거나 "실행 취소" 기능을 사용해야 할 때 "뒤로 키"를 고려할 수 있습니다. 하지만 코딩하기 전에 두 번 생각해야 합니다. 그렇지 않으면 반복되는 새로 고침이 쉽게 발생합니다.
2. 사용자에게 작업 결과를 알리지 않음 - AJAX 작동 방식의 일부는 일반적인 웹 사용자 인터페이스 로더를 사용하지 않는다는 것입니다. 따라서 사용자가 무슨 일이 일어나고 있는지 이해할 수 있도록 몇 가지 시각적 단서를 디자인해야 합니다.
3. 간과된 링크 - 이는 표준 AJAX 실수이기도 합니다. 즉, 외부 사용자가 잘라내어 붙여넣을 수 있는 URL 링크를 생략하는 것입니다. 우리는 모두 URL을 복사하여 다른 사람에게 보냈습니다. AJAX를 사용하면 순수한 수동 입력을 통해서만 다른 사람에게 링크를 제공할 수 있습니다. 왜? AJAX 애플리케이션에서는 서버가 Javascript로 자동 생성된 이 페이지를 제공하지 않기 때문입니다. 사용자가 관심을 가질 수 있는 웹 앱의 가장 일반적인 기능을 간과하지 마십시오. 서버에서는 URL 주소를 제공하지 않으므로 잠시 시간을 내어 사용자에게 URL 주소를 알려주시기 바랍니다.
4. 페이지 제어 대신 콘텐츠 제어 사용 - 동적 콘텐츠 제어를 찾고 있다면 AJAX 애플리케이션의 전통적인 클라이언트-서버 상호 작용 방식의 혁신이 큰 선물이 될 수 있습니다. 그러나 여기에는 고유한 단점도 있습니다. 사용자의 상호 작용 경험을 조정하기 위해 페이지의 정확한 위치에 콘텐츠를 다시 작성하는 것을 효과적으로 제어할 수 있지만 페이지가 불완전해질 수 있습니다.
많은 경우, 우리는 페이지의 특정 부분을 처리하는 데 집중하고 서버가 페이지를 새로 고치지 않는다는 사실을 잊어버립니다. 이로 인해 페이지가 복잡해지고 사용자 경험이 저하될 수 있습니다. 페이지를 볼 때 오래된 페이지를 보게 될 수 있습니다. 전체 페이지를 주의 깊게 살펴보시고 동적 콘텐츠가 포함된 페이지가 업데이트되었는지 확인하세요.
5. 피곤한 스파이더--AJAX의 장점은 다시 설치하지 않고도 페이지에 제공할 수 있는 텍스트의 양이 많다는 것입니다. AJAX의 단점은 다시 설치하지 않고도 페이지에 제공할 수 있는 텍스트의 양이 많다는 것입니다. 앱이 검색 엔진 친화적으로 설계되었다면 어떤 일이 일어날지 상상할 수 있어야 합니다. 페이지에서 무슨 일이 일어나더라도 상단에 단색 텍스트를 많이 넣어 거미가 재미있게 놀 수 있도록 하세요.
6. 잘못된 문자 - AJAX는 여러 문자 세트를 지원할 수 없습니다. 이것은 삶이나 죽음의 한계가 아니지만, 이것을 잊어버리면 실제 문제가 발생할 수 있습니다. 가장 기본적인 문자 집합은 UTF-8입니다. Javascript가 보내는 문자 세트에 관계없이 이를 올바르게 인코딩하고 콘텐츠에 따라 서버 측 문자 세트를 설정하는 것을 잊지 마십시오.
7. Javascript를 지원하지 않는 사용자에게는 프롬프트가 제공되지 않습니다. 일부 브라우저는 Javascript를 지원하지 않으며 이러한 사용자는 무슨 일이 일어나고 있는지 이해할 수 없습니다. 그들에게 몇 가지 조언을 해주세요.
위의 내용은 쉽게 찾을 수 있는 몇 가지 오류입니다. 실제 문제는 쉽게 간과됩니다.
일곱 가지 대죄
1. 메모리 오버플로 허용 - 오랫동안 개발 작업에 종사해 온 사람이라면 순환 참조가 무엇인지 알고 순환 참조가 메모리 관리에 미치는 해악을 이해합니다. AJAX에서 사용하는 Javascript는 메모리 관리 언어입니다. 즉, Javascript에는 패킷 수집 기능이 내장되어 있으므로 참조 경로에서 더 이상 사용하지 않는 변수를 추출하고 이러한 변수가 사용하는 메모리를 재할당할 수 있습니다.
오랫동안 개발 작업을 해 온 사람이라면 순환 참조가 무엇인지 알고 순환 참조가 메모리 관리에 미치는 위험을 이해합니다. AJAX에서 사용하는 Javascript는 메모리 관리 언어입니다. 즉, Javascript에는 패킷 수집 기능이 내장되어 있으므로 참조 경로에서 더 이상 사용하지 않는 변수를 추출하고 이러한 변수가 사용하는 메모리를 재할당할 수 있습니다.
이제 문제가 발생합니다. 파일 개체 모델에서 파일 트리의 모든 DOM 노드는 다른 개체에서 참조되는지 여부에 관계없이 트리에 있는 다른 요소에서 참조될 수 있습니다. 따라서 DOM 노드에 의해 다시 참조되는 것으로 패킷 수집기에 표시된 모든 개체는 이 방향에서 0이어야 합니다. 그렇지 않으면 해당 메모리가 할당된 상태로 유지됩니다.
2. "비동기"가 무엇을 의미하는지 이해하지 못함 – 비동기라는 단어는 사용자에게 익숙하지 않은 느낌을 줄 수 있습니다. 그러나 이러한 사용자를 위해 디자인한 웹 앱이 데스크톱 앱이라면 사용자는 당황하지 않을 것입니다. 중요한 디자인 포인트입니다. 대부분의 웹 앱은 데스크톱 앱과 매우 유사하게 작동합니다. 그러나 웹 애플리케이션에서 사용자는 이러한 환상적인 품질이 완전히 다른 결과를 가져올 것으로 기대합니다.
사용자는 웹 브라우저를 다룰 때 데스크톱 애플리케이션을 사용할 때와 매우 다른 편견과 기대를 가지고 있습니다. 따라서 페이지와 서버 간의 빈번한 응답은 훌륭하고 효율적이지만 페이지가 동시에 자체적으로 수정되면 사용자가 어지러워질 수 있습니다. 따라서 두 가지 규칙을 따르고 사용자의 시각적 범위에 들어오는 모든 변경 사항을 고려해야 합니다. 업데이트가 사용자에게 긴급하지 않은 경우 업그레이드를 부드럽게 하고 사용자에게 업데이트가 긴급하지 않은 경우에는 업그레이드를 수행하지 마십시오. 애플리케이션의 상호 작용은 매우 중요하므로 업데이트는 명확하고 명확해야 합니다.
3. 서버를 블라인드로 설정 - 클라이언트와 서버 간의 통신이 감소하는 것은 큰 문제인데, 이전에는 그렇지 않았습니다. 과거에는 서버 측 애플리케이션이 모든 것을 알고 모든 것을 볼 수 있었습니다. 모든 예외, 모든 다시 로드, 모든 이벤트를 보고 기록할 수 있었습니다. 물론 서버도 클라이언트에서 무슨 일이 일어나고 있는지 알고 있었습니다. 화면에 녹화됩니다.
AJAX 애플리케이션에서는 그렇지 않습니다. 이벤트가 발생하면 이러한 이벤트는 서버와 독립적입니다. 즉, 클라이언트에 문제가 있을 때 서버는 이를 즉시 알지 못합니다. 서버가 개입이 필요한 문제를 추적할 수 있는 위치에서 클라이언트 측 이벤트와 예외를 검색하고 기록합니다.
4. GET을 사용하여 게으르게 사용하세요. GET의 기능은 데이터를 검색하는 것이고 POST의 기능은 GET을 설정하는 것입니다. GET을 부적절하게 사용하지 말고, 무해하다고 생각되면 시도조차 하지 마세요. GET 작업은 상태를 변경하며, 상태를 변경하는 링크는 사용자에게 혼란을 줄 수 있습니다. 대부분의 링크는 기능이 아닌 탐색을 위한 것이라고 생각합니다.
5. 데이터 유형 모니터링 없음 - Javascript는 .NET 프레임워크의 일부가 아닙니다. 이것은 다소 슬프지만 우리가 직면할 수 있는 문제를 보여줍니다. 즉, Javascript가 실행 중인 플랫폼의 데이터 유형을 이해하는지 확인하고 .NET 또는 기타의 경우 그 반대인지 확인하는 것입니다. 여러 개의 변환이 있을 수 있으며 하나씩 수행해야 합니다. 예를 들어 Ajax.NET Pro 라이브러리는 .NET 및 Javascript 개체 표기법을 변환하는 변환기를 제공합니다.
6. 일부 프로그램은 닫힐 수 없습니다. 닫는 시간이 없다면 페이지를 새로 고치지 않고 동적으로 콘텐츠를 생성하는 것은 매우 나쁠 것입니다. Hansard of Congress보다 긴 웹페이지를 몇 개나 보셨나요? 웹 페이지가 무한정 확장된다면 의심할 여지 없이 사용자에게는 악몽이 될 것입니다. 결코 멈추지 않는 애플리케이션에 대해 사용자가 어떻게 생각할지 생각해 보십시오. 웹 앱을 동적으로 만드세요. 단, 가능한 한도 내에서 만드세요.
7. Javascript와 DOM을 서로 독립적으로 만듭니다. AJAX는 "Model-View-Controller"(Model-View-Controller) 구조를 기반으로 한다는 점을 기억하세요. 이 점을 진지하게 받아들이십시오. Javascript는 모델 계층에 속하고 DOM은 시각적 계층에 속하며 컨트롤러는 이들을 연결하는 결혼 컨설턴트입니다. 콘텐츠 자체가 Javascript를 사용하는 사용자에게만 의미가 있는 경우를 제외하고 웹 파일이 Javascript와 독립적인지 확인하십시오. 따라서 Javascript를 지원하지 않는 사용자에게 더 유용합니다. 이 경우 Javascript를 사용하여 콘텐츠를 생성하세요.