한 번에 끝내는 프론트엔드 개발: 개요

Hyojina·2022년 9월 15일
프론트엔드

Frontend

목록 보기
1/1

1. 강의 개요

1) 학습 개요

  • 웹 프론트엔드 개발의 핵심 줄기를 학습
  • 중요도가 높은 내용을 위주로 학습
  • 난이도가 높고 중요도가 낮은 내용은 가볍게 학습하거나 생략

2) 프론트엔드 개발

  • HTML, CSS, JS를 사용해서 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호작용할 수 있도록 하는 것
  • '프론트엔드'는 한글로 해석하면 '앞단' 이라는 뜻을 가지는데, 이는 사용자에게 보여지는 웹사이트 페이지를 의미
  • 하지만 웹사이트는 프론트엔드만으로는 개발이 불가능하기에, 보안을 요구하거나 기타 비즈니스 로직 등 사이트가 동작하는데 핵심적인 정보들은 백엔드라는 뒷단에서 개발
  • 웹사이트: 프론트엔드(사용자에게 보여지는 앞단) + 백엔드(앞단에 보여지는 내용을 가공/저장하는 뒷단)
  • 풀스택 개발(Full-stack development): GUI 프론트엔드부터, 데이터베이스 백엔드 등 모든 소프트웨어 스택을 개발하는 것 (프론트엔드 개발 + 백엔드 개발)
    *비즈니스 로직(Business Logic): 웹사이트가 동작하는데 필요한, 핵심 데이터 처리를 수행하는 알고리즘 등)

2. HTML, CSS 그리고 JS

1) 프론트엔드에서 다룰 수 있는 개발 기술

  1. HTML(Hyper Text Markup Language)
    페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당
    *HyperText: 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동)할 수 있는 텍스트를 말한다. 일반적으로 알고 있을 링크 버튼(텍스트)를 의미
  2. CSS(Cascading Style Sheets)
    실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(=스타일)(정적)을 담당
  3. JS(JavaScript)
    콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당

2) 예시

  • HTML: 눈 두개에 입을 만들어
  • CSS: 동그란 얼굴에 눈이랑 입을 그림(동작은 못함)
  • JS: 눈 깜빡, 웃는 입
    ※단순히 세 기술을 비교하자면 HTML은 기획자, CSS는 디자이너, JS는 개발자로 볼 수 있다.

3. 웹 페이지의 동작원리

  1. 사용자가 PC에서 브라우저를 연다.
  2. 프로토콜을 작성한 다음, 접속하고자 하는 사이트 주소를 입력한다.(ex: https://naver.com)
    *통신 프로토콜(Communication Protocol, 통신 규약)은 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식 및 구칙의 세계를 의미한다. 대표적으로 HTTP, HTTPS, FTP, SSL 등이 있다.
  3. 해당 사이트의 주소에 맞는 서버로 최초의 요청(Request)이 들어간다.
  4. 서버에서는 사용자의 브라우저로 최초의 응답(Response)을 내려준다.
  5. 응답을 통해 나가는 파일은 기본적으로 웹사이트의 구조를 담고 있는 HTML이다.
  6. 그 구조에 맞게 명시되어 있는 CSS파일, JS파일, 이미지 파일 등을 서버로 추가 요청한다.
  7. 서버에서는 새로운 파일을 추가 응답을 한다.
  • 웹사이트를 개발하는 우리의 컴푸터 환경을 '로컬(Local) 개발 환경'이라고 부르고, 로컬 개발 환경에서 개발한 파일을 사용자들이 접속할 수 있는 서버에 업로드하고, 주소를 설정하고, 그 주소로 접근하는 사용자에게 제공할 수 있게 되는 것이다.

4. 웹 표준과 브라우저

1) 웹 표준(Web Standard)이란?

  • '웹에서 사용되는 표준 기술이나 규칙'을 의미
  • W3C라는 표준화 제정 기구에서 표준 기술을 지정하는데, 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술
    *표준화 제정 단계는 크게 4가지 단계를 가지는데, 그 중 하나가 권고안(REC)이다.
  • 이러한 표준이라는 기술을 통해 웹 사이트를 제작하는 것

2) 브라우저

  • 웹사이트는 우리가 알고있는 웹 브라우저(ex: 크롬, 파이어폭수) 등에서 동작한다.
  • 브라우저 공급 업체(Browser Vendors)에서도 표준에 의거하여 브라우저를 만든다.

3) 크로스 브라우징

  • 크로스 브라우징(Cross Browsing)이란, 조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술 및 방법
  • 크로스 브라우징 이슈가 최근들어 사그라들고 있다.

4) 브라우저 각 부분 명칭

  • 창(Window): 브라우저 전체 창
  • 탭(Tab): 브라우저 상단에 떠있음
  • 주소창(Address bar)
  • 뷰포트(Viewport): 웹 페이지가 출력되는 영역
    *렌더링(Rendering): 브라우저의 뷰포트에 웹 사이트를 출력하는(그림을 그려내는) 행위

5. 웹에서 사용하는 이미지

1) 비트맵(Bitmap) 이미지

  • 픽셀이 모여 만들어진 정보의 집합
  • 레스터(Raster)이미지 라고도 부름
  • 확장자: .jpeg .gif .png
  • 장점: 정교하고 다양한 색상을 자연스럽게 표현
  • 단점: 확대/축소 시 계단 현상, 품질 저하
  • 인물사진, 풍경사진 등에 적합

1.1 JPG(JPEG)

  • JPG(Joint Photographic coding Experts Group)는 Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축룰이 훌룽해 사진이나 예술 분야에서 많이 사용
    - 손실 압축 방식하여 용량이 적은 장점이 있다.
  • 반복적으로 새롭게 저장하는 행위는 피해야 좋다.
  • 표현 색상도(24비트, 약 1600만 색상)가 뛰어남
  • 이미지의 품질과 용량을 쉽게 조절 가능(자주 볼수 있는 이미지 포맷이므로, 사용할 수 있는 환경도 다양하고 프로그램이 많다)
  • 가장 널리 쓰이는 이미지 포맷

1.2 PNG

  • PNG(Portanle Network Graphics)는 Gif의 대체 포맷으로 개발됨
  • 비손실 압축(JPEG와 반대로 용량이 조금 더 클 수 있다.)
  • 8비트(256색상) / 24비트(약 1600만 색상) 컬러 이미지 처리 (일반적으로 24비트 사용하는 것이 좋다)
  • Alpha Channel 지원(투명도)
  • W3C 권장 포맷
  • 투명한 영역이 없다면 압축룰이 좋아 용량이 조금 더 적은 JPEG를 사용하는 것이 좋다.

1.3 GIF

  • GIF(Graphics Interchange Format)는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
  • 비손실 압축
  • 여러 장의 이미지를 한 개의 파일에 담을 수 있음: 움짤, 애니메이션
  • 8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

1.4 WEBP

  • JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
  • 완벽한 손실/비손실 압축 지원
  • GIF같은 애니메이션 지원
  • Alpha Channel 지원(손실, 비손실 모두)
  • 지원되는 브라우저에 한계가 있음. 하위호환성(예전버전의 환경에서 특정한 기술이 호환이 되는 지) 체크 필요

2. 벡터(Vector) 이미지

  • 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지
  • 확장자: .svg
  • 장점: 확대/축소에서 자유롭고 용량 변화가 없음
  • 단점: 정교한 이미지(ex: 인물, 풍경사진)를 표현하기 어려움
  • 아이콘, 로고, 머터리얼 이미지(플랫한 이미지) 등 형태는 하나지만 크기가 다양하게 사용하는 이미지에 적합
    *Material Design(머터리얼 디자인)은 고품질 디지털 경험을 구축할 수 있도록 Google에서 만든 디자인 시스템(방식)
  • 어떤 이미지가 우세하다고 할 수 없고, 필요에 따라 적절한 이미지 포맷을 선택히야 한다.

2.1 SVG

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

6. 특수 기호

`　: 백틱(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), 꺽쇠괄회

7. 오픈소스 라이선스

1) 오픈소스란?

  • 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것
  • 오픈소스여도 저작권(라이선스)이 있고, 저작권에는 다양한 종류가 있지만 결론적으로 무료로 해석될 수 있는 저작권들이 있다.
  • 개인이 사용할 수 있는지, 상업적으로 사용할 수 있는지 라이센스 확인하는 습관이 필요
  • OpenSource.org

2) Apache License

  • 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스
  • 개인적/상업적 이용, 배포, 수정, 특이 신청이 가능
  • 따라서 아파치 라이선스를 이용해서 새로운 저작물을 만들었다면 새롭게 배포하거나 수정하거나 특허까지 신청할 수 있는 구조를 가짐

3) MIT License

  • 메사추세츠공과대학(MIT)에서 학생들을 위해 개발한 라이선스
  • 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 나머지 사용에 대한 제약은 없음
    *프로젝트 소스 코드에 외부에서 가져온 오픈소스의 라이선스 내용만 정확히 명시하면 충분하다. 그런데 대부분 프로젝트에서는 자동으로 오픈소스가 같이 빌드(웹 사이트의 최종 결과를 만드는 행위)되기 때문에 따로 관리할 필요는 없다.

4) BSD License

  • BSD(Berkeley Software Distribution)는 버클리 캘리포니아대학에서 개발한 라이선스
  • MIT와 동일 조건

5) Beerware

  • 오픈소스 개발자에게 맥주를 사줘야하는 라이선스(물론 만날 수 있는 경우에)
profile
Hyojina
돌돌개 (돌고 돌아 개발자)

0개의 댓글