이번 문서는 완전 기본적으로 무조건 알아야하는 프론트엔드 관련 상식을 말해보도록 하자.
1. 인터넷
인터넷(Inter Networ) 동작 원리
HTTP 이해
브라우저 동작 원리
DNS & ENS
인터넷에서 상호작용하는 것은 노드, 즉 컴퓨터들이다. 수많은 노드들이 상호작용하는 네트워크라면 누가 누군지 피아식별이 안되지 않겠는가. 그래서 인터넷 망에서의 식별 정보가 필요했다. 사람에게는 주민등록번호 내지 집주소가 되겠지만, 컴퓨터 노드들에게는 이게 IP이다. Internet Protocol이라고 해서 컴퓨터의 위치를 고유한 IP 값으로 표현하는 것이다. 지금 내가 접속중인 컴퓨터의 인터넷 네트워크상 주소는 121.140.30.13이다. 그런데 이 10자리 숫자가 보기 편할까? 블록체인에서 Hash 기반 어카운트보단 그나마 낫지만 우리의 아이디나 식별정보는 이렇게 복잡하지 않다. 그래서 도메인 네임 서비스가 탄생했다.
도메인 네임(DNS)이란?
호스팅이란?
2. HTML/CSS/JS
인터넷에서 활동하는 컴퓨터들은 HTML이라는 웹 문서 표준 규격을 통해 웹 브라우저에 데이터를 내려준다. 사람으로 표현하자면, HTML은 기본 피지컬이고 CSS와 JS는 화장품 내지 잡화라고 보면 된다.
1) HTML
HTML 기초
의미론적(Semantic) HTML 작성
폼과 유효성 검사
컨벤션과 모범 사례
접근성
기본 SEO
-
퍼포먼스 마케팅의 기본이 되는 SEO. 말 그대로 검색엔진이 특정 웹 문서를 더 잘 읽을 수 있게끔 HTML 코드에 반영해주는 절차를 말한다. 이 역시 사람으로 표현해보자면 특정 웹사이트가 검색 크롤링 봇(ex. 구글 봇)에게 "나 여깄소"하고 자기 PR을 하게끔 코딩해주는 것으로 보면 된다.
-
실무에서는 주로 HTML 문서 헤더에 입력되는 태그에 og:title, og:description, og:image 등 해당 웹문서의 메타데이터를 다양한 태그를 통해 입력하는 방식으로 SEO가 진행된다. 참고로, 최근 나오는 노코드 베이스 웹 빌더 SaaS(Webflow, Ghost, Imweb 등)는 SEO Setting이 다 탑재되어 있다.
-
schema.org는 SEO 측면에서 유용하게 활용할 수 있게끔 웹 구조(스키마)에 대한 정보를 말해주고 있다.
2) CSS
CSS 기초
CSS 레이아웃 만들기
- Float
- Positioning
- Display
- Box Model
- CSS Grid
- Flex Box
반응형 디자인과 미디어 쿼리
3) Java Script
구문(Syntax)과 기본 문법
DOM 조작 방법
Fetch API / Ajax (XHR)
모듈러 JavaScript와 ES6+
이외 주요 개념
- 호이스팅
- 이벤트 버블링
- 스코프 프로토타입
- Shadow DOM
- strict
번외) 웹 개발 프레임워크
그 동안 자주 들어왔던 웹 프레임워크 3가지에 대한 정리이다. 우선, 개발을 함에 있어서 라이브러리와 프레임워크에 대한 용어 정의를 구분할 필요가 있다.
- 라이브러리 : 개발자가 소스코드를 작성하면서, 필요하면 그때그때 라이브러리를 사용 및 호출해서 자기가 개발하고 있는 애플리케이션의 흐름에 맞춰 자유롭게 가져다가 쓸 수 있는 코드 뭉치
- 프레임워크 : 프레임워크라는 큰 틀(흐름)에 맞춰서 소스코드를 작성해야 하는 인프라. 라이브러리처럼 소스코드를 작성하면서 자유롭게 호출하고 이런 개념이 아님. 말 그대로 좀 더 용이한 웹 개발을 하기 위해 개발자에게 제한을 두는 틀
라이브러리 vs 프레임워크 도식화
주요 웹 개발 프레임워크
-
Spring (Java) : 회사에서 쓰고 있는 프레임워크. 우리나라에서는 Spring이 모든 공공 프로젝트에서 쓰이는 프레임워크라고 함.
-
Django (Python) : Flask보다는 무거운, 다양한 기능을 탑재하고 있는 웹 개발 프레임워크
-
Flask (Python) : 가장 가벼운 웹 프레임워크.
웹 펀더멘털 관련 참고 문헌
프론트엔드 개발 로드맵
