프론트 앤드(Front End) → 사용자 영역 분야를 개발.

• 프론트단의 비지니스 로직과 사용자 영역의 개발을 담당하는 사람이다.
• 사용자가 마주보는 인터페이스를 테크놀로지 분야에서 프론트앤드라고 부른다.

★ 사용자인터페이스(UI-User Interface): 디자인,프론트앤드 개발

★ 사용자경험(UX-User eXprience) : 기획, 프론트앤드 개발

• 인터페이스 : 두 대상이 만나는 접점,매개체 1 . 마우스,키보드 - 사람 과 컴퓨터 의 인터페이스(UI) 2 . 웹 UI - 사람 과 웹사이트 의 인터페이스(UI)

주 사용언어 : HTML,CSS,JS

백 앤드(Back End) → 데이터(베이스) 영역 분야를 개발.

• 서버측(sever side) 과 데이터베이스를 관리해주는 테크놀로지
• 백앤드에서는 데이터를 저장하고 관리하며 웹사이트의 클라이언트 측(client side)에서 모든것이 매끄럽게 작동할 수 있게 해준다.
• 사용사들이 직접 보거나 상호작용할 수는 없다.
• 사용자 인터페이스가 없는 시스템 컴포넌트작업,API작성,라이브러리 생성,데이터베이스 통합 등 이 포함된다.

주 사용언어 : PHP,Node.js,JS,C++

★ 클라이언트 - 서버 시스템(모델)

1. 클라이언트 : 사용자 컴퓨터 → 소프트웨어
2. 서버 : 호스트 컴퓨터 → 소프트웨어

** 클라이언트 <=> 프론트 앤드 ** 서버 <=>백 앤드

pc소프트웨어 ex) 파워포인트 실행 => 테마 검색 => 검색 결과

클라이언트 : 파워포인트 서버 : 테마 데이터베이스 호스트

웹사이트 ex) 브라우저 실행 => 웹 사이트 접속 => 웹 사이트 표시 클라이언트 : 브라우저 서버 : 웹 사이트 데이터 호스트

모바일 앱 ex) 유튜브 앱 실행 => 유튜브 동영상 검색 => 검색 결과 표시 클라이언트 : 유튜브 앱 서버 : 유튜브 영상 호스트

하이브리드 앱 - 외부 형태는 네이티브 앱(모바일 기기에 최적화 된 언어로 개발된 앱)이지만 실제 내부는 모바일 웹 앱으로 실행한다. 웹을 기반으로 앱의 기능을 차용한 형태의 앱 → 실제 개발에 필요한 것을 웹 개발 기술로 개발 후 감싸서(랩핑) 앱 에서 동작할 수 있게끔 하는 것
정보전달을 목적으로 하는 앱이 대부분이다.(SNS,포털사이트,지도,은행 등) 하드웨어의 특정한 기능을 사용하지 않는다. 장점 - 웹상에 수정 사항이 있는경우 사용자 업데이트 할 필요 없다. 네이티브앱에 비해 개발비용 및 시간 소요가 적게 들어간다. 앱 용량도 비교적 가볍다. 단점- 네이티브 앱보다 동적인 요소의 구현이 어렵다.네트워크 환경과 웹사이트의 용량에 따라 속도가 느려질 수 있음.(게임앱 에는 적당하지 않다. )

랩핑 - 개발소프트웨어(폰 갭,코르도바,아이오닉)를 사용한다.

웹 개발기술을 가지고 pc 소프트웨어, 모바일 앱 개발을 할 수 있다.

클라이언트 - 브라우저

→ 브라우저 기반 구동 프로그래밍 언어

HTML + CSS + JavaScript = 웹페이지 프론트앤드 개발 => 목적 : 사용자 영역 개발

서버 - 웹서버 프로그램 → 웹서버 기반 구동 프로그래밍 언어 :

1. ASP(.NET)- windows IIS server
2. JSP - Linux Apache server + WAS
3. PHP - Linux Apache server
4. Python - Python => 목적 : 데이터 영역 개발

프론트앤드 개발 프레임워크 :Angular,React,Vuejs Angular - 구글에서 만듬,어렵다,무겁다 React - 페이스북에서 만듬 앵귤러보다 가볍다,많이쓰임- 추천 Vuejs - 가볍다,많이쓰임

★ API - Application Programming Interface

서버에서 결과값과 HTML 이 합쳐지는게 아니고 API에서 합쳐져서 화면에 출력 된다.

legocy - 서버에서 HTML과 결과값을 합쳐서 화면에 출력 됐었다.