[23.08.07 강의 day1]프론트엔드 개발이란? 기본적인 웹앱의 동작 방식, 통신 프로토콜, 웹 표준, 웹 이미지 비트맵과 벡터, 오픈 소스 라이선스, 맥 os 코드 단축키

프론트엔드 개발이란?
html, css, js를 사용해서 데이터를 그래픽 사용자 인터페이스(gui)로 변환하고, 그것으로 사용자와 상호 작용을 할 수 있도록 하는 것.

 

비즈니스 로직이란?

웹 사이트가 동작하는데 필요한 핵심 데이터 처리를 수행하는 알고리즘 등을 말합니다.

 

풀스택 개발이란?

GUI 프론트엔드부터 데이터베이스 백엔드 등 모든 소프트웨어 스택을 개발하는 것을 말합니다.

 

---

1. HTML? Hyper Text Markup Language = 기획자

페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당.

하이퍼 텍스트는 참조를 통해 현재 문서에서 다른 문서로 즉시 접근(이동)할 수 있는 텍스트를 말합니다. 일반적으로 알고 있을 링크 버튼(텍스트)을 의미합니다. 그래서 이런 텍스트를 만들 수 있는 언어가 하이퍼 텍스트 마크업 렝기지 이다!

 

2. CSS? Cascading Style Sheets

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

 

3. JAVASCRIPT?

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

 

즉, 구조를 만들고 스타일을 입힌 후 동적인 개념을 부여한다!

 

제작된 웹 사이트(웹 애플리케이션, 웹앱)를 제품(product)이라고 부르기도 한다.\

 

---

기본적인 웹앱의 동작 방식

 

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

ex) https://naver.com
해당 주소로 요청이 들어감! request가 서버에 들어가면 사용자의 브라우저로 응답을 내어주는데 response를 해줌

이때 응답을 통해 나가는 파일은 html이 응답되고 화면에 보여질 기본적인 구조를 보여주고 그 구조에 맞는 css, js, img파일 등을 서버로 요청하고 새로운 파일을 서버에서 내어주는데 추가 응답을 통해 응답을 하게 된다. 

 

이렇게 웹 사이트를 개발할 우리의 컴퓨팅 환경을 '로컬(Local) 개발 환경'이라고 부른다.

 

=> 사용자에게 보여질 사이트를 잘 만들고 이걸 사용자들이 볼 수 있도록 서버에 업로드하고 설정을 통해 사용자가 접속할 수 있도록 함

 

---

웹 표준?

웹 표준이란 '웹에서 사용되는 표준 기술이나 규칙'을 의미하며 W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술

W3C의 표준화 제정 단계

- 초안(working draft, wd)

- 후보권고안(candidate recommendation, cr)

- 제안권고안(proposed recommendation, pr)

- 권고안(w3c recommendation, rec) 

 

브라우저 공급업체(browser vendors) = 브라우저 만든 공급 업체 

 

크로스 브라우징이란?

조금은 다르게 구동괴는 여러 브라우저에서 동알한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법

ex) 크롬, 엣지, 파이어폭스, 오페라, 스윙, 웨일, IE, 사파리

즉, 동일하게 출력하고 제작될 수 있도록 하는 것이 크로스 브라우징이다!

요즘엔 많은 부분에서 통일이 되고 있기 때문에 크로스 브라우징 이슈들이 조금씩 사라져 가고 있는 중이다. 

 

+ 2020년 8월 마이크로소프트는 인터넷 익스플로러(IE)의 모든 서비스 지원을 종료한다고 했음

 

브라우저 인터페이스

- 창(window)

- 탭(tab)

- 주소창(address bar)

- 뷰포트(viewport) 하나의 웹페이지가 출력되는 전체의 부분
즉, 렌더링되는 영역이라고도 하는데 렌더링이란 브라우저의 뷰포트에 웹사이트를 출력하는 행위를 말합니다.

 

---

웹 이미지

비트맵과 벡터

 

1. 비트맵 Bitmap

픽셀들이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고도 부름

ex) .jpeg .gif .png

- 정교하고 다양한 색상을 자연스럽게 표현

- 확대/축소 시 계단 현상, 품질 저하

- 확장자

• JPG : full color와 gray scale의 압축을 위해 만들어졌으며 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용된다. 
  특징 : 손실 압축 방식 사용(실질적으로 이미지가 손실되면서 압축된다는 것임, 즉 용량이 획기적으로 줄어듬 그래서 여러번 저장이 되면 여러번 손실이 되기 때문에 이미지 손상이 된다.), 이미지의 품질과 용량을 쉽게 조절 간능하며 표현 색상도 24비트, 약 1600만 색상을 표현할 수 있다. 또한 가장 널리 쓰이는 이미지 포맷이다.
• PNG : Gif의 대체 포맷으로 개발
  특징 : 비손실 압축으로 용량이 비교적 클 수 있다. 8비트 256색상/ 24비트 1600만개의 색상 컬러를 제공하여 이미지 처리하고 Alpha Channel 지원으로 투명영역을 지원한다.(투명도) 그리고 w3c 권장 포맷이다. 
• GIF : 이미지 파일 내에 이미지 및 문자열 같은 정보를 저장한다. 즉, 하나의 이미지 파일 안에 여러장의 이미지를 담을 수 있는 구조를 가짐
  특징 : 비손실 압축, 여러장의 이미지를 한 개의 파일에 담을 수 있고(움짤, 애니메이션), 8비트 색상만 지원하므로 다양한 색상 표현에는 적합하지 않다. 
• WEBP : JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷이다.
  특징 : 완벽한 손실/비손실 압축을 지원, GIF 같은 애니메이션 지원, Alpha Channel 지원(손실, 비손실 모두)
  최근에 나왔기에 지원되는 브라우저를 꼭 확인해야한다!

 

2. 벡터 Vector

점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(shape)로 이루어진 이미지

ex) .svg

- 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움

- 확대/축소에서 자유로움, 용량의 변화가 없음

- 로고, 아이콘과 같이 Material Dsign 머터리얼 디자인은 고품질 디지털 경험을 구축할 수 있도록 google에서 만든 디자인 시스템(방식)입니다.

- 확장자

• SVG : 마크업 언어 (html, xml) 기반의 벡터 그래픽을 표현하는 포맷
  특징 : 해상도의 영향에서 자유로움, css와 js로 제어 가능, 파일 및 코드 삽입 가능
  SVG 이미지의 복잡한 코드를 css와 js로 디테일하게 제어하기는 매우 어렵기 때문에 색상이나 일부 영역의 추가/제거 혹은 간단한 형태 생성 정도로 가볍게 사용한다. 

이렇게 나눠져 있는 이유는 서로가 보완이 되기 때문임! 필요에 따라서 이미지 포맷을 설정

 

---

특수문자 용어(특수 문자의 영어, 한글 이름

 

`  그레이브, 백틱

~  틸드, 물결표시

!  엑스클러메이션, 느낌표 

@  앳, 골뱅이

#  샵, 넘버, 우물 정

$  달러

%  퍼센트

^  캐럿 (무엇무엇의 이상에서 사용)

&  앰퍼센드 

*  에스터리스크, 별표

-  하이픈, 대시, 마이너스

_  언더스코어, 로대시, 밑줄

=  이퀄, 동등

"  쿼테이션, 큰 따옴표

'  아포스트로피, 작은 따옴표

:   콜론

;  세미콜론

,  콤마, 쉼표

.  피리어드, 닷, 점, 마침표

?  퀘스천, 물음표

/  슬래시

| 버티컬 바

\ 백슬래시, 역슬래시

() 퍼렌서시스, 소괄호, 괄호

{} 브레이스, 중괄호

[] 브래킷,대괄호

<> 앵글 브래킷, 꺽쇠괄호

 

---

오픈 소스 라이선스란?

오픈소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설개도를 누구나 접근해서 열람할 수 있도록 공개하는 것.

 

1. Apache License

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

 

2. MIT Licendse

매사추세츠공과대학에서 소프트웨어 학생들을 위해 개발한 라이선스로 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며 나머지 사용에 대한 제약은 없다. 

(프로젝트 소스 코드에 외부에서 가져온 오픈소스의 라이선스 내용만 정확히 명시하면 충분합니다. 그런데 대부분 프로젝트에서는 자동으로 오픈소스가 같이 빌드(웹 사이트 최종 결과를 만드는 행위)되기 때문에 따로 관리할 필요는 없다. 

 

3. BSD License

버클리 캘리포니아대학에서 개발한 라이선스로 MIT와 동일한 조건

 

4. Beerware 

오픈소스 개발자에게 맥주를 사줘야 하는 라이선스. 물론 만날 수 있는 경우! 

 

 

---

맥 os 코드 단축키

 

option + shift + f 코드 정리

command + k + f 원하는 부분만 코드 정리

option + shift + 방향키 ↓ 해당 부분 그대로 복사

command + b 사이드바 열고 닫기

cmd + p 파일 검색

cmd + shift + p 모든 명령 표시(에디터의 몯ㄴ 명령에 접근)

cmd + w 편집기 닫기

cmd + f 파일 찾기

cmd + option + f 파일명 바꾸기

option + up, down 방향키 줄 아래로 이동

cmd + shift + ] 다음 편집기 열기(우측창 전환)

cmd + \  화면 분할

 

---