[Next] Next js

옥수수의 코딩이야기·2022년 12월 5일
0

기술

목록 보기
1/5
post-thumbnail

1. 리액트 아이콘

설치 : yarn add react-icons
접속 : https://react-icons.netlify.com/
사용예시 : import { ICON_NAME } from "react-icons/io"; *** <IoIosClose size="24" color="#fff"/>

2. style-component 화면깜박임 오류

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>
    );
  }
}

3. Image 태그

공식 사이트 안내

import Image from "next/image";
export default function Header() {
  return (
    <>
      <Image
        src='/'
        width=''
        height=''
    	/>
    </>
  );
}

4. a태그 오류 (_blank)

오류:target="_blank"
원인:구글링 통해 알아 본 결과 해당 이슈의 원인은 Tabnabbing 피싱 공격에 노출될 수 있기 때문
해결: rel=”noopener noreferrer”추가
(친절하게 안내가 하단에 뜸)

5. 자동 타이핑

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태그 오류
자동 타이핑
스크롤 메뉴 배경추가

profile
프론트엔드 공부중 기억은 블로그가 대신합니다.

0개의 댓글