본문 바로가기

nextjs

(13)
Next.js 배포하기(Vercel 사이트 이용하기) 친구들! Next.js로 사이트 만들었는데, 이제 배포할 차례야! 집에 서버가 있다면 간단히 빌드 및 실행하는 걸로 가능해! 먼저, 변경사항이 있다면 빌드! - Pre-rendering할 페이지들 미리 만들어주는 과정이 있지! npm run build 서버 시작! npm start 그런데, 실환경(Production Environment)에 배포하려니 좀, 귀찮아지지 않아? 도메인도 마련해야하고, 서버도 마련해야하고, 서버가 갑자기 꺼졌을 때 대비 스크립트 설정하랴, 속도 걱정에 이미지랑 js파일들은 cdn에 올려야 하고, 혼자하려니 막막하다 생각되지? 빨리 친구들하고 공유하고 싶은데, 왜케 더디게만 느껴질까? 바로 요걸 해결해주는 호스팅 사이트가 있어! Vercel, 이라는 사이트야, Next.js만든..
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 킬포 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..
Next.js 킬포 Pre-rendering 1. Static-Generation Next.js의 킬링포인트 Pre-rendering 개념은 잘 보고 왔지? Next.js Pre-rendering 안녕친구들! 스타일링까지 잘 따라오고 있어? Next.js 스타일링 팁 (classnames, postCSS, Sass) 튜토리얼 잘 따라오고 있어? 오늘은 쉬어가는 페이지! 알아두면 좋은 몇가지 라이브러리들을 소개할께! 지� ppsu.tistory.com Pre-rendering 첫번째 시간! Static-Generation을 실습할꺼야! Next.js의 Static-Generation은 말그대로 그냥 빌드타임에 미리 HTML을 생성해 두는 건데, 요기 또 쿨한 옵션이 하나 있다! 페이지를 생성할 때, 외부 데이터를 읽어와서 조합할 수 있다는 거야! 빌드할때 API를 호출한 결과로 페이지 ..
Next.js 킬포! Pre-rendering 안녕친구들! 스타일링까지 잘 따라오고 있어? Next.js 스타일링 팁 (classnames, postCSS, Sass) 튜토리얼 잘 따라오고 있어? 오늘은 쉬어가는 페이지! 알아두면 좋은 몇가지 라이브러리들을 소개할께! 지금당장은 중요하지 않으니 이번 튜토리얼은 스킵해도 좋아! 깔끔하게 classname 초이스! - ppsu.tistory.com 오늘은 Next.js의 완전 킬포! Pre-rendering 기능에 대해 이야기 할꺼야! Pre-rendering이 뭐야? Next.js는 기본적으로, 모든 페이지를 pre-render 해! 보통 성능이 더 좋고 SEO(Search Engin Optimization)에 더 좋아. "Pre"라는 말이 붙으면 "미리", "먼저" 한다는걸 말해. 예를들면 predi..
Next.js 스타일링 팁 (classnames, postCSS, Sass) 튜토리얼 잘 따라오고 있어? 오늘은 쉬어가는 페이지! 알아두면 좋은 몇가지 라이브러리들을 소개할께! 지금당장은 중요하지 않으니 이번 튜토리얼은 스킵해도 좋아! 깔끔하게 classname 초이스! - classnames 리액트 하다보면 조건에 따라서 클래스이름을 바꿔야 할때가 자주 있을꺼야. 조건문이 하나두개정도면 뭐 그냥 하면 되겠지만, 설정페이지 같이 조건이 많이 들어가야 하는 페이지는 코드가 복잡해 지겠지? 요걸 심플하게 작성할수 있도록 도와주는 라이브러리가 있어! "classnames" 사용하는 코드 먼저 볼까? import styles from './resultPopup.module.css' import cn from 'classnames' export default function ResultP..
Next.js 스타일링하기 3 - 레이아웃 스타일링 https://ppsu.tistory.com/59 Next.js 스타일링하기2 이전시간의 스타일링 기본은 잘 익혔어? https://ppsu.tistory.com/58 Next.js 스타일링 하기 내 웹사이트에 페이지는 추가했고... 오늘은 이쁘게 스타일링 해볼꺼야! Next.js 페이지 추가하기 앱 처음으로 �� ppsu.tistory.com 이번엔 첫 페이지도 좀 이쁘게 만들고 정리해 보려구해. 나만의 자기소개 페이지를 추가하자! 일단 components/layout.module.css를 아래 내용으로 업데이트 하자 .container { max-width: 36rem; padding: 0 1rem; margin: 3rem auto 6rem; } .header { display: flex; flex-..