yevdev◡̈

보호되어 있는 글입니다.

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

스크롤할 때 애니메이션 효과를 주고자한다! ( 스크롤 할 때 말고 다른 컴포넌트 마운트시에도 사용가능 ) 💡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 등 다양하게 애니메이션 적용 ..

오늘은 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..

개발하면서 가장 많은 시간을 뺏긴 것 같았던 모달 창 구현! ContextAPI로 전역적인 상태를 가지고 오자는 생각을 미리하지 못했어서 더 오래 걸렸던 것 같다! ContextAPI에 관한 공부는 이전에 했으므로 링크달아둠! https://yexjinitlog.tistory.com/56 [React] Study #21 | Context API를 사용한 전역 값 관리 이전 #20 까지 공부했던 챕터에서 까지, 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달해주었다. 컴포넌트 한개 정도를 거쳐서 전달하는 것은 사실 큰 불편함은 없지만, 만약 3~4 yexjinitlog.tistory.com 구현하기에 앞서,, 구현할 모달창을 확인해 보자 이전 포스팅에서 이런 Carousel Slider을 구현..

웹 개발을 하다보면, 은근 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..

포트폴리오 제작은 사실 지난 해부터 만들자 만들자 했는데, 미뤄지고 미뤄지다 만들지 못했다..^^,, 새해도 됐겠다, 본격적으로 이번주내로 포트폴리오 개발을 완료하기로 결정^,^! 아, 이 카테고리의 목적은 포트폴리오를 리액트로 개발하면서 간단하지만 쓸모있는 구현들을 기록해 나갈 예정이다 (거의 나를 위한 목적 ㅋㅋ..) 포트폴리오 탭 구성 (Navigation Header) 은 아래와 같다. Atomic Design Pattern으로 개발하고 있으며 간단히 그저 보여주는 사이트이므로 백엔드 개발은 패스, 더미데이터 이용, 상태관리는 딱히 필요 없다 생각