회사 업무중에 객체로 이루어진 두 개의 배열에서 email이 다른 객체만 추출하여 새로운 배열로 만들어야하는 로직이 필요했습니다. const arr1 = [ { name: 'Alice', email: 'alice@example.com' }, { name: 'Bob', email: 'bob@example.com' }, { name: 'Charlie', email: 'charlie@example.com' } ]; const arr2 = [ { name: 'Alice', email: 'alice@example.com' }, { name: 'Bob', email: 'bobby@example.com' }, { name: 'Charlie', email: 'charlie@example.com' } ]; const r..

animation 요소는 스타일을 서시히 변화시켜주는 것을 말합니다. CSS 속성을 원하는 만큼 많이, 원하는 만큼 여러 번 변경할 수 있습니다. CSS Animation 을 사용하려면 먼저 Animation에 대한 몇 가지 @keyframes을 지정해야 합니다. 키프레임은 요소가 특정 시간에 가질 스타일을 나타냅니다. 예를 들어, 요소의 크기, 위치, 색상 등을 지정하여 특정 시간에 어떻게 보일지를 설정할 수 있습니다. 이러한 키프레임을 사용하여 요소의 애니메이션을 만들 수 있으며, 이를 이용하여 요소가 부드럽게 움직이거나 변화하는 효과를 줄 수 있습니다. @keyframes animation-name animation-duration animation-delay animation-iteration-c..

주어진 기간 동안 속성값을 부드럽게 변경할 수 있도록 해줍니다. 예시를 만들 때 영상을 찍어 gif로 만들어서 첨부하면 보시는데 편하시겠지만 시간이 오래 걸리는 관계로 만들지 못했습니다. Transition 의 프로퍼티 종류 transition transition-delay transition-duration transition-property transition-timing-function transition transition효과를 주기위해서는 두개의 값이 필요합니다. 효과를 주길 원하는 CSS 속성(transition-property) 효과의 지속 시간(transition-duration) 참고: 지속시간의 명확하지 않다면 기본값이 0이 되어 trasition 효과가 발생하지 않습니다. 너비 100..

3D transform 메소드 종류 rotateX() roetateY() rotateZ() rotateX() 주어진 회전율에 따라 x축을 회전합니다. origin: x축을 기준으로 180도 회전시켰습니다. rotateY() y축을 기준으로 회전합니다. origin: y축으로 180도 회전시켜보겠습니다. rotateZ() origin: 43도 만큼 z축을 회전했습니다.

transform, transitions, animations, keyframes Transform 요소를 이동(move), rotate(회전), scale(), skew(비튼다) 기능 translate() 요소를 현재 위치에서(x축과 y축에 대한 지정된 매개변수에 따라) 이동합니다. origin: 현재 위치에서 x축을 50px, y축을 100px이동해보겠습니다. 인자로 음수값도 가능합니다. rotate() 주어진 각도에 따라 요소를 시계 방향 또는 반시계 방향으로 회전합니다. origin: rotate의 인자값에 따라 시계방향으로 회전합니다. rotate에 인자로 음의 값을 사용하면 반시계 방향으로 회전합니다. scale() 지정된 매개 변수에 따라 요소의 크기를 늘리거나 줄입니다. origin: 너비..

position 속성은 요소의 위치를 지정합니다. position은 웹 페이지를 만들때 정말 자주 사용하게 되는데요. 디자인 시안에 맞춰 디자인을 적용할 때 position이 없으면 어떻게 됬을까 생각듭니다. 그런데 정확히 스크롤을 내릴때라던지 구체적으로 각각 뭐가 다른지 잘 모르고 사용해왔기 때문에 오늘은 제 궁금증을 전부 풀어보는 시간을 가져보려합니다. value의 종류 static relative absoulute fixed sticky position: static; position을 지정하지 않으면 기본으로 설정되는 값 입니다. top, bottom, left, right을 사용할 수 없습니다. 일반적인 페이지 흐름에 따라 위치하게 됩니다. top속성을 넣어보겠습니다. position: rela..

참고자료 https://youtu.be/W6VSA3GDK6s https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA https://youtu.be/MQHNTzdqet0 ARIA W3S의 공식 스펙으로 HTML에 추가할 수 있는 속성 화면낭독기와 같은 보조 기술들에 접근성을 향상시켜 주는 속성 총 3가지로 정의 역할(Role) - UI에 특정 컴포넌트의 역할을 정의 속성(Property) - 해당 컴포넌트에 속성명으로 aria-xx라는 접두사를 사용 상태(State) - 컴포넌트의 상태 정보를 정의 무조건 aria가 좋은거는 아니다. aria를 사용하는 것 보다 오바르고 의미있는 HTML요소를 사용하는 것을 목표로 작업을 해야한다.

이름에서 알 수 있듯이 Vue 라우터가 제공하는 탐색 가드는 주로 리디렉션이나 취소로부터 탐색을 보호하는데 사용됩니다. 경로 탐색 프로세스에 연결하는 방법에는 전역, 경로별 또는 component 내 등 여러가지가 있습니다. Global Before Guard 'router.beforeEach'를 사용하여 가드하기 전에 전역에 등록할 수 있습니다. const router = createRouter({...}); router.beforeEach((to, from) => { //탐색을 취소하려면 명시적으로 false를 반환합니다. return false }) Navigation이 트리거될 때마다 작성 순서대로 가드를 호출하기 전에 전역으로 이동합니다. 가드는 비동기식으로 해결될 수 있으며 모든 후크가 해결되..