일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- js
- 자바스크립트
- text-align
- 이벤트위임
- 코딩공부
- 단락회로평가
- 버블링
- 자바스크립트기초
- truthy
- falsy
- 논리연산자
- 이벤트리스너
- git
- 지역변수
- 캡쳐링
- async
- addEventListener
- 중앙정렬
- INCLUDES
- 어웨이트
- 동기적
- 비구조화
- map()
- Await
- 돔조작
- 리액트
- icoMoon
- 전역변수
- 프론트엔드
- 비동기적
- Today
- Total
목록전체 글 (35)
피리부는 사나이 (pied piper)
배열의 비 구조화 할당 변수에 배열 요소 (인덱스)를 하나하나 할당하는 것을 간단화 시킬 수 있음 let arr = ["one", "two", "three"]; //1. 기존의 방식 let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one, two, three); //2. 더 나은 방식 let [one, two, three] = arr; //배열안에 변수 할당 후 오른 쪽에 배열 할당하면 인덱스 순서대로 부여 //대괄호를 이용해서 배열을 변수에 할당하는 것은 비 구조화 할당이라고 함 객체의 비 구조화 할당 객체 프로퍼티 요소를 변수에 하나하나 ‘표기법'으로 할당하는 것을 간단화 시킬 수 있음 //기존 방식 let object = { ..
falsy, truthy 값을 활용해서 유용하게 조건문 처리하기 null과 undefined 예외 처리 간결하게 하는 방법 ⚠️ 1. 일반적인 방법 : 논리 연산자 이용하는 방법 ❗ 2. 더욱 유용한 방법 (Truthy & Falsy) "" false, NaN, undefined, null, 0 총 6가지 기본 데이터 타입는 false로 boolean 타입으로 변환해준다. 그 외에는 모두 true로 변환 thus, undefiend와 null을 걸러내는 예외처리를 조건문으로 구현하고자 할 때 ‘!’만 붙여주면 falsy 타입이 들어오면 NOT과 만나서 true로 반환되기 때문에 매우 유용하다. 삼항 연산자 삼항 연산자 중첩해서 사용하기 let score = 66; score >= 90 ? console...
자바 스크립트에서 정말 중요하고 많이 쓰이는 ‘배열' 그 배열을 다룰 때 사용할 때 매우 유용한 내장 함수들을 알아두는 것은 정말 정말 중요하다. 배열 내장함수를 왜 써야하는가? 안 써도 되잖아? 맞는 말이다. 하지만 더 빠르고 간편한 방식이 있는데 그걸 모르는 것은 비효율적이라고 생각한다. 간단히 예시를 들어보자 (예시) 배열 내장함수 없이 배열 순회하는 방법 for문과 length 프로퍼티를 이용하여 순회하기 for arr = [1, 2, 3, 4]; for (i = 0; i < arr.length; i++) { console.log(arr[i]); //1, 2, 3, 4 차례로 배출 나 역시 이 방법으로 배열을 순회해왔다. 하지만 배열 함수라는 것을 접하고 부터는 잘 안쓰게 되었다. 내장함수를 이용..
객체 객체 리터럴 객체란? : 객체 타입은 다양한 탕비의 값을 하나의 단위로 구성한 복합적인 자료구조다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만, 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합, 키와 값으로 구성 함수도 값으로 취급할 수 있다. 함수일 경우 일반 함수와 구분하기 위해 메서드라고 부름 let person = { name: 'Son', age : 29 }; 객체는 프로퍼티와 메서드로 구성 Property : 객체의 상태를 나타내는 값 (데이터) +Method : 프로퍼티를 참조하고 조작할 수 있는 동작 💡 객체를 이해해야 함수를 제대로 이해할 수 있다. 반대도 성립 객체와 함수를 분리해서 설명하는 것은 옳지 않지만, 잘 이해..
div를 넣으면 아래로 내려가는 것 이러한 현상을 normal flow라고 함 normal flow에서는 div를 옆에 둘 수 없다 해결방안 > float하고 position만 할 생각이다. (과거) 현대식 방안 > flex, grid flex랑 grid는 필요할 때만 써라? 옛날 방식을 이해하고 요즘 방식을 써야 유지보수 하는 것에 잘 할 수 있다. 아직은 float를 쓰는 옛 사이트들이 있기 때문이다. 이것을 안 쓰면 아예 못쓰게 됨 #플로트를 교정하는 방법 (bfc 재계산) float의 문제 자식이 집 나갔는데, 그 값을 부모가 모르니까 그것에 대한 재조정해서 그 자리를 갱신해줘야한다는 것? overlfow : hidden float:left inline-block text-align dispaly..
객체 리터럴 객체란? : 객체 타입은 다양한 탕비의 값을 하나의 단위로 구성한 복합적인 자료구조다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만, 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합, 키와 값으로 구성 **함수도 값으로 취급할 수 있다. 함수일 경우 일반 함수와 구분하기 위해 메서드라고 부름** let person = { name: 'Son', age : 29 }; 객체는 프로퍼티와 메서드로 구성 +Property : 객체의 상태를 나타내는 값 (데이터) +Method : 프로퍼티를 참조하고 조작할 수 있는 동작 프로퍼티 : 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다. let person = { name: 'Lee..
display의 속성 **Block vs Inline** ※Question : inline에 padding을 적용할 수 있을까? ■ Answer : 반은 맞고 반은 틀렸다. 좌우로는 패딩이 적용되나 싶은데, 상하로는 line-height 영역을 침범한다. (다른 줄의 base-line) 그렇다면 inline 요소의 성질을 유지한채로 block의 속성까지 갖을 수 있을까? (block은 width, height 값이 먹고, padding 값을 먹으니까) Inline-block이 해결해준다. 말 그대로 inline + block (하이브리드) inline-block 패딩을 통해서 상하로 밀수 있음 em상자의 높이는 어떻게 결정되는가? => content 영역의 크기는 font-size로 결정된다 line-h..