프론트엔드 웹 개발 키워드 정리

원문 : https://tapajyoti-bose.medium.com/61-frontend-web-development-buzz-words-every-developer-should-have-in-their-vocabulary-8054e484875

---

1. API

"애플리케이션 프로그램 인터페이스"의 줄임말로 컴퓨터와 애플리케이션이 서로 통신하는 방식을 말한다.

2. 애플리케이션(Application)

애플리케이션은 기능을 수행하도록 설계된 프로그램을 의미한다. 테스크톱, 모바일 또는 웹 앱을 나타낼 수 있다.

3. 속성(Attribute)

속성은 HTML 요소으 동작을 제어하기 위해 여는 태그 내에 사용되는 단어이다.

4. 중단점(Breakpoint)

사용자가 가장 보기 좋은 크기로 웹사이트가 화면 크기에 맞게 조정되는 시점이다.

5. 브라우저(Browser)

Chrome, Firefox, Safari와 같이 웹에 액세스 하는데 사용하는 프로그램이다.

6. 부트스트랩(Bootstrap)

• 웹사이트와 웹앱을 설계하기 위한 무료 오픈 소스 프런트엔드 프레임워크를 말한다.
• 프로젝트를 초기 설정하는 것을 의미한다

7. 버그(Bug)

웹사이트 또는 앱의 에러나 결함으로 인해 웹사이트가 예상대로 동작하지 않는 것을 의미한다.

8. 캐시(Cache)

캐시는 웹사이트를 처음 방문할 때 컴퓨터에 관련 정보를 저장하여 사이트 속도를 높이는데 도움되는 임시 데이터 저장소.

웹사이트를 재 방문할 때 모든 웹사이트 정보를 로드하지 않는다.

9. CI/CD

CI/DI는 앱 개발 단계에 자동화를 도입해 고객에게 앱을 수시로 전달하는 방식.

CI/DI의 주요 개념은 지속적인 통합(continuous integration), 지속적인 전달(continuous delivery) 및 지속적인(continuous deployment) 배포이다.

CI/DI는 개발/운영팀에서 새로운 소스 코드를 통합할 때 발생할 수 있는 문제들에 대한 해결책이다.

10. 쿠키(Cookies)

인터넷 서버에서 브라우저로 보내는 데이터. 브라우저가 동일한 서버에 접속할 때 마다 서버에 접속하는 방법 및 빈도를 추적하기 위한 수단으로 데이터를 다시 보낸다.

11. 크롤(Crawl)

크롤은 페이지에서 정보를 수집하기 위해 웹사이트에 봇을 보내는, 검색 엔진에서 사용하는 프로세스이다.

봇을 통해 존재하거나 사라진 페이지에 대한 정보를 수집하고, 수집한 정보를 테이터베이스에 업데이트한다.

검색엔진에 의해 인덱싱되고 검색되는 과정이 필요하다.

12. CSS 선택자(CSS Selectors)

css 선택자는 스타일을 지정할 HTML 요소를 선택할 때 사용한다. 일반적으로는 HTML class, ID 및 태그를 선택자로 사용하지만 요소를 더 세분화 할 때 사용할 수 있는 복잡한 선택자가 많이 있다.

13. CSS 속성(CSS Property)

색 구성표나 폰트 같이 CSS에 의해 명시되는 특징.

14. CTA(Call to Action)

기부, 뉴스레터 가입 또는 사용자 등록과 같은 특정한 행동 전환, 또는 목표에 도달하도록 유도하는 웹사이트의 요소이다.

15. 디버깅(Debugging)

디버깅은 버그를 확인하고 처리하는 과정을 말한다.

16. 배포(Deployment)

배포는 스프트웨어 시스템을 사용할 수 있게 만드는 모든 활동의 조합을 의미한다.

17. 문서(Documentation)

문서는 기본적으로 웹사이트나 소프트웨어의 관리 또는 운영, 사용과 관련된 모든 사람들을 위한 가장 중요한 참조위치이다. 요구사항, 아키텍쳐 및 설계, 기술적 속성 등 최종 사용자를 위한 정보를 제공한다.

18. 돔(DOM)

Document Object Model은 XML 또는 HTML document를 트리 구조로 취급하는 크로스플랫폼 및 언어 독립적인 인터페이스 입니다. 여기서 각 노드는 document의 일부를 나타내는 object를 의미한다.

DOM은 논리적인 트리(logical tree)가 있는 문서를 나타낸다.

19. 도메인(Domain)

브라우저에 입력되는 웹사이트의 주소를 의미한다.

20. 파비콘(Favicon)

즐겨찾기 아이콘(favorite icon)의 약자로 웹사이트의 브라우저 탭에 표시되는 아이콘이다.

21. FCP(First Contentful Paint, 최초 컨텐츠풀 페인트)

사용자가 페이지를 탐색한 후 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정한다.

22. 필드(Fields)

데이터 수집을 위한 가장 기본적인 구성 요소.

웹사이트 방문자가 이름, 메일주소, 메모등을 입력하는 데 사용하는 저장단위이다.

23. 접기(Fold)

웹사이트 디자인에서, 스크롤하지 않고 볼 수 있는 웹 페이지 부분을 가르킨다.

화면 크기들은 상당히 다르기 때문에 접힌 부분을 정의하는 픽셀 수에 대한 정의는 없다.

24. 프레임워크(Framework)

프레임워크는 웹사이트를 만드는 과정을 더 빠르고 쉽게 만들기 위해 발명되었다.

프레임워크는 하나의 중앙 장소로 접근해 가져올 수 있는 솔루션, 도구, 컴포넌트들의 모음이라고 생각할 수 있다.

25. 깃(Git)

개발자가 코드를 저장하고 관리할 수 있는 버전 관리 시스템이다.

26. 깃허브(GitHub)

깃허브는 깃을 위한 클라우드 인터페이스이다.

또한 버그 추적, 작업 관리 및 프로젝트 위키와 같은 자체 기능도 제공한다.

27. 헥스(Hex)

헥스 컬러 코드(16진수 색상 코드)는 화면에 표시할 색상 값을 제공하는 가장 일반적인 컬러 코딩 시스템이다.

28. HTML(Hypertext Markup Language)

HTML은 폼과 기능 면에서 웹사이트를 구축하기 위해 사용되는 코딩언어이다.

29. HTTP(Hypertext Transport Protocol)

월드 와이드 웹(www)에서 사용되는 데이터 전송 프로토콜이다.

30. HTTPS

기본적인 로직은 HTTP와 동일하지만, 암호화 방법을 사용하여 웹 페이지에서 주고받는 데이터를 보호한다.

31. iFrame

웹사이트 내에 다른 웹사이트를 포함시키기 위해 사용되는 HTML요소이다.

32. 자바스크립트(JavaScript)

자바스크립트는 웹 개발자가 웹 페이지에 자동화, 애니메이션 및 상호 작용을 추가 하는데 사용하는 클라이언트 사이드 언어이다.

33. LCP(Largest Contentful Paint, 최대 콘텐츠풀 페인트)

LCP는 가장 큰 콘텐츠 요소가 화면에 렌더링되는 데 걸리는 시간을 측정하는 성능 메트릭이다.

34. 라이브러리(Libraries)

라이브러리는 모여 있어야 동작하며, 프로그램이나 다른 라이브러리에서 사용될 수 있는 모듈의 집합이다.

패키지는 라이브러리, 실행 파일 또는 둘 다 포함할 수 있는 배포단위이다.

35. Light House

웹페이지의 품질을 테스트하고 개선하기 위한 자동화 도구이며, 오픈소스이다.

36. 메타 태그(Meta Tag)

웹 페이지나 요소들에 대한 추가 정보를 의미한다.

예를 들어 Google 검색 결과에 표시되는 내용, 이미지에 대한 사진 크레딧 등이 있다.

37. 경량화(Minification)

경량화는 파일크기를 줄이기 위해 코드와 마크업을 최소화 하는 과정이다.

예를 들어 HTML파일을 만들 때 개박자는 코드의 가독성을 높이기 위해 공백이나 주석, 변수를 사용하여 작업한다.

웹 페이지가 활성화될 준비가 되면 개발자는 이러한 주석과 공백을 제거하여 코드를 최소화하고, 페이지 로드 시간을 단축한다.

38. 모바일 퍼스트(Mobile - first)

모바일 퍼스트는 웹 사이트를 구축할 때 테스트탑보다 모바일 기기를 우선시 하는 웹 디자인 및 개발에 대한 접근법이다.

데스크탑을 우선시 하여 웹 사이트를 구축한 다음에 모바일 장치에서 어떻게 보일지 고려하는 것 대신, 모바일 퍼스트 접근 방식으로 웹 사이트를 먼저 작은 화면에 맞게 구축한다.

39. MVP(Minimum Viable Product)

최소 실행 가능 제품을 뜻하는것으로, 시장에 출시할 수 있는 제품의 가장 축소시킨 버전을 의미한다.

40. 네비게이션(Navigation)

다른 페이지를 가리키는 웹 사이트의 링크이다. 일반적으로는 사이트 상단의 menu 또는 footer에서 찾을 수 있다.

41. NPM

자바스크립트 런타임 환경인 node.js를 위한 기본 패키지 매니저이다.

42. 여는/닫는 태그(Opening/Closing Tags)

웹 페이지 구조를 만드는 데 도움이 되는 HTML요소들을 지탱하는 괄호(<>)이다.

닫는 태그에는 (</>) 슬래시가 포함된다.

43. 프로미스(Promises)

프로미스 객체는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타낸다.

44. 리다이렉트(Redirects)

리다이렉트는 특정 URL에서 웹 페이지를 방문했을 때, 다른 URL로 변경되는것을 의미한다.

45. 해상도(Resolution)

해상도는 이미지 또는 화면의 크기를 설명하는 데 사용하는 매트릭이다.

46. 반응형 디자인(Responsive Design)

반응형 디자인은 사용자가 어떤 장치에서 웹 사이트를 보던지에 관계없이 웹 사이트가 올바르게 보이도록 하는 작업이다.

47. SaaS(Software as a Servise)

Saas는 인터넷을 통해 애플리케이션을 서비스로 제공하는 방법이다.

48. 검색 엔진 최적화(Search Engine Optomization)

SEO로 약칭되며, 검색 엔진을 통해 최고로 노출되도록 콘텐츠를 만들고 수정하는 프로세스를 의미한다.

49. 시멘틱HTML (Semantix HTML)

시맨틱 HTML은 단순히 사이트의 디자인이 모양을 정의하기 위해서가 아니라, 웹 페이지와 웹 애플리케이션의 의미와 정보를 강화하기 위해 HTML 마크업을 사용하는 것이다.

50. 서버(Server)

사용자가 웹 사이트에 접속할 수 있도록 소프트웨어를 실행하고, 호스팅을 제공하는 컴퓨터이다.

51. 서버 사이드 렌더링(Server-Side Rendering)

서버 사이드 렌더링(SSR)은 서버의 HTML 파일을 클라이언트를 위해 완전히 렌더린됭 HTML페이지로 변환하는 애플리케이션의 기능이다.

52. 사이트맵(Sitemap)

계층적 순서로 구성된 웹사이트의 모든 페이지에 대한 개요이다.

53. 슬라이더(Slider)

슬라이더는 일반적으로 이미지와 카드들로 구성된 캐러셀(Carousel)이다.

사진과 링크, 컨텐츠 회전을 통해 각각 강조하는 특징이 있다.

54. SVG

SVG파일은 디지털 이미지를 직사각형, 선 및 기타 기하학적 요소로 표현하여 이미지를 모든 크기로 확장할 수 있다.

55. 타입스크립트(TypeScript)

자바스크립트의 엄격한 구문 상위 집합(syntactical superset)이며 자바스크립트 언어에 선택적으로 정적타입을 추가 할 수 있다.

56. UI

UI는 방문자와 컴퓨터 간의 상호 작요 인터페이스이다.

57. UX

유저의 경험이 얼마나 만족스럽고 성공적인지에 집중한 UI와 사용자의 상호 작용을 의미한다.

58. 위젯(Widgets)

하나 이상의 다른 소프트웨어 플랫폼용으로 만들어진, 비교적 간단하고 사용하기 쉬운 소프으웨어 애플리케이션 또는 컴포넌트이다.

59. 와이어프레임(Wireframe)

디자인 요소 없이 웹 페이지의 구조와 내용을 보여주는 시각적 가이드이다. 디자인에 방해받지 않고 콘텐츠의 레이아웃과 계층 구조에 집중할 수 있다.

60. WYSIWYG(What You See is What You Get)

"당신이 보는 것은 당신이 얻는 것이다"의 뜻으로, 콘텐츠를 리치 텍스트(형식이 있는 텍스트)로 수정할 수 있는 시각적 콘텐츠 편집기이다.

61.Yarn

NPM과 마찬가지로 프로젝트 매니저를 겸하는 패키지 매니저이다.