next
-
Next.js 14버전 정리Next.js 2023. 11. 1. 16:18
Next.js 13 버전 이후로 호불호가 늘어나는 느낌이 강한 Next.js의 14 버전이 출시되었습니다. 14 버전은 13 버전 때처럼 엄청난 변화내용이라기보다는 13.5 버전의 뒤이은 13.6 버전에 가깝다는 느낌이 드는 업데이트였습니다. 1. Next.js 컴파일러: Turbocharged 이제부터 Next.js는 개발 환경에서 빠른 성능을 제공하기 위해 Rust 기반 컴파일러 'Turbopack'를 사용합니다. 이로 인해 개발 서버의 시작 속도가 최대 53.3% 향상되고 Fast Refresh를 통한 코드 업데이트 속도도 최대 94.7% 향상되었습니다. 이는 특히 큰 애플리케이션 및 모듈 그래프에서 빠른 성능 향상을 의미하며, 'next dev --turbo'를 사용하면 보다 빠르고 안정적인 성능..
-
KeystoneJS로 간단하게 Admin페이지와 Headless CMS 만들기Tip 2023. 9. 6. 18:09
KeystoneJS는 GraphQL을 기반으로 하는 CMS(Content Management System) 프레임워크입니다. React, Node.js, GraphQL을 기반으로 하며, GraphQL API를 통해 데이터를 관리하고, 웹사이트와 모바일 앱을 개발할 수 있습니다. 1. KeystoneJS의 주요 특징 GraphQL 기반의 API: KeystoneJS는 GraphQL을 기반으로 하는 API를 제공합니다. GraphQL은 구조화된 데이터를 효율적으로 조회할 수 있는 API 표준입니다. React 기반의 UI: KeystoneJS는 React를 기반으로 하는 UI를 제공합니다. React는 빠르고 유연한 UI 프레임워크입니다. Node.js 기반의 백엔드: KeystoneJS는 Node.js를 ..
-
Next.js에서 페이지 전환 효과 간단하게 적용하기Next.js 2023. 9. 4. 17:40
Next.js는 페이지 전환 효과를 기본적으로 제공하지 않지만, framer-motion 라이브러리를 사용하면 쉽게 적용할 수 있습니다. 1. framer-motion 설치 우선, framer-motion을 설치해야 합니다. 다음 명령어를 실행하여 설치합니다. npm install framer-motion // or yarn add framer-motion 2. 페이지 전환 효과 적용 framer-motion을 설치했으면, 페이지 전환 효과를 _App.tsx 페이지에 적용하면 간단하게 끝납니다. import React from 'react'; import { AppProps } from 'next/app'; import { motion } from 'framer-motion'; import { useRo..
-
Next.js에서 사용하기 좋은 모니터링 툴 3가지Tip 2023. 8. 10. 18:05
Checkly, Axiom, Sentry는 웹 프로젝트를 개발하고 유지 관리하는 데 도움이 되는 툴이다. 모두 무료로 사용할 수 있으며, 유료 플랜을 통해 더 많은 기능을 사용할 수 있다. Checkly Checkly는 성능을 모니터링하는 도구다. Checkly는 URL을 지정해 성능 지표를 그래프로 표시하고, 모니터링할 요청의 빈도와 양을 설정할 수 있으며, 성능 저하를 알림으로 보낸다. Checkly의 주요 기능 웹 애플리케이션의 성능 지표 모니터링 성능 저하 알림 API 테스트 웹 애플리케이션의 성능 테스트 Axiom Axiom은 API를 테스트하는 도구다. Axiom은 API에 요청을 보내고, API의 응답을 검증할 수 있고, API 테스트를 자동화할 수 있다. Axiom의 주요 기능 웹 애플리케..
-
Next.js Image 태그 height auto로 사용하기 (update 13 version)Next.js 2023. 8. 4. 16:11
이 글은 next v13.4를 기반으로 작성되었습니다. Next 12 버전을 기반으로 height auto Image태그를 작성한 지 오래되지 않아 13 버전에서는 더욱 간단하게 사용할 수 있게 되어 소개하려고 한다. // AutoHeightImage.tsx import Image, { ImageProps } from 'next/image'; interface IAutoHeightImage extends Omit { width?: string | number; alt: string; } const AutoHeightImage = ({ width = '100%', alt = '', ...props }: IAutoHeightImage) => ( ); export default AutoHeightImage; ..
-
JavaScript에서 바로 사용하는 Tip 4가지Tip 2023. 8. 1. 15:20
1. Includes를 사용해 || 대체하기. ||는 JS를 활용한 개발을 하다 보면 정말 많이 사용하게 되는 없어서는 안 될 중요한 요소이다. 하지만 많은 것을 비교하는 상황이 된다면 오히려 코드의 가독성을 해치는 요소가 된다. 그럴 때 이 방법을 사용한다면 조금 더 가독성 좋게 사용할 수 있다. // ...other codes if ( isFirstLoading || isSecondLoading || isThirdLoading || isFourthLoading || isFifthLoading ) return 로딩 중... ; if ( [ isFirstLoading, isSecondLoading, isThirdLoading, isFourthLoading, isFifthLoading, ].includes..
-
Stylelint를 이용해 css 정리하기 (feat. Styled-Components)React 2022. 11. 14. 15:15
(이 글은 MacOS, VSCode, postcss@8.4.19, postcss-jsx@0.36.4, stylelint@14.14.1, react@18.2.0을 기반으로 작성되었습니다.) Eslint는 이제 React로 개발을 진행할 때 혼자 하는 프로젝트에서는 물론이고 같이 협업하는 프로젝트에서는 거의 필수적으로 사용하는 라이브러리입니다. 주로 Eslint + Prettier을 이용해 자동으로 Eslint에서 설정한 룰과 Prettier에서 추가한 내용에 대하여 수정하는 식으로 진행하기에 더욱 사랑받고 있는 것 같습니다. 여기에서 style에 대해서는 이런 툴이 없을까 하는 생각에 발견한 것이 바로 Stylelint입니다. 이거다 하는 생각에 신나게 설정을 진행했을 때 당황할 수밖에 없었습니다. 제가 ..
-
Next.js Conf에서 발표된 Next.js 13버전 정리Next.js 2022. 10. 29. 17:53
1. 새로운 File System Router인 app Directory(beta) 추가 pages 폴더를 이용해 간단하게 router page를 생성할 수 있다는 것은 Next의 가장 큰 킬링 포인트 중 하나였습니다. 이번 13 버전에서는 이런 Next의 장점과 React@18에서 출시한 Server Component를 효과적으로 사용할 수 있게 해 줄 app 폴더가 추가되었으며, beta상태인 지금과 달리 점점 pages 폴더를 대체해 나가거나 app은 server components용, pages는 client components용으로 적용될 것이라고 예상됩니다. app폴더는 기존 pages폴더에 많은 사람들이 만들었던 components 폴더를 합쳐둔 것 같은 폴더로 공통 layout, head,..