webp란? WebP는 이미지에 대해 고효율의 손실 압축으로 구글에서 제작한 이미지 포맷입니다. WebP 형식의 이미지를 사용하여 낮은 용량의 이미지를 빠르게 로딩할 수 있어요 WebP랑 SEO는 어떤 상관이 있나요?검색시 이미지 영역에 JPG보다 WebP가 더 노출이 잘된다고 얘기할 수 없어요, 현재까지 더 잘 노출되는 것은 WebP나 jpg 중의 조건이 아니라 이미지에 캡션이나 ALT태그를 충실하게 입력한 콘텐츠였어요.하지만 WebP를 사용해야 SEO에 유리하다는 이야기의 핵심은 사용자 편의를 배려하는 겁니다.콘텐츠를 보는 사람들에게 더 낮은 데이터를 소모하게 하고 더 빠르게 로딩되게 해주며 좋은 화질을 보여줄 수 있는 서비스를 제공하는 것 당연히 더 좋겠죠.일반적으로 인터넷 속도가 매우 빠른 사용자..

쿠키와 세션을 사용하는 이유?HTTP 프로토콜의 특징이자 약점(stateless)을 보완하기 위해서 쿠키 특징- 이름, 값, 만료일, 경로 정보로 구성 - 클라이언트에 총 300개의 쿠키를 저장할 수 있다. - 하나의 도메인당 20개의 쿠키를 가질 수 있다. - 하나의 쿠키는 4KB 저장가능 사용자가 특정한 웹사이트에 방문할 때, 사용자 컴퓨터에 저장하는 기록파일서버의 자원을 전혀 사용하지 않는다사용예시: 아이디와 비밀번호를 저장하시겠습니까?, 쇼핑몰의 장바구니 기능, 자동로그인, 오늘은 더이상 이창을 보지않음 팝업 세션특징- 브라우저를 닫거나, 서버에서 세션을 삭제했을 때만 삭제가 되므로, 쿠키보다 비교적 보안이 좋다.- 저장데이터의 제한이 없다. - 각 클라이언트에 고유 Session ID를 부여..

web이란? 1990년에 팀버너스리가 만든 www(world wide web) 웹브라우저? - 웹 페이지 서버에 요청해서 서버의 응답을 웹문서 형태로 받는다. - 받은 웹문서(html, css 등)을 렌더링하여 모니터 화면에 웹페이지를 표시한다. 사용자 인터페이스(user interface)웹 브라우저의 화면(주소창, 새로고침버튼 등) 사용자와 상호작용하는 인터페이스 렌더링 엔진브라우저 엔진으로 전달받은 HTML, CSS를 파싱하여 웹페이지를 표시한다.만일 브라우저 엔진으로부터 URI값만 전달 받았다면, URI를 통신파트에 전달해 데이터를 받아오고, JS엔진을 통해 받아온 JS파일을 파싱한 후, 생성된 Render Tree를 UI백엔드 파트에 전달한다.Safari는 Webkit, Firefox는 Gec..

HTTP Hyper Text Transfer Protocol 하이퍼 텍스트를 전송하기 위해 만들어진 규약 단점 1. 암호화하지 않아서 도청 당할수있다. 2. 통신 상대를 확인하지 않아서 신뢰성이 떨어진다. 서버와 클라이언트가 보낸정보를 중간에 가로채 변경할수도 있다. HTTPS HTTP에 secure를 붙여 HTTP에서의 통신을 안전하게 보호하기 위해 보안이 추가된 것 SSL을 이용한 HTTP통신방식 SSL 이란? 암호화기반 인터넷 프로토콜 인터넷 통신에 개인정보보호, 인증, 데이터무결성을 위해 개발되었다. HTTPS로 변경하면 보안에도 좋지만 검색엔진최적화에도 도움이 된다. 구글에서 HTTPS로 전환을 권고, 검색에도 가산점을 준다. TLS? SSL을 보완한 암호화 프로토콜 SSL과 동일한 기능, 용도..

인스턴스 클래스를 사용하려고 만드는 객체를 인스턴스라고 한다. new 키워드를 이용해 클래스의 실체를 생성할 때 주로 사용한다. 프로퍼티 클래스 내 변수 메소드 클래스 내 함수 메서드는 주로 객체의 프로퍼티 값을 변경하거나 알아내는 기능을 한다.

자바스크립트를 브라우저에서 사용할 수 있는 이유는 브라우저 내에 자바스크립트를 컴파일해서 실행할 수있는 엔진이 있기 때문이다. 브라우저에 있는 자바스크립트 엔진은 브라우저별로 다르다. 크롬 - V8엔진 사파리 - 웹킷 Node.js Node.js는 V8엔진을 기반으로 동작하는 서버사이드 런타임 런타임? 특정언어로 만든 프로그램을 실행할 수 있는 환경 노드를 통해 다양한 자바스크립트 애플리케이션을 실행, 서버를 실행한다. Node.js는 언어가 아니다. 프로그램이다. javascript를 웹브라우저에서 독립시킨 것 Node.js를 설치하게 되면 터미널에서 Node.js를 입력해서 브라우저 없이 실행하게 할 수 있다. CommonJS문법 체계를 기반으로 작동한다. CommonJS는? 자바스크립트 문법을 브라..

함수와 메서드의 차이는 호출방식에 따라 다르다. 함수를 호출하는 객체가 있으면 메서드, 호출하는 객체가 없는 경우는 함수 const testObj = { show1: function() { console.log('aa') } }; function show2() { console.log('bb') }; testObj.show1(); // 메서드 show2(); // 함수 메서드를 변수에 할당하고 호출하는경우는 호출의 주체(this)는 window가 되므로 함수가 된다. const testObj = { show1: function() { console.log('aa') } }; const test2ObjShow = testObj.show1; test2ObjShow(); // 함수 참고 https://deve..

HTTP 란? 요청, 응답 메시지에서 부가적인 정보들을 전송하기 위해 사용된다. HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다 HTTP 헤더 http 전송에 필요한 모든 부가정보 본문 데이터 관련 정보 인증정보 브라우저 정보 서버 애플리케이션 정보 캐시 관련 정보 HTTP 헤더의 구조 Field-Name + : + OWS + Field-Value + OWS Ows = 띄어쓰기 허용 Field-Name = 대소문자 구문 x HTTP 헤더의 분류 General Header : 메시지 전체에 적용되는 정보 Request Header : 요청 정보 Response Header : 응답 정보 Entity Header : 엔티티 정보(body컨텐츠 정보) General Heade..

클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1xx(informational): 요청이 수신되어 처리중 2xx(Successful): 요청 정상 처리 3xx(Redirection): 요청을 완료하려면 추가 행동이 필요 4xx(Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음 5xx(Server Error): 서버오류, 서버가 정상 요청을 처리하지 못함 2xx 클라이언트의 요청을 성공적으로 처리 200 OK 201 Created post 요청을 해서 서버에서 자원을 새로 생성하는 경우 응답헤더에 Location정보가 들어있을 수 있다. 202 Accepted 요청 접수가 되었으나 처리가 완료되지 않았다. 배치 처리 같은 곳에서 사용한다. 204 N..

이 세개는 항상 헷갈릴때가 너무 많다. 영어로도 많이 쓰여서 헷갈린다. 매개변수, 인자, 인수, 파라미터, 아규먼트!! 매개변수(Parameter), 인자 둘다 동일한 것 함수 선언할 때 사용되는 변수 a, b는 매개변수, 인자이다. function addCount(a, b) { return a + b } 인수(Argument) 함수 호출할 때 매개변수에 들어가는 실제로 들어가는 값 1, 3 인수가 된다. addCount(1, 3); 참고 https://bskyvision.com/entry/%ED%97%B7%EA%B0%88%EB%A6%AC%EB%8A%94-%EC%BD%94%EB%94%A9%EC%9A%A9%EC%96%B4-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98parameter%E..