그냥

https://developers.naver.com/apps/

https://ovenapp.io/

https://www.ncloud.com/

https://www.mockaroo.com/

https://postcss.org/

* HTTP 통신

보통 웹 브라우저에서 일어나는 통신을 말한다.

초기에 HTML 파일을 전송하는 목적으로 만들어졌으나,

현재는 JSON, IMG 등 다양한 파일 또한 전송 가능하다.

HTTP 통신은 클라이언트에서 서버로 요청을 보내고,

서버가 응답하는 단방향 방식으로 통신이 이루어진다.

응답에는 클라이언트의 요청에 따른 결과를 반환한다.

응답을 받은 후 연결이 끊어지는 것이 기본 동작이지만,

필요하다면 Keep Alive 옵션을 주어 일정 시간동안 연결을 유지하는 것이 가능하다.

* Socket(소켓) 통신

소켓 - 두 프로그램간 데이터를 주고 받기 위해 생성되는 통신 단자

소켓 통신이란 서버와 클라이언트 양방향 연결이 이루어지는 통신이다.

보통 스트리밍이나 실시간 채팅 등 실시간으로 데이터를 주고 받아야 하는 경우,

연결을 자주 맺고 끊는 HTTP 통신보다 소켓 통신이 적합하다.

소켓 통신은 계속해서 연결 상태이기 때문에 HTTP 통신에 비해 많은 리소스가 소모된다.

자주 데이터를 주고 받는 환경이 아닌 경우 HTTP 통신을 이용하는 것이 유리하다.

자주 데이터를 주고 받아야 하는 환경에서는 소켓 통신이 유리하다.

HTTP 통신은 사용자가 서버에 요청을 보내는 단방향 통신, 소켓 통신은 양방향 통신이다.

# 본 글은 '노마드 코더 (Nomad Coders)' 유튜브를 보며 간단히 개인적으로 정리한 내용입니다

CSS 를 적게 작성하는데 도움주는 태그

* <progress></progress>

- 1줄로 진행률 표시줄을 출력해준다..

- 속성 : value, min, max

- css로 추가 커스터마이징 가능함.

- metter 태그와 밀접하게 관련되어 있다.

- 예시 : <progress value="50" min="0" max="100"></progress>

* <meter></meter>

- 유저에게 값의 수준을 보여준다.

- 값의 수준에 따라 색상 변경된다.

- 속성 : min, max, low, high, optimum, value

- 예시 : <meter value="20" min="0" max="100" low="20" high="65" optimum="15"></meter>

* <details></details>

- detail 태스에는 'open' 이라는 CSS selector가 있다.

- 클릭 여부에 다라 스타일 변경 가능함.

- summary, span 태그와 함게 사용된다.

- 예시 :

* <picture></picture>

- 각기 다른 버전의 이미지를 표시할 수 있다.

- (유저 장치나 환경에 따라)

- 모바일 환경에서는 저화질의 이미지를 출력하는데에 사용할 수 있다.

- (아무래도 더 빨리 로딩 가능하겠지?)

- img, source 태그와 함께 사용된다.

- source : 조건, img : 디폴트

- 브라우저가 picture 또는 srouce 같은 태그를 지원하지 않는 경우 디폴트 img 사용된다.

- 예시 : 

창 width 사이즈에 따라 (500,900,1200) 유튜브/구글/네이버 이미지가 보여지게 됨

* <datalist></datalist>

- Javascript 작성 없이, Auto complete (자동완성) 기능을 가능하게 한다.

- 사용방법 : 1. input (입력값)을 가져야한다.

-     2. datalist를 만들고 id를 부여해야 한다.

-     3. 해당 id에 input의 list 속성값은 준다.

-     4. datalist 안에서 option 태그를 사용한다.

- 결과 : input 클릭 시 입력 가능한 옵션이 자동으로 출력된다.

-     그 후, 유저가 타이핑 시 결과값도 자동으로 필터 될 것이다.

-     첫글자가 아닌 포함된 결과를 필터링한다.

- 예시 :

What is your favorite movie?