lighthouse

lighthouse 도구는 웹페이지의 성능, SEO, 접근성 등을 검사하여 개선을 하기위한 도구이다.
pc, mobile 별로 지표가 다르게 나오는데 문제가 있을 경우 어떤식으로 해결할 수 있는지를 나타내준다.
예를들어 페이로드 크기가 클 경우 줄이라고 나오는데 요청을 최대한 작게 최적화 하는 방법을 알려준다.
이미지에 대해서는 jpeg, png대신 WebP을 사용해보라고 한다. 이처럼 성능면에서 문제가 되는 것들을 알려주고 참고해서 최적화 하면 좋을 것 같다. 하지만 무조건적으로 점수가 높은게 좋은건 아닌 것 같다.

HTML이란

원하는 것을 브라우저에 표현하기 위한 언어이다.
Hyper Text 직역하면 ‘text 를 뛰어넘다’이다. 텍스트를 어떻게 뛰어 넘을까 …. 실생활에서 책을 볼때 목차에서 원하는 주제를 보고 해당 페이지로 바로넘어가듯 컴퓨터에서는 어떠한 키워드를 클릭했을 때 해당 페이지 또는 페이지내의 특정 위치로 이동이 가능하다. 한번에 슈우우웅 하고 뛰어넘는거라 생각하면 될듯 ㅎ

Hyper text 를 어떻게 하는건데?

이 때 필요한것이 Markup Language이다. 이미 알고 있는 <h1>이런 태그들이다. 만약 아래와 같이 글이 써있다면.. 사람은 알아볼 수 있지만 컴퓨터는 알아듣지 못한다.

🎈
상품: 애플워치 
금액: 3만원 
제조사:  애플

어디가 제목인지, 설명인지 모른다는것이다.
그래서 컴퓨터가 알아들을 수 있는 언어로 마크업 즉 태그들을 사용하여 이건 제목! 이건 본문! 이라고 지정해주는것이다.
이렇게 지정해야 컴퓨터는 제목이랑 본문 구분이 가능하고 이를 토대로 웹 페이지에 표시해줄 수 있다.
html, 시멘틱 태그, 웹 접근성 등을 알아보니까 전부 연관성이있고 왜 중요하고 필요한지알 것 같다.

간단하게 말하면 .. 태그들을 상황에 맞게 잘 사용하면된다. 그러니까 html 태그 어떤 상황에 사용해야하는지가 중요하고 잘 쓰면 웹접근성이든 seo든 좋은듯 ㅎㅎㅎㅎㅎ

DOCTYPE

html5 부터 그냥 맨 위에 !doctype 라고 적어주면 된다. 해당 태그는 html5 일때 사용 가능한 것이고,

그 전 버전에서는 !doctype html public어쩌고 저쩌고~~ 가 있었는데 SGML을 기반으로 하고 , DTD 를 참조해여했기 때문이다. SGML이란 문서용 마크업 언어를 정의하기 위한 메타언어이고 XML, HTML등이 SGML로부터 파생되었다.

DTD는 문서형 정의부이다.

우리는 html5를 사용하기 때문에 doctype 선언만 해주면 되고 이게 html5로 작성된 파일이라고 받아들일 수 있다.

알고리즘 일지

1. Sum of positive

You get an array of numbers, return the sum of all of the positives ones.

Example

[1,-4,7,12] => 1 + 7 + 12 = 20

Note

if there is nothing to sum, the sum is default to 0.

테스트 코드

const { assert } = require("chai")

describe("Basic tests", () => {
  it("Testing for fixed tests", () => {
    assert.strictEqual(positiveSum([1,2,3,4,5]),15);
    assert.strictEqual(positiveSum([1,-2,3,4,5]),13);
    assert.strictEqual(positiveSum([]),0);
    assert.strictEqual(positiveSum([-1,-2,-3,-4,-5]),0);
    assert.strictEqual(positiveSum([-1,2,3,4,-5]),9);
    });
  });

나의 풀이

function positiveSum(arr) {
  return (arr.reduce((a, b) => (
      a = b > 0 ? a + b : a
  ), 0)
)}