계발하는 개발자

리액트에서 오랜만에 폰트어썸 아이콘을 사용하려고하니 공식문서를 보면서도 조금 헤맸다. 그래서 따로 정리하는 포스팅..! 다운로드 npm install --save @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons 스크립트 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'; 사용 방법 사용하려는 아이콘을 선택해서 React 탭 > 아이콘 이름 부분을 파스칼케이스 방식으로 위와 가팅 icon 속성에 적어주면 해당 아이콘이 삽입되게 ..

Svelte를 이용해 게시판 프로젝트 진행하다가 이상한 버그를 발견했다. 새 글 등록 후 스크롤했을 때 무한스크롤로 다음 페이지가 호출되는 부분에 게시글이 중복이 되는 문제였다. 참고로 새 글 등록 없이 스크롤해서 기존 글 쭉 내리면 아래처럼 중복없이 잘 나타난다. 새 글 등록 후 스크롤 내리게되면 중복으로 들어가있는 게시물을 보게 된다. " 왜 이런 현상이 발생하는 것일까? " 현재 설정된 페이지네이션 방식의 경우, 서버에서 계산되어 요청한 페이지에 해당하는 게시글 10개씩이 보내지고 있다. 그렇기 때문에 이 결과로 게시글이 추가되기 전에 요청한 페이지네이션과 게시글이 추가된 후의 페이지네이션 결과가 다르게 나타나게 된다. 이에 대한 해결 방법은 찾아보면 다양하게 있지만, 그중에서도 비교적 간단해보이는..

Next.js에서 페이지를 이동하는 방법은 보통 두 가지로 나뉜다. Link를 이용한 방법과 router를 이용한 방법이다. 오늘은 이중에서 Link를 이용해 동적 라우팅 하는 것을 남겨볼 것이다. Link를 이용한 라우팅 Link는 다음과 같은 props를 가지고 있다. (이외 기타 prop 들도 있다.) (1) href - 이동할 경로 혹은 URL (유일한 필수 prop) * 아래처럼 href 객체를 받을 수도 있다. // Navigate to /about?name=test About (2) replace - history 스택(방문 기록)에 새 url을 추가하는 대신 현재 상태를 변경한다. 기본값은 false (3) scroll - 페이지 전환 후 페이지 상단으로 스크롤할지 여부. 기본값은 true..

사전 준비 - redux 세팅에 필요한 패키지 설치 npm i @reduxjs/toolkit react-redux Redux 세팅하기 - redux.js 파일 생성 redux.js 파일 생성후 아래와 같은 코드를 붙여넣는다. (2번의 store.js 파일에 합쳐도 상관없음) - store.js 파일 생성 store.js 파일 생성후 아래와 같은 코드를 붙여넣는다. store 파일을 생성했다면, layout.js 파일로 가서 컴포넌트로 children을 감싸주면 된다. - Provider 로 root 컴포넌트 랩핑 자세한 설명은 아래 이전 포스팅 참고 ⬇️ [Next.js 13] Error: could not find react-redux context value; please ensure the comp..