HTTP 브라우저와 서버가 데이터를 주고받을 수 있는 통신 규약이다. 클라이언트(사용자)가 서버(호스트)에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환한다. HTTP 요청 메시지는 요청 행, 요청 헤더, 메시지 본문으로 구성된다. 요청 행: 요청 메소드, URL, HTTP 버전 정보 등을 포함한다. 요청 헤더: 메시지 정보, 메시지에 저장한 데이터 정보 등을 포함한다. 메시지 본문: 서버 측으로 보내는 데이터를 포함한다. 요청 메시지란 GET, POST 등 데이터 송수신 방식을 지정한 것을 뜻한다. HTTP 응답 메시지는 응답 행, 응답 헤더, 메시지 본문으로 구성된다. 응답 행: 상태 코드, 보충 메시지, HTTP 버전 정보 등을 포함한다. 응답 헤더: 메시지 정보, 메시지에 저장한 데이..

객체 리터럴 객체를 구성하는 속성의 이름과 실제 값을 한 쌍으로 묶어 표현하는 ‘객체 리터럴’을 이용해 객체 생성이 가능하다. 이때 속성의 이름을 키(key)라고 하고 속성의 실제 값을 value라고 한다. const cat = { name: "국희", town: "부천" } 여기서 속성의 value로 함수가 주어지면, 이 속성은 메소드가 된다. 또한 중요한 사실 하나! 키는 중복이 되면 안 되지만 값은 중복이 가능하다는 점이다. const cat = { name: "국희", town: "부천", eat: function() { console.log("밥을 먹는다냥") }, scratch: function() { console.log("건드리면 할퀸다냥") } } 이렇게 객체를 만들었다면 속성을 참조할 ..

Element.classList 웹 요소로부터 클래스 콜랙션을 반환하는 읽기 전용 속성이다. 선택한 요소에서 클래스를 읽어들이게 되면 클래스 목록 객체를 확인할 수 있다. 이 때 각각의 클래스 값에 0번부터 번호가 부여된다. 안녕하세요 const p = document.querySelector('p') console.log(p.classList) // 실행결과는 {0: 'hello', 1: 'greet', 2: 'good'} 반환된 클래스 컬렉션은 유용한 메소드를 다수 포함하고 있는데 아래 표와 같다. 여기서 토글링이란 있으면 제거하고 없으면 만든다는 것을 의미한다. 메소드 기능 예시 add 지정한 클래스 값 추가 add(”new_class”) remove 지정한 클래스 값 제거 remove(”old_c..

생성자 객체를 생성할 때 사용하는 함수로서 ‘생성자 함수’라고도 부른다. 사용할 기능을 정의한 일반 함수와 생성자 함수 사이에 특별한 문법적 차이는 존재하지 않는다. 즉 함수도 생성자의 역할을 할 수 있는데 단, 생성자 함수는 목적이 객체 생성에 있다. 이런 생성자 함수는 자바스크립트가 제공하지 않는 유형의 데이터를 창조 할 수 있다는 점에서 쓸모있다. 여기서 중요한 키워드 하나!! 바로 this 키워드이다. this 키워드는 객체 그 자신을 의미하는데 이 키워드를 이용해 해당 객체의 속성이나 메소드를 추가할 수 있다. // 강아지를 표현하는 'Dog' 객체를 만들고 싶다. function Dog() { this.name = "콩이" this.breed = "시츄" } 생성자 함수는 ‘객체를 이렇게 만들..

* createElement&appendChild document의 createElement메소드는 지정된 이름의 HTML 요소를 만들어 반환해준다. document.createElement('div') document.createElement('a') document.createElement('p') 위와 같이 HTML 요소가 만들어지고 반환되었다고 해서 바로 웹브라우저 화면에 추가되는 것은 아니다. dom에다가 추가하는 작업을 해 주어야 하는데 이때 사용하는 것이 appendChild이다. 기본 사용법과 예제 코드는 아래와 같다. // 기본사용법 target.appendChild(자식으로 추가할 요소) // 예제 const p = document.createElemennt('p') document.b..

* 함수 함수는 '호출될 수 있는 코드 조각'이다. 변수를 선언하고 값을 대입하면 변수를 값 대신 사용할 수 있는 것처럼 함수도 이와 동일하다. 함수를 선언하고 난 이후 코드 조각 대신 함수명을 사용할 수 있다. 그럼 이런 함수를 만드는 방법 함수선언식과 함수표현식에 대해 알아보자. 함수선언식은 아래와 같은 형태를 가지며 선언 이후 함수명은 중괄호 안의 기능 대신 사용할 수 있다! function 함수명() { //함수의 기능을 표현한 구문. 즉 쉽게 말하자면 코드 조각이 들어가는 곳. } 함수표현식 역시 선언 이후 함수명은 중괄호 안의 기능 대신 사용할 수 있고 형태는 아래와 같다. const 함수명 = function() { // 함수의 기능을 표현한 구문 } 이렇게 함수가 만들어졌다면 이제 만들어진..

* null, undefined 그리고 boolean null 데이터는 '없다'라는 의미를 가진 데이터이다. 의도적으로 데이터가 없음을 나타내기 위해 사용하는 일종의 표현 수단이다. undefined는 아직 데이터가 정의되어 있지 않음을 의미하는 것이다. 변수 선언만 하고 값이 없는 상태. boolean은 데이터 타입 중 하나. true, false 단 두가지 값만 존재하는데 참인지 거짓인지 판별할 때 사용하는 데이터. * Document Object Model 웹브라우저는 HTML 문서를 해석하고 화면을 통해 해석된 결과를 보여주는데 이 과정을 우리는 '랜더링'이라고 한다. 랜더링의 과정에서 html을 트리 형태로 구조화해 표현하는 문서(객체)를 생성하는데 이것이 DOM이다. DOM은 또한 자바스크립트..

* HTML + CSS(웹 페이지는 이렇게 생겼어)에서 하나 더 추가 => JavaScript : 브라우저/웹페이지에 동작을 추가 가능하게 하기. * 웹 콘텐츠에 JS 추가하는 방법으로는 두 가지가 있다. 첫 번째는 HTML 내부에 작성하기. 두 번째는 .js 확장자로 자바스크립트 문서 만들고 html 문서에 파일 연결시켜주기. 이때 * 자바스크립트에서 객체란? 어떤 사물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단. 자바스크립트 코드 내에서 객체란 '값 또는 기능을 가지고 있는 데이터'라는 의미. 여기서 새롭게 알게 된 사실! 웹브라우저는 소프트웨어 세계에 존재하는 사물 즉 객체이다. 대표적인 웹브라우저 객체는 window. 이것을 이용해서 웹브라우저에게 다양한 명령어를 내릴 수 있다..

프로젝트에서 맡겨진 기능구현 하면서 1영역 input들에 값을 입력하면 저장하고 저장 alert 띄우고, 입력 못하게 막고 2영역으로 넘어가고 이런 과정으로 개발해야 할 일이 있었다. 저장 alert 띄우고 나서 해당 영역 input들 disabled 하게 JS로 처리했는데, 컨트롤러단으로 값 안넘어와서 ????상태였다가 사수분에게 다른 거 물어볼 겸 같이 물어봐서 해결완료..(나 삐약이 갈길이멀다..) 초초초초간단하게 readonly랑 disabled랑 차이점을 말하자면, readonly는 값은 입력하지 못하게 하는데 컨트롤러단으로 전달은 되는 것이라고 한다. 반대로 disabled는 입력도 값 전달도 할 수 없는 것이다. disabled 된 것들은 input들을 form으로 묶어서 submit해도 데..