프론트엔드 공부 시작 전

HyunSooBae·2022년 9월 21일

프론트엔드 공부

목록 보기

1/13

[메가바이트 스쿨]핀테크 서비스 프론트엔드 취업 완성 과정(FE 3기) 가 시작됐다. 본격적인 프론트엔드 공부를 시작하기 전에 알아두면 좋을 내용들을 살짝 짚고 넘어가려한다.

비즈니스 로직 : 웹 사이트가 동작하는데 필요한, 핵심 데이터 처리를 수행하는 알고리즘 등
풀스택 개발 : GUI 프론트엔드부터, 데이터베이스 백엔드 등 모든 소프트웨어 스택을 개발하는 것
웹브라우저에서 동작 할 수 있는 세가지 언어 : html, css, JS
html의 역할(기획자) : 하이퍼 텍스트Hyper Text란 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동)할 수 있는 텍스트를 말함. 일반적으로 알고 있는 링크 버튼(텍스트)를 의미. 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당
css의 역할(디자이너) : Cascading Style Sheets. 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당
JS의 역할(개발자) : 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당
제작된 웹 사이트(웹 애플리케이션, 웹앱)를 제품(Product)이라고 부르기도 함

통신 프로토콜(Communication Protocol, 통신 규약)은 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식 및 규칙의 체계를 의미. 대표적으로 HTTP, HTTPS, FTP, SSL등 이 있다
유저컴퓨터와 서버 사이에서는 일어나는 과정
최초요청(Request) → 최초 응답(Response) → 추가요청(이미지 소스 등) → 추가 응답(CSS, JS, JPG...)
웹 사이트를 개발하는 우리의 컴퓨터 환경을 '로컬(Local) 개발 환경'이라고 부름

웹 표준 : Web Standard. '웹에서 사용되는 표준 기술이나 규칙'을 의미. W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술. 표준화 제정 단체에서 제정하는 단계는 크게 4가지. 1.초안(Working Draft, WD) 2.후보권고안(Candidate Recommendation, CR) 3.제안권고안(Proposed Recommendation, PR) 4.권고안(W3C Recommendation, REC) 이 있다.
*브라우저 공급업체 (Browser Vendors)에서도 웹표준에 맞춰 만듦
크로스 브라우징 : 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법
뷰포트 : 하나의 웹 페이지가 출력되는 전체 영역
렌더링 : 브라우저의 뷰포트에 웹 사이트를 출력하는 행위

비트맵(Bitmap) : 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름(jpeg, gif, png)
벡터(Vector) : 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지(svg)
머터리얼 디자인(Material Design)은 고품질 디지털 경험을 구축할 수 있도록 Google에서 만든 디자인 시스템(방식)
WEBP : JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷. 완벽한 손실·비손실 압축 지원, GIF같은 애니메이션 지원, Alpha Channer 지원(손실 비손실 모두)
SVG(Scalable Vector Graphics)는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷. 해상도의 영향에서 자유로움, CSS와 JS로 제어 가능, 파일 및 코드 삽입 가능

백틱(Backtick), 그레이브(Grave)	캐럿(Caret)	엠퍼센드(Ampersand)	에스터리스크(Asterisk)	하이픈(hyphen, dash)	언더스코어(Underscore, Low dash, 밑줄)
`	^	&	*	-	_

이퀄(Equals sign)	쿼테이션(Quotation mark, 큰 따옴표)	아포스트로피(Apostrophe, 작은 따옴표)	에스터리스크(Asterisk)	콜론(Colon)	세미콜론(Semicolon)
=	"	'	*	:	;

피리어드(Peroid, Dot, 닷, 점, 마침표), 슬래시(Slash)	버티컬 바(Vertical bar)	백슬래시(Backslash, 역 슬래시)	퍼렌서시스(Parenthesis, 소괄호, 괄호)	브레이스(Brace, 중괄호)	브래킷(Bracket, 대괄호)
.	｜	＼	( )	{ }	[ ]

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

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