본문 바로가기

FrontEnd/JavaScript44

[ 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.
[ JavaScript ] 문자열에서 공백 있는지 확인하기 우테코 프리코스 과제를 진행하고 있다. 그 과정에서 input의 유효성을 검사하는 함수를 만드는데 해당 input이 공백을 포함하고 있는지를 확인하는 걸 만드려고 한다. 제거까지해도 되고. 첫 번째 시도로 trim()을 써서 공백이 있든 없든 그냥 읽단 없애버리면 되지 않을까 생각했는데, trim은 문자열 앞과 끝의 공백만 제거가 가능했다. 공백이 사이에 있으니까 에러가 떴다. 두 번째는, 정규표현식과 includes메서드를 사용해보려고 한다. (includes 는 Array 와 String 둘 다 있다.) 결과가 예상치 못하게 나왔다. 에러 메세지가 정규표현식은 안된다고 하니 그냥 공백을 넣어보자. 'hel lo'.includes(' ') //true 음 잘 나온다. 이렇게 쓰면 될 것 같다. 바로 블.. 2023. 11. 4.

티스토리툴바