사이트를 공개하기 전에 웹 응용 프로그램의 프로그래머가 고려해야 할 기술적 세부 사항은 무엇입니까?

웹 응용 프로그램의 기술적 세부 사항을 구현하는 프로그래머는 사이트를 공개하기 전에 고려해야 할 사항은 무엇입니까? 경우 제프 앳 우드 에 대해 잊을 수 Http 만 쿠키 , 사이트 맵 , 및 크로스 사이트 요청 위조 같은 사이트의 모든를 , 나뿐만 아니라 어떤 중요한 일을 잊고 될 수 있을까?

다른 사람이 사이트의 실제 디자인과 콘텐츠를 만들도록 웹 개발자의 관점 에서이 문제를 생각하고 있습니다. 따라서 사용성 및 컨텐츠가 플랫폼보다 중요 할 수 있지만 프로그래머는 이에 대해 거의 언급하지 않습니다. 걱정해야 할 것은 플랫폼의 구현이 안정적이며, 성능이 우수하고, 안전하며, 다른 비즈니스 목표를 충족한다는 것입니다 (비용이 많이 들지 않고 구축하는 데 시간이 오래 걸리며 Google과의 순위가 높음). 콘텐츠 지원).

상당히 신뢰할 수있는 환경에서 인트라넷 유형의 응용 프로그램에 대한 작업을 수행 한 첫 번째 웹 사이트를 구축하려는 개발자의 관점에서이를 생각해보십시오.

또한 모호한 "웹 표준"응답보다 더 구체적인 것을 찾고 있습니다. 내 말은, HTML, JavaScript 및 CSS over HTTP는 특히 당신이 이미 전문적인 웹 개발자임을 명시했을 때 상당히 주어진 것입니다. 그 이상으로 어떤 표준이 있습니까? 어떤 상황에서, 왜? 표준 사양에 대한 링크를 제공하십시오.

여기에 아이디어는 우리 대부분이해야한다는 것입니다 이미 알고 대부분 이 목록에 무엇을. 그러나 이전에 실제로 보지 않았거나 완전히 이해하지 못하거나 들어 본 적이없는 항목이 하나만있을 수 있습니다.

인터페이스 및 사용자 경험

• 브라우저는 표준을 일관되지 않게 구현하고 모든 주요 브라우저에서 사이트가 제대로 작동하는지 확인하십시오. 최근 Gecko 엔진 ( Firefox ), WebKit 엔진 ( Safari 및 일부 모바일 브라우저), Chrome , 지원되는 IE 브라우저 ( Application Compatibility VPC Images 활용 ) 및 Opera 에 대해 최소한의 테스트를 거쳤습니다 . 브라우저 가 다른 운영 체제에서 사이트 를 렌더링 하는 방법도 고려 하십시오 .
• 사람들이 주요 브라우저 이외의 다른 사이트 (예 : 휴대폰, 스크린 리더 및 검색 엔진)를 어떻게 사용하는지 고려하십시오. - 일부 접근성 정보 : WAI 와 Section508 , 모바일 개발 : MobiForge .
• 준비 : 사용자에게 영향을주지 않고 업데이트를 배포하는 방법 하나 이상의 테스트 또는 스테이징 환경을 사용하여 아키텍처, 코드 또는 스윕 컨텐츠에 대한 변경 사항을 구현하고이를 방해하지 않고 제어 된 방식으로 배치 할 수 있도록하십시오. 승인 된 변경 사항을 라이브 사이트에 배포하는 자동화 된 방법을 갖습니다. 이것은 버전 제어 시스템 (git, Subversion 등) 및 자동화 된 빌드 메커니즘 (Ant, NAnt 등)의 사용과 함께 가장 효과적으로 구현됩니다.
• 사용자에게 친숙하지 않은 오류를 직접 표시하지 마십시오.
• 스팸으로 인해 사용자의 이메일 주소를 일반 텍스트로 입력하지 마십시오.
• 스팸을 피하기 위해rel="nofollow" 사용자 생성 링크 에 속성 을 추가하십시오 .
• 귀하의 사이트에 잘 고려 된 한계를 설정하십시오 -이것은 또한 보안에 속합니다.
• 점진적 향상 을 수행하는 방법에 대해 알아보십시오 .
• POST가 성공한 경우 새로 고침이 다시 제출되지 않도록 POST 후 리디렉션 하십시오.
• 접근성을 고려하는 것을 잊지 마십시오. 항상 좋은 생각이며 특정 상황에서는 법적 요구 사항 입니다. WAI-ARIA 및 WCAG 2 는이 영역에서 유용한 리소스입니다.
• 읽지 말 것을 읽으 십시오 .

보안

• 요약하기는 쉽지만 OWASP 개발 가이드 는 웹 사이트 보안을 위에서 아래로 다루고 있습니다.
• 주입 특히 SQL 주입 에 대해 알고 이를 방지하는 방법 에 대해 알고 있습니다.
• 쿠키 및 숨겨진 양식 필드 값을 포함하여 사용자 입력이나 요청에 포함 된 다른 항목을 절대 신뢰하지 마십시오.
• 소금 을 사용 하여 비밀번호를 해시 하고 행에 다른 소금 을 사용 하여 무지개 공격을 방지하십시오. 암호를 저장하려면 bcrypt (시간 테스트) 또는 scrypt (더 강력하지만 최신) ( 1 , 2 ) 와 같은 느린 해싱 알고리즘을 사용하십시오 . ( 비밀번호를 안전하게 저장하는 방법 ). NIST는 암호를 해시 PBKDF2의 승인 "및 그것의 FIPS는 .NET 승인 (추가 정보를 원하시면 여기를 ). 피 직접 MD5 또는 SHA 제품군을 사용.
• 자신 만의 고급 인증 시스템을 만들려고하지 마십시오 . 그것은 미묘하고 검증 할 방법으로 오해하는 등 쉬운 일이 그리고 당신은 심지어 때까지 모를 것이다 후에 당신은 해킹하고 있습니다.
• 신용 카드 처리 규칙을 숙지하십시오 . ( 이 질문도 참조하십시오 )
• 신임 정보, 개인 식별 정보, 신용 카드 정보와 같이 민감한 데이터가 입력 된 사이트에는 SSL / TLS / HTTPS 를 사용하십시오 . Let 's Encrypt 는 무료 인증 기관으로 도움을 줄 수 있습니다.
• 세션 도용 방지 .
• 크로스 사이트 스크립팅 (XSS)을 피하십시오 .
• CSRF ( Cross Site Request forgeries)를 피하십시오 .
• 클릭 재킹을 피하십시오 .
• 최신 패치로 시스템을 최신 상태로 유지하십시오.
• 데이터베이스 연결 정보가 보호되어 있는지 확인하십시오.
• 플랫폼에 영향을 미치는 최신 공격 기술 및 취약성에 대한 정보를 얻으십시오.
• Google 브라우저 보안 핸드북을 읽으십시오 .
• 웹 애플리케이션 해커 핸드북을 읽으십시오 .
• 최소 권한의 원칙을 고려하십시오 . 루트가 아닌 앱 서버를 실행하십시오 . ( 바람둥이 예 )
• 넣어 rel="noopener noreferrer"모든 사용자가 제공 한 링크를 target="_blank"같은 가짜 로그인 페이지로, 다른 곳으로 페이지를 리디렉션에서 대상 페이지에 자바 스크립트를 방지합니다. 더 많은 정보
• 엄격한 콘텐츠 보안 정책 사용을 고려하십시오 .

공연

• 필요한 경우 캐싱을 구현 하고 HTML5 매니페스트 뿐만 아니라 HTTP 캐싱을 이해하고 사용하십시오 .
• 이미지 최적화-반복되는 배경에 20KB 이미지를 사용하지 마십시오.
• 참조, 속도에 대한 내용을 압축 brotli , 폐 / GZIP ( 폐의 더 나은입니다 ).
• 여러 스타일 시트 또는 여러 스크립트 파일을 결합 / 연결하여 브라우저 연결 수를 줄이고 파일 간 중복을 압축하는 gzip 기능을 향상시킵니다.
• 프론트 엔드 성능 향상 및 YSlow 도구 (Firefox, Safari, Chrome 또는 Opera 필요)를 포함하여 많은 훌륭한 지침 을 제공하는 Yahoo 뛰어난 성능 사이트를 살펴보십시오 . 또한 Google 페이지 속도 ( 브라우저 확장 프로그램 과 함께 사용 )는 성능 프로파일 링을위한 또 다른 도구이며 이미지도 최적화합니다.
• 툴바와 같은 작은 관련 이미지에 CSS 이미지 스프라이트 사용 ( "HTTP 요청 최소화"지점 참조)
• 툴바와 같은 작은 관련 이미지 에는 SVG 이미지 스프라이트 를 사용하십시오 . SVG 채색은 약간 까다 롭습니다. 여기에서 읽을 수 있습니다 .
• 바쁜 웹 사이트는 도메인간에 구성 요소를 분할하는 것을 고려해야 합니다 . 구체적으로 ...
• 정적 콘텐츠 (예 : 이미지, CSS, JavaScript 및 일반적으로 쿠키에 액세스 할 필요가없는 콘텐츠)는 쿠키를 사용하지 않는 별도의 도메인으로 이동해야 합니다. 도메인 및 하위 도메인의 모든 쿠키는 요청이있을 때마다 도메인 및 해당 하위 도메인. 여기서 좋은 방법은 CDN (Content Delivery Network)을 사용하는 것이지만 대체 CDN 또는 대신 제공 될 수있는 로컬 사본을 포함시켜 CDN이 실패 할 수있는 경우를 고려하십시오.
• 브라우저가 페이지를 렌더링하는 데 필요한 총 HTTP 요청 수를 최소화하십시오.
• 템플릿 엔진을 선택하고 gulp 또는 grunt와 같은 작업 실행기를 사용하여 렌더링 / 사전 컴파일
• favicon.ico사이트 루트에 파일 이 있는지 확인하십시오 ( 예 :) /favicon.ico. HTML에서 아이콘이 전혀 언급되지 않은 경우에도 브라우저는 자동으로 요청합니다 . 이 없으면 /favicon.ico404가 많이 발생하여 서버의 대역폭이 소진됩니다.

SEO (검색 엔진 최적화)

• "검색 엔진 친화적"URL을 사용하십시오 (예 : example.com/pages/45-article-title대신 사용)example.com/index.php?page=45
• #동적 콘텐츠를 사용할 때 서버 에서 #를 변경 한 #!다음 $_REQUEST["_escaped_fragment_"]Googlebot 대신을 사용합니다 #!. 즉, ./#!page=1가됩니다 ./?_escaped_fragments_=page=1. 또한 FF.b4 또는 Chromium을 사용하는 사용자에게는 history.pushState({"foo":"bar"}, "About", "./?page=1");훌륭한 명령입니다. 따라서 주소 표시 줄이 변경되었지만 페이지가 다시로드되지 않습니다. 이를 통해 동적 컨텐츠를 유지 하는 ?대신 사용할 수 #!있으며이 페이지 다음에있는 링크를 이메일로 보낼 때 서버에 알리고 AJAX는 다른 추가 요청을 할 필요가 없습니다.
• "여기를 클릭하십시오"라는 링크를 사용하지 마십시오 . SEO 기회를 낭비하고 있으며 화면 판독기를 사용하는 사람들이 일을 더 어렵게 만듭니다.
• 기본 위치에 XML 사이트 맵이 있어야합니다 /sitemap.xml.
• 사용하여 <link rel="canonical" ... />동일한 콘텐츠를 가리키는 여러 URL이있을 때,이 문제도에서 해결할 수 있습니다 Google 웹 마스터 도구 .
• Google 웹 마스터 도구 및 Bing 웹 마스터 도구를 사용하십시오 .
• 처음에 Google Analytics를 설치 하십시오 (또는 Piwik 와 같은 오픈 소스 분석 도구 ).
• robots.txt 및 검색 엔진 스파이더의 작동 방식을 알고 있습니다.
• 리디렉션 요청 (사용 301 Moved Permanently요구) www.example.com에 example.com(또는 다른 방법으로 라운드) 구글은 두 사이트 사이에 순위 분할 방지합니다.
• 거기에 나쁜 행동을하는 거미가있을 수 있습니다.
• 텍스트가 아닌 콘텐츠가있는 경우 동영상 등을위한 Google의 추가 사이트 맵 확장을 살펴보십시오. 이에 대한 정보는 Tim Farley의 답변에 있습니다.

과학 기술

• 이해 HTTP GET과 같은 일들을, POST는, 세션, 쿠키, 그것이 무엇을 의미하는지 "무"가 될 수 있습니다.
• W3C 사양 에 따라 XHTML / HTML 및 CSS를 작성 하고 유효성 을 확인하십시오 . 여기서의 목표는 브라우저 쿼크 모드를 피하고 보너스로 스크린 리더 및 모바일 장치와 같은 비 전통적인 브라우저에서 훨씬 쉽게 작업 할 수 있도록하는 것입니다.
• 브라우저에서 JavaScript가 처리되는 방식을 이해하십시오.
• 페이지에서 사용하는 JavaScript, 스타일 시트 및 기타 리소스가로드되는 방식을 이해하고 인식 된 성능에 미치는 영향을 고려하십시오 . 이제는 일반적으로 분석 앱이나 HTML5 shim과 같은 것을 제외하고 스크립트를 페이지 의 맨 아래 로 이동 하는 것이 적절하다고 간주됩니다 .
• 특히 iframe을 사용하려는 경우 JavaScript 샌드 박스 작동 방식을 이해하십시오.
• JavaScript는 비활성화 될 수 있고 비활성화 될 수 있으므로 AJAX는 기준선이 아닌 확장명입니다. 대부분의 일반 사용자가 지금 그대로 두어도 NoScript 가 인기를 얻고 모바일 장치가 예상대로 작동하지 않을 수 있으며 사이트 색인을 생성 할 때 Google에서 대부분의 JavaScript를 실행하지 않습니다.
• 301과 302 리디렉션 의 차이점을 알아보십시오 (이는 SEO 문제이기도 함).
• 배포 플랫폼에 대해 가능한 많이 배우십시오.
• 스타일 시트 재설정 또는 normalize.css 사용을 고려하십시오 .
• JavaScript 조작 ( jQuery , MooTools , Prototype , Dojo 또는 YUI 3 등 )을 고려하면 DOM 조작에 JavaScript를 사용할 때 많은 브라우저 차이점이 숨겨집니다.
• 인식 된 성능과 JS 프레임 워크를 함께 사용하면 브라우저가 사이트에서 복제본을 다운로드하는 대신 브라우저가 이미 캐시 한 프레임 워크의 사본을 사용할 수 있도록 Google Libraries API 와 같은 서비스를 사용하여 프레임 워크를로드하는 것이 좋습니다.
• 바퀴를 재발 명하지 마십시오. 구성 요소 또는 예를 수행하는 방법에 대한 예제를 검색하기 전에. 누군가가 그것을 수행하고 OSS 버전의 코드를 공개했을 가능성이 99 %입니다.
• 그 반대로, 요구 사항을 결정하기 전에 20 개의 라이브러리로 시작하지 마십시오. 특히 클라이언트 측 웹에서는 가볍고 빠르며 유연하게 작업하는 것이 거의 항상 가장 중요합니다.

오류 수정

• 코딩하는 데 20 %의 시간을 소비하고 80 %의 시간을 유지 관리하므로 코드에 따라 코드를 작성하십시오.
• 좋은 오류보고 솔루션을 설정하십시오.
• 사람들이 제안과 비판을 가지고 당신에게 연락 할 수있는 시스템을 갖추십시오.
• 향후 지원 직원 및 유지 보수를 수행하는 사람들에게 응용 프로그램이 어떻게 작동하는지 문서화하십시오.
• 자주 백업하십시오! (이러한 백업이 작동하는지 확인하십시오) 백업 전략이 아니라 복원 전략을 세우십시오.
• 버전 관리 시스템을 사용하여 Subversion , Mercurial 또는 Git 과 같은 파일을 저장하십시오 .
• 합격 시험을 잊지 마십시오. Selenium 과 같은 프레임 워크 가 도움이 될 수 있습니다. 특히 Jenkins 와 같은 Continuous Integration 도구를 사용하여 테스트를 완전히 자동화하는 경우 .
• log4j , log4net 또는 log4r 과 같은 프레임 워크를 사용하여 충분한 로깅이 있는지 확인하십시오 . 라이브 사이트에 문제가 발생하면 무엇을 찾는 방법이 필요합니다.
• 로깅 할 때 처리 된 예외와 처리되지 않은 예외를 모두 캡처해야합니다. 귀하의 사이트에서 주요 문제가있는 위치를 보여 주므로 로그 출력을보고 / 분석하십시오.

다른

• 서버 측 및 클라이언트 측 모니터링 및 분석을 모두 구현하십시오 (반응 형보다는 능동적이어야 함).
• UserVoice 및 Intercom (또는 기타 유사한 도구)과 같은 서비스를 사용하여 사용자와 지속적으로 연락하십시오.
• Vincent Driessen 의 Git 분기 모델 따르기

유용한 답변이 아니기 때문에 많은 것들이 생략되지는 않았지만 너무 상세하거나 범위를 벗어 났거나 알아야 할 사항에 대한 개요를 얻고 자하는 사람에게는 너무 멀기 때문에 생략되었습니다. 이 부분도 자유롭게 편집하십시오. 아마도 일부 내용이 누락되었거나 실수를 한 것 같습니다.