FEDev Story

1. 여기서 말하는 "토큰"이란일반적으로 토큰(Token)은 "최소 단위"라는 뜻입니다. 디자인 토큰(Design Token) 은 디자이너와 개발자가 함께 사용하는 UI의 최소 디자인 값에 붙인 이름표입니다.예를 들어 "파란색 버튼의 배경색"은 #3B82F6 이라는 값보다 color.primary.500 이라는 이름으로 관리합니다. 값이 바뀌어도 이름만 그대로 쓰면 되니까요.색상, 폰트 크기, 간격, 둥근 모서리, 그림자 — 이 모든 반복되는 값들을 이름 붙여 관리하는 것이 토큰입니다.2. 디자인 토큰을 코드로 "매핑"한다는 뜻공고에서 말하는 흐름은 이겁니다:Figma 디자인 스펙 ↓ CSS Variables ← 브라우저가 이해하는 변수 ↓tailwind.config.js ←..

export default { data() { return { currentId: null, lastFocusedElement: [], isModalOpen: { popup1: false, popup2: false, popup3: false, popup4: false, }, } }, }isModalOpen 객체의 아이템중 하나라도 true가 되면 isDimOpen을 true로, isModalOpen 객체의 아이템이 전부 false가 되면 isDimOpen을 false로 설정을 하려면 어떻게 해야할까?isModalOpen은 배열이 아니라 객체지만, Object.v..

forEach 메서드는 배열의 처음부터 끝까지 순서대로만 동작하도록 설계되어 있어서, 뒤에서부터 순회하는 기능은 지원하지 않아요.하지만 대신, for 루프를 사용해서 **역순(forEach처럼 동작)**할 수 있어요.✅ 역순으로 배열 순회하는 방법const arr = [1, 23, 4];for (let i = arr.length - 1; i >= 0; i--) { const num = arr[i]; console.log(num); // 4, 23, 1 순서로 출력}❗️forEach처럼 콜백을 쓰고 싶다면?const arr = [1, 23, 4];arr.slice().reverse().forEach((num) => { console.log(num); // 4, 23, 1});설명:slice()는 원본..