본문 바로가기

Next.js9

(18)
Next.js에서 fs모듈 사용하기 :: ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in 헤이 친구들 Next.js로 홈페이지는 잘 만들고 있어? 파일 만들고 직접 접근하려는데 오류나지 않아? ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in 한번 내가 질문을 던져볼께! Hoxy... /page 하단에 있는 페이지 컴포넌트 코드에다가 넣은건 아니지? 뜨끔한 친구들! 일단 Next.js로 만든 페이지는 미리 생성해 두었다가 내려주는 건 이해하고 있을꺼야! 여기서 이미 아! 한 친구들 있을껄? ㅎ fs 모듈을 왜 쓰고 싶어하는지 다시한번 생각해봐. 요건 프로그램이 실행되는 서버의 파일시스템을 접근하고자 하는거지. 페이지 컴포넌트에 작성한 코드는, 맨처음에 호출할때는 Next.js서버에서 실행되고, 이후 라우터로 페이지 이동한..
Jamstack이란 무엇일까? (프론트엔드 개발자들이여 프론트에 집중하자!) Next.js Jamstack 배포를 지원한다는데 무슨말일까? 찾아보니 홈페이지도 있네? https://jamstack.org/ Jamstack | JavaScript, APIs, and Markup What is the Jamstack? You may have already seen or worked on a Jamstack site! They do not have to include all attributes of JavaScript, APIs, and Markup. They might be built using sites built by hand, or with Jekyll, Hugo, Nuxt, Next, Gatsby, or another st jamstack.org 위의 공식 사이트 내용을 요약..
Next.js 배포하기(Vercel 사이트 이용하기) 친구들! Next.js로 사이트 만들었는데, 이제 배포할 차례야! 집에 서버가 있다면 간단히 빌드 및 실행하는 걸로 가능해! 먼저, 변경사항이 있다면 빌드! - Pre-rendering할 페이지들 미리 만들어주는 과정이 있지! npm run build 서버 시작! npm start 그런데, 실환경(Production Environment)에 배포하려니 좀, 귀찮아지지 않아? 도메인도 마련해야하고, 서버도 마련해야하고, 서버가 갑자기 꺼졌을 때 대비 스크립트 설정하랴, 속도 걱정에 이미지랑 js파일들은 cdn에 올려야 하고, 혼자하려니 막막하다 생각되지? 빨리 친구들하고 공유하고 싶은데, 왜케 더디게만 느껴질까? 바로 요걸 해결해주는 호스팅 사이트가 있어! Vercel, 이라는 사이트야, Next.js만든..
Next.js 9 - CSS ModuleTypescript 적용하기 CSS Module import한 클래스이름의 타입설정 import taxStyle from '../styles/tax.module.scss' scss파일에서 클래스 이름을 자동으로 가져오는데 타입을 어떻게 할까 궁금했던 친구들 많을 꺼야. 타입 설정파일 생성! 프로젝트 디렉토리에 global.d.ts 파일을 아래와 같이 만들어줘! declare module "*.scss" { interface IClassNames { [className: string]: string; } const classNames: IClassNames; export = classNames; } 끝! 참 쉽죠? 오늘은 요기꽈쥐!
Next.js - Typescript 적용하기 요즘은 타입스크립트가 대세! 왜냐고 묻는다면, 바로 타입이기 때문이야. Javascript의 장점이자 단점이 명시적인 타입이 없다는 점이야. 즉흥적으로 객체에 필요한 멤버변수들을 추가하기때문에 자바스크립트가 매우 빠르게 결과를 얻을 수 있는 반면에, 프로젝트가 커지고, 여러사람이 함께 작업할 수록, 이 멤버 변수가 어디서 정의되서 어떻게 쓰이는지, 어떤 값이 들어오는지 예측하기 힘들어지고, 본인이 만든 코드더라도, 이때문에 발생한 버그를 잡느라 하루이틀 버리는 건 다반사! 결국, 1~2년 이후에는 너도나도 손대기 싫은 코드가 되버리고, 이때 타입을 적용하고자 한다면, 고생이 말도 아니지! 그래서 오늘은 Next.js에 TypeScript를 적용할꺼야. 타입스크립트 아직 모르는 친구 여기 없지? 아직 모른..
Next.js - API 만들기 (API Routes) 이제 클라이언트 쪽은 알겠는데, API는 어떻게 만들까? Next.js에서 함수 하나로 API를 만들 수 있어! 언제든지 Serverless로 전환하기 쉬운 구조야. 'pages/api' 디렉토리에다가 함수하나만 만들면 끝! 쉽지? // req = 요청데이터, res = 응답 데이터 export default (req, res) => { if (req.method === 'POST') { // POST 요청에 대한 처리 } else { // 나머지 메서드에 대한 처리 } } 끝! 소름! 배포에서 이야기 하겠지만 옵션에 따라 서버리스 함수로 배포될수도 있어 ㄷ ㄷ ㄷ 예제하나 만들어볼까? hello.js라는 파일을 pages/api디렉토리 아래에 만들고, 아래 코드를 작성하자! export default ..
Next.js - 페이지 자동 생성하기 - Dynamic Routes (동적 경로) 지금까지 첫페이지에 블로그 제목 리스트가 나오도록 작성했지만, 각 페이지들을 만들지는 않았었어! 페이지들의 URL을 만들고, 요기 접속하면, 각각의 페이지가 나오는 실습을 할꺼야! 한마디로, Dynamic Routes(동적 경로) 기능을 사용 한다는 말씀! 데이터를 이용해 페이지 Path 만들기 이전 튜토리얼에서 페이지 컨텐츠가 외부 데이터에 의존 하는 걸 다뤘어! 'getStaticProps' 함수를 사용해서 첫 페이지에 데이터를 가져왔었지. 이번에는 첫페이지가 아니라 각 페이지 path별로 데이터를 가져오려고 해! Next.js가 외부 데이터를 기반으로 페이지들을 고정적으로 만들수 있다는 건 이전 Pre-Rendering 강좌에서 봤고, 요 기능 덕분에 Next.js가 동적(Dynamic)으로 URL..
Next.js 킬포 Pre-rendering 2. Server-side Rendering 그리고 Client-side Rendering Pre-rendering중 하나인 Static-Generation은 저번시간에 실습해봤고, 이번엔 Server-side Rendering이야 Next.js 킬포 Pre-rendering 1. Static-Generation Next.js의 킬링포인트 Pre-rendering 개념은 잘 보고 왔지? Next.js Pre-rendering 안녕친구들! 스타일링까지 잘 따라오고 있어? Next.js 스타일링 팁 (classnames, postCSS, Sass) 튜토리얼 잘 따라오고 있어? 오.. ppsu.tistory.com 지금 하고있는 튜토리얼에는 적용하지 않지만, 원하는 친구들도 있을것 같아 정리해봤어! Server-side Rendering 이전 Static-Generation이 "빌드타임"에 HTML..