AI Platform / Web

TTFB(Time To First Byte)는 서버의 성능을 보여주는 척도로, HTTP를 요청했을 때, 처음으로 정보(Byte)가 브라우저에 도달하는 시간을 의미한다. 당연한 말이지만, SEO에 직결되고 UX적으로도 사용자가 빠르게 데이터를 확인할 수 있게 하기위해 확인해야하는 정보이다. 1. TTFB TTFB는 위에서 설명한 것과 같이 웹서버의 응답을 측정하기 위해 사용한다. 좋은 사이트의 경우는 0.8s 즉 800ms 안으로 TTFB가 걸릴 수 있는 것이 좋다. 2. TTFB 확인하기 TTFB를 확인하는 부분은 크롬의 개발자 도구를 활용하면 간단하다. 개발자 도구의 네트워크 부분을 들어간다. 그리고 내트워크 내부에서, 아래와 같이 waterfall부분을 찾자. 색이 있는 이쁜 컬러부분에 마우스를 올려..

마우스 클릭 시 type 지정하여, event 값을 가져오는 데 어려움을 겪는 사람들을 위해 글을 적어보겠다. 보통 에러가 나는 부분은 event를 가지고와서 핸들링할 때, 주로 발생을 한다. event.target as HTMLElement 를 활용해서 사용하는 방식을 사용하면 된다. 사실 간단히 아래와 같이 구현이 가능하다. type CustomMouseEvent = MouseEvent; const TestComponent = () => { const handleSelect = (event: CustomMouseEvent) => { const eventTarget = event.target as HTMLElement; console.log(eventTarget.innerTest) }; return (..

보통 우리는 키보드를 javascript로 핸들링 할때, keyCode를 사용해서 적용 한다. 왜냐하면 구글링을 하다보면 KeyCode에 관한 내용들이 많기 때문이다. 하지만 아래의 문서를 보면 Deprecated 되었다고 나와있는 것을 알 수 있다. 정단히 정리하면, 웹 표준에서 제거가 되었다. 호환성 목적으로 사용하기는 하지만, 사용하지 않는것을 추천한다. 1. keyCode 그래도 대부분 사용하지 않더라도 대략적인 사용법은 아래와 같다. 요즘 리액트를 많이 쓰니 리액트 기준으로 관련 로직을 보면 아래와 같다. 아래와 같이 간단하게 사용가능하다. onKeyDown 리스너를 통해서 키보드를 누르는 event를 받는다. 그리고 받은 이벤트에 event.keyCode를 보면 숫자가 적혀있는 것을 알 수 있..

키보드 포커싱에 대해 알아보자. 기본적으로 마우스 없어도 tab을 이용해서 input 값들을 넣을 수 있다. 그리고 사용자 기준으로 tab을 눌렀을 때 포커싱(마우스 커서)의 위치가 예상 되는 곳에 존재할 수 있도록 만들어 보자. 중요하지 않지만, 매우 중요한 기능이다. 웹 접근성관 관련된 키보드 포커싱에 대해 알아보자. 0. 기본 포커싱 우리는 input창을 누르면 자연스럽게 input창에 커서가 들어간다. 즉, 웹은 사용자가 사용하는 부분에 대해서는 기본적으로 자동으로 포커싱을 시켜준다. 상호작용하는 element로는 a 태그, input 태그, select 태그, button 태그들이 있다. 그리고 이러한 태그들을 tab키를 이용해서 키보드로 이동을 할 수 있다. (반대로 이동은 shift + ta..

HTML 작성을 하고, js css를 넣어서 웹을 구성을 한다. 그리고 Reactjs 나 nextjs에서도 라이브러리를 이용해서 데이터를 넣는다. 이때 동기적으로 Javascript 파일을 가지고와서 핸들링을 많이한다. 오늘은 HTML 자체에서 js파일을 불러오는 방식에 대해 알아보도록 하자. 기초지만 쉽게 지나치는 부분이라 할 수 있다. 0. javascript 파일 불러오기 기본적으로 아래와 같이 javscript를 부르는 코드는 아무 위치에서나 사용이 가능하다. Hanpy javascript Test html 밖에서 사용해도 가능하다. javascript 파일을 불러오는 방식은 위와 같이 src를 사용해서 javascript 코드를 가져올 수 있다. 아니면 javascript 코드를 아래와 같이 직..

javascript의 작동 방식에 대해 알아보자. 동기적 방식과 비동기적 방식에 대한 근본적인 원리에 대해 심층적으로 알아보자. 1. Javascript의 동기적 작동방식 우선 코드를 보자. function one() { two() console.log('one') } function two() { console.log('two') } one() 위의 코드는 어떻게 작동할까? 결과는 아래와 같다. two one one 함수를 실행한다. one 내부의 two 함수가 실행된다. console.log('two') 가 실행된다. console.log('one')이 실행된다. 위의 예시로 Javascript는 위에서 아래로 실행되고, 왼쪽에서 오른쪽으로 실행되는 것을 확인할 수 있다. 이렇게 순서대로 실행되는 것..

타입스크립트를 사용하면 기본적으로 타입 추론과 체크를 진행한다. 하지만 부분적으로 타입 보장이 안되는 경우가 있다. 왜냐하면 느슨하게 타입을 확인하기 때문이다. 1. nodejs에서 타입 단언 시키기 assert를 활용해서 type을 단언하여 함수를 만들어 보자. assert() 함수는 런타임 시 불변 조건(invariant)를 검사하는 함수이다. const assert = require('assert') function add(x, y) { assert(typeof x === 'number') assert(typeof y === 'number') return x * y // number * number } add(1, 1) // 2 add('1', 1) // AssertionError [ERR_ASSE..

nodejs를 통해 백엔드를 만들거나 react로 프런트를 만들 때, null 이나 undefined를 피하기 위한 분기를 조금더 똑똑하게 해보자. 1. Nullish coalescing operator (??) 우선은 병합 연산자에 대해 알아보자. 병합 연산자는 왼쪽 피연산자기 null이거나 undefined의 경우는, 오른쪽 피연산자를 반환하고, 그렇지 않은 경우는 왼쪽을 반환한다. 아래의 예를 보자. const foo = null ?? 'default string'; console.log(foo); // "default string" const aoo = undefined ?? 'default string'; console.log(aoo); // "default string" const boo = ..