Next.js4 Next.js - 서버 컴포넌트에서 useContext() 사용하기 넥스트js는 서버컴포넌트와 클라이언트 컴포넌트로 나뉘어진다 그렇기 때문에 React 기반의 훅들을 사용할 때는 한번더 생각해보아야 한다 오늘은 useContext() 를 어떻게 사용하는 지 알아볼 것이다 Next.js - 서버 컴포넌트에서 useContext() 사용하기 리액트에서 전역 변수를 전달하기 위해 redux / useContext 를 사용하였다 Next.js에서 useContext 를 사용하려고 하니 한가지 제약이 있었다 You are using createContext in a Server Component but it only works in Client Components → 바로 클라이언트 컴포넌트에서만 사용이 가능하다는 것이다 createContext in a Server Compo.. 2023. 12. 31. Next.js - Route 로 관리하는 모달 만들기 (URL 히스토리) updated 01/13/24 Next.js 로 포트폴리오 사이트를 만들면서 Route 로 관리되는 모달 (Route as Modal) 을 구현하고자 하였다 리액트로 같은 기능을 구현할 때 useHistory 로 구현하였던 기억이 있어 비슷하게 헤매일 줄(?) 알았는데 생각보다 훨씬 간단하였다 (머 - 쓱 😅) Next js 는 그만큼 라우터에 진심이라는 것을 다시한번 느끼며 그때의 감동을 정리해보았다 Next.js - Route 로 관리하는 모달 만들기 (URL 히스토리) 일단 처음 살펴봐야할 개념이 있다. Intercepting Routes 라는 개념이다. 이 친구에 대해 간단히 정리를 하면 원래의 주소의 화면과 다른 라우트를 가진 컴포넌트를 동시에 보여줄 수 있는 기능이다 This allows yo.. 2023. 12. 29. Next.js - global 구글 폰트 적용하기(next/font) 넥스트를 사용하며 전역적으로 폰트스타일을 추가하려고 한다. 폰트를 사용하는 방법은 두가지 정도가 있다. static한 내장 폰트를 사용하거나 웹 폰트를 사용하거나 내장 폰트는 다양한 브라우저 환경이나 운영체제에 따라 달라질 수 있다. (그래서 보통 웹 폰트를 많이 쓴다) 웹 폰트는 아무래도 외부 네트워크로 다운로드 해오다보니 다운로드할 동안 공백기(?)에 대한 이슈가 생긴다. → FOUT(기본 폰트가 나오고 로딩 후 웹 폰트로 대체) / FOIT(아무것도 안나오다 로딩후 웹 폰트로 대체) 지난번 리액트 사용하면서 폰트 프리로드하는 최적화를 진행해본적이 있다 그때는 급하게 찾아서 했었는데 이번 플젝을 진행하며 어떤 원리로 왜 이런 과정을 거치는 지의 인사이트가 한번 더 넓혀진 것 같다 웹 최적화 - 구글 .. 2023. 8. 17. Next.js - next dev / build / start 명령어 및 포트 변경하기 요즘은 Next.js 를 공부하는 중이다. 최근까지 CSR 방식을 사용해 개발하며 느꼈던 단점들을 SSR 과 SSG 방식을 통해 보완할 수 있게 되어 매우 들떠있다. Next.js 를 시작하며 명령어가 너무 헷갈렸다. 정확한 명령어를 알고 사용하기 위해 정리해보았다. dev - Runs next dev to start Next.js in development mode // 디벨롭 모드 시작하기 build - Runs next build to build the application for production usage // 프로덕션 빌드할 떄 start - Runs next start to start a Next.js production server // 프로덕션 서버 시작하기 - next dev 는 so.. 2023. 4. 7. 이전 1 다음 반응형
