전체 글 42

2022-06-01 display: flex 를 쓴다.

css를 처음 배울 때. html의 요소를 정렬하려고 하면 float:left속성으로 정렬시키던 기억이 있다. 근데 이게 매우 손이 많이 갔었다. 띄워서 정렬하고 부모에 clearfix 주고.. 하지만 이젠 그럴 필요가 없다. 우리에겐 Flex가 있으니까! 1 2 3 4 이렇게 flex를 준 요소가 Flex container가 되고 그 부모 바로 아래 있는 요소들은 Flex Item이 됩니다. flex에서 연계되는 속성은 이 두 요소들과 관련이 있습니다. 즉 - Flex Container의 속성 - Flex Item의 속성 으로 나뉩니다. Flex Container의 속성 display:flex 속성은 내가 정렬하고 싶은 요소의 부모 요소에게 적용시킵니다. 그러면 flex-item의 요소들은 displa..

css 2022.06.01

2022-05-31 / js array.find 그리고 array.filter

react를 쓰다보면 map과 filter에 심취한 나머지 다른 메소드의 존재를 잊을 때가 있다. 그럴 때 마다 주로 깜빡하는 메소드가 find이다. 배열에서 찾는 요소를 배열로 만들어 가져오는 것에 익숙해져서 내가 무슨 작업을 하는 것인지, 뭘 해야하는지 잊는 것이다. const numArray = [1,2,3,4,5]; const iFoundTargetNum = numArray.filter(num => num === 3)[0]; // 1,2,3,4,5 모두 검사 이렇게 하나의 아이템만을 찾는데 Array.filter를 도는 것은 전기 낭비, 메모리 낭비 이다. 조건에 맞는 아이템 하나만 찾아서 바로 리턴해주면 되는 일을 배열의 모든 요소를 돌아서 찾을 필요는 없다. const numArr = [1,2..

js 2022.05.31