프로젝트 배운점 모음 0401

선 긋는 법

<div class="-my-8 divide-y-2 divide-gray-100"></div>

위 설정으로 처리할 수 있다.
y가 2개이상일때 선이 그어짐

페이지네이션

  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;

  const indexOfLast = currentPage * itemsPerPage; // 마지막을 먼저 구함
  const indexOfFirst = indexOfLast - itemsPerPage; // 제거
  const currentItems = wikiList.slice(indexOfFirst, indexOfLast); // 슬라이스 활용

  const pageNumbers = calculatePageNumbers(wikiList, itemsPerPage);

  function calculatePageNumbers(wikiList, itemsPerPage) {
    const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(wikiList.length / itemsPerPage); i++) {
      pageNumbers.push(i);
    }
    return pageNumbers;
  }
  

위 방법을 통해 페이지네이션을 만들었다.
로직이 정말 깔끔하다 마지막 것을 구하고 갯수만큼 제거한 다음
슬라이스에 넣어주면 마지막이 빠지고 들어간다.

navigate vs Link

import { useNavigate } from "react-router";
 const navigate = useNavigate();
() => navigate(address)

next 공부하다보니 router랑 헷갈렸다.
navigate를 통해 이동할 수 있다.

Link랑 다른 점은 Link는 조건부가 불가능하지만 router는 조건부가 가능하고 더 유하다.

next.js ssr 안하는 법

Next JS 프로젝트를 사용하고 계시다면

정상으로 뜨는 에러입니다.

Next JS 는 기본적으로 서버사이드 렌더링을 지원하게 되는데

서버로부터 웹 페이지를 렌더링하는 시점에서는

window 또는 document object를 선언하기 전이기 때문에

document가 선언되지 않았다는 에러가 발생하게 됩니다.

이 문제를 해결하기 위해서는

React-Quill 을 import 하게 되는 시점을

document 가 선언된 시점 이후에 선언할 수 있게 해야합니다.

이때 사용할 수 있는 방법으로는

next js 의 dynamic import 방식을 사용할 수 있습니다.

기존의 코드 대신에

아래의 코드를 새로 추가해주세요.

import dynamic from 'next/dynamic';

const ReactQuill = dynamic( () => import('react-quill'), {
    ssr : false
})

https://velog.io/@rlaclgns321/%EC%9B%B9-%EC%97%90%EB%94%94%ED%84%B0-React-quill

Reactquill 튀어나오는 문제

overflow-y-auto로 해결하였다.

어딘가 툭 튀어나온 것들 이렇게 다해결할 수 있다.

Link로 데이터 전달하는 법

<Link to={{
  pathname: `/wiki/${data.id}`,
  state: { wikiList, data }
}}>

state로 받아서 전달할 수 있다.

  const location = useLocation();
  const { wikiList, data } = location.state;
  

이후에 이렇게 받아줄 수 있다.

  navigate('/example', { state: data });

같은 방법으로 navigate도 사용해줄 수 있다.

escape character

\ 기호는 escape character로서, 문자열 내에서 특수 문자를 표현하기 위해 사용한다. 예를 들어, 작은따옴표(')나 큰따옴표(") 같은 문자를 문자열 내에 직접 사용하려면, 이스케이프 문자인 \를 해당 문자 앞에 붙여줘야 합니다.

<a href=\"http://localhost:3000/wiki/3\">키아</a>

위의 예시에서는 "http://localhost:3000/wiki/3" 이라는 문자열을 큰따옴표로 감싸고 있습니다. 그리고 href 속성 값으로 해당 문자열을 할당하기 위해 큰따옴표를 사용하고 있기 때문에, 문자열 내에서 또다른 큰따옴표를 사용할 수 없습니다. 따라서, 해당 문자열 내에 큰따옴표를 표현하기 위해서는 \를 사용하여 이스케이프 해주어야 합니다.

useEffect dependency

React Hook useEffect has a missing dependency: ''. Either include it or remove the dependency array.

useEffect 두번째 인자에는 해당 값을 좌지우지하는 것을 할당해줘야 효율적으로 사용할 수 있다.

dangerouslySetInnerHTML

dangerouslySetInnerHTML은 React에서 HTML 내용을 동적으로 생성할 때 사용하는 속성입니다. 이 속성을 사용하면 React 엘리먼트의 innerHTML을 문자열로 지정할 수 있습니다.

React는 XSS(Cross-site scripting) 공격 등 보안 이슈를 막기 위해, 일반적으로 컴포넌트가 렌더링되는 과정에서 사용자로부터 입력받은 문자열은 자동으로 이스케이핑(escaping)됩니다. 이스케이핑은, 예를 들어, < 문자를 <로 변경하여, 브라우저에서 이스케이핑된 문자열을 그대로 출력할 때, 해당 문자열이 HTML 태그로 인식되지 않도록 방지합니다.

하지만, dangerouslySetInnerHTML을 사용하면, 이스케이핑 없이 원하는 HTML 코드를 그대로 출력할 수 있습니다. 이 때문에, 이름에 "dangerously"가 들어갑니다.

그러나 이 속성을 사용할 때는, 보안 이슈에 주의해야 합니다. 사용자로부터 입력받은 문자열은 믿을 수 없는 데이터일 수 있으므로, 적절한 필터링과 이스케이핑이 필요합니다. 또한, React에서만 사용하는 속성은 아니며, Vue.js와 같은 다른 프레임워크에서도 비슷한 기능을 제공하기도 합니다.

내용 자체로 버그 나오기 좋아보인다.