⏳ 2023. 5. 8. - 2023. 5. 14. 버전의 숫자는 어떻게 부여하고 어떻게 해석할까? 버전의 숫자는 항상 보고 지나치기만 해서.. 무슨 의미인지 생각해본 적이 없다. 이런 의미였다니 충격..!
⏳ 2023. 5. 8. - 2023. 5. 14. 익스텐션으로 사용했던 Live Server는 실제 개발할 때는 활용도가 낮다. 이제부터는 parcel이라는 번들러를 통해 개발 서버를 오픈하자! 서버 실행과 빌드 개발 서버 실행하기 package.json의 scripts 부분을 원하는 명령어로 수정하고, npm run 를 통해 parcel 개발 서버를 실행할 수 있다. type="module" import _ from "lodash"; console.log(_.upperCase("hello-world")); import라는 키워드를 사용하는 js 파일은 모듈이라는 개념으로 불린다. html에 script 파일을 연결할 때 type="module" 값을 줘야 에러가 없다. 빌드 개발 서버가 아닌 제품용으..
⏳ 2023. 5. 8. - 2023. 5. 14. Node.js란? Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(프로그래밍 언어가 동작하는 환경) 브라우저에서는 html, css, js만 동작한다. 그렇다고 단순하게 이 세 가지 언어로 개발하는 것은 상당히 비효율적인 일이다. 때문에 작업의 효율을 위해 보통 개발을 도와줄 수 있는 모듈을 설치하고, 이러한 모듈은 브라우저가 이해할 수 없으니 컴퓨터의 node 환경에서 개발을 진행하는 것이다. NPM NPM(Node Package Manager)은 다양한 기능(패키지, 모듈)을 관리할 때 사용한다. npm을 통해 이미 완성된(다른 개발자가 만들어 놓은) 기능을 프로젝트에 연결해서 사용할 수 있다! 시작..
⏳ 2023. 5. 8. - 2023. 5. 14. DOM API? Document Object Model : div, span 등 html의 여러 가지 도큐먼트 모델 Application Programming Interface : 웹 사이트를 동작시키기 위해 사용하는 프로그래밍 명령 DOM API는 자바스크립트에서 html을 제어하기 위한 여러 가지 명령들이라고 할 수 있다! 기본적으로 코드를 위에서 아래로 읽기 때문에.. 자바스크립트가 실행될 때 html의 내용을 정상적으로 찾지 못할 수 있다. 그럴 때 해결책이 두 가지 있는데, 먼저 하나는 단순하게 script를 아래 작성하는 것이다. 그러나 이 방법은 권장하지 않는다!! 그렇다면 어떻게? defer를 사용하여 페이지 구성이 끝날 때까지 스크립트..
⏳ 2023. 5. 8. - 2023. 5. 14. 표기법 dash-case(kebab-case) 단어와 단어 사이 -를 사용하여 구분 snake_case 단어와 단어 사이 _를 사용하여 구분 camelCase 처음 단어의 첫 문자는 소문자, 다음 단어의 첫 문자는 대문자 PascalCase camelCase와 유사하지만, 처음 단어의 첫 문자가 대문자! 데이터 종류 String let myName = "iam454"; // 큰 따옴표 사용 let email = 'realseogy@gmail.com'; // 작은 따옴표 사용 let hello = `Hello, ${myName}!`; // 백틱을 이용한 보간법 (보간법이라고 하는구나.. 이름도 모르고 쓰고 있었다. 😱) Number 정수, 실수 구분하지 ..
gsap의 화면을 특정 위치로 이동해주는 ScrollToPlugin, 강의의 3.6.0 버전을 사용했다. window.addEventListener( "scroll", _.throttle(function () { if (window.scrollY > 500) { // 뱃지 숨기기 // gsap.to(요소, 지속시간(s), 옵션) gsap.to(badgeEl, 0.6, { opacity: 0, display: "none", }); // 버튼 보이기 gsap.to(toTopEl, 0.2, { x: 0, }); } else { // 뱃지 보이기 gsap.to(badgeEl, 0.6, { opacity: 1, display: "block", }); // 버튼 숨기기 gsap.to(toTopEl, 0.2, { x..
html entities 화면에 라는 문자를 출력하고 싶은데.. 를 태그로 인식해서 출력할 수 없을 때 사용하는 html의 특수 기호! https://tools.w3cub.com/html-entities Character Entity Reference Chart - W3cubTools Character Entity Reference Chart, show you the character entity in one screen. easy to search and copy. tools.w3cub.com
ScrollMagic 현재 스크롤 위치를 계산하는 라이브러리, 강의에서 나온 2.0.8 버전을 사용했다. 특정 위치에 도달하면 애니메이션이 동작하게 만들고 싶을때 유용하다. const spyEls = document.querySelectorAll("section.scroll-spy"); spyEls.forEach(function (spyEl) { new ScrollMagic.Scene({ triggerElement: spyEl, triggerHook: 0.8, }) .setClassToggle(spyEl, "show") .addTo(new ScrollMagic.Controller()); }); Scene : 특정 요소를 감시하는 옵션 지정 triggerElement : 감시할 요소 triggerHook ..