개발자의 길

1. React Server ComponentNext.js 13 버전부터 App Router가 도입되면서 그 이전의 pages 폴더 방식의 라우팅에서 획기적인 변화가 일어났는데요.라우팅의 변화에 앞서 먼저 살펴볼게 바로 React 서버 컴포넌트입니다.리액트 서버 컴포넌트는 React 버전 18부터 도입된 새로운 아키텍처인데, 나오자마자 Next.js 에서 도입했습니다.새로운 아키텍처는 리액트 컴포넌트를 두 가지로 구분하는데요.바로, "Server components"와 "Client components"입니다.1.1. Server ComponentsNext.js의 모든 컴포넌트는 기본적으로 서버 컴포넌트입니다.서버 컴포넌트는 서버 사이드 상에서 작동하기 때문에 서버의 파일을 읽을 수 있고, 데이터베이스에..

무한 스크롤링이라곤 하지만 정확하겐 바닥에 닿으면 데이터를 새로 불러오는 로직이다. 여러 라이브러리가 존재하지만 순수 리액트만으로 작성을 해보았다. 먼저 스크롤이 화면 전체인 컴포넌트에서의 스크롤 구현이다. 해당 기능은 현재 진행중인 프로젝트내에서 여러곳에서 써야하므로 훅으로 구현을 하였다. const useScroll = (totalPage, limit) => { const [page, setPage] = useState(1) const ScrollPaging = useMemo( () => throttle(() => { let scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) let scro..

react 에서, 특정 컴포넌트를 페이지 이동이 아닌, 모달 팝업(레이어 팝업) 같이 열었을 경우, 뒤로 가기 클릭스, 해당 팝업만 닫고 싶은데, 페이지가 뒤로 가기 되 버려서 당황 스러웠다. 그럴 경우, 뒤로 가기 이벤트를 잡아서, 다른 액션을 주었다. function closeView() { //여기에, 뒤로 가기 클릭시 할 액션을 정의 하면 된다. 나는 레이어팝업을 닫는 액션을 했다. props.onClose(); } useEffect(() => { const randomKey = 페이지의 특정한 값을 부여해주세요. // 별도로 history에 특정값을 주었다. window.history.pushState('fake-route'+randomKey, document.title, window.locat..