프론트엔드란?

사용자가 웹 사이트 또는 웹 애플리케이션의 URL을 입력하거나 모바일 애플리케이션을 다운로드할 때, 깔끔한 레이앗웃을 가진 인터페이스를 보게 된다. 이때 사용자가 보는 인터페이스를 '프론트엔드'라고 부른다.

사용하기 쉽고 완전한 기능을 갖춘 인터페이스가 사용자들의 참여을 이끌어 내기에 매끄럽게 동작하는 프론트엔드를 구축하는 것이 중요하다.

 

프론트엔드 개발이란?

웹사이트에서 보고 상호작용하는 모든 것들이 프론트엔드 개발 분야에 속한다.

주로 웹 및 모바일 솔류션의 사용자 인터페이스(UI)와 사용자 경험(UX)을 만드는데 초점을 두고 있다.

 

슬라이더, 드롭다운(drop-down) 메뉴, 레이아웃, 폰트, 컬러 등 모든 요소들을 개발한다. 

HTML, CSS, 자바스크립트(Javascript)가 중요한 역할을 한다.

 

일반적으로 사용자들을 위한 구체적인 요구사항, 목표, 기회 등을 이해하고 그에 따른 프론트엔드를 만들어 낼수 있어야 한다.

사용자 인터페이스를 디자인하기 전에 목업(mockup), 와이어 프레임(wireframe), 클릭할 수 있는 (prototype)을 만들어서 사용자  경험 안에 이슈들을 확인하고 문제를 해결하는것이 중요하다.

 

프론트엔드 개발에서 사용하는 언어는 어떤 것들인가?

HTML

-  HTML은 하이퍼텍스트와 마크업 언어로 하이퍼텍스트는 페이지들 사이의 링크를 정의, 마크업 언어는 웹페이지의 구조를 정의

 

CSS

- CSS는 종속 스타일 시트(Cascading Style Sheets)의 약자로 웹페이지에 다양한 스타일을 적용할 수 있게 해줌으로 애플리케이션 페이지를 표시하는 프로세스를 단순하게 만들어ㅈ는 디자인 언어 CSS는 HTML보다 독립적으로 작동해서 웹페이지를 보완해 준다.

 

자바스크립트(Javascript)

- 자바스크립트는 사용자들을 위해 상호작용하는 애플리케이션을 만들어 준다. 웹사이트의 기능성을 향상시키는데 사용되며 웹 기반의 소프트웨어 또는 게임들을 실행할 수 있게 해준다.

 

프론트엔드 개발에서 사용되는 테크놀로지

AngularJS

- 앵귤러JS는 오픈소스 자바스크립트 프레임워크로 주로 싱글 페이지 웹 애플리케이션(SPA)을 만드는데 사용된다.

앵귤러JS는 정적(static) HTML을 동적(dynamic) HTML로 변환해주는 기능이 있다. (오픈소스기에 누구나 자유롭게 사용하고 변경할 수 있다.)

 

ReactJS 

- 리액트는 프론트엔드 개발에서 사용할 수 있는 유연하고 효과적인 선언형(declarative)의 자바스크립트 라이브러리입니다. 컴포넌트 기반의 오픈소스 라이브러리이며, 애플리케이션의 반응형 뷰 레이어(view layer)다. (페이스북이 개발 유지관리)

 

Bootstrap

- 부트스트랩은 반응형 웹 애플리케이션 및 웹 사이트를 개발하기 위해 사용되는 오픈소스 무료 도구다. 가장 인기 있는 자바스크립트, CSS, HTML 프레임워크이며, 모바일 우선의 반응형 웹사이트를 구축할 수 있게 해준다.

 

 

2022년 현재 무언가를 CSS로 할 수 있다면 CSS로 하는게 JS코드를 부분적으로 줄일 수 있다.

접근성을 처음부터 고려해라. 계획 및 설계 단계에서부터 염두에 두는 것이 가장 이상적. 명암비와 폰트 크기, 시멘틱 HTML 사용, 키보드 내비게이션과 같은 항목을 개선하는 것부터 시작하면 큰 차이를 만들어 낼 수 있다.

 

리액트 - Next JS, Gatsby, Remix, Redwood, Blitz

뷰 - Nuxt

스벨트 - SvelteKit