Web19 Next.js 13 pages 라우터에서 app router로 마이그레이션하기 - next/head next/head migration pages 라우터에서는 next/head를 이용하여 meta, title와 같은 html 요소를 관리하였다. // pages/index.tsx import Head from 'next/head' export default function Page() { return ( ) } app 라우터에서는 이것이 head.js라는 special 파일로 대체되었다. // app/head.tsx export default function Head() { return ( My Page Title ) } 이에 따라 기존에 웹폰트 방식으로 사용하던 폰트 또한 마이그레이션 해야 했다. // pages/_document/tsx render() { return ( ); } } next/font.. 2023. 2. 1. 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. 비주얼 스튜디오 코드에서 code 명령을 매번 설치해줘야 하는 경우 해당 게시물은 MAC OS를 기준으로 작성되었습니다. 터미널에서 code . 명령어를 이용하여 해당 디렉토리에 비주얼 스튜디오 코드를 띄우는 방법은 다음과 같다. 그런데 이 기능이 처음에는 잘 작동하다가 재부팅만 하면 명령어가 먹지 않았다. 그럴 때 마다 명령 팔레트에 들어가서 해당 명령을 다시 설치해주었는데 이 과정이 은근 귀찮았다. 한 동안 인터넷을 열심히 뒤져 여러 방법을 시도해보았었는데 별 효과는 없었다. 그러다가 어느 날 스택오버플로우에서 처음 보는 방법을 발견했는데 다음과 같다. 확인해보니 나의 비주얼 스튜디오 코드는 응용 프로그램 폴더에 있지 않았다. 맨 처음 다운로드 했을 때 그대로 다운로드 폴더에 있었는데, 나는 이 것을 그대로 dock바에 올려두고 사용하고 있었다. Visual Stud.. 2022. 4. 29. Recoil을 알아보자 상태 관리 라이브러리의 등장 배경 다음과 같은 상황을 가정해 보자 // src/App.tsx import React from 'react'; import Top from './Top'; function App() { return ; } export default App; App.tsx에서 Top.tsx를 랜더링 하고 // src/Top.tsx // Middle 컴포넌트를 자식으로 가지고 BottomText를 출력해야하는 컴포넌트 import React from 'react'; import Middle from './Middle'; function Top() { return ( Top : {BottomText} ); } export default Top; Top.tsx에서는 Middle.tsx를 랜더링 한.. 2022. 4. 28. 이전 1 2 3 4 다음
