인프런 커뮤니티 질문&답변

AirDream님의 프로필 이미지

작성한 질문수

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

2-1 [코드설명] 기초다지기! 이동할 거리 백분율 구하는 방법

2:40

작성

·

393

0

`${}`

이렇게 쓰는 것을 배운적이 잇는데

해당 부분에서는 ``부분이 없고

${} 이 아이만 써주었던데..

왜 그런건지 혹시 알 수 있을까요?

function 앞에 $이거를 왜 써준 것인지도 궁금해요..ㅠㅠ

혹시 jquery 개념도 알아야하나요?

html,css, javascript로만해서 따라갈 수 있을 줄 알았는데

너무 어렵네요..하

어려워서 자바스크립트 배우고 이제 들어보려 했더니

코드가 튕겨 나가버리네요.

제이쿼리를 다시 배우고 와야하는건가..

답변 5

1

깡코딩님의 프로필 이미지
깡코딩
지식공유자

해깔릴 수 있는 답변을 수정해 두었으니 확인해보세요 :) 

1

깡코딩님의 프로필 이미지
깡코딩
지식공유자

안녕하세요 :)

전과 똑같은 질문을 주셨군요

1.$("") 구문은 dom을 선택하는데 사용하는 JQUERY 문법입니다.

순수 자바스크립트에서는 document.querySelector(selectors);  동일하다고 생각하면 됩니다.(엄밀히 말하면 비슷한거에요^^)

좀더 상세하게 알고 싶다면 구글이나 유튜브에 제이쿼리 선택자를 검색해 보시길 바라겠습니다.

2. 문서 로드

$(function(){

 코드..

}) 

다음 부분은 문법 하나 하나를 이해하기보다 의미만 알고 계시면 됩니다 :)

이부분은 순수 자바스크립트 onload = function(){

 ..코드

}

과 동일하다고 생각하시면 되는데요

onload는 모든 요소들이 로드된후에 코드가 실행된다면

$(function(){

 코드..

}) 

이코드는 온로드보다 조금더 빨리 실행된다고 생각하면 됩니다 :)

문서의 로드상태에 대해 조금 더 디테일하게 알고 싶다면 구글에 document ready에 대해 검색해보세요 :)

0

깡코딩님의 프로필 이미지
깡코딩
지식공유자

안녕하세요 :)

오늘 시간이 조금 남아서 제이쿼리 이벤트 바인드 부분을  분석해 보았더니

제이쿼리에서 다음과 같이 스크롤 이벤트를 addEventListener로 추가해주는 구문이 있네요 ^.^

document.addEventListener('scroll', function(e) {

..순수 자바스크립트에서 스크롤 이벤트 바인드는 이렇게

})

$(window).scroll(function(e){

..제이쿼리에서는 이렇게

});

제이쿼리가 조금 더 간편하죠?? 눈에 보이는 작성 방법에서는 큰 차이가 없어보입니다.

아직 문법 하나 하나에 큰 의미는 갖지 마시고 저렇게 작성하면 되는구나 정도로 이해하고 자바스크립트를 차츰 공부해나가며 더 깊숙하게 공부하면 좋을것 같습니다 :D

문법 전체를 몰라도 어느정도 사용법을 알고 결과물을 만들다보면 재미를 느끼기 마련이고 시간이 흐르면 하나 하나 세세한 문법까지 알게되실거에요 :D



0

AirDream님의 프로필 이미지
AirDream
질문자

못따라가겠네요 ㅎ 

설명에 제이쿼리 개념도 숙지해야함을 제대로 적어주시길

깡코딩님의 프로필 이미지
깡코딩
지식공유자

안녕하세요 :)

음..ㅠㅠ 수업이 빠르게 느껴지시는군요!

제이쿼리와 자바스크립트는 크게 다르지 않습니다!

지금 조금 부족해도 앞으로  차분하게 천천히 조금씩 공부해보시길 바라겠습니다!

한달후에 다시보고 두달후에 다시본다면 해당 코드는 점점 너무 쉽게 느껴지실거에요^^

포기하지 말고 조금씩 공부해 나가면 너무 쉽게 느껴질테니 홧팅하세요 :)

화이팅하세요!

AirDream님의 프로필 이미지
AirDream
질문자

1강 이제 시작인데,ㅠ

3분 듣고 막혀버려서,,지금 절망이네요.

천천히 따라가보겠습니다..ㅠㅠㅠ

0

AirDream님의 프로필 이미지
AirDream
질문자

 2:55 getPercent는 스크롤 할때마다 계속 호출하게 된다고 하셨는데

함수는 한번만 실행되잖아요.

그래서 스크롤 될때마다 하려면

addEventListener를 사용해야되는 것 아닌가요?

그리고 ㅠㅠ

$('')가 document.quertSelector('');인 것은 알겠는데

$( ) 얘는  var winScrollTop = $(window).scrollTop(); //스크롤바의 상단 위치를 구합니다

왜 window에 써준건지..

하ㅜ

깡코딩님의 프로필 이미지
깡코딩
지식공유자

안녕하세요

scrollTop은 현재 스크롤의 위치를 가지고 오는겁니다 :)

addEventListener는 이벤트를 바인드할때 사용하는거구요!

예를들어 javascript에서 document.addEventListener('scroll', function(e) {

이렇게 사용한다면

제이쿼리에선 다음 처럼 사용합니다

$(window).scroll(function(){ 

크게 다르지 않죠?

그리고 window는

브라우저 최상단 객체입니다 :)

---해깔릴수 있는 부분 정정--

수업에서는 jquery의 scroll()함수를 사용한겁니다 :)

수업에서는 브라우저 최상위 객체인 window에 스크롤 변화를 감지하기 위해 window를 사용한 거에요 :)

제이쿼리와 자바스크립트는 크게 다르지 않습니다!!

AirDream님의 프로필 이미지
AirDream
질문자

말씀하신 최상단 객체라는 것이

순수 자바스크립트에서

window.addEventListenr

이렇게 사용하는데

그 느낌인가요?

scrollTop은 오브젝트의 처음 위치를 가져오는 메소드인 것은 알겠어요!

addEventListener는 이벤트를 바인드할때 사용하는거구요!

이벤트를 바인드(묶다)?

이벤트를 묶어줄 때 사용하고

제이쿼리에서는 함수가 이벤트처럼

실행될때마다 자기가 알아서 실행되나요?

순수 자바스크립트에서는 안그러니까 헷갈리네요.

빠른 답변 감사합니다..

깡코딩님의 프로필 이미지
깡코딩
지식공유자

window 객체 아래에 document가 있습니다. :)

window.addEventListener('scroll', function(e) { 이렇게 사용해도 됩니다 :)

쉽게 이벤트를 추가한다고 생각하면 될 것 같습니다

굳이 제이쿼리와 자바스크립트를 다르다고 생각하지 마세요! 개념은 같습니다!! 단지 제이쿼리를 쓰면 조금더 간편하게 javascript를 사용할 수 있다고 생각하면되요!!

함수는 어떤 프로그램언어 에서든 혼자서 실행되지 않습니다!

실행되는 방법과 순서는 제이쿼리든 자바스크립트든 똑같아요 :)

---추가 설명 ---

해깔려 하시는듯 하여 보충 설명합니다.

수업에서 스크롤 이벤트를 위해 jquery의 scroll함수를 사용했다고 했습니다.

이말은 제이쿼리의 scroll함수를 분석해 본다면 아마도 제이쿼리 scroll 함수에서 스크롤 이벤트를 바인드 할거에요!

--- 마지막으로 간단하게 설명하자면   ----

document.queryselector, elementbyid 이렇게 쓰는거보다

$('.class') 너무 간편하죠? (타이핑이 너무나 줄어듭니다)

jquery를 안쓰면 addclass를 할 때 올드 브라우저 까지 대응하기 위해서는 조금 복잡한 코드가 필요합니다. 정규식도 필요하구요!

하지만 jquery를 사용하면 addclass를 모든 브라우저에 대응하며 아주 간편하게 할 수 있죠!

그리고 유지보수 단계에서 질문자님이 작성한 코드를 다른 사람이 볼때 직접 작성한 addclass 코드보다 세계적으로 사용중이고 api가 있는 jquery 문법을 보는게 더 편리할겁니다 :)

즉 같은 언어라 개념은 같으나 조금 더 편리하게 프로그래밍할 수 있도록 해주는게 jquery라고 생각하면 됩니다 :)

요즘 리액트나 뷰 앵귤러에서는 jquery를 사용하진 않지만 javascript가 익숙해지면  기본적인 jquery문법들은 api를 안봐도 너무 쉽게 이해하게 될거에요 :)

AirDream님의 프로필 이미지

작성한 질문수

질문하기