프론트엔드(Front-End) VS 백엔드(Back-End)

*프론트엔드(Front-End) 

 

사용자(user)의 화면에 나타나는 웹 화면 -> 눈에 보이는 화면(interface)

-> 웹 사이트에서 보고 상호작용하는 모든 것 ! -> UI(사용자 인터페이스), UX(사용자 경험)

 

-> UX 디자이너 : 사용자에게 최상의 편리한 경험을 제공하기 위해 사이트의 구성/기능 담당 !

    ->Web 디자이너 : 이를 디자인 !

       ->Front-End 개발자 : 이를 웹 어플리케이션으로 구현 !

 

->  개발 언어?
  : HTML(웹페이지)

  : CSS(웹페이지에 다양한 스타일 적용! -> 디자인 언어)

  : Javascript (상호작용 -> 웹 기반의 소프트웨어 또는 게임 실행할 수 있게함 -> 웹사이트의 기능 향상)

 

->  테크놀로지(프레임워크)?

  * AngularJS

: 오픈소스 자바스크립트 프레임워크

: 주로 싱글 페이지 웹 애플리케이션(SPA) 만드는데 사용됨 !

: 정적(static) HTML -> 동적(dynamic) HTML : 변환 기능 있음 !

 

  * ReactJS

: 선언형(declarative)의 자바스크립트 라이브러리

: 컴포넌트 기반의 오픈소스 라이브러리 -> 애플리케이션의 반응형 뷰 레이어(view layer)

 

  * Bootstrap

: 반응형 웹 애플리케이션 및 웹사이트 개발 위해 사용되는 오픈소스 무료 도구

: 자바스크립트, CSS, HTML 프레임워크 -> 모바일 우선의 반응형 웹사이트 구축할 수 있게해줌 !

 

 

 

*백엔드(Back-End)

 

눈에 보이지 않는 서버에서 작용 !

-> UI나 GUI로 구성된 화면의 통신이나 요청에 대해 DB or 인터페이스 등을 통해 시스템 구성 실체에 접근 !

-> 데이터 저장, 관리 !

-> Front-End와 연동하여 기술적인 부분 처리 !

 

-> 서버 관리자 : 서버 환경 설정, 서버 구성 등 관리

   -> DB 관리자 : DB 설계 Data 관리, 최적화

       -> Back-End 개발자 : 서버 코딩 !

등등

 

->  개발 언어?
  : PHP

  : Node.js

    -> 크로스 플랫폼의 오픈소스 런타임 환경

    -> 브라우저의 외부에서 자바스크립트 코드를 실행할 수 있게 해줌 !

    -> 프로그래밍 언어 x, 프레임워크x

    -> 모바일이나 웹 어플리케이션용 API와 같은 백엔드 서비스 개발을 위해서 사용됨 !

  : Javascript -> 백엔드와 프론트엔드에서 모두 사용 가능한 프로그래밍 언어

  : C++

  : Java

  : Python

 

->  테크놀로지(프레임워크)?

  * Express

: 웹 애플리케션 구축에 사용되는 노드(Node.js)용 무료 오픈소스 프레임워크

: API를 만들고 웹 애플리케이션을 구축할 수 있게 해줌 !

 

  * Laravel

: 무료, 오픈소스 -> PHP 웹 프레임워크

: 웹 개발에서 사용되는 공통 작업들(캐싱(caching), 라우팅(rouitng), 인증(authentication), 세션(session)) -> 심플 !

: 어플의 기능에 영향 x -> 개발 프로세스 간단 !

 

  * C#

: 개발 도구, 웹 사이트, 컴파일러와 같은 다양한 프로젝트에 사용 !

: 객체 지향 프로그래밍 언어