5강 / 코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 2

캐러쉘 버튼 코드 해석

우리는 캐러쉘 버튼 코드 해석을 통해 어떻게 이루어지는 살펴보려고 한다.

캐러쉘에 대한 JS 코드이다.

const carouselBtn1 = document.querySelector(".btn1");
const carouselBtn2 = document.querySelector(".btn2");
const carouselBtn3 = document.querySelector(".btn3");
const carouselNext = document.querySelector(".next");
const carouselPrev = document.querySelector(".prev");
------------------------------------------------------

carouselBtn1.addEventListener("click", handleCarousel1);
carouselBtn2.addEventListener("click", handleCarousel2);
carouselBtn3.addEventListener("click", handleCarousel3);
carouselNext.addEventListener("click", handleCarouselNext);
carouselPrev.addEventListener("click", handleCarouselPrev);
-----------------------------------------------------------

//캐러쉘 1번
let nowPhoto = 0;
function handleCarousel1() {
  nowPhoto = 0;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

//캐러쉘 2번
function handleCarousel2() {
  nowPhoto = 1;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

//캐러쉘 3번
function handleCarousel3() {
  nowPhoto = 2;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

//캐러쉘 Next버튼
function handleCarouselNext() {
  if (nowPhoto == 0) {
    nowPhoto += 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  } else if (nowPhoto == 1) {
    nowPhoto += 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  }
}

//캐러쉘 Prev버튼
function handleCarouselPrev() {
  if (nowPhoto == 2) {
    nowPhoto -= 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  } else if (nowPhoto == 1) {
    nowPhoto -= 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  }
}

1. 1, 2, 3 버튼 요소 가져와서 변수명 달아주기

HTML에 있는 버튼 1, 2, 3을 가져온다

const carouselBtn1 = document.querySelector(".btn1");
const carouselBtn2 = document.querySelector(".btn2");
const carouselBtn3 = document.querySelector(".btn3");

2. 1, 2, 3 버튼에 addEventListener 달아주기

버튼 1, 2, 3번을 눌렀을 때 handleCarousel1, handleCarousel2, handleCarousel3 함수가 실행될 수 있게 addEventListener를 달아주었다.

carouselBtn1.addEventListener("click", handleCarousel1);
carouselBtn2.addEventListener("click", handleCarousel2);
carouselBtn3.addEventListener("click", handleCarousel3);

3. 캐러쉘이 활성화 되는 함수 생성

함수 바깥쪽에 변수를 만들어준다 (why? 현재 무슨페이지에 있는지 알려주기 위해)
주의사항: 항상 변수 재선언을 한 다음에 CSS를 조작해야한다
why? 변수 재선언이 CSS 뒤에 있다면 현재 변수값이 먼저 CSS에 적용되고 후에 변수 재선언이 이루어지기 때문에 CSS가 제대로 작동하지 않는다

//캐러쉘 1번
let nowPhoto = 0;
function handleCarousel1() {
  nowPhoto = 0;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

//캐러쉘 2번
function handleCarousel2() {
  nowPhoto = 1;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

//캐러쉘 3번
function handleCarousel3() {
  nowPhoto = 2;
  slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

• 1번을 눌렀을 때: handleCarousel1함수가 실행되면서 nowPhoto의 변수의 값은 0으로 재할당되고 slideContainer가 -000vw만큼 움직인다

• 2번을 눌렀을 때: handleCarousel2함수가 실행되면서 nowPhoto의 변수의 값은 1으로 재할당되고 slideContainer가 -100vw만큼 움직인다

• 3번을 눌렀을 때: handleCarousel3함수가 실행되면서 nowPhoto의 변수의 값은 2으로 재할당되고 slideContainer가 -200vw만큼 움직인다
  

1. 다음, 이전 버튼 요소 가져와서 변수명 달아주기

HTML에 있는 다음 버튼과 이전 버튼을 가져온다.

const carouselNext = document.querySelector(".next");
const carouselPrev = document.querySelector(".prev");

2. 다음, 이전 버튼 addEventListener 달아주기

버튼 다음, 이전을 눌렀을 때 handleCarouselNext, handleCarouselPrev 함수가 실행되는 코드

carouselNext.addEventListener("click", handleCarouselNext);
carouselPrev.addEventListener("click", handleCarouselPrev);

3. 캐러쉘이 활성화 되는 함수 생성

주의사항: 항상 변수 재할당을 한 다음에 CSS를 조작해야한다
why? 변수 재할당이 CSS 뒤에 있다면 현재 변수값이 먼저 CSS에 적용되고 후에 변수 재선언이 이루어지기 때문에 CSS가 제대로 작동하지 않는다

//캐러쉘 Next버튼
function handleCarouselNext() {
  if (nowPhoto == 0) {
    nowPhoto += 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  } else if (nowPhoto == 1) {
    nowPhoto += 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  }
}

//캐러쉘 Prev버튼
function handleCarouselPrev() {
  if (nowPhoto == 2) {
    nowPhoto -= 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  } else if (nowPhoto == 1) {
    nowPhoto -= 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
  }
}

handleCarouselNext함수의 if문

nowPhoto의 값이 0 이라면? nowPhoto의 값을 +1 해주고 +1된 값을 CSS에 적용한다
nowPhoto의 값이 1 이라면? nowPhoto의 값을 +1 해주고 +1된 값을 CSS에 적용한다

handleCarouselPrev함수의 if문

nowPhoto의 값이 2 이라면? nowPhoto의 값을 -1 해주고 -1된 값을 CSS에 적용한다
nowPhoto의 값이 1 이라면? nowPhoto의 값을 -1 해주고 -1된 값을 CSS에 적용한다

---

(응용2) 사진이 4개, 5개가 되어도 다음버튼 기능이 잘 동작하려면? (이 방식은 사용 안함)

지금은 사진이 4개가 되어버리면 다음버튼 JS코드를 귀찮게 수정해야 한다.
if문을 추가해야할텐데 그게 귀찮으면 사진 갯수와 상관없이 잘 동작하는 코드로 만들 수도 있다.

잘 보면 다음버튼 누를 때
if 지금사진이 1이면 -100vw 이동
if 지금사진이 2면 -200vw 이동
if 지금사진이 3이면 -300vw 이동
...
이렇게 코드짜고 있다. 뭔가 규칙이 보이는 것 같다.
그럼 애초에 if문 필요없이
다음버튼 누르면 'translateX(-지금사진vw)' 만큼 이동해주세요~ 라고 코드한줄 짜면 끝일 것 같다.

//캐러쉘 Next버튼
function handleCarouselNext() {
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
    nowPhoto += 1;
}

//캐러쉘 Prev버튼
function handleCarouselPrev() {
    nowPhoto -= 1;
    slideContainer.style.transform = `translateX(-${nowPhoto}00vw)`;
}

이렇게 될 것 같다.

위 방식을 사용하지 않은 이유

다음버튼을 계속해서 누르게 되면 nowPhoto는 계속해서 재할당 되면서 더해지거나 빼질 것이고 그렇게 되면 사진 개수에 따라 넘어가는 것이 아니라 변수 값에 따라 넘어가기 때문에 if문 으로 제한해 놓는 것이 더 낫다고 생각되어졌다.

---

6강 / 함수의 return 문법 & 소수점 다루기

함수 function 문법은

• 긴 코드 짧게 축약해서 쓸 수 있고
• 파라미터로 기능업그레이드도 가능하다고 했다.
• 오늘 배울 return을 쓰면 함수를 쓰고나서 원하는 값을 바로 얻을 수 있다.

함수안에서 쓸 수 있는 return 문법

함수 안에서 return이라는 문법을 사용할 수 있다.
return 오른쪽에 아무거나 적으면
함수가 실행되고난 자리에 return 오른쪽에 있던 값이 남는다.

function testReturn(){
  return 123
}

console.log(testReturn());

그래서 진짜인지 확인하기 위해 함수() 실행하고나서 123을 남기라고 적었다.

출력해보니 진짜 123 잘 출력된다.
이렇게 testReturn() 실행하고 나서 그 자리에 뭔가 결과를 남기고 싶으면 return 문법 쓰면 된다.

function testReturn(){
  console.log('안녕');
  return 123
  console.log('반가워');
}

testReturn();

그리고 return 문법은 함수종료의 뜻도 가지고 있다.
함수안에 코드가 길면 위에서부터 한줄한줄 실행해주는데
return을 만나면 함수가 바로 종료된다.
그래서 위 코드에선 console.log('반가워'); 이거 실행안된다.

---

그래서 이걸 어디에 쓰는데

문법 배웠으면 이걸 어디에 쓸지 생각해보아야
혼자서도 코드짤 때 활용을 할 수 있다.
실은 프로그래밍의 함수문법은 수학의 함수문법과 용도가 똑같다.

▲ 수학에서의 함수는
숫자를 집어넣으면 규칙에 따라 다른 숫자가 나오는 변환기역할을 한다.
무슨 이차함수 공식외우고 그게 중요한게 아니라 함수는 그냥 x 집어넣으면 x + 2 나오는 변환기역할을 하는 수식이다.
프로그래밍에서의 함수도 마찬가지로
자료를 집어넣으면 규칙에 따라 다른 자료가 나오는 변환기 역할을 할 수 있다.
변환기 만들 때 return 문법이 유용하게 사용된다.

---

예시 : 부가세 계산기 만들기

우리가 쇼핑몰을 만들고 있다고 가정을 해보자.
상품가격의 부가세같은걸 자주 구할 일이 있다고 친다면
예를 들어 6만원, 5만원, 8만원짜리 상품 3개의 부가세를 구해서 콘솔창에 출력하려면

console.log(60000 * 0.1);
console.log(50000 * 0.1);
console.log(80000 * 0.1);

이렇게 필요할 때 마다 0.1을 곱해줘도 되겠지만

• 1. 부가세 가격 구하는게 자주 필요하거나
• 2. 수식이 복잡하면 함수를 만들어쓰는 것도 좋다.
     이전에 함수를 뭐라했는가
     숫자 넣으면 다른 숫자 나오는 변환기 역할을 한다고 했다.

function vat(a){
  return a * 0.1
}

console.log(vat(60000));
console.log(vat(50000));
console.log(vat(80000));

• 1. vat 라는 함수를 만들었다.
     그 함수는 x를 집어넣으면 x * 0.1 이 그 자리에 남는다. (부가세구하는 역할임)
• 2. 그래서 부가세 구하고 싶을 때 마다 vat()를 사용하는것이다.

(지금은 수식이 쉬워서 별로 쓸데없어보이지만 수식이 복잡하면 쓸모있을듯싶다)

• 그거 말고도 숫자를 넣으면 3의 배수 여부를 true/false로 뱉는 함수
• 문자를 넣으면 a가 몇개 들어있는지 뱉는 함수

이런거 만들어서 쓰면 유용할 것 같다.
그런 식의 변환기 만들어쓰고 싶으면 return 문법 쓰면 된다.

---

자바스크립트에서 소수점 연산시 주의점

console.log(1.1 + 0.3)

이거 실행하면 1.4가 나올 것 같지만
1.40000000001 이게 출력된다.
자바스크립트가 이상한게 아니라 원래 컴퓨터가 이상한 것일 뿐인데

컴퓨터는 2진법으로 설계되어있다.
그래서 숫자도 2진법 숫자만 알아들을 수 있다.
컴퓨터에게 10 + 20 연산하라고 하면
전부 2진법으로 바꿔서 1010 + 10100 으로 연산하고 다시 10진법으로 바꿔서 보여준다.

근데 2진법의 문제가 있는데
1.1 이런 숫자는 2진법으로 바꾸면
1.00011001100110011001100 ...
무한히 반복된다.

이 세상엔 무한한 숫자를 저장할 수 있는 저장장치는 없기 때문에
컴퓨터는 적절히 끊고 반올림해서 저장한다.
1.00011001100110011001101
이런 식이다. 그래서 소수점 연산은 아주 작은 오차가 발생한다.

해결하고 싶으면
1. 덧셈하기 전에 10 곱해서 덧셈하고 10으로 나누든가
2. 외부라이브러리 쓰든가
3. 오차는 무시할 정도로 작으니 그냥 반올림하든가
하면 된다. 아주 정확한 계산이 필요한게 아니면 대부분 그냥 반올림하면 된다.

---

소수점 반올림하는 법

숫자.toFixed(몇자리) 이거 쓰면 됩니다 모든 숫자 뒤에 붙일 수 있다.
근데 주의점은 이렇게 하고 나면 '문자'로 변환해준다.
'123'과 123은 다른 타입이라 주의해서 써야한다.

javaScript 소수점 처리

---

'숫자'를 숫자로 변환하고 싶으면

parseFloat('123')
parseInt('123')

이런거 쓰면 123을 그 자리에 남겨준다.
문자처럼생긴 숫자를 숫자로 변경해주는 유용한함수이다.
parseInt()는 정수로, parseFloat()는 실수로 변환해준다.

왜 이런걸 쓰냐면 자바스크립트는 덧셈기호가 좀 특이한 역할을 해서 그런데
1 + 1 은 2지만
1 + '1' 은 '11' 입니다.

• 기호 사용시 둘 중 적어도 하나가 문자가 있으면 문자덧셈을 해줘서 그렇다.
  문자덧셈은 그냥 문자두개 이어붙여준다.

Number()와 parseInt()의 차이

---

숙제

문제 1번

Q1. 함수에 분과 초를 차례로 파라미터로 입력하면 ms단위로 바꿔서 뱉어주는 함수를 만들어봅시다.
(1초 == 1000ms 입니다)

(동작예시)

console.log(testReturn(1,30))

이렇게 사용하면 콘솔창에 90000이 출력되어야한다
(90초인데 x 1000 하면 90000)

console.log(testReturn(2,10))

이렇게 사용하면 콘솔창에 130000이 출력되어야한니다
(130초인데 x 1000 하면 130000)

풀이

function testReturn(minutes, seconds) {
  const result = (minutes * 60 + seconds) * 1000;
  return result;
}
console.log(testReturn(1, 30));
console.log(testReturn(2, 10));

문제 2번

Q2. 가격을 파라미터로 입력하면 10% 할인가를 뱉는 함수를 만들어봅시다.
근데 첫 구매여부도 true/false로 둘째파라미터에 입력해서 첫 구매가 맞을 경우 추가로 1.5 달러도 할인해줘야합니다.
주의사항은 가격으로 10.3 이런거 넣으면 뒤에 소수점 길게 나올 수도 있으니 알아서 처리해보든가 합시다.

(동작예시)

console.log(testReturn(70, false))

이렇게 사용하면 콘솔창에 63이 출력되어야한다
(70의 10% 할인가격이고 추가할인 없음)

console.log(testReturn(10, true))

이렇게 사용하면 콘솔창에 7.5가 출력되어야한다
(10의 10% 할인가격 9에 추가할인 1.5 해줌)

풀이

할인율 계산공식

할인가 쉽게 계산하기
예)   150,000원 짜리 점퍼가 30% 할인 한다.
할인가는?  105,000원
할인가는 원가에서 30% 할인된 가격을 빼주면 되는데
결국 할인가는 100%에서 할인율30%를 뺀 70%가 되므로
100%에서 할인율을 뺀 숫자(%)의 금액을 구해주면 할인가를 쉽게 구할 수 있다.

1) 150,000 X 0.7   ( 원가에 7을 곱하고 0을 하나 지운다고 생각하면 암산 빠름)
2) 150,000 X 70 %  = (원가 X (100-할인율) %)
3) 150,000 X 30 - MU  ( = 원가 X 할인율 -  MU  )
이해하면 할인가 빨리 구할 수 있다.

function testReturn(money, bool) {
  let result = money * 0.9;
  if (bool == true) {
    result = result - 1.5;
  }
  return result;
}
console.log(testReturn(70, false));
console.log(testReturn(10, true));