[JS] map, filter

🔹 기본 개념 정리 map : 배열의 각 요소를 변형하여 새로운 배열을 반환 filter : 조건을 만족하는 요소만 남겨 새로운 배열을 반환 🟢 React에서 map 활용 예제 ✅ 리스트 렌더링 import React from "react"; const fruits = ["🍎 Apple", "🍌 Banana", "🍊 Orange"]; function FruitList() { return ( {fruits.map((fruit, index) => ( {fruit} ))} ); } export default FruitList; 📌 설명 : map 을 사용해 fruits 배열의 데이터를 <li> 태그로 변환하여 렌더링함. ✅ 객체 배열에서 map 사용 const users = [ { id: 1, name: "Alice" }, { id: 2, name: "Bob" }, { id: 3, name: "Charlie" }, ]; function UserList() { return ( {users.map((user) => ( {user.name} ))} ); } export default UserList; 📌 설명 : key 속성은 React에서 필수이며, id 를 키 값으로 사용. 🔵 React에서 filter 활용 예제 ✅ 특정 조건의 데이터만 필터링 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; function EvenNumbers() { const evenNumbers = numbers.filter((num) => num % 2 === 0); r...

이번 주는 당신입니다.

[CSS] dimmed 왼쪽에 1px 라인이 보일때

이미지
 - 증상 & ::before {                 @include absolute-full ;                 z-index : 5 ;                 height : 100% ;                 background-color : rgba ( 0 , 0 , 0 , .5 );                 content : '' ;             } - 해결 ::before는 삭제 하고 해당 엘리먼트에 filter로 추가 filter : brightness ( 50% ); 원인은 아직도 모르겠음...=ㅁ=);

[CSS] 모바일 모드 :hover 대응

마우스의 hover가 모바일 모드에서는 터치로 인해 적용되서 남는 현상 https://url.kr/dxjguw See the Pen css hover with media query by ykwan0714 ( @ykwan0714 ) on CodePen .

[JS] Video 태그 제어 방법

기본적인 제어 방법과 유용할 것 같은 옵션들 https://www.w3schools.com/tags/ref_av_dom.asp

console.log 에 style 적용하기

이미지
기획팀과 협의 해볼까나... - 출처  https://heeya7.tistory.com/7 개발자 도구를 열어 작업을 할 때, 우리는 종종  style 이 입혀진  console.log 를 발견할 수 있다. 예를 들자면 쿠팡이나 티스토리가 있을 수 있겠다.  (괜히 이쁘고 부러움) 퍼블리셔로서 스타일이 입혀진 콘솔로그를 지나칠 수가 없지. 오늘은   console.log  에  style  입히는 방법을 알아보려 한다. 아주 간단하다. 메시지에 %c 플래그(flag)만 추가해주고, 원하는 스타일을 입력하면 끝.  참 쉽죠? 간단하게 예를들어, console . log ( '%c Welcome!' ,   'background-color:green; color:#ffffff;' ) ; 결과물은 이렇다. 이렇게 하면? console . log (' %c You are so %c attractive ' ,   'background-color:#000000; color:#ffffff; font-size:23px;' ,   'background-color:red; color:#ffffff; font-size:23px;' ) ; 요렇게 나오고! 조금 더 꾸며볼까? var   style   = [      'padding : 30px 20px' ,      'margin : 20px 0' ,      'background : linear-gradient(#98004C, #FFE8F3)' ,      'font-size : 25px' ,   ...

[jQuery] Range Slider - 슬라이더 바

https://www.jqueryscript.net/tags.php?/Range%20Slider/ 재미있는거 많네...