본문 바로가기
반응형

JavaScript4

[React] map() 함수를 사용한 리스트 렌더링 : 배열 데이터를 반복되는 컴포넌트로 변환해 보자 feat. key 속성의 중요성 1. map() 함수란?map() 함수는 JavaScript 배열 함수 중 하나로, 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아 새로운 배열을 반환한다. React에서 map() 함수는 주로 배열 데이터를 컴포넌트로 변환할 때 사용된다. JavaScript 사용 예시const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled); // [2, 4, 6, 8, 10]  2. React에서 map() 함수 사용하기React에서 map() 함수는 배열 데이터를 JSX 요소로 변환하는 데 자주 사용된다. 아래의 예시는 사용자 목록을 렌더링한 예시이다. 여기서 users .. 2024. 5. 18.
[HTML/CSS/JS] GSAP로 애니메이션을 만들어 보자 : 문장 애니메이션 효과 만들기 이번 포스팅에서는 GSAP을 이용하여 문자열에 애니메이션 효과를 만들어 보자. 다음과 같은 애니메이션을 만들기 위한 GSAP의 사용법이 궁금하다면 아래의 포스팅을 참고하길 바란다. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. [HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 시간순으로 다양한 애니메이션 효과를 만들어 보자 feat. timeline [HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 시간순으로 다양한 애니메이션 효과를 만들어 보자 fe 이번 포스팅에서는 GSAP의 사용법에 대해 알아보는 시간을 가져보도록 하자. GSAP는 보다 다양하고 복잡한 애니메이션을 구현하기 위한 도구로써, 보다 자유로운 애니메이션을 제.. 2023. 6. 14.
[HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 다양한 애니메이션 기능을 구현해 보자 feat. to, from과 fromTo 이번 포스팅에서는 GSAP의 to, from과 fromTo를 이용해 애니메이션 효과를 만들어 보도록 하자. 다음과 같은 애니메이션을 만들기 위한GSAP의 사용법이 궁금하다면 아래의 포스팅을 참고하길 바란다. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. [HTML/CSS/JS] GSAP로 애니메이션 효과 사용하기 : 시간순으로 다양한 애니메이션 효과를 만들어 보자 feat. timeline [HTML/CSS/JS] GSAP로 애니메이션 효과 사용하기 : 시간순으로 다양한 애니메이션 효과를 만들어 보자 이번 포스팅에서는 GSAP의 사용법에 대해 알아보는 시간을 가져보도록 하자. GSAP는 보다 다양하고 복잡한 애니메이션을 구현하기 위한 도구로써, 보다.. 2023. 6. 13.
[HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 시간순으로 다양한 애니메이션 효과를 만들어 보자 feat. timeline 이번 포스팅에서는 GSAP의 사용법에 대해 알아보는 시간을 가져보도록 하자. GSAP는 보다 다양하고 복잡한 애니메이션을 구현하기 위한 도구로써, 보다 자유로운 애니메이션을 제공할 수 있도록 도움을 준다. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. GSAP를 불러와 보자 gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers GSAP is a JavaScript library for building high-performance animations that work in **every** major browser. Anima.. 2023. 6. 11.
반응형