Front-End가 뭐야? 대단한 기술이지~ [Front-End, 기술 동향, 용어 설명]

Front-End가 뭐냐고 물으면 제대로 대답을 못해서 이참에 공부를 해봤다.

※ 주의 ※
이 블로그는 어디까지나 CS관련 지식을 정리하는 것이 목적입니다. 제가 이해한 내용이 잘못 된 것 같다면 댓글로 남겨주세요. 여러분의 관심이 저의 지식 함양에 도움이 됩니다.

>> Front-End란? 

• "웹 개발"에서 사용자가 직접 상호작용하는 "웹 페이지"나 "애플리케이션"의 "사용자 인터페이스(UI)"부분을 설계하고 개발하는 영역이다. "사용자의 경험(UX)"을 직접적으로 개선하고, 웹 사이트의 시각적 요소와 "사용자 인터랙션"을 구현하는 것이 주요 목표이다. 프론트엔드 개발은 크게 "HTML", "CSS", "JavaScript" 세 가지 핵심 기술을 기반으로 한다.

>> 웹 개발은 뭔가용? 

• 웹 개발(Web Development)은 인터넷 또는 인트라넷을 통해 접근할 수 있는 웹 사이트나 웹 애플리케이션을 만드는 과정을 의미합니다. 이 과정은 단순한 텍스트 페이지부터 복잡한 웹 기반 애플리케이션, 소셜 네트워크 서비스, 전자 상거래 사이트에 이르기까지 다양한 웹 콘텐츠의 제작과 유지 보수를 포함합니다. 웹 개발은 크게 프론트엔드(클라이언트 사이드) 개발, 백엔드(서버 사이드) 개발, 그리고 풀스택 개발로 구분될 수 있습니다.
• 프론트엔드 개발 (Front-End Development)
  
  • 밑에서 계속 설명
• 백엔드 개발 (Back-End Development)
  
  • 백엔드 개발은 웹 애플리케이션의 서버 사이드를 담당
  • 데이터베이스 관리, 서버 로직, API(응용 프로그램 프로그래밍 인터페이스) 개발 등 사용자가 직접 볼 수 없는 백그라운드 작업을 포함
  • 백엔드 개발의 주된 목표는 데이터를 처리하고 저장하는 것으로, 사용자의 요청에 따라 정보를 받아오거나 저장하는 등의 작업을 수행 
    • 프로그래밍 언어 : Python, Ruby, Java, PHP, Node.js 등
      • Python
        • Django
          • 고수준 웹 프레임워크로, 빠른 개발과 깔끔한, 실용적인 디자인
          • 보안 기능이 강화되어 있고, 많은 기본 기능을 내장하고 있어 복잡한 웹 애플리케이션 개발에 적합
        • Flask
          • 마이크로 웹 프레임워크로, 간단하고 확장 가능한 웹 애플리케이션 개발에 적합
          • 최소한의 기본 구조를 제공하여, 필요한 기능만 추가하여 사용 가능
      • Ruby
        • Ruby on Rails
          • 서버 사이드 웹 애플리케이션 프레임워크
          • MVC(Model-View-Controller) 패턴을 기반으로 하며, 빠른 개발을 위한 다양한 컨벤션과 기능을 제공
      • Java
        • Spring Framework
          • 엔터프라이즈급 애플리케이션을 위한 포괄적인 프로그래밍 및 구성 모델을 제공
          • Spring Boot는 Spring 기반 애플리케이션을 쉽게 만들 수 있도록 돕는 도구로, 복잡한 설정 없이 개발을 시작할 수 있게 해주는 것이 장점.
      • PHP
        • Laravel
          • PHP를 위한 웹 애플리케이션 프레임워크로, 우아한 문법을 제공하며, 웹 개발의 일반적인 작업들을 간소화 한다.
          • 라우팅, 세션, 캐싱, 인증 등을 쉽게 처리 가능
        • Symfony
          • 재사용 가능한 PHP 컴포넌트와 웹 애플리케이션 프레임워크
          • 고도로 유연하며, 엔터프라이즈급 애플리케이션 개발에 적합
      • Node.js
        • Express
          • Node.js를 위한 빠르고 개방적이며 최소한의 웹 프레임워크
          • 간단한 "RESTful API"부터 복잡한 웹 애플리케이션까지, 다양한 웹 서비스 개발에 사용
        • NestJS
          • TypeScript와 함께 사용되는 프레임워크
          • 효과적이고 확장 가능한 서버 사이드 애플리케이션을 구축하기 위해 설계
          • Angular의 "아키텍처 패턴"을 차용하여, 모듈성과 테스트 용이성을 제공
    • 데이터베이스 관리 시스템 : MySQL, MongoDB 등
• 풀스택 개발 (Full-Stack Development)
  
  • 풀스택 개발은 프론트엔드와 백엔드 개발의 전 영역에 걸쳐 작업할 수 있는 능력을 의미한다. 풀스택 개발자는 웹 사이트나 애플리케이션의 사용자 인터페이스부터 데이터 처리까지 전체적인 개발 과정을 관리할 수 있다. 이러한 개발자들은 다양한 프로그래밍 언어와 도구를 유연하게 사용하여 프로젝트의 요구 사항에 따라 적절한 기술을 선택하고 적용할 수 있는 능력을 가진다.
• 웹 개발 과정
  1. 계획 및 분석: 프로젝트의 목표, 타겟 사용자, 기능 요구사항을 정의
  2. 디자인: 사용자 인터페이스와 사용자 경험을 설계합니다. 와이어프레임과 목업을 생성하고, 색상 스키마와 레이아웃을 결정
  3. 개발: 프론트엔드와 백엔드 개발을 진행. 프로그래밍, 데이터베이스 설계, 서버 설정 등
  4. 테스팅: 기능적 테스트, 사용성 테스트, 성능 테스트 등을 통해 버그를 찾고 수정
  5. 배포: 웹 사이트나 애플리케이션을 호스팅 서버에 업로드하고, 도메인을 설정하여 공개
  6. 유지 보수: 웹 사이트나 애플리케이션의 지속적인 업데이트, 성능 모니터링, 보안 관리 등을 수행

>> Front-End 핵심기술 세 가지 

• HTML
  • 웹 페이지의 구조를 만드는 데 사용되는 표준 "마크업 언어"
  • 웹 페이지의 내용과 구조를 정의하는데 사용되며, 텍스트, 이미지, 링크 등 웹 페이지의 기본 요소를 마크업하는 데 사용됨
• CSS
  • 웹 페이지의 디자인과 "레이아웃"을 지정하는 "스타일 시트 언어"
  • CSS를 사용하여 폰트, 색상, 간격, 크기 등을 포함한 웹 페이지의 시각적 요소를 제어
• JavaScript
  • 웹 페이지에 동적인 요소와 상호작용성을 추가하기 위한 "스크립팅 언어"
  • 사용자 이벤트를 처리하고, 데이터를 동적으로 변경하며, "비동기 통신"을 통해 서버로부터 데이터를 가져와 웹 페이지를 업데이트할 수 있다.

>> 라이브러리와 프레임워크 

기준	라이브러리	프레임워크
제어 흐름	개발자가 애플리케이션의 흐름을 직접 제어	프레임워크가 프로그램의 흐름을 제어하고, 개발자는 그 안에서 필요한 코드를 작성
호출 방식	개발자가 코드에서 라이브러리를 호출	프레임워크가 개발자의 코드를 호출 (제어의 역전, IoC)
코드의 통합	필요한 기능이 있을 때 선택적으로 사용	애플리케이션의 기본 구조를 정의하며, 일반적으로 애플리케이션 전체에 영향을 미친다.
목적	특정 기능을 수행하는 함수나 데이터를 제공	애플리케이션 개발의 뼈대(아키텍처)를 제공하며, 여러 가지 규칙과 설정을 필요
사용 사례	React, 날짜 처리 라이브러리(moment.js), 데이터 처리(lodash) 등	웹 애플리케이션 개발(Angular, Django, Next.js, Vue.js) 등
확장성	라이브러리를 프로젝트에 추가하거나 제거하기 쉽다.	프레임워크 변경은 애플리케이션 구조에 큰 영향을 미친다.
학습 곡	개별 라이브러리는 일반적으로 학습하기 쉽다.	전체적인 구조와 원리를 이해해야 하므로 상대적으로 학습 곡선이 높을 수 있다.

>> 기본 용어 정리 

• 웹 페이지(Web Page)
  • 월드 와이드 웹(WWW)상의 문서로, 일반적으로 HTML로 작성
  • 텍스트, 이미지, 동영상 등 다양한 멀티미디어 콘텐츠를 포함할 수 있으며, 하이퍼링크를 통해 다른 페이지로의 이동이 가능
• 웹 애플리케이션 (Web Application)
  • 웹 애플리케이션은 웹 브라우저를 통해 사용할 수 있는 응용 프로그램
  • 동적인 상호작용과 사용자 특정 작업 수행을 지원하며, 서버와 클라이언트 사이에서 데이터를 교환하고 처리
• 사용자 인터페이스(User Interface, UI)
  • 사용자가 기기, 소프트웨어, 애플리케이션과 상호작용하는 데 사용하는 모든 시각적 요소의 집합
  • 버튼, 아이콘, 스페이싱, 색상 구성, 레이아웃 등 사용자가 애플리케이션을 효과적으로 제어하고 사용할 수 있도록 디자인된 요소를 포함
  • ★UI의 종류 ★
    • GUI (Graphical User Interface)
      • 그래픽 요소를 사용하여 사용자와 컴퓨터 간의 상호작용을 돕는 인터페이스
      • 아이콘, 버튼, 메뉴 등 시각적 요소와 포인팅 장치(마우스, 터치스크린)를 사용하여 사용자가 손쉽게 조작할 수 있도록 설계
      • 대부분의 현대적인 애플리케이션과 운영 체제는 GUI를 기반으로 함
    • NUI (Natural User Interface)
      • 사용자가 더 자연스럽고 직관적인 방식으로 상호작용할 수 있도록 설계된 인터페이스
      • 제스처, 음성 인식, 터치 입력 등 인간의 자연스러운 행동을 이용하여 컴퓨터와 소통함
      • 예를 들어, 스마트폰의 터치스크린, 음성으로 작동하는 스마트 홈 장치, 제스처를 인식하는 게임 콘솔 등
    • TUI (Tangible User Interface) && OUI (Organic User Interface)
      • 물리적 객체와 자연스러운 방식으로 상호작용하는 인터페이스
      • 사용자가 직접 객체를 조작하거나 특정 형태와 움직임을 이용해 입력을 제공하는 방식
      • 예를 들어, 특수한 테이블이나 패드 위에 물체를 옮겨서 컴퓨터와 상호작용하는 것 등이 포함
• 사용자 경험(User Experience , UX)
  • 사용자가 제품, 시스템 또는 서비스를 사용하면서 겪는 전반적인 경험
  • UX 디자인은 사용자의 요구를 만족시키는 것을 목표로 하며, 사용의 용이성, 효율성, 그리고 만족도를 최적화하는 것을 포함
  • ★UX의 구분 ★
    • Usability (사용성): 사용자가 목표를 효과적이고 효율적으로 달성할 수 있는 정도
    • Accessibility (접근성): 다양한 사용자와 장애를 가진 사람들이 제품이나 서비스를 사용할 수 있는 정도
    • Desirability (매력도): 디자인이 사용자에게 긍정적인 감정과 매력을 주는 정도
    • Value (가치): 사용자에게 제공하는 실질적인 가치와 만족도
• 사용자 인터랙션
  • 사용자와 컴퓨터 시스템 간의 상호작용을 의미
  • 클릭, 스크롤, 터치, 키보드 입력 등 사용자가 시스템과 의사소통하는 모든 방식을 포함

•  

>> 프론트엔드 기술 트렌드 

• CSR (Client-Side Rendering)에서 SSR (Server-Side Rendering)로
  • CSR은 브라우저가 서버로부터 HTML을 받은 후, JavaScript를 사용하여 페이지의 나머지 부분을 구성하는 방식이다. CSR은 사용자 인터랙션이 많고, 동적인 웹 애플리케이션에 적합하지만, 초기 로딩 시간이 길고 SEO(검색 엔진 최적화)에 불리할 수 있다.
  • SSR은 서버에서 페이지의 완전한 HTML을 생성하여 브라우저로 보내는 방식이다. 초기 로딩 시간이 빠르고 SEO에 유리하지만, 서버 부하가 증가할 수 있다. 최근에는 사용자 경험과 SEO를 개선하기 위해 많은 웹사이트들이 CSR에서 SSR로 전환하거나, 둘의 장점을 결합한 하이브리드 접근 방식을 채택하고 있다.
• SSG (Static Site Generation)
  • SSG는 빌드 타임에 모든 페이지를 미리 생성하여 정적 파일로 제공하는 방식이다. 이는 보안성이 뛰어나고, 로딩 속도가 매우 빠르며, 호스팅 비용이 저렴한 장점이 있다. Gatsby, Next.js의 정적 생성 기능 등이 이에 해당한다. 콘텐츠가 자주 변경되지 않는 사이트에 적합하다.
• Jamstack
  • Jamstack은 JavaScript, API, Markup의 약자로, 최신 웹 개발 아키텍처를 의미한다. 정적 사이트 생성과 서버리스 아키텍처를 활용하여 보안성을 높이고, 개발 속도를 개선하며, 확장성 있는 웹 애플리케이션을 구축할 수 있다. Netlify, Vercel과 같은 플랫폼이 Jamstack 개발을 쉽게 해준다.
• 웹 컴포넌트와 마이크로 프론트엔드
  • 웹 컴포넌트는 재사용 가능한 커스텀 엘리먼트를 생성하여 웹 애플리케이션의 모듈성을 높이는 기술이다.
  • 마이크로 프론트엔드는 대형 애플리케이션의 프론트엔드를 독립적으로 배포 가능한 작은 부분으로 나누는 아키텍처 접근 방식이다. 이를 통해 개발 팀은 서비스별로 기술 스택을 자유롭게 선택하고, 더 빠르고 유연한 개발과 배포가 가능해진다.
• 향후 전망
  • 프레임워크와 도구의 진화: React, Vue, Angular 등의 프레임워크는 지속적으로 개선되며, 개발자들에게 더 나은 개발 경험과 성능 최적화를 제공한다.
  • 타입스크립트의 증가: JavaScript의 확장인 TypeScript의 사용이 증가하고 있다. 타입스크립트는 개발 과정에서의 오류를 줄이고, 대규모 애플리케이션의 관리를 용이하게 한다.
  • 퍼포먼스와 접근성: 웹 사이트의 성능 최적화와 접근성 개선은 사용자 경험을 향상시키는 중요한 요소로 남아 있다. 웹 빠른 로딩, 효율적인 코드 사용, 사용자의 다양한 요구를 충족시키는 웹 접근성에 대한 중요성이 강조된다.

>> React, Vue, Next.js 

기준	React	Vue	Next.js
유형	JavaScript 라이브러리	JavaScript 프레임워크	React 기반 프레임워크
렌더링	CSR을 주로 사용, SSR 지원 가능	CSR을 주로 사용, SSR 지원 가능	SSR 기본, SSG, CSR 지
테스트	Jest, Enzyme, React Testing Library	Vue Test Utils, Jest	Jest, React Testing Library (Next.js 특화 테스트 도구는 없음)
장점	광범위한 커뮤니티와 생태계, 유연성과 조합성	쉬운 학습 곡선, 세밀한 문서화, 빠른 렌더링 성능	SSR과 SSG를 위한 최적화, 파일 기반 라우팅, 자동 코드 분할과 최적화
단점	SSR 구현 복잡성 (별도의 설정 필요), 큰 생태계로 인한 선택의 어려움	상대적으로 작은 커뮤니티, 대규모 프로젝트에서의 복잡성 및 관	React에만 한정, 높은  학습 곡선 (SSR, SSG 개념)
주요기능	가상 DOM, 컴포넌트 기반 구조, 단방향 데이터 흐름	가상 DOM, 컴포넌트 기반 구조, 양방향 데이터 바인딩	페이지 기반 라우팅 시스템, API 라우트, 이미지 최적
적합한 사용 사	동적인 SPA(Single Page Application), 큰 규모의 프로젝트와 팀	SPA 및 MPA(Multi-Page Application), 모든 규모의 프로젝트	SSR이 필요한 웹 애플리케이션, SEO 최적화가 중요한 프로젝트, 정적 사이트 생성이 필요한 프로젝트

>> 세 줄 정리

• 프론트엔드는 웹 개발의 하나로 UI를 설계하고 개발하며 UX를 개선하는 역할을 한다.
• 프론트엔드의 핵심 기술에는 HTML, CSS, JavaScript가 있다.
• 최신 트랜드로 SSR, SSG 개념이 있고 그에 적합한 React기반 프레임워크로 Next.js가 있다.