next Next.js + Tailwind 설정 방법 Tailwind는 유틸리티 우선 CSS 프레임워크입니다. 이 문서에서는 Next.js + Tailwind를 설정하는 방법을 설명합니다.... nexttailwindcss Next.js + Storybook 설정 방법 Storybook은 UI 개발, 테스트 및 문서화 도구입니다. 이 문서에서는 Next.js + Storybook을 설정하는 방법을 설명합니다. TypeScript + Next.js 설정 방법... storybooknext Next.js + Storybook + jest 설정 방법 스토리북은 테스트 도구입니다. 이 문서에서는 Next.js + Storybook + jest를 설정하는 방법에 대해 설명합니다. Next.js + Storybook 설정 방법... jeststorybooknext Next.JS - Prisma 오류를 처리하기 위한 작은 데코레이터(Higher Order Function) prisma 클라이언트에서 예외를 처리하는 일반적인 방법을 찾을 수 없어서 매우 놀랐습니다. 그래서 나만의 데코레이터를 작성했습니다. 나는 이제 막 Next.js를 배우기 시작했기 때문에 내 접근 방식이 매우 순진할 수 있습니다. 여기에서 개선 사항이 보이면 알려주세요. dev 이외의 다른 환경에 대한 오류 세부 정보를 숨깁니다. 사용법: 추신. ...그리고 "안녕하세요 여러분", 분명히 오... prismanextjsprismajsnext Next.JS로 라우팅 Next.JS는 동적 라우팅뿐만 아니라 정적 경로를 생성하기 위한 매우 간단한 접근 방식을 제공합니다. 증가하는 게시물 모음에서 단일 게시물을 표시하는 방법을 제공해야 하는 블로그를 작성 중일 수 있습니다. Next.js를 사용하면 파일 경로(예: [param] , blog/[slug] posts/[pid] )에 포함된 comments/[id]를 일치시켜 이러한 게시물을 가져오는 방법을 추가... next 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 + next-redux-wrapper 로 서버사이드 환경에서 전역상태 꺼내먹기 (ft. 리덕스툴킷, 타입스크립트) 그리고 이런 슬라이스들을 configureStore.ts 파일에서 종합해서 store 를 만들었고 _app.tsx 에서 <Provider> 로 감싼 뒤 store 를 내려주고 있는 형태였다. ( __NEXT_REDUX_WRAPPER_HYDRATE__ 란 이름으로 서버사이드에서 전역상태를 dispatch 한 것을 리덕스 데브툴에서 확인할 수 있었다 ) 그런데 rootReducer 안의 swit... nexttypescriptreduxnext 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 + TypeScript] 넥스트 프로젝트에 카카오맵 연동하기 카카오맵 API 는 로 접속해서 쓸 수 있다 그러나 그 전에 카카오맵 API 를 사용하려면 로 이동해서 내 애플리케이션을 먼저 등록하고 API key 를 발급받아야 한다. 그럼 이렇게 key 들을 발급받을 수 있는데 여기서는 JavaScript key 를 사용하면 되고, 사이트 도메인을 등록해주면 된다. 위에서 발급받은 Javascript key 를 복사해서 프로젝트에 환경변수로 등록해준다.... nexttypescriptkakaomapkakaomap Next + TypeScript 에 리덕스툴킷 적용하기 (+ React) 나는 사용자 user 에 관한 전역 상태 관리를 위한 userSlice 를 만들었다. reducers 에는 이 상태를 변경시키는 리듀서 함수가 오게 된다. 그리고 reducers 에는 loadMyInfo 라는 리듀서함수를 작성해서 인자로 들어온 action.payload 를 state.myInfo 에 할당해서 전역상태를 변경할 수 있게 해주는 구조다. loading 전역 상태를 둔 이유는 이... Reactnextredux-toolkittypescriptReact [Next Js + TypeScript + Tailwind CSS 프로젝트] - 1편 Tailwind CSS 이번에 회사에서 빠르고 간단하게 예약 시스템을 만들 일이 생겨서, 평소에 관심 있었던 기술 스택들을 가지고 프로젝트를 시작했다! 이들을 채택한 이유를 간단하게 설명하고, 내가 겪은 오류들을 해결한 방법을 쓰고자 한다. 그 전에 혼자 사이드 프로젝트를 하면서 tailwind를 써봤는데 너무 신세계였어서 이번에도 도입했다. tailwind 를 써본 후 느낀 장점은 1. 아주 간편하게 글로벌 디자... BoilerplatetypescriptnextjsnexttailwindBoilerplate [TIL #32] Next.js (SSR) + react-responisve 에러 웹 개발을 하다보면 반응형 웹 처리를 항상 마주하게 된다. 처음 React를 공부할 땐 css media로 반응형 처리를 해주었었는데 아무래도 css에서 일일이 구현하다보니 불편해서 js에서 반응형 처리를 진행하는 를 사용하여 구현해왔다. 최근에 토이프로젝트를 진행하는데 이번에는 반응형이 아닌, 모바일 웹으로만 구현하고 싶어서 PC환경으로 접속시 모바일로 접속해달라는 위와 같은 화면을 띄우고... nextReact ResponsiveTILSSRReact Responsive Next 배포시 Dynamic Route 에서 404 가 뜨던 문제 해결 Next 로 배포를 하던 중 아주 치명적인 에러가 발생했다. 사용자의 프로필 페이지로 들어갈 때 404 에러가 뜨던 것이 원인이었다. 특별한 원인을 찾을 수 없던 발을 동동주처럼 구르던 중 해결책을 찾게 되었다. 여러 다방면으로 시도를 하던 중 vs코드의 터미널 콘솔에서 힌트를 얻을 수 있었다. :first-child 속성으로 인해서 서버사이드 렌더링 시에 문제가 발생한다는 문구였다. 부족한... errornexterror Hydrate(Next, React 18) 서버는 완성된 HTML을 클라이언트에게 전송하고, 유저는 빈 화면이 아닌 UI컨텐츠를 볼 수 있다. 이후에 페이지 이동할 경우에도 서버에 요청을하기 때문에 CSR보다 로딩 속도가 느릴 수 있다. SSR 덕분에 사용자는 UI를 먼저 볼 수 있고, Hydrate 덕분에 JS코드가 매칭되어 추후에 사용자 조작이 가능한 것이다. 댓글에 대한 코드가 불러와지기 전까지 다른 부분들도 하이드레이션을 할 ... ReactnextReact TIL 66 | Routing, Dynamic Routes NEXT.js에서는 React와 달리, 위처럼 폴더 구조를 기반으로 라우팅 기능을 제공한다. pages/index는 기본 라우트 경로인 /을 뜻하며, pages/hello는 /hello 라우트 경로를 뜻한다. Dynamic Routes의 경우, pages 경로 밑에 [] 형태를 가진 파일이 존재해야 한다. 동적 라우팅 기능을 구현하기 위해서 NEXT.js에서 제공하는 getStaticPath... TILnextTIL Next.js 시작하기 Next.js는 Vercel에서 만든 SSR(서버 사이드 렌더링)을 위한 React 프레임워크 입니다 . SSR은 초기 렌더링 속도가 빠르고 검색 엔진 최적화가 가능하다는 장점이 있지만, 간단한 데이터 수정에도 서버를 거쳐야하기 때문에, 매번 서버에 요청을 하는 행위는 서버에 많은 부하를 주게 됩니다. 사용자가 초기에 서버에 페이지 접속을 요청한 경우 SSR방식으로 렌더링 될 HTML을 보내... nextnext [ 프로젝트 ] typescript + next 그리고 이 과정에서 next가 webpack 설정을 내장하고 있다는 것도 확실하게 깨달을 수 있었다. 우선 next가 자동으로 설정한 것이 무엇인지 알아야한다. 안내 메시지를 보면 크게 추천 사항과 필수 사항으로 나누어질 것이다. 공식문서를 보면 다른 도구들이 Typescript 파일을 활용할 수 있게 해준다고 한다. next.js가 타입체킹을 하고 페이지 구성등을 실시하기 때문에 noEmi... nexttypescriptnext
Next.js + Tailwind 설정 방법 Tailwind는 유틸리티 우선 CSS 프레임워크입니다. 이 문서에서는 Next.js + Tailwind를 설정하는 방법을 설명합니다.... nexttailwindcss Next.js + Storybook 설정 방법 Storybook은 UI 개발, 테스트 및 문서화 도구입니다. 이 문서에서는 Next.js + Storybook을 설정하는 방법을 설명합니다. TypeScript + Next.js 설정 방법... storybooknext Next.js + Storybook + jest 설정 방법 스토리북은 테스트 도구입니다. 이 문서에서는 Next.js + Storybook + jest를 설정하는 방법에 대해 설명합니다. Next.js + Storybook 설정 방법... jeststorybooknext Next.JS - Prisma 오류를 처리하기 위한 작은 데코레이터(Higher Order Function) prisma 클라이언트에서 예외를 처리하는 일반적인 방법을 찾을 수 없어서 매우 놀랐습니다. 그래서 나만의 데코레이터를 작성했습니다. 나는 이제 막 Next.js를 배우기 시작했기 때문에 내 접근 방식이 매우 순진할 수 있습니다. 여기에서 개선 사항이 보이면 알려주세요. dev 이외의 다른 환경에 대한 오류 세부 정보를 숨깁니다. 사용법: 추신. ...그리고 "안녕하세요 여러분", 분명히 오... prismanextjsprismajsnext Next.JS로 라우팅 Next.JS는 동적 라우팅뿐만 아니라 정적 경로를 생성하기 위한 매우 간단한 접근 방식을 제공합니다. 증가하는 게시물 모음에서 단일 게시물을 표시하는 방법을 제공해야 하는 블로그를 작성 중일 수 있습니다. Next.js를 사용하면 파일 경로(예: [param] , blog/[slug] posts/[pid] )에 포함된 comments/[id]를 일치시켜 이러한 게시물을 가져오는 방법을 추가... next 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 + next-redux-wrapper 로 서버사이드 환경에서 전역상태 꺼내먹기 (ft. 리덕스툴킷, 타입스크립트) 그리고 이런 슬라이스들을 configureStore.ts 파일에서 종합해서 store 를 만들었고 _app.tsx 에서 <Provider> 로 감싼 뒤 store 를 내려주고 있는 형태였다. ( __NEXT_REDUX_WRAPPER_HYDRATE__ 란 이름으로 서버사이드에서 전역상태를 dispatch 한 것을 리덕스 데브툴에서 확인할 수 있었다 ) 그런데 rootReducer 안의 swit... nexttypescriptreduxnext 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 + TypeScript] 넥스트 프로젝트에 카카오맵 연동하기 카카오맵 API 는 로 접속해서 쓸 수 있다 그러나 그 전에 카카오맵 API 를 사용하려면 로 이동해서 내 애플리케이션을 먼저 등록하고 API key 를 발급받아야 한다. 그럼 이렇게 key 들을 발급받을 수 있는데 여기서는 JavaScript key 를 사용하면 되고, 사이트 도메인을 등록해주면 된다. 위에서 발급받은 Javascript key 를 복사해서 프로젝트에 환경변수로 등록해준다.... nexttypescriptkakaomapkakaomap Next + TypeScript 에 리덕스툴킷 적용하기 (+ React) 나는 사용자 user 에 관한 전역 상태 관리를 위한 userSlice 를 만들었다. reducers 에는 이 상태를 변경시키는 리듀서 함수가 오게 된다. 그리고 reducers 에는 loadMyInfo 라는 리듀서함수를 작성해서 인자로 들어온 action.payload 를 state.myInfo 에 할당해서 전역상태를 변경할 수 있게 해주는 구조다. loading 전역 상태를 둔 이유는 이... Reactnextredux-toolkittypescriptReact [Next Js + TypeScript + Tailwind CSS 프로젝트] - 1편 Tailwind CSS 이번에 회사에서 빠르고 간단하게 예약 시스템을 만들 일이 생겨서, 평소에 관심 있었던 기술 스택들을 가지고 프로젝트를 시작했다! 이들을 채택한 이유를 간단하게 설명하고, 내가 겪은 오류들을 해결한 방법을 쓰고자 한다. 그 전에 혼자 사이드 프로젝트를 하면서 tailwind를 써봤는데 너무 신세계였어서 이번에도 도입했다. tailwind 를 써본 후 느낀 장점은 1. 아주 간편하게 글로벌 디자... BoilerplatetypescriptnextjsnexttailwindBoilerplate [TIL #32] Next.js (SSR) + react-responisve 에러 웹 개발을 하다보면 반응형 웹 처리를 항상 마주하게 된다. 처음 React를 공부할 땐 css media로 반응형 처리를 해주었었는데 아무래도 css에서 일일이 구현하다보니 불편해서 js에서 반응형 처리를 진행하는 를 사용하여 구현해왔다. 최근에 토이프로젝트를 진행하는데 이번에는 반응형이 아닌, 모바일 웹으로만 구현하고 싶어서 PC환경으로 접속시 모바일로 접속해달라는 위와 같은 화면을 띄우고... nextReact ResponsiveTILSSRReact Responsive Next 배포시 Dynamic Route 에서 404 가 뜨던 문제 해결 Next 로 배포를 하던 중 아주 치명적인 에러가 발생했다. 사용자의 프로필 페이지로 들어갈 때 404 에러가 뜨던 것이 원인이었다. 특별한 원인을 찾을 수 없던 발을 동동주처럼 구르던 중 해결책을 찾게 되었다. 여러 다방면으로 시도를 하던 중 vs코드의 터미널 콘솔에서 힌트를 얻을 수 있었다. :first-child 속성으로 인해서 서버사이드 렌더링 시에 문제가 발생한다는 문구였다. 부족한... errornexterror Hydrate(Next, React 18) 서버는 완성된 HTML을 클라이언트에게 전송하고, 유저는 빈 화면이 아닌 UI컨텐츠를 볼 수 있다. 이후에 페이지 이동할 경우에도 서버에 요청을하기 때문에 CSR보다 로딩 속도가 느릴 수 있다. SSR 덕분에 사용자는 UI를 먼저 볼 수 있고, Hydrate 덕분에 JS코드가 매칭되어 추후에 사용자 조작이 가능한 것이다. 댓글에 대한 코드가 불러와지기 전까지 다른 부분들도 하이드레이션을 할 ... ReactnextReact TIL 66 | Routing, Dynamic Routes NEXT.js에서는 React와 달리, 위처럼 폴더 구조를 기반으로 라우팅 기능을 제공한다. pages/index는 기본 라우트 경로인 /을 뜻하며, pages/hello는 /hello 라우트 경로를 뜻한다. Dynamic Routes의 경우, pages 경로 밑에 [] 형태를 가진 파일이 존재해야 한다. 동적 라우팅 기능을 구현하기 위해서 NEXT.js에서 제공하는 getStaticPath... TILnextTIL Next.js 시작하기 Next.js는 Vercel에서 만든 SSR(서버 사이드 렌더링)을 위한 React 프레임워크 입니다 . SSR은 초기 렌더링 속도가 빠르고 검색 엔진 최적화가 가능하다는 장점이 있지만, 간단한 데이터 수정에도 서버를 거쳐야하기 때문에, 매번 서버에 요청을 하는 행위는 서버에 많은 부하를 주게 됩니다. 사용자가 초기에 서버에 페이지 접속을 요청한 경우 SSR방식으로 렌더링 될 HTML을 보내... nextnext [ 프로젝트 ] typescript + next 그리고 이 과정에서 next가 webpack 설정을 내장하고 있다는 것도 확실하게 깨달을 수 있었다. 우선 next가 자동으로 설정한 것이 무엇인지 알아야한다. 안내 메시지를 보면 크게 추천 사항과 필수 사항으로 나누어질 것이다. 공식문서를 보면 다른 도구들이 Typescript 파일을 활용할 수 있게 해준다고 한다. next.js가 타입체킹을 하고 페이지 구성등을 실시하기 때문에 noEmi... nexttypescriptnext