전체 글 (265) 썸네일형 리스트형 [Javascript] some 이전 포스트에 every와 같이 보는 것이 좋습니다. every는 모든 조건을 만족해야 true를 반환하지만 some은 한 가지 이상의 요소를 만족하면 true를 반환합니다. developing-move.tistory.com/129 [Javascript] Every every는 ES6부터 지원하는 문법으로 특정 배열이 어떤 조건에 대해서 모두 만족하는 지를 체크한다. every는 다양한 용도로 활용이 가능한데 백엔드 뿐만 아니라 프론트엔드에서도 페이지 랜더링을 developing-move.tistory.com 예시 소스 'use strict' const arr = [1, 0, -1, -2]; const res = arr.some(key => key < 0); console.log(res); arr 안에 .. [Javascript] Set 자료 구조 Set 의 특징 중복되지 않고 한 개의 데이터만을 수집하고 싶을 때 사용 Set은 중복되지 않는 자료 구조이며, add를 이용하여 데이터를 입력한다. 자료구조에 데이터가 중복으로 들어와도 한 번만 입력이 된다. Has라는 메소드를 사용하여 해당 자료 안에 특정 값이 존재하는 지 확인할 수 있다. 예시 소스 'use strict' // set의 자료 구조로 test를 생성 const test = new Set(); // 중복된 데이터 입력 test.add(1); test.add(1); test.add(2); test.add(2); test.add(3); // set의 입력된 구조 확인 // test에 있는 자료들을 하나하나 검색 for(const item of test) { // 데이터가 중복되지 않고 나.. [Javascript] Object.assign, spread 먼저 Assign은 할당이라는 뜻으로 object에 할당하는 것이다. 새로운 객체를 생성하기도 하고 두 개의 객체를 합쳐 통합하기도 한다. 예시 소스 'use strict' const obj = { title : 'node.js 올인원 패키지' } const newObj = { name : '패스트 캠퍼스' } // 하나로 합치기 // Object는 글로벌 메소드이기 때문에 바로 호출 없이 사용 가능 // 새로운 객체를 통합해서 사용 const ret = Object.assign({}, obj, newObj); console.log(ret); Spread 또한 기존의 객체에 새로운 객체를 합치는 역할을 한다. Spread만의 특징은 객체 뿐만 아니라 배열에서도 활용이 가능하다. 'use strict' c.. [Javascript] find, includes find는 이전 포스트에서 findIndex 등과 다룬적이 있습니다. 본 포스트와 같이 보시면 좋을 것 같습니다. developing-move.tistory.com/11 Javascript 배열 내장 함수 정리(indexOf, findIndex, find) indexOf는 내가 원하는 텍스트 위치를 알려준다. const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; const index = animals.indexOf('사자'); console.log('사자의 위치는 : ' + index); 하지만 i.. developing-move.tistory.com Find는 설정된 배열의 특정한 요소를 찾는다. Find는 조건을 통해 특정 값을 가져올 필요가 있을 때 주로 사용한다.. [Javascript] Every every는 ES6부터 지원하는 문법으로 특정 배열이 어떤 조건에 대해서 모두 만족하는 지를 체크한다. every는 다양한 용도로 활용이 가능한데 백엔드 뿐만 아니라 프론트엔드에서도 페이지 랜더링을 할 때 설정한 모든 조건이 만족하는 것을 체크하는 것 등에 쓰일 수 있다. 예를 들어 UI 페이지를 만들었을 때 회원 가입디 외어있고, 로그인을 했고 회원이 추천코드를 받았을 때만 보여주는 화면을 만든다고 하면 여러번의 if문 처리가 필요하다. 이럴 때 every를 쓰면 간단하게 표현할 수 있다. 예시 소스 'use strict' // 1보다 큰 수만 모아 놓은 배열 생성 const arr = [2, 3, 4]; const isBiggetThanOne = arr.every(key => key > 1); con.. [CSS] position: absolute ▶ position: absolute; - 부모 요소를 기준으로 배치. - 여기서의 부모요소는 기본적인 HTML의 구조적인 부모가 아닌 위치상의 부모 요소를 의미. - position: absolute; 지정 시 3번 박스는 사라짐. - 이때 3번 박스는 2번 박스 뒤에 숨어 있는 것. - position: absolute;가 부여된 2번 박스는 부모 요소를 기준으로 배치될 준비를 끝냄. - 1, 2, 3 순서로 쌓이는 개념이 존재하지 않고 1, 3번 박스에 대한 상관관계를 무시. - 2번 박스 공중으로 붕 뜬 상태와 같이 되고 3번 박스는 밀려서 1번 박스 아래에 위치하게 된 것. - 3번 박스의 크기를 늘릴 경우 2번 박스 뒤편에 있는 것을 확인할 수 있음. - position: absolute;에 .. [CSS] position: relative ▶ position: relative; - 자기 자신을 배치 기준으로 삼음. - position: relative;만 입력 시 자신을 기준으로 배치될 준비만 하는 것. - top/left/right/bottom의 속성을 입력해 줘야 이동함. - 자신이 있었던 위치에서 위에서 20px, 왼쪽에서 150px 이동. - 3번 박스는 원래 있던 그 위치 그대로 있음. - 2번 박스의 경우 원래 위치 그대로 남아 있는 것이고 화면상에 보이는 2번 박스는 일종의 홀로그램. - 이때 1번 박스를 지우면 위로 올라감. - 2번 박스는 1번의 영향을 받고, 3번에 영향을 주는 형국. - relative로 위치를 잡으면 자신을 기준으로 하다 보니, 주변 형제 요소의 영향을 주거나 받기 때문에 이에 유의하여 사용해야 함. [CSS] position ▶ position - 요소의 위치 지정 방법의 유형/기준을 지정. - 요소를 특정 위치에 배치하기 위해서는 기준이 필요함. - 이때 position을 통해 직접 배치하는 것은 아니고 기준을 설정하는 것. [속성 값] - static: 유형(기준) 없음. 배치 불가능. 기본값. - 모든 요소는 배치할 준비가 안 되어 있는 상태. - 배치를 위해서는 아래의 값들을 사용해야 함. - relative: 요소 자신을 기준으로 배치. - absolute: 위치상 부모 요소를 기준으로 배치. - fixed: 브라우저(뷰포트)를 기준으로 배치. - sticky: 스크롤 영역 기준으로 배치. - position: absolute; 사용. - 부모 요소를 기준으로 배치됨. - 이때 부모 요소인 .parent에는 posi.. 이전 1 ··· 15 16 17 18 19 20 21 ··· 34 다음
