나오리의 개발일지 🚴‍♂️=3

목차 1. SEO란? 2. SEO를 유리하게 만드는 방법 3. SEO를 위한 작업들 1. SEO란? Search Engine Optimization 검색 엔진 최적화로, 검색 엔진에서 웹 사이트가 상위에 노출될 수 있도록(=접근성을 높일 수 있도록) 최적화하는 과정 HTML 문서를 분석하여 사용자가 검색 결과를 빠르게 얻을 수 있게 도와준다. 사용된 html 태그를 바탕으로 분석한다. (때문에 Semantic tag를 적절히 사용하는 것이 좋다) CSR에서 사용되고있는 HTML의 body는 비어 있다가(의 리액트 특성), 사용자가 해당 도메인을 가진 페이지에 접근하면, 클라이언트가 서버에서 js & HTML 태그를 불러오는 형식이기 때문에 사전에 html 정보를 가지고 있지 않는다. 따라서 검색 엔진이 ..

목차 1. Flux 디자인 패턴의 등장 (feat. MVC 아키텍처 디자인 패턴) 2. Flux 패턴의 개념 3. Flux 패턴의 장단점 1. Flux 디자인 패턴의 등장 (feat. MVC 아키텍처 패턴) 페이스북 컨퍼런스에서 발표된 아키텍처로, client side 웹 애플리케이션(백엔드의 server side 웹 애플리케이션의 디자인 패턴과 상반되는 개념으로 표현)에 사용되는 디자인 패턴 기존의 MVC(Model, View, Controller)는 애플리케이션 규모가 커질수록 Model(데이터를 저장) ↔ view(사용자에게 보여지는 곳)의 데이터 양방향 흐름 때문에 복잡한 데이터 흐름을 갖게 된다. 결국엔 데이터 변화 예측이 힘들어진다는 단점이 있다. 따라서 페이스북은 이 문제의 해결 방안으로 단..

목차 1. HTTP란? 2. HTTP 프로토콜의 특징 3. URL이란? 4. HTTP/1.1 과 HTTP/2.0의 차이 5. HTTPS는 HTTP의 차이 6. 공개키 (비대칭키) 방식이 뭔가? 1. HTTP란? HyperText Transfer Protocol 인터넷에서 데이터(HTML과 같은 문서)를 주고 받을 수 있는 프로토콜(규약) 클라이언트 ↔ 서버 간에 HTTP(S) 프로토콜을 이용해 서로 통신한다. 2. HTTP 프로토콜의 특징 (1) 클라이언트 ↔ 서버 구조 클라이언트가 서버에 요청을 보내면 서버가 요청에 대한 응답을 보내는 구조 (2) 무상태 프로토콜 (Stateless) HTTP에선 서버가 클라이언트의 상태를 보존하지 않는다. 따라서 응답과 요청이 독립적이다. 장점: 응답 서버를 쉽게 바..

CORS(Cross-Origin Resource Sharing) 다른 출처의 리소스 공유에 대한 허용/비허용 정책 한 출처에 있는 리소스에서 다른 출처에 있는 리소스에 안전하게 접근하도록 하는 메커니즘 출처란? URL의 구성 요소 중 프로토콜 + host + port 3가지가 같으면 origin(동일 출처)라고 하며, 이 중 하나라도 다르다면 other origin(다른 출처)이라고 한다. ex) 1. http://example.com/app1 2. https://example.com/app2 프로토콜이 다름 1. http://example.com 2. http://www.example.com 3. http://myapp.example.com host가 다름 1. http://example.com 2. ..

CSR(Client Side Rendering) 클라이언트 쪽에서 렌더링이 일어난다. 서버가 클라이언트에게 html(with links to JS), css를 보내주면 클라이언트는 그것을 받아 렌더링을 시작한다. CSR 단계 user가 웹사이트를 접속한다. CDN(Content Delivery Network)이 html 파일과 js로 접근할 수 있는 링크를 클라이언트로 보낸다. 💡 CDN: 클라이언트와 물리적으로 가까운 서버에서 요청에 응답하는 방식이다. AWS의 cloudflare라고 생각하면 된다. 웹 브라우저(클라이언트)는 html과 js를 다운로드 받는다. 그 동안 유저는 빈 화면을 본다. 💡 서버는 클라이언트에게 아무 내용이 없는 빈 HTML 껍데기를 보낸다. 그리고 이걸 클라이언트 쪽에서 동적..