개발자의 길

npm 과 node는 설치를 이미 했다는 전제하에, 1. CREATE NEXT.JS next.js를 설치하는 방법은 간단하다.vscode에서 통합 터널을 연다음 아래와 같이 선택하면 된다.npx create-next-app@latest --ts next-test(프로젝트최상위 폴더명) ESLint는 코드의 품질을 위해서 선택했다.Tailwind CSS는 사용하기 싫어서(개인적으로), 선택안했다.src를 main directory로 설정해놓으면 import해서 컴포넌트를 불러오는데 편하다.기왕 하는김에 추천하는 ROUTER도 추가했다.마지막으로 절대경로 설정을 @파일명으로 할지인데 사용안할수도 있지만, 언젠간 할수도 있어서 설정을 해놓았다.(설치 완료) 2. NPM RUN DEV cd next-testnp..

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..