[패스트캠퍼스] 프론트엔드 강의 정리

[패스트캠퍼스] 프론트엔드 강의 #1

Unsung 2022. 9. 14. 22:31

 

 

 

프론트엔드(앞단) 개발

HTML, CSS, Javascript를 사용해 데이터를 GUI(Graphic User Interface)로 변환하고, 사용자가 상호작용 할 수 있게 하는 것

 

 

프론트엔드 개발기술들

  • HTML : Hyper Text Markup Language 구조 (기획)
  • CSS : Cascading Style Sheets 꾸밈 (디자인)
  • JS : Javascript 동적처리 (개발)

최종적으로 만들어진 웹페이지를 프로덕트(product)라고도 한다.

 

프론트엔드 공부 중 Javascript에서 많은 포기가 발생한다...
> 사고방식의 문제! 화이팅...

 

 

웹앱의 동작원리

  1. 주소입력 : 통신프로토콜 - 원거리 통신 장비 사이에서 메시지를 주고받는 규칙. HTTP, HTTPS, FTP 등
  2. 최초 요청 (request) : 주소 ➡ 서버
  3. 최초 응답 (response) : 서버 (HTML) ➡ 브라우저(랜더링)
  4. 추가 요청 : 브라우저 ➡ 서버
  5. 추가 응답 : 서버(CSS, JS, image) ➡ 브라우저
  • 로컬(local) 개발환경 : 웹앱을 개발하는 우리의 컴퓨터 환경
    ▶결과물이 사용자가 접속할 수 있는 곳에 저장되어야, 우리의 프로덕트를 모든 사람들에게 보여줄 수 있다,..

 

웹 표준
W3C의 권고안 : 명확한 웹표준!

  • 크로스 브라우징 cross browsing : 여러 브라우저에서 동일하게 작동하는 사용자 경험을 제작하는 기술 및 방법
    (크로스브라우징 이슈는 점점 사라져 가는 중이지만... 오오 끔찍한 인터넷익스플로러!)


브라우저 구조

  • 브라우저 창 window
  • 탭 tab
  • 주소창 address bar
  • 뷰포트 Viewport : 웹페이지가 렌더링되는 특정 영역


웹에서 사용하는 이미지

  • 비트맵 : 픽셀의 집합, 레스터 이미지 (정교하고 다양한 색상을 자연스레 표현)
  • jpg : 손실 압축 방식(용량 줄어둠), 반복적으로 저장시 품질이 떨어짐, 가장 널리 쓰임
  • png : 비손실 압축(용량이 비교적 큼), 알파채널(투명도) 지원, W3C 권장 포맷
  • gif :  비손실 압축, 8비트 색상만 지원, 여러장의 이미지를 담을 수 있음(움짤)
  • webp : 구글개발 포맷, 손실/비손실 동시 지원, 애니메이션 지원, 알파채널 지원, IE 지원불가 (하위 호환성 확인하자)
  • 벡터 : 점선면의 좌표, 색상 등 수학적 정보 (확대/축소 자유로움)
  • svg : 마크업 기반 벡터그래픽 표현 포맷, CSS와 JS로 제어 가능, 파일/코드 삽입 가능

 

특수 문자 용어

더보기

` : 그레이브 grave, 백틱 backtick
~ : 틸드 tilde
! : 엑스클러메이션, Exclamation mark
@ : 앳 At sign 골뱅이
# : 샵, 넘버 사인 Sharp, Number sign
$ : dollar sign
% : percent sign
^ : 캐럿 Caret (이상)
& : 앰퍼센드 Ampersand
* : 애스터리스크 Asterisk
- : 하이픈 hypen, 대시 dash, 마이너스
_ : 언더스코어 underscore, 로대시 low dash
= : 이퀄 equals sign
" : 쿼테이션 Quotation, 큰 따옴표
' : 아포스트로피 Apostrophe, 작은 따옴표
: : 콜론 colon
; : 세미콜론 semi colon
, : 콤마 comma
. : 페리오드 Period, 닷 dot, 마침표
? : 퀘스쳔마크 question mark
/ : 슬래시 slash
| : 버티컬 바 vertical bar
\ : 백 슬래시 back slash
() : 퍼렌서시스 parenthesis, 소괄호
{} : 브레이스 brace, 중괄호
[] : 브래킷 bracket, 대괄호
<> : 앵글 브래킷 angle bracket, 꺽쇠괄호

 


오픈 소스 라이브러리
오픈소스 라이선스 : 소스 코드나 설계도를 누구나 쓸 수 있도록 공개한 것(저작권 확인!!!)
OpenSource.org

  • Apache License
  • MIT License : 라이선스 명시만 해주면 제약사항은 없다
  • BSD License : MIT 와 동일
  • Beerware : 오픈소스 개발자에게 맥주를 사줘야하는 라이선스ㅎㅎ

 

 

 

[내일배움카드취업], [국비지원교육]