홍준혁

오늘 소개할 것은 바로 타이핑 이펙트이다. 어느 포트폴리오 사이트를 보다가 이런 이펙트가 있어서 되게 참신하다고 생각해서 라이브러리를 찾아보다가 괜찮은 라이브러리가 있는 거 같아서 소개해 주려고 한다. 바로 이것이다. www.npmjs.com/package/typing-effect-reactjs typing-effect-reactjs React UI component to render aesthetic yet elegant typing effect www.npmjs.com 이게 쫌 다운로드 수가 적지만... 그래도 기능은 괜찮은 것 같다. 간단한 사용법은 import { Typing } from 'typing-effect-reactjs'; 라이브러리에서 Typing이라는 모듈을 가지고 온다. 그리고 출력..

이렇게 창을 구현했다. 리액트에서 재사용 가능한 컴포넌트로 만들었으며, 나중에 포트폴리오 사이트를 만들 때에 이 컴포넌트를 재활용할 것이다. JSX는 간단하게 이렇게 작성했으며 props로 children을 받아 article에 children을 display 하는 것이다. .macWindow { border: 3px solid #f1f1f1; border-top-left-radius: 4px; border-top-right-radius: 4px; } .macWindow header { background: #f1f1f1; display: flex; justify-content: space-between; padding: 4px; } .macWindow header .dot { margin-top: 4p..

이번에는 리액트를 빌드하면 이런 화면이 뜨게 되는데 다른 플랫폼에서 웹사이트를 접속하는 법을 알려주도록 하겠다. 하지만 조건이 있는데, 접속하는 플렛폼은 반드시 같은 네트워크에 있어야 한다. 윈도 기준으로 설명하겠다! 윈도우키 + R을 눌러서 실행창에 cmd라고 검색한다 그러면 우리가 잘 아는 시꺼먼 창이 나올 텐데, 거기서, ipconfig라고 치자. 그러면 우리가 해킹하는 거 마냥 촤르르 뭐가 많이 나올 텐데, 무선 LAN 어댑터 Wi-Fi: 이 부분에 IPv4 주소라는 곳이 있을 것이다. 그 부분이 옆에 XXX.XXX.X... 이런 형식의 ip주소가 있을 텐데, 이제 이걸 알아냈으면 다 왔다. 우리가 접속할 플랫폼에 주소창에다가 http://아까 얻어낸 IP주소:포트번호 이렇게 검색을 해보면 우리가..

우리가 웹사이트를 만들 때 화면이 작아지면 구성요소가 깨지는 현상을 많이 겪어봤을 것이다. 나 또한 그랬고 이를 해결하기 위해서는 반응형 웹페이지로 만들어야 한다는 설루션이 있었다. 또, 모바일 , 테블릿 등에서 웹페이지를 접속할 때, 각기 다른 페이지를 보여줘야 하는데, 반응형을 사용하지 않는다면 각 페이지마다 새로운 파일을 만들어서 각기 다른 버전으로 관리해야 하는데, 그렇게 되면 번거로울 수 있기 때문에 한 파일에서 pc , 모바일 , 태블릿 등을 고려한 웹사이트를 만들 수 있게 반응형 웹페이지를 만드는 것이다. 우리는 미디어 쿼리 라는것을 사용해서 반응형 웹페이지를 만들어 볼 것이다. 미디어 쿼리의 개념은, 각 화면의 비율마다 각각 다른 화면을 보여주자 라는 개념이다. 스타일 시트 내에서 @med..

이렇게 화면이 랜더링 될 때 애니메이션이 나오게 하는 것을 해볼 것이다. 이번 예제는 리액트를 사용했으며, Greensock 라는 라이브러리를 사용하였다. greensock.com/ GreenSock GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser. greensock.com 이는 애니메이션을 쉽게 만들어주는 라이브러리이다. 먼저, 컴포넌트가 랜더링 될 때, 즉 useEffect가 실행될 때 애니메이션이 실행돼야 한다. useRef를 사용해서 element에 접근한다. 이제 cssR..

오늘은 스크롤할 때 이러한 효과를 내는 Parallax를 만들어보았다. Parallax를 공부한 이유는 나중에 포트폴리오 사이트를 만들건대, 그 포트폴리오 사이트에 이 기법을 사용할 것이기 때문이다. 만드는 방법은 정말 간단하다. background-attachment: fixed; 정말, 더도말고 덜도 말고 이것만 알고 있으면 된다. 배경이 스크롤해도 함께 스크롤되지 않는다는 점이다. 여기서 우리가 background-image로 이미지를 주고 그 이미지의 이렇게 코드를 작성해주면 이미지가 스크롤해도 이미지가 가만히 있는 효과를 줄 수 있게 되는 것이다. 이미지를 하나의 div에 담고 안에 값을 작성한 다음, 이렇게 해서 사진상에 가운데에 나타나게 해 주었다. 그런데 여기서 주의해야 할 점이 있는데 만..