11월 4주차 기록

첫 자취방에서 일주일

배워가기

corepack

• corepack은 node v16.9.0, v14.19.0부터 기본 포함된 실험적 기능으로 yarn, pnpm 같은 package manager를 프로젝트별로 지정하여 사용할 수 있게 한다.

Ref

• https://luvstudy.tistory.com/188
• https://nodejs.org/api/corepack.html

css transform-origin

• transform과 함께 사용하는 옵션으로, 요소의 transform을 위한 기준점을 정하기 위해 사용된다.
• 기본적으로 transform-origin 속성의 기본값은 중앙(center) 이다. transform-origin: 50%, 50%

Media elements such as <audio> and <video> must have a <track> for captions.

video 태그는 반드시 track 태그를 사용해서 caption을 달아야 한다

track 태그 <track> 요소는 미디어 요소(<audio>, <video>)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용한다. 트랙은 WebVTT (en-US)(Web Video Text Tracks, .vtt 파일) 형식을 사용해야 한다.

a11y 옵션으로, 지키지 않는 경우도 종종 있는듯 🤷‍♀️

Ref https://developer.mozilla.org/ko/docs/Web/HTML/Element/track

a 태그 target=”_blank” vs target=”blank”

target="blank"는 오타같은데… target="_blank"와 같은 방식으로 동작한다.

• _target="_blank"는 기본속성 중 하나로 클릭시 계속해서 새로운 창이 열리게 된다.
• 반면, _target="blank"는 기본속성은 아니지만 “blank” 라고 불리는 윈도우창 또는 탭 이름을 타겟으로 해서 페이지를 연다.

Ref https://velog.io/@tngusglaso/HTML-링크-targerblank와-targerblank의-차이점

input 태그의 max vs maxLength

• minlength 와 maxlength 속성은 요소에 허용된 문자의 최소, 최대 ‘**길이’**를 제한한다. 제한한 범위를 넘어가면 작성이 불가하다.
• min과 max 속성은 input type이 date, datetime, datetime-local, month, number, range, time, week일 때 값의 최소/최대 ‘**값’**을 제한한다

test vs match 신기한 케이스

// global 인자를 넣었을 때의 동작

var reg = /abc/g;
!!"abcdefghi".match(reg); // => true
!!"abcdefghi".match(reg); // => true
reg.test("abcdefghi"); // => true
reg.test("abcdefghi"); // => false

이는 Regexp이 새로운 match 인자를 찾았을 때 lastIndex를 기억하기 때문이라고 한다.

그래서 .test() 메소드를 쓰는 것은 위험하다!

왜 이렇게 만들었을까? 🤷‍♀️

Ref StackOverflow

yaml과 json

yaml은 json의 단점을 보완하기 위한 superset이다.

json의 단점은 생각보다 많았다.

• 주석을 지원하지 않는다. 이 때문에 설정파일로 사용하기 어려워진다.
• 문법이 유연하지 않다.
• 모든 문자열에 따옴표가 강제되며, "(쌍따옴표)만 사용해야 한다.
• 모든 프로퍼티마다 쉼표(,)로 구분해야 하며, trailing comma는 불가능하다.
• 중괄호를 모두 닫아야 한다. 만약 한쪽을 열고 닫지 않는다면 당연히 에러가 난다.
• 반복적으로 쓰이는 값을 일일이 수정하거나 관리하기 어렵다. 특히 설정파일에서는 이런 문제가 심해진다.

gitlab ci

gitlab ci에서 각 stage에 속하는 job들은 병렬적으로 실행된다.

• allow_failure: true를 설정하면 job이 실패해도 파이프라인이 계속 실행된다.
• when: manual: 수동으로 잡을 실행할 수 있는데, 이 경우에 allow_failure를 같이 설정해주면, 수동 잡이 실행되지 않더라도 그 뒤에 잡들이 영향을 받지 않아서 같이 쓰라고 한다. 위의 경우와 반대로 사용하고 싶은 경우에도 유용할 것 같다.

Ref

• https://docs.gitlab.com/ee/ci/yaml/index.html#stages
• https://docs.gitlab.com/ee/ci/yaml/index.html#allow_failure

Array.prototype.every

• every 함수는 빈 배열일 경우 true 를 반환한다. (ecma262 NOTE 1 참조)
• every 함수는 인자로 받은 콜백함수를 배열 요소 개수만큼 호출하는데, 콜백함수가 false를 반환하는 항목을 찾으면 즉시 false를 반환한다.
• every 함수의 코드 마지막은 return true이다.
• 배열 요소 개수가 0개라면 콜백함수는 한번도 실행되지 않고, 가장 마지막 코드인 return true가 실행되면서 true 를 반환한다.

function isNumber(value) {
  return typeof value === "number";
}

[].every(isNumber) // true
[].every(() => true) // true
[].every(() => false) // true

빈배열에 대해서도 연산이 실패해야 한다면 배열 길이를 체크하는 조건문을 추가해주자.

const isAllNumbers = arr.length > 0 && arr.every(isNumber);

이것저것

• EOD - ‘End of Date’의 약자로,. 오늘 일과 종료까지 끝내야 하는 일을 의미
• IDL - Interface Description Language, 인터페이스 정의 언어로, 특정 프로그래밍 언어와 별도로 지정된 객체의 인터페이스에 사용되는 일반 언어다. (Ref)
• css transition은 계산 가능한 수치값에 대해서만 동작한다. 예를 들어, visibility는 hidden 아니면 visible 두 가지로 나뉘기 때문에 transition 속성으로 설정할 수 없다.

기타공유

Cursor - AI-first Code Editor

이제 AI 기반의 툴이 엄청나게 나오는구나. 근데 엄청 비싸당. 💸

Ref https://cursor.sh/

테슬라 로드스터 모델 오픈소스화

테슬라 로드스터 모델에 대한 모든 사항을 오픈소스로 공개

Ref https://twitter.com/elonmusk/status/1727392569238159491?s=20

아마존 제공 무료 AI class

Ref https://lifehacker.com/tech/amazon-offering-ai-classes-for-free?fbclid=IwAR27BOMHvHLtr0fxd7cfU5ZdDr5vwHIFuLoW9tsPeUU4P0goOTIRaBo1VjY

마무리

첫 자취 1주차!!

아직은 너무 좋당. 본가에서 이것저것 많이도 훔쳐왔다. ㅋㅋㅋ

방, 부엌, 화장실 모두 나의 손길만 닿다보니 괜히 더 쳐다보고, 관리하게 된다.

2년 동안 잘 지내보자구 🤓