본문 바로가기

리액트

 (9)
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 안녕친구들! 스타일링까지 잘 따라오고 있어? 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이라고 부를꺼..

티스토리툴바