next Next.js + Tailwind 설정 방법 Tailwind는 유틸리티 우선 CSS 프레임워크입니다. 이 문서에서는 Next.js + Tailwind를 설정하는 방법을 설명합니다.... nexttailwindcss Next.JS - Prisma 오류를 처리하기 위한 작은 데코레이터(Higher Order Function) prisma 클라이언트에서 예외를 처리하는 일반적인 방법을 찾을 수 없어서 매우 놀랐습니다. 그래서 나만의 데코레이터를 작성했습니다. 나는 이제 막 Next.js를 배우기 시작했기 때문에 내 접근 방식이 매우 순진할 수 있습니다. 여기에서 개선 사항이 보이면 알려주세요. dev 이외의 다른 환경에 대한 오류 세부 정보를 숨깁니다. 사용법: 추신. ...그리고 "안녕하세요 여러분", 분명히 오... prismanextjsprismajsnext Next/Image에 대해 얼만큼 알아? 그렇다면 img 태그와 다른 점이 무엇인지, 그리고 어떻게 활용할 수 있을지를 알아봅시다. Loader을 통해서 url을 커스터마이징할 수 있습니다. 자동으로 Lazy Loading을 통해 이미지 최적화를 지원해주지만, pre loading을 원하는 경우 취소를 할 수 있습니다. next.config.js를 통해 지정된 곳에서만 이미지를 받아오며 악의적인 유저로부터 앱을 보호할 수 있습니다.... next/imageCSSnextnext.jsReactstyledemotion이미지최적화imageCSS Tailwind + Emotion = twin.macro? margin-top을 주고 싶은 경우 mt-숫자 와 같이 사용하는 것 말이다. 에서 원래 사용하던 CSS 문법을 검색하여 Tailwind 문법으로 변환된 것을 쉽게 찾아볼 수도 있다. 하지만 몇 가지 단점도 있다. CSS에서는 명시적으로 정의하지 않는 경우 부모 요소에서 자동으로 상속되는 속성이 있다. 하지만 CSS-in-JS에서는 문서 레벨이 아니라 컴포넌트 레벨로 CSS를 추상화 하기 때... ReactCSSnextCSS NextJS + TypeScript 프로젝트 시작하고 절대경로 설정하기 Next 로 프로젝트를 시작하고 절대경로를 설정하는 법을 포스팅해보기로 했다. 때문에 많은 부분에서 잘 모르거나 막히는 부분이 있다면 넥스트 공식문서를 찾아가서 보는 것이 제일 도움이 되는 경우가 많다. 넥스트는 기본적으로 SSR(서버사이드 렌더링)과 SEO(검색 엔진 최적화)를 도와주는 '리액트 프레임워크'다. 기본적으로 리액트란 소리다. 리액트는 프로젝트를 컴포넌트 단위로 잘게 쪼개서 코... nexttypescriptnext event.stopPropagation() 의 쓸모 (ft. 이벤트 버블링) item 을 클릭하는 이벤트가 발생했을 때 이벤트의 item 의 이벤트만 동작하는 것이 아니라, 그 밑에 list 의 이벤트, 그 다음 또 content 의 이벤트가 동작하게 된다. 이 경우 event.target 은 item 이다. 이 경우 event.target 과 event.currentTarget 은 은 모두 list 가 나온다 먼저 evnet.target 은 이벤트 핸들러가 걸린 그... nextJavaScripttypescriptJavaScript [Next Js + TypeScript + Tailwind CSS 프로젝트] - 1편 Tailwind CSS 이번에 회사에서 빠르고 간단하게 예약 시스템을 만들 일이 생겨서, 평소에 관심 있었던 기술 스택들을 가지고 프로젝트를 시작했다! 이들을 채택한 이유를 간단하게 설명하고, 내가 겪은 오류들을 해결한 방법을 쓰고자 한다. 그 전에 혼자 사이드 프로젝트를 하면서 tailwind를 써봤는데 너무 신세계였어서 이번에도 도입했다. tailwind 를 써본 후 느낀 장점은 1. 아주 간편하게 글로벌 디자... BoilerplatetypescriptnextjsnexttailwindBoilerplate TIL 66 | Routing, Dynamic Routes NEXT.js에서는 React와 달리, 위처럼 폴더 구조를 기반으로 라우팅 기능을 제공한다. pages/index는 기본 라우트 경로인 /을 뜻하며, pages/hello는 /hello 라우트 경로를 뜻한다. Dynamic Routes의 경우, pages 경로 밑에 [] 형태를 가진 파일이 존재해야 한다. 동적 라우팅 기능을 구현하기 위해서 NEXT.js에서 제공하는 getStaticPath... TILnextTIL TypeScript 기반 Next App 설정 프로젝트에서 Front Stack이 위와 같다. 그래서 먼저 간단한 프로젝트를 설계하며 해당 스택들을 사용해보기로 했다. TypeScript 기반 Next App 생성 next 앱을 설치하고 typescript를 추가하려고 했는데 명령어가 동작하지 않았다. 그래서 yarn create next-app --typescript으로 typescript를 기반의 next앱을 설치했다. 설치가 완료되... ReactnextReact [ 프로젝트 ] typescript + next 그리고 이 과정에서 next가 webpack 설정을 내장하고 있다는 것도 확실하게 깨달을 수 있었다. 우선 next가 자동으로 설정한 것이 무엇인지 알아야한다. 안내 메시지를 보면 크게 추천 사항과 필수 사항으로 나누어질 것이다. 공식문서를 보면 다른 도구들이 Typescript 파일을 활용할 수 있게 해준다고 한다. next.js가 타입체킹을 하고 페이지 구성등을 실시하기 때문에 noEmi... nexttypescriptnext
Next.js + Tailwind 설정 방법 Tailwind는 유틸리티 우선 CSS 프레임워크입니다. 이 문서에서는 Next.js + Tailwind를 설정하는 방법을 설명합니다.... nexttailwindcss Next.JS - Prisma 오류를 처리하기 위한 작은 데코레이터(Higher Order Function) prisma 클라이언트에서 예외를 처리하는 일반적인 방법을 찾을 수 없어서 매우 놀랐습니다. 그래서 나만의 데코레이터를 작성했습니다. 나는 이제 막 Next.js를 배우기 시작했기 때문에 내 접근 방식이 매우 순진할 수 있습니다. 여기에서 개선 사항이 보이면 알려주세요. dev 이외의 다른 환경에 대한 오류 세부 정보를 숨깁니다. 사용법: 추신. ...그리고 "안녕하세요 여러분", 분명히 오... prismanextjsprismajsnext Next/Image에 대해 얼만큼 알아? 그렇다면 img 태그와 다른 점이 무엇인지, 그리고 어떻게 활용할 수 있을지를 알아봅시다. Loader을 통해서 url을 커스터마이징할 수 있습니다. 자동으로 Lazy Loading을 통해 이미지 최적화를 지원해주지만, pre loading을 원하는 경우 취소를 할 수 있습니다. next.config.js를 통해 지정된 곳에서만 이미지를 받아오며 악의적인 유저로부터 앱을 보호할 수 있습니다.... next/imageCSSnextnext.jsReactstyledemotion이미지최적화imageCSS Tailwind + Emotion = twin.macro? margin-top을 주고 싶은 경우 mt-숫자 와 같이 사용하는 것 말이다. 에서 원래 사용하던 CSS 문법을 검색하여 Tailwind 문법으로 변환된 것을 쉽게 찾아볼 수도 있다. 하지만 몇 가지 단점도 있다. CSS에서는 명시적으로 정의하지 않는 경우 부모 요소에서 자동으로 상속되는 속성이 있다. 하지만 CSS-in-JS에서는 문서 레벨이 아니라 컴포넌트 레벨로 CSS를 추상화 하기 때... ReactCSSnextCSS NextJS + TypeScript 프로젝트 시작하고 절대경로 설정하기 Next 로 프로젝트를 시작하고 절대경로를 설정하는 법을 포스팅해보기로 했다. 때문에 많은 부분에서 잘 모르거나 막히는 부분이 있다면 넥스트 공식문서를 찾아가서 보는 것이 제일 도움이 되는 경우가 많다. 넥스트는 기본적으로 SSR(서버사이드 렌더링)과 SEO(검색 엔진 최적화)를 도와주는 '리액트 프레임워크'다. 기본적으로 리액트란 소리다. 리액트는 프로젝트를 컴포넌트 단위로 잘게 쪼개서 코... nexttypescriptnext event.stopPropagation() 의 쓸모 (ft. 이벤트 버블링) item 을 클릭하는 이벤트가 발생했을 때 이벤트의 item 의 이벤트만 동작하는 것이 아니라, 그 밑에 list 의 이벤트, 그 다음 또 content 의 이벤트가 동작하게 된다. 이 경우 event.target 은 item 이다. 이 경우 event.target 과 event.currentTarget 은 은 모두 list 가 나온다 먼저 evnet.target 은 이벤트 핸들러가 걸린 그... nextJavaScripttypescriptJavaScript [Next Js + TypeScript + Tailwind CSS 프로젝트] - 1편 Tailwind CSS 이번에 회사에서 빠르고 간단하게 예약 시스템을 만들 일이 생겨서, 평소에 관심 있었던 기술 스택들을 가지고 프로젝트를 시작했다! 이들을 채택한 이유를 간단하게 설명하고, 내가 겪은 오류들을 해결한 방법을 쓰고자 한다. 그 전에 혼자 사이드 프로젝트를 하면서 tailwind를 써봤는데 너무 신세계였어서 이번에도 도입했다. tailwind 를 써본 후 느낀 장점은 1. 아주 간편하게 글로벌 디자... BoilerplatetypescriptnextjsnexttailwindBoilerplate TIL 66 | Routing, Dynamic Routes NEXT.js에서는 React와 달리, 위처럼 폴더 구조를 기반으로 라우팅 기능을 제공한다. pages/index는 기본 라우트 경로인 /을 뜻하며, pages/hello는 /hello 라우트 경로를 뜻한다. Dynamic Routes의 경우, pages 경로 밑에 [] 형태를 가진 파일이 존재해야 한다. 동적 라우팅 기능을 구현하기 위해서 NEXT.js에서 제공하는 getStaticPath... TILnextTIL TypeScript 기반 Next App 설정 프로젝트에서 Front Stack이 위와 같다. 그래서 먼저 간단한 프로젝트를 설계하며 해당 스택들을 사용해보기로 했다. TypeScript 기반 Next App 생성 next 앱을 설치하고 typescript를 추가하려고 했는데 명령어가 동작하지 않았다. 그래서 yarn create next-app --typescript으로 typescript를 기반의 next앱을 설치했다. 설치가 완료되... ReactnextReact [ 프로젝트 ] typescript + next 그리고 이 과정에서 next가 webpack 설정을 내장하고 있다는 것도 확실하게 깨달을 수 있었다. 우선 next가 자동으로 설정한 것이 무엇인지 알아야한다. 안내 메시지를 보면 크게 추천 사항과 필수 사항으로 나누어질 것이다. 공식문서를 보면 다른 도구들이 Typescript 파일을 활용할 수 있게 해준다고 한다. next.js가 타입체킹을 하고 페이지 구성등을 실시하기 때문에 noEmi... nexttypescriptnext