본문 바로가기

Frontend

 (281)
[JavaScript] 태그 이름으로 태그 선택하기 document.getElementsByTagName('태그이름') : 태그이름으로 태그를 선택하는 메소드 const btns = document.getElementsByTagName('button'); 태그 이름으로 요소를 찾는 경우에, 여러 태그를 선택할수 있으므로 반드시 Elements 로 작성해 주어야 한다. 또한 실행결과 역시 HTMLCollction 으로 유사배열을 리턴함. const btns = document.getElementsByTagName('button'); const allTags = document.getElementsByTagName('*'); 이처럼 '*' 을 입력하면 모든 태그를 선택할수도 있음.
[JavaScript] class 로 태그 선택하기 자바스크립트에서 여러요소의 값을 한번에 선택할 때, 같은 class 를 가진 태그를 선택하는 방법이다. document.getElementsByClassName('class'); (여러요소를 선택하므로 Elements 라고 작성해야한다.) /* HTML */ const myTags1 = document.getElementsByClassName('color-btn'); console.log(myTags1); console.log(myTags1[1]); // 특정 인덱스 번호에 접근 console.log(myTags1.length); // length property 사용 가능 for (let tag of myTags1) { console.log(tag); } 배열이 아니기 때문에 배열의 메소드는 사용할 수..
[JavaScript] 배열 메소드 forEach 와 map forEach 메소드 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드로 forEach 함수는 첫번째 아규먼트로 콜백함수를 전달 받는데, 콜백함수의 파라미터에는 각각 배열의 요소, Index, 메소드를 호출한 배열이 전달된다. 그동안 반복적인 작업을 할 때, for of 문을 사용했었으나 const members = ['철수', '유리', '훈이', '짱구', '맹구']; for (let member of members) { console.log(`${member}님이 입장하셨습니다.`); } const members = ['철수', '유리', '훈이', '짱구', '맹구']; members.forEach(function (member) { console.log(`${member}님이 입장하셨습니..
[JavaScript] id로 태그 선택하기 어떤 태그를 움직이거나, 사용자의 마우스 속성에 반응하도록 하려면 내가 다루고자하는 태그를 선택해야 한다. Id 로 태그를 선택하는 것은 자바스크립트로 원하는 태그를 선택하는 방법중 하나로 , 고유한 id 를 가진 하나의 태그를 선택할 때 유용하다. document.getElementById(); document.getElementById('id'); const myTag1 = document.getElementById('myNumber'); console.log(myTag1); const myTag2 = document.getElementById('btns'); console.log(myTag2); const myTag3 = document.getElementById('codeit'); console...
[JavaScript] 객체에서 데이터 접근하기 [객체에서 데이터 접근] 자바스크립트 객체에 접근하는 방법은 크게 두가지가 있다. let codeit = { name: '코드잇', bornYear: 2017, isVeryNice: true, worstCourse: Null, bestCourse: { title: '자바스크립트 프로그래밍 기초', language: 'JavaScript' } }; 1. 점 표기법 (ObjectName.PropertyName) let codeit = { name: '코드잇', bornYear: 2017, isVeryNice: true, worstCourse: null, bestCourse: { title: '자바스크립트 프로그래밍 기초', language: 'JavaScript' } }; console.log(codeit...
[JavaScript] 객체와 프로퍼티 객체(Object) 다음처럼 값을 하나씩 저장할 수도 있지만, 여러가지 값을 한번에 저장할 수 있음. let name = 'Codeit'; let bornYear = 2017; let isVeryNice = true; 객체는 {} 를 통해서 만들수 있으며, 다양한 값들을 쉼표로 구분할 수 있다. { Name: '신짱구', bornYear : 1990, isVeryNice : true, } 이처럼 Name, bornYear, isVeryNice 는 key (값 이름), '신짱구', 1990, true 는 value(값) 라고 하며 하나의 key 와 value 를 가르켜 property (속성) 이라고 한다. [Property Name (key Name) 주의사항] 프로퍼티 네임은 보통 문자열로 작성해야하지..
[React] 페이지네이션 (pagination) 오프셋 페이지네이션 (offset pagination) 지금까지 받아온 페이지의 개수를 기준으로 데이터를 나눔. 1~30 번까지의 데이터중, 20번까지 데이터를 받아왔을때 남은 데이터는 21번 ~ 30번 그러나 하나의 데이터가 1번에 새로 추가되면, 20번~30 번을 새로 받고 데이터가 삭제되면 22번 ~ 30번을 받게 됨. 커서기반 페이지네이션 오프셋 페이지네이션의 단점을 보완하기 위해 만들어진 방법으로, 지금까지 받은 데이터를 표시하는 책갈피 데이터 (커서) 를 다음페이지를 받아올 때 전달해서 그 데이터 기준으로 값을 더 받게됨.
[JavaScript] sort/ reverse 메소드 [sort 메소드] 배열에서는 sort 라는 메소드를 활용해 배열을 정렬할 수 있다. sort 메소드에 아무런 아규먼트도 전달하지 않을때는 기본적으로 유니코드에 따라 정렬된다. const letters = ['D', 'C', 'E', 'B', 'A']; const numbers = [1, 10, 4, 21, 36000]; letters.sort(); numbers.sort(); console.log(letters); // (5) ["A", "B", "C", "D", "E"] console.log(numbers); // (5) [1, 10, 21, 36000, 4] 그렇기 때문에 위처럼 상식적으로 우리가 생각하는 정렬과 다를 수 있는데, 그럴때는 sort 메소드에 다음과 같은 콜백함수를 아규먼트로 작성해주..

티스토리툴바