전체 글46 Warning: Extra attributes from the server: style next.js 13 버전 app directory로 마이그레이션 하던 중 다음 경고 메시지를 발견했다. Warning: Extra attributes from the server: style body 태그에 빈 style 속성이 들어가서 경고가 뜬 것인데, 코드 동작에는 아무런 지장이 없다. // app/layout.tsx // Remove the server-side injected CSS. if (document.body.getAttribute("style") === "") { document.body.removeAttribute("style"); } 위 코드를 추가하면 warning이 사라지긴 한다. next.js 13버전의 문제인지, 아직 베타 버전인 app directory의 문제인지 추후 업데.. 2023. 1. 30. Next.js 13 pages 폴더에서 app router로 마이그레이션하기 next.js 13 migration from pages router to app router app routernext.js 13 버전이 도입되면서 기존 pages 폴더와는 다르게 동작하는 app router가 생겼다. app 디렉토리는 아직 베타버전이지만, 새로 등장한 기능들을 사용하기 위해선 앱 디렉터리를 사용해야 한다. pages 라우터와 app라우터의 가장 큰 차이점은 app에선 기본적으로 server component가 적용된다는 것이다. pages 폴더에서 app 폴더로 마이그레이션1. next.config.js 코드 추가app directory는 아직 베타버전으로, 사용하기 위해선 next.config.js에 아래 코드를 추가해줘야 한다./** @type {import('next').Nex.. 2023. 1. 29. 프로젝트 yarn berry 도입 https://www.jerrynim.dev/post/yarn-berry-typescript-cannot-find-module https://www.zigae.com/yarn2/ https://minify.tistory.com/40 https://medium.com/wantedjobs/yarn-berry-%EC%A0%81%EC%9A%A9%EA%B8%B0-2-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%A0%81%EC%9A%A9%EA%B8%B0-45f1ba67c24c https://medium.com/wantedjobs/yarn-berry-%EC%A0%81%EC%9A%A9%EA%B8%B0-1-e4347be5987 https://helloinyong.tistory.com/341 .. 2022. 10. 29. NextJs를 이용한 SSR / SSG 마스터 하기 - 2 react query로 SSR 구현 일단 루트 파일 useState에 queryClient 저장 set은 갱신될 일이 없기 때문에 필요 없다 hydrate는 처음 봐서 뭔지 잘 모르겠음 서버에서 데이터를 받을 수 있게 해주는 것 Hydrate란, Server Side단에서 렌더링 된 정적 페이지와 번들링된 js파일(Webpack)을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 js 코드를 서로 매칭시키는 과정을 말합니다. 즉 hydrate가 일어나기전엔 자바스크립트 상호작용 x 컴포넌트 안에다 해놓으면 csr로 해야할지 ssr로 해야할지 알 수 없음 그래서 컴포넌트 밖에다 해줘여 함 getServerSideProsp안에 없으니까 ssr이 안되는 것 저 함수 안에서 동작하게 하기.. 2022. 8. 9. NextJs를 이용한 SSR / SSG 마스터 하기 - 1 NextJs폴더 구조 pages폴더의 api폴더에서 백엔드 처리를 할 수 있다. pages 폴더로 라우팅 처리를 할 수 있다. _app.tsx는 리액트에서 index.tsx와 비슷한 기능을 하는 것 같다 props로 pages폴더에 있는 컴포넌트를 폴더명(도메인)별로 받아서 화면에 띄움 동적 라우팅도 매우 편한 것 같다 파일명에 [id]만 붙이면 가능했다. 나는 리액트면 리액트, 넥스트면 넥스트 문법만 쓸 수 있을 줄 알았는데 넥스트 안에서 리액트도 사용할 수 있는 구조였다. 또한 컴포넌트별로 CSR, SSR, SSG가 가능한 것이 아니라 데이터 통신을 할 떄 즉 api 요청을 할 때 어떤 함수로 하느냐에 따라 CSR, SSR, SSG가 가능한 것이었다. CSR, SSR, SSG 의 차이를 눈으로 확인했.. 2022. 8. 8. MVC 패턴 탄생 배경 - 유지보수를 쉽게 할 수 있는 정형화된 방식의 필요성 대두 Model View controller - 사용자는 View에서 Model에 데이터를 요청 - Model은 View에 해당 데이터를 보여줌 - View와 Model이 데이터를 주고 받기 위해선 Controller을 통해서 주고 받아야만 함 MVC 패턴을 지키는 방법 1. Model은 Controller와 View에 의존하지 않아야 한다. - Model 내부에 Controller와 View에 관련된 코드가 있어선 안된다. 2. View는 Model에만 의존해야하고 Controller에 의존해선 안된다. - View 내부에는 Model에 관련된 코드만 있을 수 있고, Controller에 관련된 코드는 있으면 안된다. 3. View가 .. 2022. 7. 23. 이전 1 ··· 3 4 5 6 7 8 다음
