Posts 초심으로 돌아가 공부하는 Front-End 1편 기초
초심으로 돌아가 공부하는 Front-End 1편 기초
Cancel

초심으로 돌아가 공부하는 Front-End 1편 기초

회사에서 패스트 캠퍼스 강의를 하나 결제해주었다.
Front-end의 기초부터 하나하나 다시 시작하는 강의다.

미래에 개발 교육에 관심이 있다보니,
다양한 강의를 들으며 어떻게 설명하는 것이 좋을지 같이 공부하려고 한다.

더 쉽게, 더 재미있게 가르칠 수 있는 내가 되길 바라며


프론트엔드 & 백엔드 개발이란?

코딩을 처음 배우는 사람들은 프론트엔드, 백엔드가 무엇을 뜻하는지 모를 수도 있다.

프론트엔드 개발은 HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하여
그것으로 사용자와 상호 작용할 수 있도록 하는 것이다.

주로, 사용자는 Chrome, Edge 등을 이용하여 PC나 모바일에서 다양한 페이지를 이용한다.
여기서 프론트 엔드 혼자서는 모든 데이터를 관리할 수 없다.

그래서 필요한 개발이 백엔드 개발이다.

백엔드 개발은 보안, 데이타, 비즈니스 로직 등 사이트가 동작하기 위한 데이터 처리를 개발하게 된다.


HTML, CSS, JS

HTML

Hyper Text Markup Language
페이지의 제목, 문단, 표, 이미지 등 웹의 구조를 담당한다.

HTML은 우리가 페이지를 기획할 때
구조를 만드는 역할을 하게 된다.

사람을 만드려면 팔, 다리, 눈 등이 필요한데
일단 필요한 팔, 다리, 입, 눈 등을 뼈대로만 만들어 두는 것.

CSS

실제 화면에 표시되는 방법, 색상, 크기, 폰트 등을 꾸며주는 시각적인 표현을 담당.

위 HTML로 만든 구조를 말 그대로 꾸미는 역할을 한다.
뼈만 있는 사람 몸에 살을 붙이고 화장을 하고 옷을 입히는 것.

JS

HTML, CSS로만 만든 사람은 움직일 수 없다.
동적으로 움직이려면 JS가 필요한 것.

JS는 알고리즘이나 페이지가 이동하고 작동하는 부분을 담당하게 된다.

최종적으로, HTML, CSS, JS가 모두 있어야 하나의 페이지를 구성할 수 있다.


웹 / 앱의 동작원리

사용자가 브라우저를 통해 페이지를 통해 들어가면 어떤 일들이 일어날까?

먼저, 사용자가 주소창에 주소를 입력하여 들어가게 되면
해당 주소에 맞는 서버로 Request(요청)이 들어가게 된다.

그러면 서버는 사용자에게 Response(응답)을 보내게 된다.
해당 응답에는 페이지 구조를 담고 있는 HTML이 포함되어 있다.

HTML을 구조와 함께 CSS, JS, Image 파일들이 함께 들어온다.
응답받은 파일들을 Rendering 과정을 통해 우리의 화면에 보여지게 되는 것.

그러면 우리가 Local환경에서 만든 파일들을 Server로 옮겨야 위의 과정이 가능하다.


웹 표존과 브라우저

웹 표준은 웹에서 사용되는 표준 기술이나 규칙을 말한다.
이러한 규칙은 W3C에서 제정하여 만든 권고안에 해당하는 기술들이다.

우리가 사용하는 브라우저에서도 웹 표준을 해석하여 브라우저를 만드는 것이다.

크로스 브라우징

우리가 사용하는 크롬, 엣지, 사파리 등 모두가 위의 웹 표준을 근거하여 브라우저를 만들게 된다.
여기서 크로스 브라우징은 브라우저마다 다른 업체에 따라 다른 환경에서
우리가 만든 코드들이 동일하게 구현될 수 있도록 도와주는 것이 크로스 브라우징이다.

예전에는 크로스 브라우징 이슈라고 하여 크롬에서 돌아가는 코드가 엣지에서는 돌아가지 않는 등의 문제가 있었다.
요즘에는 많이 해결 됨!
특히 IE는 브라우저 환경이 웹 표준과 다른 내용들이 많아서 개발시에 문제가 좀 있다.

IE는 2013년 이후로 버전이 업그레이드 되지 않고
2020년 8월 이후 더 이상 서비스를 하지 않게 됐다.

제발 IE는 사용하지 말자.
IE 쓰는 사람이 있으면 그 자리에서 컴퓨터를 부숴버려라.


웹 이미지

이미지는 크게 2가지 종류가 있다 비트맵(Bitmap) / 벡터(Vector)

비트맵

픽셀이 모여 만들어진 이미지다. 레스터 이미지라고도 한다.
비트맵은 정교하고 다양한 색상을 자연스럽게 표현해준다.
하지만, 확대/축소 시 계단 현상이나 품질 저하가 나타날 수 있다.

벡터

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

둘 다 장단점이 있으니 우리가 필요에 따라 이용하면 된다.
주로 jpg, png 확장자는 비트맵이고, svg 확장자는 벡터이다.

그래서 사진, 배경은 비트맵, 아이콘, 로고는 벡터로 많이 사용한다.

JPG/JPEG

JPG는 손실 압축 방식을 사용한다.
여기서 손실은 말 그대로 이미지를 압축할 때 이미지가 조금씩 손상이 된다.
이미지의 품질과 용량을 쉽게 조절이 가능한 장점도 있다.
표현 색상도 24비트 (1600만 개).

이미지를 반복적으로 새롭게 저장하는 것은 피하자.

PNG

PNG는 비손실 압축이다.
png로 저장할 때는 이미지 손실되지 않는다.
다만, 용량이 jpg에 비해 클 수 있다.
색상도 8비트, 24비트를 지원한다.

그리고 가장 좋은 점은 Alpha Channel을 지원한다.
알파 채널이란 투명한 부분을 지원하는 것.
그래서 로고나 아이콘을 쓸 때 불필요한 흰 배경 없이 사용할 수 있다.

W3C에서 권장하는 포맷이다.

GIF

이미지 안에 문자열 같은 정보들을 저장할 수 있는 확장자이다.
이미지 파일 안에 여러 이미지들을 저장하는 것.

애니메이션, 움짤 등을 만들 수 있다.
PNG와 마찬가지로 비손실 압축이다.

하지만, 8비트 색상만 지원이 가능하다.

WEBP

JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷.

완벽한 손실, 비손실 압축을 모두 지원한다.
GIF같은 애니메이션도 지원.
Alpha Channel도 지원한다.

하지만 개발된지 비교적 최근이라 IE에서는 지원하지 않는다.
그래서 WEBP를 쓸 때는 호환성을 꼭 체크해봐야 한다.(하위호환성)

SVG

벡터 그래픽을 표현하는 포맷

해상도 영향에서 자유롭고, CSS와 JS로 제어가 가능하다.
파일 및 코드도 삽입 가능.

This post is licensed under CC BY 4.0 by the author.

Apollo InmemoryCache에 대해 짧은 공부

초심으로 돌아가 공부하는 Front-End 2편 HTML

Comments powered by Disqus.