뷰포트(Viewport)
뷰포트는 웹 페이지에서 사용자가 볼 수 있는 영역이다. 뷰포트는 모바일, 태블릿, 데스크톱 등 웹 브라우저가 동작하는 장치의 화면 크기가 각각 달라서 생긴 개념이다. 웹 페이지가 어떻게 표시되는지와 관련이 있으며, 반응형 웹 디자인 및 모바일 최적화와 같은 작업에 중요한 역할을 한다. 뷰포트 관점에서 HTML 요소의 넓이는 viewport width 라는 의미의 vw
, 높이는 viewport height라는 의미의 vh
를 사용한다. 적용되는 값은 100vh
처럼 적용하면 퍼센트로 인식되어 적용된다.
보일러 플레이트 (Boiler Plate)
비슷한 구조나 패턴을 계속해서 반복 작성해야 하는 코드를 의미한다. 특정 프로젝트를 여러개 작업할 때, 공통적으로 수행해야할 기본 양식이 필요하면 이를 만들어 유지보수를 높일 수 있다. 또한 코드를 줄이거나 자동화함으로써 개발자는 코드를 더 간결하게 작성할 수 있고, 개발하는 시간을 크게 줄일 수 있다.
메모리 누수 (Memory Leak)
메모리 누수는 프로그램에서 메모리를 할당한 뒤에 그것을 제때에 반환하지 않아, 계속 남아있는 상황을 뜻한다. 메모리 누수는 시스템 성능을 떨어뜨리고, 오랜 기간 사용하면 시스템이 불안정해질 수도 있다. 때문에 이를 방지하기 위해서는 메모리를 적절히 관리하고 제때에 반환하는 작업이 필요하다.
벤더 접두사 (Vendor Prefix)
벤더 접두사란 각각의 제조업체가 자신의 제품을 식별하기 위해 사용하는 특별한 앞부분 글자이다. 주로 네트워크 기기에서 볼 수 있는데, 각 제조업체는 자기만의 특별한 글자를 사용하여 자신의 제품을 알린다. 이를 통해 네트워크에서 어떤 기기가 어떤 회사에서 나온 것인지를 알 수 있다.
웹 안전 글꼴 (Web Safe Fonts)
웹 안전 글꼴은 모든 웹 브라우저에서 동일하게 보이는 폰트들을 가르킨다. 이러한 폰트들은 거의 모든 운영 체제와 브라우저에서 기본적으로 지원되므로 웹 페이지를 다양한 환경에서 일관된 형태로 표시할 수 있도록 지원한다. 웹 안전 글꼴을 사용하면 웹 페이지가 여러 기기와 브라우저에서 일관성 있는 디자인을 유지할 수 있다.
미들웨어 (Middleware)
미들웨어는 소프트웨어 응용 프로그램들이 서로 통신 및 데이터 처리를 할 수 있도록 도와주는 중간 계층의 소프트웨어이다. 각각 다른 시스템이나 언어로 개발된 애플리케이션들 간에 정보를 교환하고 상호작용하는 데 사용된다. 미들웨어는 표준화된 인터페이스를 제공하여 서로 다른 시스템이나 애플리케이션 간의 통합을 용이하게 해준다.
템플릿 엔진 (Template Engine)
템플릿 엔진은 동적으로 웹 페이지를 생성하는 데 사용되는 도구로, 특정 형식의 템플릿과 데이터를 결합하여 사용자에게 동적인 콘텐츠를 보여준다. 이는 웹 개발에서 반복되는 작업을 줄이고 코드를 효율적으로 관리하는 데 도움이 된다. React가 템플릿 엔진 중 하나이다.
라우팅 (Routing)
웹 서버에서 URL에 명시된 자원을 찾는 과정을 뜻한다. 보통 웹에서의 라우팅은 항상 서버에서 일어난다. 하지만 자바스크립트 내장 객체 (BOM)의 기능인 location
과 history
를 통해 클라이언트에서 접근할 수 있다. 이처럼 클라이언트 측에서 발생하는 라우팅을 '클라이언트 측 라우팅(client-side routing)' 이라 한다. React와 같은 SPA 방식이 운영하는 방법이기도 하다. 이 기능 덕분에, 페이지 이동이 발생할 때 실제 서버에 전송하는 URL이 아니고 클라이언트에서 이동하는 방식이므로 화면 깜빡임이 발생하지 않는다. 결과적으로 더 나은 사용자 경험을 줄 수 있다.
해시 (Hash)
해시는 임의의 데이터를 고정된 길이를 가진 일련의 문자열로 변환하는 알고리즘이다. 동일한 입력에 대해서는 항상 동일한 해시 값이 생성되며, 해시 함수는 일방향성이 있어 해시 값을 통해 원본 데이터를 복원하기 어렵다. 주로 유저의 비밀번호를 암호화하는데 사용되며, 데이터의 무결성 검증, 검색 성능 향상, 보안 등 다양한 용도로 활용된다.
레이아웃 시프트 (Layout Shift)
웹 페이지의 화면에서, 늦게 로드되는 컨텐츠들로 인해 먼저 로드된 컨텐츠가 밀려나는 현상을 의미한다.
만약 이미지 아래에 테이블이 나와야 할 경우, 이미지가 늦게 로드됨으로 인해 테이블이 먼저 보였다가 아래로 밀려나는 경우가 포함된다. 이는 사용자 경험을 해칠 수 있기 때문에 컨텐츠의 크기를 미리 지정하거나 로딩바 / 스켈레톤을 띄우는 등의 조치가 필요하다.