설치 : yarn add react-icons
접속 : https://react-icons.netlify.com/
사용예시 : import { ICON_NAME } from "react-icons/io"; *** <IoIosClose size="24" color="#fff"/>
Next.js에서 제공하는 css 미리 적용
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
}
화면 깜박임이 지속된다면...
import Document, { Head, Main, NextScript } from "next/document";
import { ServerStyleSheet } from "styled-components";
import React from "react";
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const sheet = new ServerStyleSheet();
const page = renderPage(
(App) => (props) => sheet.collectStyles(<App {...props} />)
);
const styleTags = sheet.getStyleElement();
return { ...page, styleTags };
}
render() {
return (
<html>
<Head>
<meta data-react-helmet='true' property='og:image' content='' />
{this.props.styleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
import Image from "next/image";
export default function Header() {
return (
<>
<Image
src='/'
width=''
height=''
/>
</>
);
}
오류:target="_blank"
원인:구글링 통해 알아 본 결과 해당 이슈의 원인은 Tabnabbing 피싱 공격에 노출될 수 있기 때문
해결: rel=”noopener noreferrer”
추가
(친절하게 안내가 하단에 뜸)
const $text = document.querySelector(".text");
// 글자 모음
const letters = [
"HTML",
"CSS",
"JavaScript"
];
// 글자 입력 속도
const speed = 100;
let i = 0;
// 타이핑 효과
const typing = async () => {
const letter = letters[i].split("");
while (letter.length) {
await wait(speed);
$text.innerHTML += letter.shift();
}
// 잠시 대기
await wait(800);
// 지우는 효과
remove();
}
// 글자 지우는 효과
const remove = async () => {
const letter = letters[i].split("");
while (letter.length) {
await wait(speed);
letter.pop();
$text.innerHTML = letter.join("");
}
// 다음 순서의 글자로 지정, 타이핑 함수 다시 실행
i = !letters[i+1] ? 0 : i + 1;
typing();
}
// 딜레이 기능 ( 마이크로초 )
function wait(ms) {
return new Promise(res => setTimeout(res, ms))
}
// 초기 실행
setTimeout(typing, 1500);
import React, {useState, useEffect} from 'react';
import "./css/Header.css";
function Header() {
const [scrollPosition, setScrollPosition] = useState(0);
const updateScroll = () => {
setScrollPosition(window.scrollY || document.documentElement.scrollTop);
}
useEffect(()=>{
window.addEventListener('scroll', updateScroll);
});
return (
<div className="header">
<div className={scrollPosition < 100 ? "original_header" : "change_header"}>
<p className="title">타이틀</p>
</div>
</div>
)
}
export default Header;
참고 사이트
리액트아이콘 사용법
style-component 화면깜박임
이미지태그 사용하기
이미지태그 추가설명
a태그 오류
자동 타이핑
스크롤 메뉴 배경추가