웹 개발자가 흔히 저지르는 10가지 실수

동일한 작업을 수행하는 방법에 대한 옵션은 끝이 없어 보입니다. 특히 최신 네트워크 환경에서 실행할 수 있는 웹사이트를 개발하는 경우에는 더욱 그렇습니다. 웹 개발자는 먼저 웹 호스팅 플랫폼과 기본 데이터 저장 메커니즘을 선택하고 제공된 도구를 사용하여 HTML, CSS 및 JavaScript 코드를 작성하고 디자인 효과를 달성하는 방법과 포함될 수 있는 잠재적 JavaScript 라이브러리/프레임워크를 고려해야 합니다.

선택이 이 수준으로 구체화되면 인터넷에서 관련 기사, 포럼 및 예제를 많이 찾을 수 있고 더 나은 웹 경험을 만드는 방법을 배울 수 있습니다. 그러나 선택할 수 있는 경로가 아무리 많아도 개발자는 선택 사항 중에서 길을 잃을 수 있습니다. 이러한 오류 중 일부는 특정 시나리오와 관련되어 있지만 모든 웹 개발자가 직면하는 몇 가지 일반적인 문제도 있습니다.

그래서 일련의 연구, 경험 및 최근 관찰을 통해 다음과 같은 10가지 일반적인 실수 목록을 정리했습니다. 실제로 많은 웹 개발자들이 여전히 어려움을 겪고 있습니다. 그것에 의해 나는 또한 내 자신의 해결책을 제시했습니다.

다음 목록은 특별한 순서가 없습니다.

1. 오래된 HTML 코드 작성

오류: 인터넷 초기에는 몇 가지 마크업 옵션만 사용할 수 있었지만 이제는 이러한 옵션이 상당히 풍부해졌습니다. 그러나 오늘날에도 일부 오래된 습관이 여전히 존재하며, 많은 실무자들은 마치 지난 세기에 살고 있는 것처럼 HTML 코드를 작성합니다. 구체적인 예로는 레이아웃에 요소를 사용하는 것, 다른 의미 태그가 더 적합할 경우

현재는 지원되지 않습니다. HTML 표준 태그는 페이지의 항목을 정렬하기 위해 많은 수의 항목을 사용합니다.

영향: 위에서 언급한 HTML 코드를 강력한 지난 세기 스타일로 작성하면 마크업이 너무 복잡해져서 브라우저에 따라 작동 효과가 달라질 수 있습니다. 또한 Microsoft Edge나 최신 버전의 IE(IE 9, 10, 11 포함)에서 이러한 복잡한 마크업을 사용할 이유가 없습니다.

방지 방법: 콘텐츠 레이아웃을 처리하기 위해

요소를 사용하지 말고 테이블 데이터를 표시할 때 사용 빈도를 엄격하게 제한하세요. 현재 사용할 수 있는 마크업 옵션에 대해 알아보려면 여기 whatwg.org에서 요약을 확인하세요. 컨텐츠 표시 방법을 정의하는 대신 HTML 코드를 사용하여 페이지 컨텐츠를 설명하십시오. 디자인 콘텐츠를 올바르게 표시하려면 먼저 CSS를 사용하세요.

　2. "내 브라우저에는 문제가 없습니다..."

　오류: 개발자는 특정 브라우저를 선호할 수도 있고 다른 브라우저를 경멸할 수도 있으며, 이러한 편향된 관점을 웹 테스트 노력에 가져올 것입니다. . 어떤 경우에는 다른 브라우저에서 올바르게 렌더링되는지 테스트하지 않고 인터넷의 샘플 코드를 프로젝트에 직접 통합할 수도 있습니다. 또한 일부 브라우저에는 스타일에 대한 기본 설정이 다릅니다.

영향: 특정 브라우저에만 적합한 사이트를 작성하면 다른 브라우저를 사용하는 사용자에게 매우 나쁜 액세스 경험을 제공할 수 있습니다.

방지 방법: 개발 과정에서 모든 브라우저와 버전에 대해 웹페이지를 테스트하는 것은 분명히 비현실적입니다. 그러나 우리는 특정 간격으로 여러 브라우저를 사용하여 웹사이트가 제대로 작동하는지 확인할 수 있으며 이는 이상적인 절충안입니다. 현재 어떤 선호하는 개발 플랫폼을 사용하든 관계없이 무료 가상 머신이나 사이트 검색 도구를 포함하여 테스트 작업에 도움이 될 수 있는 무료 도구가 많이 있습니다. Browsershots 또는 BrowserStack과 같은 웹사이트에서는 특정 페이지가 다양한 브라우저/버전/플랫폼에서 어떻게 렌더링되는지 이해하는 데 도움이 되는 스냅샷을 제공할 수도 있습니다. Visual Studio와 같은 도구는 다양한 브라우저를 사용하여 현재 개발 중인 단일 페이지를 표시할 수도 있습니다. CSS로 디자인할 때 모든 기본값을 "재설정"하는 것을 기억하세요.

귀하의 사이트가 단일 브라우저용으로 생성된 특수 CSS 기능을 사용하는 경우 -webkit-, moz- 또는 -ms-를 포함한 다양한 제공자 접두사에 유의하세요. 업계 동향에 대한 가이드로서 아래에 제공된 참조 사이트(모두 영어 원본)를 주의 깊게 확인하는 것이 좋습니다.

　• Microsoft Edge 개발 블로그: 과거로부터의 휴식, 2부: ActiveX에 작별 인사 , VBScript , AttachEvent…

• QuirksMode.org: 유해한 것으로 간주되는 CSS 공급업체 접두사

• Bruce Lawson: Internet Explorer에서 -webkit- 공급업체 접두사 지원

위의 참조에서는 프로그램 제공을 피할 수 있는 방법을 설명했지만 접두사 및 그 이유에 대해 설명하고 있지만 여기를 클릭하여 구체적인 제안 사항이 포함된 솔루션에 대해 자세히 알아볼 수도 있습니다(원본은 영어).

3. 형식 조정에 주의하세요

오류: 프롬프트를 통해(특히 텍스트 필드 입력) 사용자에게 정보를 요청하고, 단순히 다음과 같이 사용자로부터 데이터를 얻을 수 있다고 가정합니다. 얻을 것으로 예상됩니다.

영향: 기본적으로 사용자가 정보를 입력하도록 신뢰하면 예상치 못한 문제가 많이 발생할 수 있습니다. 요청한 데이터가 올바르게 검색되지 않거나 검색된 데이터가 기본 데이터 형식과 호환되지 않는 경우 페이지에 오류가 발생할 수 있습니다. 더 심각한 것은 웹사이트 데이터베이스에 대한 일부 의도적인 위반이 주입 공격을 구성하기에 충분하다는 것입니다.

이를 방지하는 방법: 첫 번째 팁은 웹사이트에서 입력을 요구하는 데이터 유형이 무엇인지 사용자가 명확하게 이해하도록 하는 것입니다. 현재로서는 간단한 "주소를 입력하세요" 프롬프트는 사용자가 회사 주소, 집 주소 또는 이메일 주소까지 입력해야 함을 의미할 수 있습니다. 목적에 맞는 설명을 하는 것 외에도 최신 HTML이 제공하는 데이터 유효성 검증 기술을 최대한 활용해야 합니다. 데이터가 브라우저 측에서 유효한 것으로 간주되는지 여부에 관계없이 서버 측에서도 유효성을 검사하는 것이 중요합니다. 필드 내용이 데이터 유형 요구 사항을 준수하는지 확인하지 않고 사용자가 입력한 다중 행 인덱스 T-SQL 문에서 사이트 데이터를 사용하는 것을 허용하지 마십시오.

4. 응답 속도가 너무 느립니다.

오류: 고품질 이미지 및/또는 사진이 많이 포함된 페이지의 경우 높이 및 너비 속성. 그리고 페이지에서 CSS 및 JavaScript와 같은 파일로 연결되는 링크는 용량이 큰 경우가 많습니다. 또한 소스 HTML 마크업이 있으면 불필요한 복잡성과 로딩 부담이 발생하는 경우가 많습니다.

영향: 페이지를 완전히 렌더링하는 데 너무 오랜 시간이 걸리는 경우 일부 사용자는 액세스를 포기하거나 심지어 전체 페이지를 급하게 다시 로드할 수도 있습니다. 어떤 경우에는 페이지를 처리하는 데 너무 오랜 시간이 걸리면 다른 알 수 없는 오류가 발생할 수도 있습니다.

방지 방법: 인터넷 전송 속도가 점점 빨라진다고 해서 부담 없이 부풀려진 페이지 결과를 디자인할 수 있다고 생각하지 마세요. 대신, 브라우저에서 사이트로 들어오고 나가는 모든 트래픽을 운영 비용으로 고려하십시오. 이미지는 페이지를 부풀리는 주범이라고 할 수 있으므로, 이미지로 인해 페이지에 가져오는 로딩 비용을 최소화하기 위해 다음 세 가지 측면에서 고려해 보시기 바랍니다.

스스로에게 물어보세요. 페이지?" 모든 이미지가 필요한가요?" 대답이 '아니오'라면 불필요한 이미지를 제거하세요. 여기를 클릭하여 웹사이트를 검색하여 압축할 수 있는 이미지에 대한 권장 사항을 얻을 수도 있습니다.

Shrink O'Matic 또는 RIOT와 같은 도구를 사용하여 이미지 크기를 최소한으로 제어하세요.

이미지 사전 로딩 솔루션을 채택하세요. 이렇게 하면 초기 다운로드의 실제 비용이 줄어들지는 않지만 관련 이미지를 사용하는 사이트의 다른 페이지가 더 빠르게 로드될 수 있습니다.

비용을 줄이는 또 다른 방법은 CSS 및 JavaScript 링크 파일의 크기를 압축하는 것입니다. 현재 우리는 Minify CSS 및 Minify JS를 포함하여 이 평가를 완료하는 데 도움이 되는 다양한 도구 중에서 선택할 수 있습니다.

네 번째 실수를 끝내기 전에 HTML에서

　

　5. "작동해야 하는" 코드 작성

　오류: JavaScript이든 서버 측에서 실행되는 코드이든, 개발자로서 테스트를 통과해야 실제 확인이 가능합니다. 배포 후 예상되는 역할을 수행할 수 있는지 확인하는 작업 효과입니다. 귀하의 코드는 실행되기 전에 완전히 테스트되었기 때문에 실행 시 오류가 발생해서는 안 됩니다.

영향: 테스트되지 않은 코드가 포함된 사이트는 최종 사용자에게 매우 좋지 않은 방식으로 오류를 생성할 가능성이 높습니다. 이는 실제 사용자 경험에 심각한 영향을 미칠 수 있을 뿐만 아니라 특정 유형의 오류 메시지 내용은 사이트를 손상시키려는 해커에게 엄격하게 보호되어야 하는 세부 정보를 공개할 수도 있습니다.

피하는 방법: 사람은 실수를 하기 마련이므로 이러한 철학적 사고를 프로그래밍 작업에 접목해야 합니다. JavaScript에서는 오류를 방지하고 오류가 실제로 발생할 때 이를 포착하기 위해 최선의 기술적 수단을 모두 사용해야 합니다. 코드 품질을 향상시키는 또 다른 방법은 향후 변경 가능성에 대해 코드를 단위 테스트하는 것입니다.

서버 측 코드 오류는 사용자가 인지하기 전에 발견하고 수정해야 합니다. 꼭 필요한 오류 메시지만 사용자에게 표시하고, 더욱 주의하여 HTTP 404 오류 페이지를 더욱 아름답게 디자인하시기 바랍니다.

6. 포크 코드 작성

오류: 모든 브라우저와 해당 버전을 지원한다는 숭고한 생각에서 일부 개발자는 가능한 각 실행 장면에 해당하는 다른 코드를 생성합니다. 이러한 코드는 if 문 루프를 기반으로 하며 다양한 실제 방향에 해당하는 포크 ​​버전을 제공합니다.

영향: 브라우저 버전이 계속 업데이트됨에 따라 포크 코드 파일 관리가 매우 복잡해지거나 불가능해질 수도 있습니다. 또한, 첫 번째 항목에서 언급했듯이 이는 실제로 전혀 필요하지 않습니다.

방지 방법: 브라우저/버전을 타겟팅하기보다는 코드 내의 기능을 확인하세요. 기능 감지 기술 솔루션의 등장으로 코드 양이 크게 줄어들고 코드를 더 쉽게 읽고 관리할 수 있게 되었습니다. 더 이상 HTML 5 또는 CSS 3에 적응할 수 없는 이전 브라우저에 대한 백업 지원을 자동으로 제공하는 동시에 기능 감지를 구현하는 데 도움이 되도록 Modernizr과 같은 라이브러리를 사용하는 것을 고려할 수 있습니다.

7. 비반응형 디자인 사용

오류: 사이트 작업 시 사용자와 개발자/디자이너의 모니터 크기가 동일한 것으로 가정합니다.

영향: 모바일 장치나 매우 큰 화면에서 사이트를 볼 때 사용자 경험에도 영향을 미칩니다. 예를 들어 페이지의 일부 중요한 측면을 볼 수 없거나 다른 페이지로 이동할 수 없는 경우도 있습니다. 페이지.

피하는 방법: 개발 시 반응형 디자인을 고려하세요. 사이트에서 반응형 디자인을 사용하고 동일한 방식으로 이미지 크기를 조정할 수도 있습니다. 인기 있는 라이브러리인 Bootstrap은 확실히 이와 관련하여 많은 도움을 줄 수 있습니다.

8. 무의미한 페이지 구축

오류: 공개 페이지에는 유용한 콘텐츠와 정보가 포함되어 있지만 검색 엔진 관련 키워드, 태그 및 힌트를 제공하지 않습니다. 접근성 기능은 제공되지 않습니다.

영향: 이 경우 사용자가 검색 엔진을 통해 우리 페이지를 찾기가 어려워지고, 이로 인해 원하는 트래픽을 얻는 것이 어렵거나 심지어 불가능해집니다. 또한 페이지 콘텐츠를 보는 동안 사용자의 시각이 조작되지 않도록 주의 깊게 디자인해야 합니다.

방지 방법: SEO(검색 엔진 최적화) 메커니즘을 사용하고 HTML 접근성을 지원합니다. SEO와 관련하여 키워드와 관련 설명이 포함된 의미 있는 페이지 콘텐츠를 제공하려면 태그를 추가해야 합니다. 더 나은 접근성 환경을 위해 각 태그 아래에 있는 alt="your image Description" 속성을 확인하세요. 물론, 단순히 이 작업을 수행하는 것만으로는 충분하지 않습니다. 여기를 클릭하여 페이지가 섹션 508과 호환되는지 확인할 수 있습니다.

　9. 개발된 페이지에 새로 고침 작업이 너무 많습니다

　오류: 생성된 사이트에 각 작업에 대한 페이지 새로 고침 단계가 너무 많습니다.

영향: 페이지가 커지는 것과 유사하게(4번 항목 참조) 페이지 로딩 시간과 같은 중요한 성능 지표도 영향을 받습니다. 새로 고침 횟수가 너무 많으면 사용자 경험이 원활하지 않게 되며 각 콘텐츠 업데이트로 인해 페이지가 짧게(또는 길게) 재설정될 수 있습니다.

방지 방법: 이 문제를 해결하는 편리한 방법 중 하나는 서버에 접속하기 위해 각 작업이 실제로 필요한지 확인하는 것입니다. 예를 들어 처리를 위해 서버 측 리소스에 의존할 필요가 없는 경우 클라이언트 자체 스크립트를 사용하여 즉각적인 결과를 제공할 수 있습니다. 물론 AJAX 기술을 사용하거나 한 단계 더 나아가 단일 페이지 애플리케이션 SPA 솔루션을 선택할 수도 있습니다. 현재 JQuery, KnockoutJS 및 AngularJS와 같이 널리 사용되는 다양한 JavaScript 라이브러리/프레임워크는 이 문제를 단순화하는 다양한 방법을 제공합니다.

　10. 작업이 너무 많습니다

　오류: 개발자는 웹 콘텐츠 제작에 너무 많은 시간을 할애할 수 있습니다. 이 시간은 반복적인 작업을 수행하거나 단순히 많은 양의 텍스트를 입력하는 데 사용될 수 있습니다.

영향: 웹사이트가 막 출시되었거나 후속 업데이트가 진행 중인 경우 개발자가 웹사이트에 투자하는 시간이 너무 과장되는 경우가 많습니다. 그리고 더 짧은 시간과 더 적은 노력으로 동일한 효과를 얻을 수 있는 다른 개발자가 있다면 우리가 투자한 시간 비용은 이상적인 수익을 얻지 못할 것입니다. 이처럼 단순하고 반복적인 수작업은 오류로 이어질 수 있으며, 오류를 진단하는 것은 프로젝트를 개발하는 것보다 시간이 더 많이 소요되는 경우가 많습니다.

방지 방법: 나만의 솔루션을 찾으세요. 각 개발 단계를 처리하기 위해 새로운 도구나 새로운 워크플로우 기술을 사용하는 것을 고려할 수 있습니다. 예를 들어, 현재 사용하고 있는 코드 편집기가 Sublime Text나 Visual Studio보다 나은가요? 어떤 코드 편집기를 사용하든 해당 기능 설정을 자세히 살펴보신 적이 있나요? 어쩌면 잠시 시간을 내어 문서를 주의 깊게 읽는 것만으로도 몇 시간 또는 앞으로 더 많은 시간을 절약할 수 있는 새로운 용도를 찾을 수 있을 것입니다.

인터넷에서 도움이 될 수 있는 기성 도구도 놓치지 마세요! 예를 들어, dev.modern.ie에서 테스트(여러 플랫폼과 장치 전반에 걸쳐)와 문제 해결을 단순화하는 도구를 검색하세요.

자동화된 프로세스를 통해 소요 시간과 오류 가능성을 줄일 수도 있습니다. 예를 들어, Grunt와 같은 도구를 사용하여 파일 크기 압축과 같은 작업을 자동으로 완료할 수 있습니다. 또한 Bower는 라이브러리와 프레임워크를 보다 효율적으로 관리하는 데 도움을 줄 수 있습니다.

그럼 웹서버 자체에 최적화할 여지는 없나요? Microsoft Azure Web Apps를 선택하면 거의 모든 개발 시나리오에 적합한 사이트를 빠르게 만들 수 있습니다. 이는 확실히 비즈니스 확장을 위한 이상적인 솔루션입니다!

결론

위의 일반적인 실수를 나열함으로써 웹 개발자는 수많은 이전 제품에 해를 끼친 많은 함정을 제거할 수 있습니다. 이러한 함정을 인식하는 것 외에도 이러한 오류가 미치는 영향과 수정 방법을 이해하고 그에 따라 습관에 적응하면서 작업에 대한 자신감을 구축할 수 있는 개발 프로세스를 설계했습니다. 어서, 동지들!

원제: 웹 개발자가 흔히 범하는 10가지 실수