⏳ 2023. 5. 8. - 2023. 5. 14. const a = 1; const b = "1"; console.log(a == b); // true console.log(a === b); // false js에서 ==는 동등 연산, ===는 일치 연산을 의미한다. 동등 연산의 경우, 데이터 타입을 바꾸어가며 값이 일치하는지 비교한다. 일치 연산의 경우, 형 변환이 일어나지 않고 데이터 타입과 값이 모두 일치하는지 비교한다.
⏳ 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