개발일지

Javascript 공부 #3 본문

카테고리 없음

Javascript 공부 #3

kosssshhhh 2023. 1. 12. 17:47

함수의 return

function 함수() {
        return 123;
      }

함수의 값 반환

return 아래 있는 코드들은 읽지 않는다

 

 

 

소수점 있는 숫자 연산시 주의점

  • 조금의 오차가 발생할 수 밖에 없다.
  • 2진법으로 바꿔서 계산을 하기 때문에 소수를 2진법으로 바꾸면 무한소수가 됨

 

해결책

  • 소수점을 전부 10곱해서 연산하고 10으로 나눔
  • 라이브러리를 사용
  • 연산결과 반올림

 

소수점 반올림 하는 함수 : [숫자.to](<숫자.to>)Fixed(몇자리); 다음과 같이 사용

toFixed() 사용 시 문자로 변환이 된다.

자바스크립트 ‘+’ 연산자 특징

  • ‘문자’ + 123 ⇒ ‘문자123’
  • ‘문자 + ‘문자’ ⇒ ‘문자문자’

위와같이 연산이 되기 때문에 타입에 대한 주의가 필요하다

따라서 parseFloat() 이나 parseInt() 함수를 사용해주어야 한다.

 

 

 

자바스크립트 스크롤 이벤트

스크롤바를 조작하면 scroll 이벤트가 발생한다. scroll 이벤트리스너를 전체 페이지에 달면 전체 페이지를 스크롤할 때마다 원하는 코드 실행할 수 있다.

window.addEventListner('scroll', function(){
	console.log('scroll event 발생!');
});

window 는 전체 페이지를 의미한다.

document 도 전체 페이지지만 window 가 약간 더 큰 개념인데 스크롤 이벤트리스너는 관습적으로 window에 붙인다.

 

 

 

스크롤 이벤트 관련 유용 기능들

window.scrollY : 현재 페이지를 위에서부터 얼마나 스크롤했는지 px 단위로 알려준다.

window.scrollX : 현재 페이지를 왼쪽에서부터 얼마나 스크롤 했는지 px 단위로 알려준다. 

window.scrollTo(0,100): 위에서부터 100px 아래로 스크롤바를 강제로 이동한다.

window.scrollBy(0,100): 현재 위치에서부터 +100px 만큼 스크롤한다.

→ 원래는 스크롤 위치가 순간이동해야하는데 부트스트랩 설치했을 경우 천천히 이동할 수 있다. 그게 싫다면 css 에 :root{scroll-behavior : auto} css 파일 맨 위에 추가.

JQuery 식으로 작성하면 $(window).scrollTop(100) 과 같이 사용하면 된다.

 

 

 

스크롤 이벤트 예제 #1

window.addEventListener("scroll", function () {
        if (window.scrollY > 100) {
          $(".navbar-brand").css("font-size", "20px");
        } else {
          $(".navbar-brand").css("font-size", "30px");
        }
      });

JQuery의 css 를 통해 속성 간단하게 변경

 

 

스크롤 이벤트 예제 #2

	$(".lorem").on("scroll", function () {
        var 스크롤양 = document.querySelector(".lorem").scrollTop;
        var 실제높이 = document.querySelector(".lorem").scrollHeight;
        var 높이 = document.querySelector(".lorem").clientHeight;

        if (스크롤양 + 높이 > 실제높이 - 10) {
          alert("동의하십니까?");
        }
      });

해당 div 의 실제 높이를 구하려면 스크롤양 에다가 div 박스의 높이를 더해주어야 한다.

 

 

스크롤 다룰 때 주의점

  1. 스크롤 이벤트리스너 안의 코드는 초당 60회 이상 실행된다. 따라서 스크롤 이벤트리스너를 너무 많이 달면 성능 저하가 일어나기 떄문에 최소화 해주어야 한다.
  2. 스크롤 이벤트리스너 안의 코드는 1초에 여러번 실행되다 보니, 바닥체크하는 코드도 여러번 실행될 수 있다.

현재 페이지 전체를 끝까지 스크롤 했는지 체크하려면?

→ div 박스 대신 html 태그를 찾아서 똑같이 사용하면 됨

 

주의)

  1. 웹페이지 scrollHeight 구할 땐 브라우저마다 아주 약간의 오차가 있을 수 있으므로 테스트를 잘 해보는 것이 좋다.
  2. 웹페이지 scrollHeight 구하는 코드는 페이지 로드가 완료된 후 실행해야 정확히 실행된다. 따라서 <body> 태그가 끝나기 전에 적는 것이 좋다.

 

탭 UI 만들기

위와같은 UI 를 Tab 이라고 한다

<style>
      ul.list {
        list-style-type: none;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #ccc;
      }
      ul.list::after {
        content: "";
        display: block;
        clear: both;
      }
      .tab-button {
        display: block;
        padding: 10px 20px 10px 20px;
        float: left;
        margin-right: -1px;
        margin-bottom: -1px;
        color: grey;
        text-decoration: none;
        cursor: pointer;
      }
      .orange {
        border-top: 2px solid orange;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid white;
        border-left: 1px solid #ccc;
        color: black;
        margin-top: -2px;
      }
      .tab-content {
        display: none;
        padding: 10px;
      }
      .show {
        display: block;
      }
    </style>

    <div class="container mt-5">
      <ul class="list">
        <li class="tab-button">Products</li>
        <li class="tab-button">Information</li>
        <li class="tab-button">Shipping</li>
      </ul>
      <div class="tab-content">
        <p>상품설명입니다. Product</p>
      </div>
      <div class="tab-content">
        <p>스펙설명입니다. Information</p>
      </div>
      <div class="tab-content">
        <p>배송정보입니다. Shipping</p>
      </div>
    </div>

 

 

 

자바스크립트 파일 모듈화 하기

자바스크립트 코드가 너무 길 경우 HTML 파일 안에 script 태그에 작성하지말고 JS 파일을 따로 뺴서 작성하는 것이 편리하다

작업 폴더에 ~~.js 파일 하나 생성한 후 HTML 안에 <script src=’~~js’></script> 작성한 후 생성한 js 파일에 자바스크립트 코드 작성해주면 됨

→ 위와같이 HTML 파일과 JS 파일 분리하여 작업

 

 

 

JQuery 셀렉터로 여러 요소 찾은 뒤 하나만 고르기

‘tab-button’ 클래스를 가진 요소가 3개나 있기 때문에 하나의 버튼을 골라주고 싶은 경우가 생길 때가 있다.

이럴 경우, $(’.tab-button).on() 코드로 element 를 찾을 경우 해당 클래스를 가진 모든 element 들을 찾아준다.

하나의 element 를 찾고 싶은 경우 eq(x) 함수를 활용한다 ( jQuery 에서 사용함 )

$(".tab-button").eq(x).addClass("orange");

위와같이 작성할 경우 tab-button class를 가진 element 중 x번 째 element를 가져온다.

tabControl(0);
tabControl(1);
tabControl(2);

var tabBtn = $(".tab-button");
var tabContent = $(".tab-content");

function tabControl(a) {
  $(".tab-button")
    .eq(a)
    .on("click", function () {
      tabBtn.removeClass("orange");
      tabContent.removeClass("show");
      tabBtn.eq(a).addClass("orange");
      tabContent.eq(a).addClass("show");
    });
}

버튼 작동하는 javascript 작성

  • 반복되는 코드가 많아 함수로 묶어 작성
  • 자주 사용하는 selector 들은 변수들에 저장하여 사용 ( 자주 사용하지 않더라도 변수에 저장하여 작성하는 관습)
  • ⇒ 셀렉터 문법은 기본적으로 작동 시간이 오래 걸린다. 셀렉터 하나 쓸 때 마다 html 을 쭉 읽고 찾아야하기 때문이다.

 

 

for 문 사용하기

for (반복 횟수) {
	...
}

for (let i = 0; i<3; i++){
	console.log("안녕하세요");
}

다른 언어 for 문 형식과 동일함

반복문 안의 변수는 let 으로 선언 해주어야 함

for 문 안에서 var i = 0 을 쓰면

  • var 변수는 범위가 function 이다.
  • var i 들어있는 포스트잇은 for 바깥에 생성됨

for 안에서 let i = 0 쓰면

  • let 변수는 범위가 { } 이다
  • let i 가 들어있는 포스트잇은 for 안쪽에 3개 생성됨

그리고 컴퓨터는 변수를 사용할 때 가까운 것을 가져와 사용하려 함

 

 

 

좋은 코드의 기준

  1. 원하는 기능이 잘 구현되었는가
  2. 확장성이 좋은가
  3. 나중에 관리가 쉬울 것인가
  4. 성능에 문제가 없는가

위의 네가지 조건들을 체크해보면 된다.

 

 

위에 있는 자바스크립트 코드를 확장성 좋은 코드로 작성했을 때

ar tabNum = $(".tab-button").length;

for (let i = 0; i < tabNum; i++) {
  tabControl(i);
}

var tabBtn = $(".tab-button");
var tabContent = $(".tab-content");

function tabControl(a) {
  $(".tab-button")
    .eq(a)
    .on("click", function () {
      tabBtn.removeClass("orange");
      tabContent.removeClass("show");
      tabBtn.eq(a).addClass("orange");
      tabContent.eq(a).addClass("show");
    });
}

버튼이 3개가 아니라 4개, 5개로 늘어났을 때도 그대로 사용할 수 있도록

tab-button 클래스가 달린 element 의 개수가 늘어났을 때,

tabNum 이라는 변수에 해당 class 를 가진 element 의 개수를 저장해논다.

따라서 버튼 element의 개수가 늘어나더라도 똑같이 작동할 수 있다.

 

이벤트 버블링

어떤 HTML 태그에 이벤트가 발생하면 그 모든 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라 한다.

click 이벤트를 예로들면, HTML 태그에 클릭이 발생하면 그 모든 상위요소까지 자동으로 클릭됨

 

 

이벤트리스너 안에서 쓰이는 이벤트 함수

document.querySelector('.black-bg').addEventListener('click', function(e){
  e.target;
  e.currentTarget;
  e.preventDefault();
  e.stopPropagation();
})

이벤트리스너의 콜백함수에 파라미터 추가하여 사용 ( 관습적으로 e 라고 사용 )

e.target : 실제 클릭한 요소 알려줌 ( 이벤트가 발생한 곳 )

e.currentTarget : 지금 이벤트리스너가 작동되는 곳 알려줌 ( this 라 써도 똑같이 작동 )

e.preventDefault() : 이벤트 기본 동작을 막아줌

e.stopPropagation() : 상위요소로의 이벤트 버블링을 막아줌

 

 

 

모달창의 검정색 부분 클릭하면 모달창 닫기 예제

$(".black-bg").on("click", function (e) {
        if (e.target.className == "black-bg") {
          $(".black-bg").addClass("hide");
        }
      });
  1. 이벤트 버블링은 항상 일어난다.
  2. 이벤트 관련 유용한 함수들 사용

 

dataset 문법 (테크닉적 기술)

<div data-데이터이름="값">...</div>

HTML 안에 유저 몰래 정보를 숨겨놓을 수 있다.

데이터이름은 아무렇게나 작명하고 값 넣어주면 된다.

document.querySelector().dataset.데이터이름;

위와 같이 사용하면 자바스크립트에서 dataset 을 찾을 수 있다.

dataset 을 사용하면 다음과 같이 코드의 양을 줄일 수 있다.

$('.list').click(function(){
  탭열기(e.target.dataset.id);
});

dataset 문법은 인터넷익스플로러 11+ 에서 동작하는데 그것이 마음에 안들면 옛 브라우저까지 호환이 잘되는 jQuery 함수를 이용하는 방법도 있.

$(셀렉터).data(’데이터이름’, ‘값’) 이렇게 저장하고,

$(셀렉터).data(’데이터이름’) 이렇게 출력한다.

 

 

강의 요약

  1. 함수로 축약할 때 변수가 있으면 파라미터로 바꾸어준다.
  2. 이벤트리스너는 적게 쓸수록 좋다.
    • 이벤트리스너를 줄이면 램용량 절약할 수 있다. ( 성능개선의 일환 )
    • 버튼이 많아진다면 덜 복잡함
  3. dataset 잡기술 알면 이벤트리스너 적게 사용할 때 내가 뭐 눌렀는지 쉽게 파악할 수 있다.

 

 

쓸만한 자바스크립트 라이브러리

직접 자바스크립트 코드를 처음부터 짜기 귀찮다면, 여러 라이브러리들을 사용해도 된다.

 

1. Swiper

 

캐러셀 만들고 싶을 때 직접 코드를 짜도 좋지만, 더 이쁘게 쉽게 여러기능을 만들고 싶다면 Swiper 라이브러리를 쓰는 것 좋다. 호환이 잘되고 이미지 lazy loading, 터치/드래그 등등 가능함.

Getting Started With Swiper

 

Getting Started With Swiper

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

홈페이지 참고해서 사용

 

 

2. Chart.js

 

웹페이지에 차트 만들고 싶을 때 사용

실제 서비스면 관리자, admin 페이지 만들 때도 많은데 거기서 통계를 이쁘게 보여줄 때 유용하게 사용 가능

Chart.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developersChart.js | Chart.js

 

Chart.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Simple HTML5 charts using the canvas element. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare.

cdnjs.com

예제 코드 붙여넣기

 

 

3. Animate On Scroll

 

스크롤 내리면 요소가 서서히 등장하는 애니메이션 만들고 싶을 때 사용하면 좋다.

https://github.com/michalsnik/aos

 

GitHub - michalsnik/aos: Animate on scroll library

Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub.

github.com

 

 

4. EmailJS

 

원래 이메일 전송은 서버가 해야하지만 Gmail 이런 곳의 서버를 잠깐 빌리면 자바스크립트만으로 이메일 전송이 가능하다. 유저가 내 이메일 계정으로 이메일 전송도 가능하고, 내 이메일 계정으로 남에게 이메일 전송도 가능함.

How does EmailJS work? | EmailJS

 

How does EmailJS work? | EmailJS

EmailJS helps to send emails using client side technologies only. No server is required – just connect EmailJS to one of the supported email services, create an email template, and use one of our SDK libraries to trigger an email

www.emailjs.com

계정 만들고 튜토리얼 그대로 복붙 해주면 됨.

 

 

5. React , Vue

 

페이지가 너무 많이서 UI 재활용이 자주 필요한 사이트나

모바일 앱처럼 페이지 이동없이 동작하는 Single Page Application을 만들 때 유용한 자바스크립트 라이브러리이다.

저작자표시