Project Memoir (15) 썸네일형 리스트형 [Portfolio] React | Aos를 사용하여 애니메이션 효과 주기 스크롤할 때 애니메이션 효과를 주고자한다! ( 스크롤 할 때 말고 다른 컴포넌트 마운트시에도 사용가능 ) 💡Aos? (Animate On Scroll Library) - 스크롤 할 때 보여지는 영역에 애니메이션 효과를 넣을 수 있는 라이브러리 - 어떤 애니메이션이 있는지는 https://michalsnik.github.io/aos/ 요기서 확인할 수 있음 :) 1️⃣ 설치 yarn add aos 2️⃣ 사용할 컴포넌트 혹은 index.js에 import ! import AOS from 'aos' import 'aos/dist/aos.css' AOS.init(); 3️⃣ 애니메이션을 적용할 컴포넌트 (영역) data-aos="fade-up" : fade-out, zoom-in 등 다양하게 애니메이션 적용 .. [Portfolio] React | React-scroll 을 이용해서 원하는 영역으로 이동 오늘은 React-scroll을 이용하여 원하는 영역으로 부드럽게 이동하는 동작을 구현해 보겠다. 포폴 사이트는 원페이지로 구성되어 있기 때문에 헤더의 각 항목들을 눌렀을 때, 하나의 페이지에서 나뉘어진 영역을 부드럽게 이동하고 싶었다. 💡React-scroll? - 1️⃣ React-scroll 설치 npm의 경우, npm install --save react-scroll yarn의 경우, yarn add react-scroll 2️⃣ Header 항목 버튼들이 있는 컴포넌트 import { Link } from 'react-scroll' 을 맨 위에 import 해준 후, 각 항목마다 Link를 걸어준다. 여기서 smooth 옵션은 각 항목을 클릭했을 때 부드럽게 영역을 이동할 수 있게 해줌! t.. [Portfolio] React | ContextAPI를 이용한 Modal창 구현 개발하면서 가장 많은 시간을 뺏긴 것 같았던 모달 창 구현! ContextAPI로 전역적인 상태를 가지고 오자는 생각을 미리하지 못했어서 더 오래 걸렸던 것 같다! ContextAPI에 관한 공부는 이전에 했으므로 링크달아둠! https://yexjinitlog.tistory.com/56 [React] Study #21 | Context API를 사용한 전역 값 관리 이전 #20 까지 공부했던 챕터에서 까지, 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달해주었다. 컴포넌트 한개 정도를 거쳐서 전달하는 것은 사실 큰 불편함은 없지만, 만약 3~4 yexjinitlog.tistory.com 구현하기에 앞서,, 구현할 모달창을 확인해 보자 이전 포스팅에서 이런 Carousel Slider을 구현.. [Portfolio] React | react-slick으로 carousel 구현하기 웹 개발을 하다보면, 은근 carousel이 많이 보인다. 그래서 기록하는 구현 방법! 💡Carousel ? Carousel은 회전목마라를 뜻! 이미지나 영상들을 슬라이드 형태로 나타낸 것이라고 쉽게 생각하면 된다. 넷플릭스에서 쉽게 Carousel을 이용하여 영상들과 이미지를 보여주는 슬라이더를 볼 수 있다! 구현할 Carousel은 아래의 사진과 같다. 1️⃣ react-slick 설치 npm npm install react-slick --save npm install slick-carousel --save yarn yarn add react-slick yarn add slick-carousel 2️⃣ import! slider을 사용하는 부분에 해주면 될것 같다! import Slider fro.. [Portfolio] 포트폴리오를 만들어보자! 포트폴리오 제작은 사실 지난 해부터 만들자 만들자 했는데, 미뤄지고 미뤄지다 만들지 못했다..^^,, 새해도 됐겠다, 본격적으로 이번주내로 포트폴리오 개발을 완료하기로 결정^,^! 아, 이 카테고리의 목적은 포트폴리오를 리액트로 개발하면서 간단하지만 쓸모있는 구현들을 기록해 나갈 예정이다 (거의 나를 위한 목적 ㅋㅋ..) 포트폴리오 탭 구성 (Navigation Header) 은 아래와 같다. Atomic Design Pattern으로 개발하고 있으며 간단히 그저 보여주는 사이트이므로 백엔드 개발은 패스, 더미데이터 이용, 상태관리는 딱히 필요 없다 생각 이전 1 2 3 다음
