프론트엔드(Front-End) 개요

[패스트캠퍼스] React& Redux로 시작하는 웹 프로그래밍 강의 수강 1주차(1)

프론트엔드 개발이란?

HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것. 웹 브라우저에서 동작하는 개발 언어(?)는 HTML, CSS, JS 3가지!
-HTML(Hyper Text Markup Language): 웹 구조 담당
-CSS(Cascading Style Sheets): 스타일 담당
-JS(JavaScript): 동적 처리 담당

웹앱(=웹사이트) 동작방식

주소창 주소 입력(https: 프로토콜 사용) -> 서버에 최초 요청(Request) -> 서버의 최초 응답(Response): HTML -> 추가 요청 -> 추가 응답: CSS, JS, JPG...

웹 표준(Web Standard)

웹 표준(Web Standard): 웹에서 사용되는 표준 기술이나 규칙, W3C의 표준화 제정 단계의 권고안(REC)에 해당하는 기술.
-W3C 표준화 제정 4단계
1) 초안(Working Draft, WD)
2) 후보권고안(Candidate Recommendation, CR)
3) 제안권고안(Proposed Recommendation, PR)
4) 권고안(W3C Recommendation, REC)

크로스 브라우징(Cross Browsing)

서로 다른 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법.

웹 이미지

-비트맵(Bitmap): 픽셀이 모여 만들어진 정보의 집합. 레스터(Raster) 이미지라고도 부름.
 장) 정교하고 다양한 색상을 자연스럽게 표현.
 단) 확대/축소 시 계단 현상, 품질 저하.
-벡터(Vector): 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지.
 장) 확대/축소에서 자유로움, 용량 변화가 없음.
 단) 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움.
-JPG(JPEG): Joint Photographic coding Experts Group, Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용.
 장) 손실 압축(=용량이 적음), 표현 색상도(24비트, 약 1600만 색상)가 뛰어남, 이미지의 품질과 용량을 쉽게 조절 가능
 단) 손실 압축(=재저장 할수록 화질 저하)
-PNG: Portable Network Graphics, Gif의 대체 포맷으로 개발됨.
 장) 비손실 압축(=화질 저하 X), 8비트(256색상)/24비트(약 1600만 색상) 컬러 이미지 처리, Alpha Channel 지원(투명도), W3C 권장 포맷
 단) 비손실 압축(=용량이 큼)
-GIF: Graphics Interchange Format, 이미지 파일 내 이미지 및 문자열 같은 정보들을 저장.
 장) 비손실 압축, 여러장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
 단) 8비트 색상만 지원(다양한 색상 표현 X)
-WEBP: JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷.
 장) 완벽할 손실/비손실 압축 지원, GIF 같은 애니메이션 지원, Alpha Channel 지원(손실, 비손실 모두)
 단) 하위호환성 확인 필요(ex. Internet Explorer는 호환 안 됨)
-SVG: Scalable Vector Graphics는 마크업 언어(HTML, XML) 기반의 벡터 그래픽을 표현하는 포맷.
 장) 해상도의 영향에서 자유로움, CSS와 JS로 제어 가능, 파일 및 코드 삽입 가능

특수 문자 용어 정리

특수 문자	용어(이름)
`	Backtick(백틱), Grave(그레이브)
~	Tilde(틸드), 물결 표시
!	Exclamation mark(엑스클러메이션), 느낌표
@	At sign(앳), 골뱅이
#	Sharp(샵), Number sign(넘버), 우물 정
$	Dollar sign(달러)
%	Percent sign(퍼센트)
^	Caret(캐럿) *~이상을 표현할 때 사용 됨
&	Ampersand(엠퍼센드)
*	Asterisk(에스터리스크), 별표
-	Hyphen(하이픈), Dash(대시), 마이너스
_	Underscore(언더스코어), Low dash(로대시), 밑줄
=	Equals sign(이퀄), 동등
"	Quotation mark(쿼테이션), 큰 따옴표
'	Apostrophe(아포스트로피), 작은 따옴표
:	Colon(콜론)
;	Semicolon(세미콜론)
,	Comma(콤마), 쉼표
.	Period(피리어드), Dot(닷), 점, 마침표
?	Question mark(퀘스천), 물음표
/	Slash(슬래시)
|	Vertical bar(버티컬 바)
\	Backslash(백슬래시), 역 슬래시
( )	Parenthesis(퍼렌서시스), 소괄호, 괄호
{ }	Brace(브레이스), 중괄호
[ ]	Bracket(브래킷), 대괄호
< >	Angle Bracket(앵글 브래킷), 꺽쇠괄호

 

오픈 소스 라이선스

오픈 소스: 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것.
-Apache License: 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스, 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능.
-MIT License: 메사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스, 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약 없음.
-BSD License: BSD(Berkeley Software Distribution)는 버클리 캘리포니아대학에서 개발한 라이선스, MIT와 조건 동일.
-Beerware: 오픈소스 개발자에게 맥주를 사줘야 하는 라이선스.