본문 바로가기

Next.js9

 (18)
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-..
Next.js 스타일링하기2 - 전역 스타일링/Global Styling 이전시간의 스타일링 기본은 잘 익혔어? https://ppsu.tistory.com/58 Next.js 스타일링 하기 내 웹사이트에 페이지는 추가했고... 오늘은 이쁘게 스타일링 해볼꺼야! Next.js 페이지 추가하기 앱 처음으로 수정은 잘 했지? Next.js 앱 처음으로 수정해보기 첫번째 Next.js 앱만들기는 잘 했어? 첫 ppsu.tistory.com 이번엔 전체 페이지에 한꺼번에 스타일링을 넣는 방법을 알려줄께! 전역 스타일! CSS Module이 컴포넌트 레벨에서는 유용하긴 한데, 어떤 CSS는 사이트의 모든 페이지에서 불러오고 싶을꺼야. Next.js는 요것도 지원해 줘! 먼저 pages디렉토리 아래에 _app.js파일을 만들어줘! export default function App({ C..
Next.js 스타일링 하기 내 웹사이트에 페이지는 추가했고... 오늘은 이쁘게 스타일링 해볼꺼야! Next.js 페이지 추가하기 앱 처음으로 수정은 잘 했지? Next.js 앱 처음으로 수정해보기 첫번째 Next.js 앱만들기는 잘 했어? 첫번째 Next.js 앱 만들기 자 오늘 첫번째 Next.js앱을 만들꺼야. 먼저 환경설정부터 해야겠지? 환경설 ppsu.tistory.com 오늘의 목표! 이미지와 같은 정적 asset들이랑 title태그같은 메타데이터를 Next.js가 어떻게 다루는지 알아보고 CSS를 통해 스타일리을 어떻게 하는지 알려줄께! 주목! 웹페이지 만들때 이미지는 필수! Asset asset(애쎗)이 뭘까? 사전적인 의미로는 유용하거나 가치있는 사람이나 물건을 말해! 여기서는 주로 이미지들을 asset이라고 부를꺼..
Next.js 페이지 추가하기 앱 처음으로 수정은 잘 했지? Next.js 앱 처음으로 수정해보기 첫번째 Next.js 앱만들기는 잘 했어? 첫번째 Next.js 앱 만들기 자 오늘 첫번째 Next.js앱을 만들꺼야. 먼저 환경설정부터 해야겠지? 환경설정 Node.js설치는 필수 노드 홈페이지에 가서 설치해 https://node ppsu.tistory.com 지금까지 우리가 만든건 한페이지 짜리 웹서버였는데, 보통 우리가 봐왔던 웹사이트들은 여러 페이지를 왔다갔다 했을꺼야. 그래서 이번엔 나만의 페이지를 추가해 보고 페이지별로 이동해 볼꺼야. 덤으로 Next.js가 가진 꿀기능 하나 알려줄께! Next.js 페이지 추가하는 법 먼저 Next.js에서의 페이지 개념에 대해서 먼저 이야기 해볼께. 간단히 말해서, Next.js에서 페이..
Next.js 앱 처음으로 수정해보기 첫번째 Next.js 앱만들기는 잘 했어? 첫번째 Next.js 앱 만들기 자 오늘 첫번째 Next.js앱을 만들꺼야. 먼저 환경설정부터 해야겠지? 환경설정 Node.js설치는 필수 노드 홈페이지에 가서 설치해 https://nodejs.org/ 버전은 10.13 이후 버전이면 돼! 자 시작 해볼까? 일단 ppsu.tistory.com 이번엔 요걸 수정해볼꺼야! pages 디렉토리에 index.js파일이 있을꺼야. 13번째 줄에 태그 사이에 "Welcome to" 보여? 요걸 지우고 "안녕하세요"로 한번 바꿔봐! 저장한 다음에 아까 열어뒀던 브라우저 창을 다시 볼까? 오잉?!? 뭐지? 새로고침도 안했는데 메시지가 변했네? 한번 파일을 수정하고 저장만 해봐! 역시나 브라우저가 잘 바뀌네. 왜그럴까? Nex..

티스토리툴바