목록프론트엔드 (20)

FE PARADISE

Next.js 사이트 성능 관리 - next/dynamic 사용하기

사이트 내 js, css 등의 파일 로드 시간을 단축하기 위해 next/dynamic을 적용하고자 한다. 기존에 모듈, 컴포넌트들을 import하는 방식은 다음과 같았다. 기존 import Modal from "@/components/common/modal"; next/dynamic 적용 후 import dynamic from "next/dynamic"; const Modal = dynamic(() => import("@/components/common/modal"), { loading: () => Loading..., }); const Form = dynamic(() => import("@/components/home/form"), { loading: () => Loading..., }); const ..
프론트엔드/Next.js 2024. 3. 22. 22:00
git branch 관리하기

git branch 개발을 한다면 필수로 사용하게 되는 git! git의 기능 중 하나인 branch를 이용하면 여러 작업을 한번에 수행하고 작업별로 따로 관리하기 편리해집니다. 브랜치? branch? 필수 사용? 회사 프로젝트를 개발하던 중 UI 리디자인 작업, 유저 플로우 변경, 세세한 버그 및 디자인 조정 등 여러 작업을 한번에 하다보니 😵‍💫 branch 사용이 필요한 순간이 왔습니다. 필수적이진 않지만 사용하면 아주 편리한 branch를 사용해야하는 이유가 무엇일까요? 브랜치를 이용하면 여러 작업(스타일 수정, 버그 수정, 유저 플로우 수정 등등)을 한번에 수행 가능! A 작업을 진행 중인데 B 작업을 급하게 해서 사이트에 업로드 해야하는 경우, 완료되지 않은 A 작업은 놔두고 B 작업만 업로..
프론트엔드/Git 2024. 3. 1. 20:13
[Next.js] 웹사이트 버전 관리하기 - package.json version 설정& cookie에 버전 저장하기 ( + 버전 관리 규칙 semantic versioning )

사이트에 지속적인 배포를 하려면 버전 관리가 필요하다. 해당 포스트는 Next.js 프로젝트에서 웹사이트 버전을 관리한 내용을 간단히 작성하였다. package.json에 버전 설정하기 package.json을 보면 위의 사진과 같이 버전 version을 설정할 수 있다. 위는 현재 웹사이트 버전을 1.0.0으로 설정하였다. 버전 설정 Semantic versioning 은 다음을 참고해 보자! 💡 웹(앱) 버전 규칙 Semantic versioning Major.Minor.Patch Major → 대규모 업데이트 사항 발생 시. 이전 버전과 호환되지 않는 정도의 큰 변화를 주는 경우 Minor → 새로운 기능을 추가할 경우 Patch → 이슈, 버그 해결 시 등 간단한 수정을 한 경우 그럼 이제 이렇게..
프론트엔드/Next.js 2024. 2. 21. 01:04
[Next.js] Next.js13 App router에 styled-components 적용하기 / global style / registry.tsx

Next.js v13에서는 기존의 Pages Router와 달리 App Router 방식이 등장했다. 그리하여, 이에 따라 styled-components 설정 방식도 변경되었다. 기존 Page Router에서는 _document.jsx와 _app.jsx가 존재했으나 App router에선 사용하지 않는다. App router에선 lib/registry.jsx 와 app/layout.jsx를 사용한다. 💀 Page Router에서 styled-components를 사용하기 위한 설정 방식 //_document.jsx import { Fragment } from "react"; import Script from "next/script"; import { ServerStyleSheet } from "styl..
프론트엔드/Next.js 2023. 7. 11. 00:15
이전 Prev 1 2 3 4 5 Next 다음