1. 프론트엔드 개발의 정의

HTML, CSS, JS를 사용하여 데이터를 GUI(Graphci User Interface)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것을 말한다.

흔히 앞단이라고 말한다.

2. HTML (Hyper Text Markup Language) : 구조

HTML : 페이지의 제목, 문단, 표 이미지, 동영상 등 웹의 구조를 텍스트담당

• Hyper Text : 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동)할 수 있는 텍스트를 말한다. 일반적으로 알고 있을 링크 버튼(텍스트)을 의미한다.

3. CSS (Cascading Style Sheets) : 스타일

CSS : 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적) 을 담당한다.

4. JS (JavaScript) : 동적

JS : 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당한다.

5. WebApp(Web Application)의 동작 방식

1. 사용자의 컴퓨터 : 브라우저 오픈 (chrom, firefox ..)

2. 주소창에 접속하소자 하는 통신프로토콜+주소를 작성을 한다.

• 통신 프로토콜(Communication Protocol, 통신규약) : 컴퓨터나 원거리 통신 장비 사이에서 메세지를 주고 받는 양식 및 규칙의 체계를 의미한다.
  대표적으로 HTTP, HTTPS, FTP, SSL등이 있다.

3. 해당 사이트 주소에 맞는 서버로 최초 요청(Request) 이 들어간다.

4. 최초 요청이 들어온 브라우저로 서버가 최초 응답(Response) 을 내어준다. 이때, HTML이 응답이 되게 된다.

5. CSS, JS, JPG등을 서버에 추가 요청한다.

6. 해당 서버에서 추가 응답을 내어준다.

6. 웹 표준

웹 표준(Web Standard)이란 '웹에서 사용되는 표준 기술이나 규칙'을 의미한다.
W3C의 표준화 제정 단계의 '권고안(REC)'에 해당되는 기술이며 표준화 제정 단계는 크게 다음과 같이 4가지 단계를 가진다.

1. 초안 (Working Draft, WD)
2. 후보권고안 (Candidate Recommendation, CR)
3. 제안권고안 (Proposed Recommendation, PR)
4. 권고안 (W3C Recommendation, REC)

7. Cross Browsing

Cross Browsing이란 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법이다.
브라우저 종류 : Chrom, Edge, Firefox, Swing, Wale, Safari, IE...

크로스 브라우징 이슈는 점점 줄어들고 있다고 한다.
IE는 조심하자. 표준이 아닌 기술을 이용해야 하는 상황이 일어난다.

8. Browser의 기본적인 Interface

• 창(Window) : Browser의 창, 화면 테두리 전체.
• 탭(tab) : Browser의 상단에 명시되어있는 작은 영역.
• 주소창(Address bar) : 주소가 입력되어져 있는 창.
• 뷰포트(Viewport) : 하나의 웹페이지가 출력(Rendering)되는 전체 영역.
  +) Rendering : Browser의 Viewport에 웹사이트를 출력하는 행위

9. Web Image

1. Bitmap : 픽셀이 모여 만들어진 정보의 집합, Rester 이미지라고도 부름.
   특징 : 정교하고 다양한 색상을 자연스럽게 표현한다. 확대/축소 시 계단현상, 품질 저하가 일어난다.

• .jpeg : 손실 압축(여러번 저장하면 여러번 손실이 일어남)
  표현 색상도가 뛰어남(24비트, 약 1600만 색상)
  이미지의 품질과 용량을 쉽게 조절 가능
  가장 널리 쓰이는 이미지 포맷이다.
• .png : 비손실 압축
  용량이 크다
  8비트(256색상) / 24비트(약 1600만 색상)
  Alpha Channel(투명도)지원
  W3C 권장 포맷
• .gif : 비손실 압축
  여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션_
  8비트(256색상)만 지원, 다양한 색상 표현에는 적합하지 않음
• WEBP : JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷.
  완벽한 손실/비손실 압축 지원
  GIF같은 애니메이션 지원
  Alpha Channel지원(손실, 비손실 모두)
  ★ 지원되는 브라우저를 확인해봐야 한다. (하위 호환성 확인)

2. Vector : 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지.
   특징 : 확대/축소에서 자유롭고 용량 변화가 없다. 정교한 이미지(인물, 풍경사진 등)를 표현하기 어렵다.

• svg : 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷.
  해상도의 영향에서 자유로움
  CSS와 JS로 제어 가능
  파일 및 코드 삽입 가능

10. 특수 문자 용어

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

11. Open Source License

Open Source란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를, 누구나 접근해서 열람할 수 있도록 공개하는 것. 저작권은 존재한다.

• Apache License : 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스, 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능하다.

• MIT License : MIT에서 소프트웨어 학생들을 위해 개발한 라이선스, 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없다.

• BSD License : 버클리 캘리포니아 대학에서 개발한 라이선스, MIT와 동일 조건.

• Beeware : 오픈소스 개발자에게 맥주를 사줘야 하는 라이선스. 물론 만날 수 있는 경우에 사주면 된다... 재밌는 라이선스 인 것 같다.