nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/JavaScript

출처: https://www.zerocho.com/category/JavaScript/post/573d812680f0b9102dc370b7 프로토타입 체인을 이용하면 부모가 가진 기능에 더해 새로운 기능을 추가할 수 있습니다. SASS의 @extend와 비슷한 기능이죠. 우선 생성자 하나를 만들어봅니다. 생성자 함수는 대문자로 시작했죠? function Vehicle(name, speed){ this.name = name; this.speed = speed; } 이제 new Vehicle()을 통해 고유의 name과 speed를 갖는 객체를 만들 수 있게 됐습니다. 그런데 이 생성자 함수를 통해 만들어진 객체들에게 공통적인 기능(함수)을 추가하려고 해요. 그럴 때는 this를 쓰는 대신, prototyp..

2019. 11. 5.

Blog/JavaScript

1. window 객체 window 객체가 뭐냐구요? 어... 이거 말고 이거요! window 객체는, 브라우저 전체를 담당하는 탑 오브 탑 객체를 말합니다. Document 객체 또한 window 객체 안에 들어 있습니다. 콘솔에 window. 라고만 쳐도 어마어마한 메서드 리스트가 출력되는 것이 보입니다. 진정한 대빵 객체라고 할 수 있겠네요. 이 대빵 객체를 우리는 전역객체 (글로벌객체) 라고 부릅니다. 전역객체의 특권(?)은 window를 생략하더라도 메서드를 호출할 수 있다는 거죠. 너무 유명해서 이름을 안 불러도 아는... 뭐 그런 느낌으로...? window.document === document //TRUE window 아래에는 screen, history, document, locatio..

2019. 11. 4.

Blog/JavaScript

글과 일부 이미지의 출처는 [ 인사이드 자바스크립트(송형주, 고현준 저) ]에 있음을 밝힙니다 :-) 1. 함수 정의 우선 어떻게 함수를 만드는지 살펴봅시다. 1) 함수 리터럴 JS에서 함수는 뭐다? 객체다! 객체 리터럴 방식으로 객체를 생성했듯, 함수 리터럴 방식으로 함수를 생성할 수 있습니다. function add(a,b) { return a+b; } 위 리터럴의 구조를 살펴보면, [ function 키워드 + 함수 이름 + 매개 변수 + 함수 몸체 ] 로 이루어져있음을 알 수 있습니다. 여기서 함수 이름과 매개변수는 선택사항입니다. JS는 이름이 없는 '익명함수'를 생성할 수가 있거든요. 2) 함수 선언문 함수 선언문 방식은 함수 리터럴 형태와 같은데, 함수 선언문으로 정의된 함수는 반드시 함수명..

2019. 9. 10.

Blog/JavaScript

글과 일부 이미지의 출처는 [ 인사이드 자바스크립트(송형주, 고현준 저) ]에 있음을 밝힙니다 :-) 1. 자바스크립트 기본 타입 JS의 기본 타입으로는 숫자, 문자, 불린값, undefiend, null이 있습니다. 1) 숫자 C언어의 경우 정수냐 실수냐에 따라 int, float 등과 같이 다양한 숫자 타입이 존재합니다다. 반면에 JS는 느슨한 타입 체크 언어이므로 정수든 실수든 그냥 숫자 타입이죠. var num = 5/2; 위의 연산을 C언어에서 할 경우 소수 버린을 버린 2만 출력됩니다 (정수랑 정수끼리니까..) BUT!! JS에선 2.5가 나옵니다(정수건 실수건 넌 그냥 숫자야^^) 2) 문자열 길이가 1개이든 길든 JS는 그냥 문자! var str = ‘test’; console.log(st..

2019. 9. 5.

Blog/JavaScript

인터렉티브 강의에서 배운 내용을 응용한 예제! (야호) See the Pen Text transform with the mousemove event by NY KIM (@nykim_) on CodePen. 그라데이션으로 빛 효과를 만들고 background-position을 움직여 반사되는 느낌을 내봤다. 이때 그라데이션이 깔끔하게 잘리려면 background-clip:text 처리를 해야하는데, 그러기 위해서는 잘라낼 기준이 될 텍스트가 필요했다.... 그래서 어쩔 수 없이 data-text를 넣는 걸로 처리해부려따. (더 좋은 방법을 발견하면 알려줘 미래의 나!!!!) ++ 이건 이미지 때문에 코드펜에 올리지는 못했지만, 이런 식으로 그림자를 처리할 수도 있겠더라! 그림자가 될 회색의 블러처리 된 이..

2019. 9. 4.

Blog/JavaScript

기초편에 이어 중급편입니다. 공식 예제 중 ADVANCED에 해당하는 내용을 살펴보겠습니다 :-9 히어뤼고! 1. 섹션 와이프 (매뉴얼) 기초편에서는 단순히 아래에서 위로 올라와 고정되는 와이프였다면, 이번에는 상하좌우에서 슝 날아와 고정되는(?) 섹션 와이프를 구현해봅니다. 구현원리는 간단합니다. 너비높이 100%의 풀페이지 컨테이너를 만든 다음, 얘를 setPin으로 고정시킵니다. 그리고 그 안에 들어갈 여러 개의 섹션을 만들고 absolute 시킵니다. 그 다음에는 섹션의 위치를 -100%로 두었다가, 스크롤 되면 0% 위치로 움직이게 합니다. 여기에 GSAP을 쓰면 짱 편하니까 그렇게 작성합시다ㅋㅋㅋㅋㅋ 우선 마크업을 합니다. ONE TWO THREE FOUR CSS도 작성한 다음... #cont..

2019. 8. 27.

Blog/JavaScript

전부터 계속 써보고 싶었던 ScrollMagic 라이브러리!!! 를 드디어 공부해봅니다 (꺅) 참고한 글은 아래와 같습니다. - Building Interactive Scrolling Websites with ScrollMagic.js [링크] 1. 초기 설정 우선 아묻따 ScrollMagic을 도입해줍니다. CDN은 아래와 같습니다. 저 debug로 시작되는 파일은 화면에 인디케이터를 표시해주는데, 덕분에 좀 더 수월하게 작업이 가능합니다. 이 라이브러리는 jQuery도 지원해주는 거 같던데 여기선 그냥 바닐라로 작성하겠습니다ㅎㅎ 그리고 수려한 애니메이션 제작을 도와줄 GSAP도 도입합니다. GSAP 이외에 Velocity도 지원하고 있지만, 이 글에 따르면 GSAP이 좀 더 크로스브라우징이 잘 되어 ..

2019. 8. 26.