코딩하는 복서 🥊

1. 슬라이드 원리1) 일정한 크기의 이미지들을 float:left로 '가로'로 정렬 2) overflow: hidden 으로 딱 한장씩만 보이게 함 3) 버튼을 누르면 transform: translateX(±한장크기)로 한장씩 다음/이전 슬라이드 이동 2. HTML 작성1) 슬라이드는 4개 준비 2) 이전 버튼, 다음 버튼도 빠지면 섭함 3) 아이콘은 폰트어썸(fontawesome)에서 연결 DOCTYPE html> new_slide 3. CSS 작성1) float: left 로 이미지를 가로열로 정렬 .slide_item { float: left; } 2) 슬라이드에 한장 크기로 width를 정하고 넘치는건 숨기는 overflow: hidden 시전 (이쁘게 센터도 잡음) - 여기서 배너 수가 많아..

1. if, else if 를 활용한 계산기 만들기 // calculator 만들기 // command, a, b 인수 받기 // command는 add, subtract, multiply, divide const calculator = function(command, a, b){ let result = 0; if(command === 'add'){ result = a+b return console.log(result) }else if(command === 'subtract'){ result = a-b return console.log(result) }else if(command === 'multiply'){ result = a*b return console.log(result) }else if(comm..

1. 조건문 if 문 (if, else if, else) 선언 방법: if(1번 조건){1번 true면 실행할 내용} else if(1번 조건 false일 때 2번 조건) {2번 조건 true면 실행할 내용} else{2번 조건까지 false일 경우 실행할 내용} if(조건)안의 값은 항상 불린 값으로 반환됨 조건문 안에서 == 또는 === 써야하는데 버릇처럼 = 로 쓰는 실수 주의! if문 요약: 조건 ? ture : no // 맞으면 왼쪽 반환 틀리면 오른쪽 반환 2. 논리 연산자 || (OR) // shift + \ 누르면 | 나옴 여러개 중 하나라도 true면 true , 즉 모든 값이 false 여야 false 를 반환 하나만 true 면 다 true니까 첫번째 true를 찾는 즉시 평가를 멈춤..

1. async : function 앞에 붙어 항상 Promise를 반환한다. - async는 Promise문 코드를 줄여주고 가독성을 높혀준다. - resolve, reject를 따로 작성할 필요 없다. 1) 에러면 reject로 판단 -> 알아서 catch로 연계 (async + await 문에서는 try + catch를 쓰는데 뒤에 나옴) 2) 성공이면 resolve로 판단 -> 알아서 then으로 연계 *아래 Promise 문을 async로 정리하면 // Promise 를 async 로 정리해보자 const test = function () { return new Promise((resolve, reject) => { resolve("성공") }) } const test1 = function (s..

0. 들어가며 : 비동기 처리 - 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’ e.g) 값을 호출하는 중에 출력해버려서 값이 undefined로 나옴. - 비동기 처리가 필요한 이유는 프론트에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 답을 줄 지 모르는데 마냥 다른 코드들 멈춰놓고 기다릴수가 없기 때문. 하나씩 완료되고 처리 완료되고 처리 하면 아마 웹 애플리케이션을 실행하는데 수십 분은 걸릴 것. - Promise는 비동기 처리를 위해 사용되는 객체 1. Promise 선언 - 지금은 없는데 나중에 완료되면 실행하고 오류나면 따로 알려줄게요~ 라고 '약속' - 다른거 먼저 실행하세요 Promise는 완료되면 실행할게요. /..

0. 들어가며 - 동일 포멧의 여러 객체를 만드는 방법은 "생성자함수"만 있는 것이 아니다. - class, extends , super 키워드를 이용하면 '몸통' 만들어 놓고 필요에 따라 '팔', '다리' 붙여서 객체 생성하기 좋다. 1. class : 동일 포멧의 객체를 생성한다. (찍어낼 수 있다) - ES6에 새로 추가된 스펙이다. - 함수가 아닌 프로퍼티들을 '속성 : field 필드' 라고 하며 동작을 나타내는 함수는 '메소드'라 한다. - constructor는 생성자라고 한다. - 메소드(객체 내부에 선언된 함수)는 프로토타입으로 저장된다. (생성자함수로는 그냥 객체에 저장) - 생성자함수와 동일하게 new 로 생성하지만 new가 빠져도 에러 없이 undefined를 반환하는 생성자함수와 ..

1. 상속 : 객체에 프로토타입(참조할 숨은 객체)을 할당하는 행위를 뜻 함. - 즉, 참조할 숨은 객체를 할당하는 것을 뜻 함. - 이 상속은 계속 이어질 수 있음. (A안에 B, B안에 C, C안에 D ... ) e.g) A객체에 없네? B에 없네? C에 없네? ... 있으면 반환, 다 찾아도 없으면 null - 객체에서 어떤 값을 호출할 때 프로토타입을 다 뒤져서 찾아봄 2. 프로토타입 : 객체마다 내부에 숨어있는 참조할 대상 (상속된 프로퍼티) - obj1.__proto__ = obj2 // obj1의 프로퍼티에 obj2가 할당됨. - 객체의 숨은 프로퍼티 값을 찾을때 다른 객체를 참조하는 경우, 그 참조 대상을 뜻함 - 숨은 프로퍼티 값은 null 이거나 참조할 다른 객체이거나 둘 중 하나. -..

함수의 this 값을 정하는 메서드로 3가지가 있다. 1. call : 모든 함수에서 사용할 수 있으며 this를 특정 값으로 지정 - 함수.call(1번, 2번, ...) // 매개변수를 직접 받음 - 매개변수 1번은 this 로 사용될 값임 - 매개변수 2번부터 순서대로 함수의 인수가 됨 // call 메서드 const mike = { name: "Mike" } const tom = { name: "Tom" } function showThisName() { console.log(this.name) } showThisName(); // window.name // 지정이 안됨 showThisName.call(mike); // Mike // 함수 안의 this가 mike가 됨 // call 메서드 cons..

0. 들어가며 - 브라우저는 출력까지 기본적으로 4ms 정도의 대기시간이 있다. 1. setTimeout : 일정시간이 지난 후 함수 실행 - setTimeout(콜백함수, 시간, 인수) // 매개변수 기본은 두개 (콜백함수, 시간) - 함수에 '인수'가 필요하다면 시간 뒤에 작성해준다. - 시간은 ms 단위 // 3000은 3초를 의미한다. - 시간은 0으로 적어도 바로 실행 안됨. // 현재 실행중인 스크립트가 종료된 이후 스케줄링 함수를 실행 함. // setTimeout : 일정시간이 지난 후 함수 실행 function hello(){ console.log("hello") } setTimeout(hello, 3000); // 3초후 hello 출력 (처리 속도에 따라 차이있음) // 이렇게 써도 ..

1. 들어가며- 자바스크립트는 어휘적 환경을 갖는다. (Lexical Environment) = (Lexical Scope 라고도 함) - 코드를 실행하면 해당 스크립트의 변수들이 Lexical Environment에 들어감. - 렉시컬 환경은 크게 '전역/내부 렉시컬'로 나누며 한 스크립트에 여러가지 렉시컬 환경이 나올 수 있음. - 내부 렉시컬 환경은 자기보다 외부/전역 렉시컬 환경을 참조할 수 있음 (내부를 찾다가 없으면 점점 외부로나감) - 외부로 나가며 기억했던 변수들을 참조함 - 실행 예시 1)코드 실행 (한줄 씩 내려감) 2)스크립트에 변수 다 전역 렉시컬 환경에 저장 3)내려와서 add3 변수 안에 있는 makeAdder함수 만나고 x 값을 얻음 (makeAdder 렉시컬 환경에 x값 저장..