본문 바로가기

웹개발

 (60)
HTTP HTTP란? Hyper Text Transfer Protocol, 웹브라우저와 웹 서버가 통신을 할 때의 규칙. HTTP 요청(Request)의 구성요소 HTTP Request Line: 웹 서버로 부터 데이터를 가져올 때의 요청방법 / 요청한 정보 / 웹브라우저가 현재 사용하고 있는 혹은 사용할 수 있는 http 버전 HTTP Request Headers: Host - 요청하는 웹사이트(웹 서버)의 주소 User-Agent: 웹 브라우저 정보 Accept-Encoding: 웹브라우저가 지원하는 압축방식 If-Modified-Since: 마지막으로 다운로드 받은 시간. 웹 서버에서는 응답할 때 자신이 가진 파일이 더 최신이면 전송해주고 그렇지 않으면 전송하지 않는다 HTTP 응답(Response) 구성요..
자바스크립트 JSON 브라우저 위에서 동작하고 있는 웹 애플리케이션과 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지를 정의한 것이 http (Hypertext Transfer Protocal) 이다. 클라이언트가 서버에 하이퍼텍스트를 요청하고 서버가 그 데이터를 응답하는 방식으로 진행이 되는데 여기서 하이퍼 텍스트는 하이퍼링크, 문서나 이미지 파일들을 모두 포함해서 말한다. 이렇게 서버에게 데이터를 요청해서 받아올 수 있는 방법으로는 ajax를 사용하는 방법이 있다. ajax는 Asynchronous JavaScript And XML 의 약자로 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술을 의미한다. 대표적인 예로는 XHR (XMLHttpRequest)라는 오브젝트가 있다. 이것은 브라우저에서 제공하는..
자바스크립트 데이터 타입 : 오브젝트 Objects 자바스크립트 오브젝트 오브젝트는 자바스크립트의 데이터 타입 중 하나로 연관된 데이터들을 묶어놓은 것으로 키와 벨류로 이루어진다. 오브젝트에는 프리미티브 타입이 들어있는데 프리미티브 타입은 변수 하나당 값을 하나만 담을 수 있고 자바스크립트에서는 클래스가 없어도 바로 오브젝트를 생성할 수 있다. const obj = {}; // 'object literal' syntax const obj1 = new Object(); //'object constructor' syntax function print(person) { console.log(person.name); console.log(person.age); } const bob = { name: "bob", age: 4 }; print(bob); // bob..
클래스와 상속 그리고 인스턴스오브 (Class & Inheritance &instanceof) 클래스 Class 클래스는 조금 더 연관 있는 데이터를 한 곳에 묶어놓는 컨테이너 같은 역할을 한다. 클래스에는 이름과 나이 같은 속성(fields)과 행동(메서드)이 들어있다. 이렇게 필드와 메서드가 종합적으로 묶여있는 것을 클래스라고 하는 것이다.간혹 메서드는 들어있지 않는 경우도 있는데 그런 클래스를 데이터 클래스라고 한다. 이렇게 관련 있는 변수나 함수들을 묶어놓은 것을 클래스라고 하고 클래스 안에서 내부적으로만 보이는 변수와 밖에서 보일 수 있는 변수들을 나누어서 외부적으로 보이지 않게 하는 것을 캡슐화(encapsulation)라고도 한다. 클래스를 이용해서 상속과 다양성이 일어날 수 있는데 이런 모든 것들이 가능한 것이 객체지향 언어라고 하고 자바스크립트는 객체지향 언어이다. 클래스는 틀, ..
Hoisting(호이스팅), Scope(스코프) Hoisting 어디에 선언을 했는지와는 상관없이 항상 제일 위로 끌어올려주는 것. scope 어떤 변수에 접근할 수 있는지를 정의하는 것. 전역 스코프와 지역스코프로 나뉘며 지역 스코프는 또 함수 스코프, 블록 스코프로 구분한다. const apple = 'red'; function print() { const lemon = 'yellow' console.log(apple); // 'red' } print(); console.log(lemon); //Uncaught ReferenceError: lemon is not defined 전역 스코프 변수 변수가 모든 함수에 속하지 않고 {}괄호안에도 들어있지 않다면 전역 변수라고 한다. 전역 변수를 선언하면 자바스크립트 코드 어디서든 불러서 쓸 수 있다. 전..
html에서 자바스크립트 불러오기 - script async 와 defer의 차이점 HTML에서 자바스크립트를 포함할 때 어떻게 포함하는 것이 좋은지 async와 defer의 차이점을 알아두면 효율적으로 사용할 수 있다. head 안에 포함되어 있을때 html 읽기(title까지) - script 다운로드 - script 실행 - 나머지 html 읽기 먼저 사용자가 html 파일을 다운로드하였을 때 브라우저는 그것을 한줄한줄 분석한다. 그러다가 스크립트를 만나면 그 스크립트를 다운로드하여야 된다고 읽기 때문에 html을 파싱 하는 것을 잠시 멈추고 필요한 자바스크립트를 서버에서 다운로드하여서 이것을 실행한 다음 html을 다시 파싱 한다. 이 과정에서 만약 자바스크립트 파일이 크기가 큰 파일이라면 다운로드하는 시간이 길어지고 그동안 html이 파싱 되지 못하고 브라우저에 보이지 않는 불..
[반응형 웹의 기초] 이벤트 추가하기 addEventListener, 스크롤바 만들기 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. addEventListener( ) 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. 일반적으로 Element, Documnet, Window 지만 이벤트를 지원하는 모든 객체를 대상으로 할 수 있다. target.addEventListener(type, listener); type: 반응할 이벤트 유형을 나타낸다. (대소문자 구분) listener: 여기에는 함수가 들어간다 안에 함수를 바로 작성해주어도 되고 함수 이름을 넣어주고 함수는 따로 작성해주어도 된다 window.addEventListener('click', function () { new Character(); }); . function clic..
자바스크립트 Date 오브젝트 자바스크립트의 ES5기반으로 한 기본 개념들입니다. 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. Date 오브젝트 시간 값이라고도 불리는 Date오브젝트는 연월일, 시분초, 밀리초를 제공한다. 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리 초로 나타내고있다. new Date( ) var obj = new Date(2020,1,1,1,1,1,1); console.log(obj.toLocaleString()); //2020. 2. 1. 오전 1:01:01 Date 인스턴스를 생성한다. 파라미터의 값을 인스턴스의 프리미티브 값으로 설정한다. 파라미터를 작성하지 않으면 현재시간이 설정된다. var obj = new Date(2020, 06);..

티스토리툴바