나의 코딩 기록

코딩을 기록하는 공간

코딩 기록/Next.js

Next.js 에서 _app.js 를 이용하여 공통 레이아웃을 사용해보겠습니다. 저는 타입스크립트를 사용하는 프로젝트를 만들었기 때문에 _app.js가 아닌 _app.tsx파일입니다. 우선 Components 폴더에 공통적으로 사용할 레이아웃 컴포넌트인 AppLayout.tsx 파일을 만들어줍니다. import React from 'react'; import Header from './header'; type AppLayoutProps = { children: React.ReactNode; }; function AppLayout({ children }: AppLayoutProps) { return ( ); } export default App; 이렇게 App 컴포넌트에서 공통적으로 meta와 title을..

2021. 2. 19.

코딩 기록/Next.js

Next.js 로 Link를 이용하여 페이지 이동을 구현해보겠습니다. import Link from 'next/link'; import React from 'react'; function Header() { return ( Home Profile About ); } export default Header; Header 컴포넌트를 만들고 그 안에 next에서 제공해주는 Link에 href를 이용하여 페이지 이동을 해줄 수 있습니다. 참고로 페이지가 될 컴포넌트들은 components 폴더가 아닌 pages 폴더에 만들어주시면 됩니다. 그러면 next에서 자동적으로 pages 내부의 파일들을 찾아서 이동시켜줍니다. Home 화면 Profile 화면 About 화면 잘 작동합네요 리액트 라우터의 기능처럼 뒤에..

2021. 2. 19.

코딩 기록/Next.js

Next.js란 보통 SPA로서 CSR 방식으로 작동하는 React를 SSR 방식으로 쉽게 구현할 수 있도록 도와주는 프레임워크입니다. Next.js를 사용하지 않고도 SSR 방식으로 렌더링을 구현할 수 있지만 Next.js를 이용하여 쉽고 간편하게 서버 사이드 렌더링을 제공할 수 있습니다. 서버 사이드 렌더링은 검색엔진에 쉽게 노출될 수 있고 초기에 로딩할때 모든 데이터를 불러오지 않기 때문에 성능이 개선됩니다. 서버 사이드 렌더링과 코드 스플리팅이 필요없는 어드민 페이지 같은 경우는 굳이 Next.js를 사용하지 않아도 되지만 보통의 경우, 사용자가 이용에 있어서 불편함을 개선시키기 위해 Next.js를 사용하는것을 긍정적으로 생각해볼 수 있습니다. 저번에는 npm init으로 직접 시작하고 npm ..

2021. 2. 19.

코딩 기록/Next.js

Next.js란 보통 SPA로서 CSR 방식으로 작동하는 React를 SSR 방식으로 쉽게 구현할 수 있도록 도와주는 프레임워크입니다. Next.js를 사용하지 않고도 SSR 방식으로 렌더링을 구현할 수 있지만 Next.js를 이용하여 쉽고 간편하게 서버 사이드 렌더링을 제공할 수 있습니다. 서버 사이드 렌더링은 검색엔진에 쉽게 노출될 수 있고 초기에 로딩할때 모든 데이터를 불러오지 않기 때문에 성능이 개선됩니다. 서버 사이드 렌더링과 코드 스플리팅이 필요없는 어드민 페이지 같은 경우는 굳이 Next.js를 사용하지 않아도 되지만 보통의 경우, 사용자가 이용에 있어서 불편함을 개선시키기 위해 Next.js를 사용하는것을 긍정적으로 생각해볼 수 있습니다. 시작하기 위해 node.js 가 필요한데 저는 이미..

2021. 2. 17.