Web Developer [정리 중]

Semantic Versioning

<div id="main"> HTML4
<main> HTML5

• 태그 div와 span만으로 웹 페이지를 구성할 수 있으나 웹 접근성 차원에서 문제가 된다.
• 영역 구분이 확실한 문서가 적절한 키워드를 찾기 수월하므로 SEO에 영향을 준다.
  
• 웹 규모가 커짐에 따라 의미 있는 내용을 추리는데 많은 시간과 자원을 사용한다.
• 정확하고 가치 있는 정보를 탐색하기 위해 웹 문서가 단순 코드 나열이 아닌, 구분할 수 있는 의미를 가진 구조로 동작해야 한다.

Semantic Elements

• header와 footer는 문서의 부가정보 표기하는데 사용되며 중첩될 수 없다.
• main과 section, article은 본문 내 부가정보 표기하고 구획할 때 사용한다.
• main은 문서 내 한 번만 사용 가능하며 contents 전체를 감싼다.
• section과 article은 내용과 형식으로 나눈다.
• nav는 사이트 전체 흐름을 제어하기 때문에 문서의 변화와 상관없이 항상 노출되는 편이다.
• aside는 section이나 article 내에서도 사용할 수 있다.
• details와 summary는 대부분 같이 사용하며, 클릭 시 상세 내용이 확장되는 UI를 가지고 있다. (공지사항, FAQ 등)
• figure는 독립적인 contents를 의미하며, 내부에 figcaption을 사용하여 부가 설명을 붙일 수 있다.

SSH

• Secure Shell Protocol
• 컴퓨터와 컴퓨터가 인터넷 같은 공용 네트워크를 통해 안전한 통신을 위해 사용하는 프로토콜
• 데이터 전송 : GitHub에서 Push할 때 SSH 활용
• 원격 제어 : AWS 같은 클라우드 서비스에 SSH 통해 접속하여 머신에 명령
• Private/Public Key

HTTP/HTTPS and APIs

Internet

HTTP

• HyperText Transfer Protocol
• HTTP 메세지를 통해 전송
• HTML, TEXT, 이미지, 음성, 영상
• JSON, XML (API)
• 클라이언트, 서버 구조
• 무상태 프로토콜, 비연결성 메시지

• Browser
• DNS
• Hosting

HTML

• 의미

SEO

• Search Engine Optimization
• 키워드 검색 시 결과를 상위에 노출시키기 위해 필수

SPA

• Single Page Application
• 화면 이동 시 필요한 데이터를 서버사이드에서 HTML을 전달받아 렌더링하지 않고, 서버로부터 JSON을 전달 받아 동적으로 렌더링한다.
  
• 기존 어플리케이션은 화면 이동 시 HTML을 서버사이드에서 받아 처음부터 다시 로딩하기 때문에 시간이 더 소요된다.
• SPA는 클라이언트가 화면 구성에 필요한 HTML을 갖고 있기 때문에 서버사이드에서 필요한 데이터를 JSON 형식으로 받아 속도가 빠르다.
• 처음 화면을 로딩할 때 시간이 조금 더 걸리고 구현하는데 복잡한 단점이 있다.

AJAX

• Asynchronous JavaScript And XML
• JavaScript를 사용한 비동기 통신, 클라이언트와 서버간 XML 데이터 주고 받는 기술
• JavaScript를 통해 서버에 데이터 요청
• 웹 페이지를 리로드 하지 않고 데이터를 불러오는 방식으로 프로그램이 멈추지 않고 계속 돌아가는 비동기 방식이다.
• HTML 전체 페이지가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 요청한다.
• JSON이나 XML 형태로 필요한 데이터를 받아 갱신하기 때문에 자원과 시간을 아낄 수 있다.

BE

OS

• Process Management
• Memory Management
• I/O Management
• Interprocess Communication
• Threads and Concurrency
• POSIX : stdin, stdout, stderr, pipes
• Terminal command

grep, awk, sed, lsof, curl, wget, tail, head, less, find, ssh, kill

PostgreSQL, MySQL, MariaDB, Oracle

• Structed Query Language
• Strict and clear schema
• Relation
• 스키마를 만족시키지 못하는 레코드는 테이블에 필드를 추가하거나 수정할 수 없다.
• 데이터가 자주 수정되거나 명확한 스키마가 필요한 경우 사용한다.

MongoDB

• No Schema, No Relation
• 데이터의 필드가 변경될 가능성이 높고, 읽기는 자주 하지만 수정이 많이 않은 경우 사용한다.

ORM

ACID

Transaction

Noramlization

Indexes

APIs

REST

JSON APIs

Authentication

• OAuth
• Token
• JWT(JSON Web Token)

Caching

• CDN
• Server Side : Redis
• Client Side

Web Security

Architectural Patterns

Monolithic Apps

Micro Services

SOA

Elasticsearch

Containerization & Virtualization

Docker

Web Servers

Nginx

Apache