배운 것 (29) 썸네일형 리스트형 remote: Permission to 에러 윈도우 제어판 > 자격증명관리자 > github 계정을 push에 쓸 github username으로 변경 https://recoveryman.tistory.com/392 [js] arrow function 의 this function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다. 1. 일반 함수의 this : 이벤트 리스너 예제 const button = document.querySelector("button"); button.addEventListener("click", function(){ console.log(this) // button 콘솔에 찍힘 }); - 일반 함수의 경우 바인딩할 객체를 기준으로 this가 존재했다. 2. 화살표 함수의 this : 이벤트 리스너 예제 const button = document.querySelector("button"); button.addEventListener("click", () => { console.log(this) // window가 .. [js] Ajax란 AJAX란 JAVASCRIPT 의 라이브러리 중 하나로 비동기식 자바스크립트(Asynchronous Javascript And Xml)이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 웹페이지 전체 페이지를 새로 고치지 않고 페이지 일부만을 위한 데이터 로드하는 기법. * 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있다는 큰 장점이 있다 구동 방식 XML HttpRequest객체를 통해 서버에 request(요청) -> JSON 이나 XML 형태로 필요한 데이터만 받아 갱신 AJAX 장단점 장점 1. 서버의 처리가 완료될 때까지 기다리지 않아 속도가 향상된다 2. 서버에서 데이터만 전송하면 되므로 코딩의 양이 줄어든다 단점 1. 히스토리 관리가 안 된다 2. 연속으.. [js] 프로토타입 상속이 어떻게 작동하는가 var a = { attr1: 'a1' } var b = { attr2: 'a2' } b.__proto__ = a; // b의 프로토타입 속성이 객체 a를 가리키고 있다 (= 상속) b.attr1 // 'a1' a.attr1 = 'a000'; // 상속받은 객체의 내용 변경 b.attr1 // 'a000' a.attr3 = 'a3' // 상속받은 객체의 내용이 추가 b.attr3 // 'a3' delete a.attr1 // 상속받은 객체의 내용이 삭제 b.attr1 // undefined 상속 시키고자하는 객체(b)에 상속 받고자하는 객체(a)를 프로토 속성(__proto__)을 이용해 상속시킨다. 이렇게 객체과 객체의 연결을 통한 단방향 공유 관계를 프로토타입 체인이라고 한다. object.creat.. [css] 반응형 메타 태그 스마트폰이나 태블릿 등 모바일 기기는 화면이 작아 해상도에 따라 가로폭을 조절해주는 메타태그를 반드시 기재해야 한다 html 용 pug 용 meta(name='viewport', content='width=device-width, initial-scale=1.0') git 명령어 정리 git 초기 설정 1. 해당 폴더로 가서 깃 초기화 git init 2. 수정 및 추가한 파일 깃에 올리기 git add . 3. 레파지토리 등록 git remote add origin https://github.com/ksy8230/gulp.git 반드시 작업 전에 .gitignore 파일 작성해서 큰 용량은 제외할 것 git 내려받기 git clone https://github.com/ksy8230/xxxxx.git [js] arrow function 규칙 //기존의 function sample var double = function(x){ return x*2;} //arrow function sample const double = (x) => { return x*2;} //매개변수가 1개인 경우 소괄호 생략 가능 const double = x => {return x*2} //함수가 한줄로 표현가능하면 중괄호 생략 가능하고 자동으로 return됨 const double = x => x * 2 //매개변수가 두 개 이상일 때 const add = (x,y) => x + y //매개변수가 없을 때 () => { ... } //객체변환할 때 중괄호 사용 () => {return {a:1};} //return 바로할땐 소괄호 사용 () => ({a:1}) 출처: .. [js] 삼항연산자 목표 : 삼항연산자를 사용해서 class "red" 를 갖고 있는 태그들은 red 라는 텍스트가 찍히게 해보자 html aaa bbb ccc ddd eee eee 나나 css .red {color:red;} .blue {color:blue;} js let li = document.querySelectorAll("li"); li.forEach(function(item){ // if(item.classList.contains("red")){ // item.innerHTML="red" // } item.classList.contains("red") ? item.innerHTML="red" : console.log("?") }); 삼항연산자를 쓰면, if( 조건문 ) { 조건문 결과 } else { 조건문 외의.. 이전 1 2 3 4 다음
