Project Memoir/Portfolio (2022) (7) 썸네일형 리스트형 [Portfolio] 나의 첫 포트폴리오 사이트 개발 마무리 :) 보호되어 있는 글입니다. [Portfolio] Github 으로 React 프로젝트 호스팅하기 현재 포트폴리오 진행상황은 웹(PC) 버전만 일단 구현 완료한 상황이다! 아직 반응형은 진행하지 못했고,, 일단 바빠질 다음주를 대비하여 웹 버전만 완벽하게 해두기로,, 무료로 웹 프로젝트를 호스팅하기 위해 많이들 사용하는 Github Pages를 사용한 것을 기록해보겠다! 1️⃣ Repository > Settings > Pages 이동 호스팅을 하고자 하는 프로젝트가 담긴 Repository에서 Settings로 이동한다. Settings의 사이드 바를 보면 Pages탭이 있는데 그곳으로 들어간다! 여기서 master 혹은 main 브랜치로 설정한 후, save 버튼을 눌러준다. 이때 생성되는 초록색 바탕의 url을 복사한다!! 2️⃣ 프로젝트의 package.json파일에 homepage 프로퍼티 .. [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을 구현.. 이전 1 2 다음
