본문 바로가기

클라이언트/웹 기술
(10)
렌더링 순서(트리 생성, 레이아웃, 페인트) 서버 사이드 렌더링, 클라이언트 사이드 렌더링과 같이 '렌더링'에 대한 이야기는 굉장히 많이 접했으나 정확히 그에 대해 알지는 못했다. 구글 chrome 브라우저에 렌더링에 관한 설명이 잘 정리되어 있어 참고해 보았다. // 렌더링 - 웹 브라우저가 HTML, CSS, JavaScript 등을 해석하여 사용자에게 보여지는 페이지로 변환하는 과정 Loading - HTML, CSS 파일, 외부 스크립트와 같은 모든 자원들을 받아온다. Scripting 1) 서버에서 받아온 HTML을 파싱하여 DOM 트리를 생성한다. 2) CSS 같은 스타일들을 읽어 CSSOM 트리를 생성한다. 3) 초기 페이지 로딩 시, 생성된 DOM 트리를 자바스크립트가 동적으로 구성하거나 수정한다. Rendering - DOM 트리와..
HTTP 헤더(HTTP Header) // HTTP 헤더, HTTP Header - HTTP 요청과 함께 정보를 전달하는 부수적인 방식 > 요청에 첨부하는 세부사항 - 메타데이터와 같은 키-값 쌍에 해당한다. icanhazdadjoke(https://icanhazdadjoke.com/api) 사이트를 활용해 테스트 해보았다. GET 을 이용해 random dad joke(아재개그)를 얻을 수 있는데, 응답이 HTML 형식이다. JSON 형식으로 응답받으려면 Accept라는 헤더를 지정해야 한다고 되어 있다. Header를 추가해주었다. (Postman 사용) 이제 JSON 형식으로 random 아재 개그를 받을 수 있다.
HTTP 상태 코드(HTTP Status Codes) // HTTP 상태 코드, HTTP Status Codes) - HTTP 응답에서 볼 수 있는 상태 코드 - 일반적으로 요청이 성공적으로 처리되면 2로 시작하는 상태 코드가 뜬다.(주로 200) - 클라이언트 사이드에서 흔히 볼 수 있는 오류 상태 코드는 400, 401, 404이다. 400 Bad Request : 서버에 보낸 요청이 잘못되었거나 서버가 처리할 수 없는 경우 발생 401 Unauthorized : 인증 문제로 클라이언트가 요청을 수행할 권한이 없을 경우 발생 404 Not Found : 존재하지 않는 엔드포인트(URL)를 요청하는 경우 발생
포스트맨(Postman) // 포스트맨, Postman - HTTP 요청을 해서 여러 API를 테스트하고 요청을 저장하는 도구 - 특정 URL에 다양한 헤더나 매개변수를 전달하여 요청을 테스트할 수 있다. - https://www.postman.com/downloads/에서 다운로드 받을 수 있다. (웹으로도 사용 가능) 계정이 있어야 사용할 수 있다. Download Postman | Get Started for Free Try Postman for free! Join 25 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster. www.postman.com - 다운로드를 받고 싶..
SEO // SEO (Search Engine Optimization) - 검색 엔진 최적화 - 검색 엔진에서 더 찾기 쉽도록 사이트를 개선하는 과정 얼마 전 구글 서치, Bing 웹 마스터 도구, 네이버 서치 어드바이저에 블로그를 등록했다. 색인을 생성하는 과정에서 SEO에 적합하지 않다는 오류를 보면서 SEO에 대해 접하게 되었다. 대부분의 사용자들은 원하는 정보를 검색할 때, 검색 결과에서 상위에 노출된 사이트나 게시글들을 주로 클릭한다. 그렇기 때문에 웹사이트가 검색 엔진 결과의 상단에 위치할수록 더 많은 트래픽을 얻게 된다. 더 많은 사용자를 유입하고 싶다면 SEO는 필수적인 과정이자 전략인 것이다. // SEO 예시 SEO는 웹사이트를 만드는 개발자가 자신의 사이트를 검색 결과 상단에 위치하게 하기 ..
웹 접근성(Accessibility) // 웹 접근성(Accessibility) - 모든 사용자가 웹사이트에 쉽게 액세스하여 이용할 수 있도록 하는 것 - 사이트의 리소스 및 기능들을 누구나 쉽게 이용할 수 있어야 한다. - 신체적 장애나 접근 기기, 위치 때문에 접근할 수 없는 문제를 최소화해야 한다. // WCAG의 웹 접근성의 네 가지 원칙 Perceivable: 모든 사용자가 인지할 수 있어야 한다. - 시각, 청각 등 특정 감각으로만 인지할 수 있도록 만들면 안 된다. - Touch, See, Hear, Speak 관점 모두 고려해야 한다. - 스크린 리더, 점자 디스플레이, 고대비 모드, 색약 등을 고려해야 한다. Operable : 다양한 기기, 물리적 환경에서 사용할 수 있어야 한다. - 마우스가 없는 사용자, 터치스크린을 사..
Emmet //Emmet, Zen-Coding - CSS 선택자 문법을 사용해서 HTML/CSS 코드를 손쉽게 작성하는 기능 - 생산성 도구 - 참고: https://docs.emmet.io/cheat-sheet/ Cheat Sheet Download cheat sheet as printable PDF A5 docs.emmet.io - 이클립스 다운로드 링크: http://download.emmet.io/eclipse/updates p a img input div#box1 h1#title div.item a.link img.cat div.one.two.three div#box1.box div[title] div[title=상자] img[width] img[width height] img[width=200 heigh..
유효성 검사 //유효성 검사 - HTML/CSS 코드를 작성하고 나면 항상 유효성 테스트를 실시해야 한다. - 마크업 문법상 에러가 없는지, 표준에 맞게 작성되었는지 알 수 있다. - 사용성과 접근성, SEO 최적화 개선에도 도움이 된다. - https://validator.w3.org/ > 유효성 검사 사이트 The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org