본문 바로가기

FrontEnd/JavaScript44

커스텀 엘리먼트 스타일링하기 (feat. Shadow DOM) 바닐라 자바스크립트(& 타입스크립트)로 개인 사이드 프로젝트를 진행 중인데,컴포넌트화를 위해 아래 코드와 같이 커스텀 엘리먼트를 생성했다. ⬇️ 커스텀 엘리먼트 import BaseComponent from "../../commons/BaseComponent";import deviceCheck from "../../utils/deviceCheck";import './styles.scss'class ProfileCard extends HTMLElement { #shadow constructor() { super() this.#shadow = this.attachShadow({mode: 'open'}); .. 2024. 12. 30.
[ JavaScript ] 특정 값으로 배열 채우기 const arr = new Array(4).fill('a') // ['a','a','a','a'] arr.fill("b", 1); // ["a", "b", "b", "b", "b"] arr.fill("c", 2, 4); // ["a", "b", "c", "c", "b"] arr.fill(5.5, -4); // ["a", 5.5, 5.5, 5.5, 5.5] arr.fill(0, -3, -1); // ["a", 5.5, 0, 0, 5.5] 참고한 게시물 https://april.gitbook.io/learning-js/chapter-8./8.2/8.2.6 2024. 1. 16.
[ JavaScript ] 타이핑 효과 이번에 개인 사이트를 만드는 중인데, 페이지 첫 화면이 너무 심심한 느낌이 있어서, 고민을 하다가 타이핑 효과로 간단한 메세지를 처음에 띄우면 좋겠다는 생각이 들었습니다. Next.js를 사용하고 있어서 React를 사용해서도 만들어볼테지만, 기본적인 자바스크립트로 먼저 구현을 해보고자 합니다. 1) 먼저 텍스트를 넣을 태그와 원하는 출력 텍스트를 지정하고, // index.html // index.js const paragraphTag = document.querySelector('.title') const content = '안녕하세요. 프론트엔드\n개발자\n김영은입니다.' 2) 맞는 로직을 짭니다. //index.js const paragraphTag = document.querySelector(".. 2024. 1. 13.
[ JavaScript ] HTMLCollection 은 forEach가 안된다? 작업을 할 때 HTML 요소를 불러 console.log를 찍어보면 배열 형태 안에 담겨있어서 당연하게도 배열의 모든 메소드를 사용할 수 있을거라고 생각했는데, 어째 사용이 안됩니다！? 자세히 보니 HTMLCollection.prototype에 배열 메서드가 없습니다. 그렇다면 어떻게 순회하면서 원하는 작업을 할 수 있을까？ 방법 1) for문으로 순회하기 for(let i=0; i { console.log(element.className); }) 방법 4) Array.from 사용하기 Array.from(document.getElementsByClassName("events")).forEach(function(item) { console.log(item.id); }); 방법 5) HTMLCollecti.. 2023. 12. 2.
[ JavaScript ] Object.freeze Object.freeze 를 사용하면 좋은 점 ReadOnly여서 해당 값이 보인다. 이게 무슨 말이냐 하면, export const NAV = { ABOUT: 'About', ARCHIVE: 'Archive', SKILLS: 'Skills', PROJECTS: 'Projects', CONTACT: 'Contact', }; export const NAV = Object.freeze({ ABOUT: 'About', ARCHIVE: 'Archive', SKILLS: 'Skills', PROJECTS: 'Projects', CONTACT: 'Contact', }); 2023. 11. 27.
[ JavaScript ] 배열에서 특정 요소 찾기 find() 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환한다. 테스트 함수를 만족시키는 값이 없으면 undefined를 반환한다. const array1 = [5, 12, 8, 130, 44]; const found = array1.find((element) => element > 10); console.log(found); //12 findIndex() 배열에서 찾은 요소의 인덱스가 필요할 때 사용한다. 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다. 만족하는 요소가 없으면 -1 반환한다. const array1 = [5, 12, 8, 130, 44]; const isLargeNumber = (element) => element > 13; console.lo.. 2023. 11. 13.

티스토리툴바