Front-Back/Front-end 공부부

시작 전 알아야 하는 상식

하냥집사 2023. 1. 20. 09:26

위 글은 패스트 캠퍼스 한 번에 끝내는 프론트엔드 개발 강의 정리본입니다.

문제가 될 시 삭제 처리하도록 하겠습니다.

잡다한 지식

비즈니스 로직: 웹 사이트가 동작하는데 필요한 핵심 데이터 처리를 수행하는 알고리즘

풀스택 개발: 프론트엔드, 백엔드 등 모든 소프트웨어 스택을 개발하는 것

만든 웹사이트를 제품이라 지칭하기도

웹앱의 동작 방식

1. 최초 요청: 주소창에 페이지 주소를 입력

2. 서버에서 HTML 파일로 최초 응답

3. 추가 요청: 서버로 추가 요청

4. 추가 응답: 서버에서 css, js, jpg 등으로 추가 응답

웹 표준

‘웹에서 사용돠는 표준 기술이나 규칙 —>W3C에서 표준화 제정

크로스 브라우징

조금 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험을 줄 수 있도록 제작하는 기술, 방법

뷰포트

하나의 웹페이지가 출력되는 전체 영역

영어로 렌더링→브라우저의 뷰포트에 웹 사이트를 출력하는 행위

웹 이미지

비트맵: 픽셀이 모여 만들어진 정보의 집합, 레스터 이미지라고도 부름

정교하고 다양한 색상 자연스럽게 표현, 확대/축소 시 계단 현상, 품질 저하

ex) jpeg .gif .png

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

확대/축소에서 자유로움, 용량 변화가 없음. 정교한 이미지를 표현 힘듦

아이콘들이나 로고 . svg

JPG(JPEG)

Full-color와 Gray-scale 압축을 위해 만들어짐. 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용.

손실 압축, 표현 색상도가 뛰어남, 이미지 품질과 용량을 쉽게 조절 가능, 가장 널리 쓰이는 포멧

PNG

Gif 대체 포멧, 비손실 압축, 용량이 큼,

Alpha Channel 지원(투명도)—>원하는 이미지 영역만 사용 가능

GIF

이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장.

비손실 압축, 움짤 및 애미메이션, 다양한 색상 표현에는 적합 x

WEBP

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

완벽한 손실/비 손실 압축 지원, GIF 같은 애니메이션 지원, Alpha Channel 지원

SVG

마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷.

해상도의 영향에서 자유로움, CSS, JS로 제어 가능, 파일 및 코드 삽입 가능

기호 모음

그레이브 기호(`)→백틱이라고도 불림

틸드 기호(~)

캐럿 기호(^)

엠퍼센드(&)

에스터리스크(*)

언더스코어,로대시(_)

버티컬 바(|)

Apache License

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

MIT License

개인 소스에 이 라이선스를 사용하고 있다는거만 명시

상대 경로—>./(주변) ../(상위 폴더)

절대 경로—>http(https)—>원격 /(//)—>최상위 경로(전체)

CODEPEN.io

여기서 코드 작성하여 확인할 수 있음

각 브라우저마다 기본값이 달라서 reset하자

reset.css cdn 검색해서 가져오기(아래 사이트에서)

reset-css CDN by jsDelivr - A CDN for npm and GitHub

codepen에서는 css옆의 설정에 css베이스를 reset으로 바꾸자’

Emmet

코드자동완성 기능이라네~ tab키로 이용(codepan에서도 가능)

*→곱하기 {}→내용 삽입 $→순서대로 숫자 입력