Restful API
REST: 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미합니다. 즉, 자원(resource)의 표현(representation) 에 의한 상태 전달입니다. (이러한 REST 를 충족하는 API를 Restful API라고 합니다.)
(+) 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일입니다.
(+) HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미합니다.
(+) 장점: 별도의 인프라 구축이 필요 없음, 메시지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악할 수 있음 등
(+) 단점: 표준이 존재하지 않음, 구형 브라우저가 아직 제대로 지원해주지 못하는 부분이 존재
CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)
추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.
(+) CORS의 예시: https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우.
(+) 보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. XMLHttpRequest와 Fetch API는 동일 출처 정책을 따릅니다.
(+) JSONP: 프론트엔드 측에서 CORS를 우회하기 위해 사용하는 방법으로, 자바스크립트 소스 자체는 CORS가 적용되지 않는다는 점을 이용하여 방식으로 JSON을 불러오는 방법
SEO (Search Engine Optimization)
검색 엔진에서 검색 결과의 상위에 오르게 하도록 웹 페이지를 최적화하는 작업입니다. 페이지 상위에 검색 결과가 노출되면 홍보 효과가 늘어나므로 인터넷 마케팅에서 중요시되고 있습니다.
SPA에서 SEO를 하는 방법
별도의 서버 렌더링으로 생성한 페이지를 만든 뒤 검색엔진이 URL을 그 페이지를 가르키도록 지시합니다.
- URL에서 해시뱅(#!) 문자를 이스케이프 프래그먼트(escaped_fragment=)로 대체하는 방법
- 페이지 내에 를 추가하는 방법
- 가상 브라우저 툴을 사용하는 방법
자바스크립트의 호이스팅(Hoisting)
호이스팅은 변수를 선언하고 초기화 했을때 선언부분이 최상단으로 끌어올려지는 현상을 말합니다. 변수가 있으면 위치에 상관없이 최상단에서 undefined 된 형태로 존재하게 됩니다.
자바스크립트의 클로저(Closure)
자바스크립트는 함수 안에서도 함수를 선언 할 수 있습니다. 전자를 외부함수라 정의하고 후자를 내부함수라 정의해보면 기본적으로 내부함수는 외부함수의 요소에 접근이 가능한데 외부함수에서 그 함수의 수명이 다 하여 외부함수가 종료된 후에도 외부함수의 변수에 내부함수가 접근 할 수 있는 메커니즘을 클로저라고 합니다.
(+) 클로저를 통해 자바스크립트에서도 private한 변수를 생성할 수 있습니다.
(+) 외부 환경을 기억해서 내부 안에 가둔다는 의미로 클로저(closure) 라고 합니다.
Babel의 기능을 한 단어로 요약하면?
트랜스 컴파일러
마치며..
이번주는 next는 공부와 프로젝트에 적용할 socket.oi를 공부해 알림과 실시간 채팅을 구현하기 위해 공부 하고 적용했다.
물론 지금 다 구현 되있는것은 아니다. 일딴 서버 측과 socketio 연결 부터 잘 안됬다.
찾아서 공부하고 적용하는 과정에서 공부했던 블로그 작성일 사이에 변한게 있어서 그랬다..ㅠㅠ
이게 왜 안되는지 찾는데 진짜 오래 걸렸던거 같다..ㅠㅠ
다행히 서버 측과 연결은 됬고 이제 각 알림 기능을 적용 하면된다...
꾸준히 머든 계속 하고 기록하자.
