STUDY

HTTP : hypertext Transfer Protocol 서버 통신 규약 Hypertext : 링크, 리소스(이미지, 파일) 서버에게 데이터를 요청해서 받아오는 방법 Ajax : Asynchronous JavaScript And XML 웹페이지에서 서버와 동적으로 데이터를 주고 받을 수 있는 기술 대표적으로 XHR (XMLHttpRequest)라는 브라우저 API에서 제공하는 오브젝트가 있음 이를 이용하면 간단하게 서버와 통신할 수 있다. XML : html과 같은 Markup 언어 서버를 통신하면 XHR 이나 최근에 추가된 fetch() API를 사용한다. 요새 트렌드는 xml을 주고받는 것이 아니라 json을 주고 받는 것 xml은 불필요한 태그가 많아 용량이 크고 가독성이 떨어져서 사용하지 않..

실무에서 많이 쓰고 면접에 잘 나온다고 한다. 1. join 배열의 요소를 string으로 변환하고 구분자를 지정하여 출력할 수 있다. const fruits = ['apple', 'banana', 'orange']; console.log(fruits.join(' & ')); //apple & banana & orange console.log(fruits.join()); //생략시 , 가 나옴 apple,banana,orange 2. split 문자열을 구분자를 이용하여 나누고 배열로 반환한다. const fruits = '사과, 키위, 바나나, 체리'; console.log(fruits.split(',')); //배열로 담겨서 그대로 출력 console.log(fruits.split(',', 2)); ..

배열은 같은 타입의 데이트를 담아두는 자료구조 자바스크립트는 동적 타입 언어이므로 다양한 타입을 한번에 담을 수 있음 ex) 토끼 배열 : 토끼, 검정 토끼, 하얀 토끼.. -> 내가 알던 배열 잡다한 배열 : 토끼, 당근, 자동차, 사자.. -> 자바스크립트에서 가능한 배열 가능하지만 안 쓰는 게 좋다고 함 1. 배열 만들기 int[] arr = new int[5]; 처럼 길이 안정해줌 'use strict'; //1.Declaration const arr1 = new Array(); const arr2 = [1,2]; 2. 인덱스 접근 이건 똑같다 //2. Index position const fruits = ["사과","바나나"]; console.log(fruits); console.log(frui..

primitive 타입은 값만 하나만 받을 수 있지만 Object 타입은 여러가지 값을 담을 수 있는 컨테이너 모든 객체들은 (사용자의 클래스까지도) 모두 Object를 상속받고 있다. -> Object의 기능을 사용할 수 있다. 자바스크립트에선 class 보다 더 많이 씀 1. object 생성 //오브젝트는 key와 value의 집합체 //key: name / value : "홍길동" const person ={name:"홍길동", age:20}; 다른 방법 //오브젝트 생성 const obj1={}; //object literal syntax const obj2 = new Object(); //Object constructor syntax(클래스를 이용해서 생성) 뒤늦게 추가, 삭제 가능 //동적 ..

몰랐던 것 위주로 작성 1. Getter, Setter 프로그램 캡슐화 (은닉성 보장)를 하기 위해 자바 스크립트에서도 Getter, Setter 를 사용한다 'use strict'; //class class Person { constructor(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; } get age() { return this.age; } set age(value) { this.age = value; } } const person1 = new Person('Steve', 'job', -1); console.log(person1.age); 이걸 실행하면 콜 스택이 초과..

function은 Object 타입 그래서 변수에 값처럼 할당할 수 있고 Object 의 속성들을 사용할 수도 있다. 익명으로 많이 쓰는데 function print 처럼 이름을 붙여서 named function 으로 쓸 수도 있다. function 도 호이스팅이 된다. 선언 된 것을 가장 위로 올려준다. 정의하기 전에 호출해서 사용해도 문제가 되지 않는다. //function hoisting console.log(sum(5, 6)); function sum(a, b) { return a + b; } 1. 콜백 변수와 함수들을 매개변수 값으로 넘겨 받아서 사용함 조건에 맞으면 해당 함수 실행 //콜백 const printY = () => console.log("정답"); const printN = () ..

브라우저가 html을 해석하는 과정 1. Loading : 불러오고 2. Parsing : html을 분석하고 DOM( Document Object Model) 트리를 만들어서 데이터를 자료 구조화함 -> 렌더링 트리 만들기 **DOM은 HTML 문서에 대한 인터페이스, java scripts로 수정 가능 3. CSS 스타일을 결정하고 4. Layout : 렌더링 트리가 생성될 때, 각 (Render)객체가 위치와 크기를 갖게 됨 5. Painting : 렌더링 트리를 탐색하면서 메모리 공간에 RGB값을 채워감 HTML안에 JS파일 불러오는 위치 어디서 불러오냐에 따라 스크립트 실행 순서와 브라우저 렌더링에 영향을 미칠 수 있다. 1. Parsing -> 어 자바스크립트네? parsing을 멈춤 -> 필..

JavaScript 기본 JavaScript (줄여서 "JS")는 HTML 문서에 적용될 때, 웹사이트상에서 동적 상호작용성을 제공할 수 있는 완전한 동적 프로그래밍 언어(dynamic programming language)입니다. 이것은 Mozilla 프로젝트, Mozilla 재단 developer.mozilla.org 복습겸 몰랐던 거 정리 자바스크립트는 유연한 동적 프로그래밍 언어 변수 타입 1. var 변수 이름 앞에 써주는 타입 같은 변수를 한번 더 선언해도 오류가 나지않는다(선언하기 전에 값을 할당도 가능) 2. let 다른 프로그래밍 언어에서 사용하는 것처럼 사용할 수 있는 변수 (var처럼 이상한 거 못함) *var는 가급적 쓰지말자 1)var hoisting (호이스팅) : 어디에 선언했..

CSS 기초 HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어 도 아닙니다. Style sheet 언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 developer.mozilla.org CSS(Cascading Style Sheets) - 웹페이지 꾸밀 때 쓰는 Style sheet 언어 (프로그래밍 언어 아님) CSS 구조 전체 구조는 rule set이라고 한다. (rule) selector : 꾸밀 요소 declaration : color: red; , 꾸미기 원하는 요소의 속성을 명시 property : html 요소를 꾸밀 수 있는 방법, color는 p 요소의 속성 property value: 속성 값 각각의..

*크롬창에서 컨트롤 시프트 C를 누르면 element요소가 박스로 보인다. HTML 기본 HTML 은 프로그래밍 언어가 아닙니다; 컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게하거나 특정한 방� developer.mozilla.org HTML(Hypertext Markup Language) - 컨텐츠 구조를 정의하는 마크업 언어 (프로그래밍 언어 아님) wrap - 컨텐츠의 서로 다른 부분들을 씌운다. enclose - tag로 감싼다. 떡볶이 먹고 싶다 -> 문단 태그로 감싸서 문단임을 명시 : 여는 태그 : 닫는 태그 컨텐츠 : 태그 사이에 있는 내용 요소 : 여는 태그, 닫는 태그, 컨텐츠 속성: ..