Next.js
-
[Next.js] Next.js 13 변경사항Front-End(Web)/React - 프레임워크(React, Next) 2023. 1. 14. 03:05
🤍 Next.js 13 Next.js 12버전도 2021년 중순 업데이트 된 것으로 기억하는데, Next.js 13이 2022년 10월에 컨퍼런스에서 다시 발표됬다. 체감상 가장 큰 변화를 느낄 것 같은 버전 체인지이다. (디렉토리 구조, getServerSideProps 등 Next 정체성이 대거 바뀜) Next 개발팀은 13버전 업을 통해 좀 더 제한없이 동적으로 동작하는 기반을 마련하고자 했다는게 주요 컨셉이다. - 주요 변경사항 app/Directory(beta) : 쉽고, 빠르고, 적은 클라이언트 JS Layouts(레이아웃) React Server Components (리액트 서버 컴포넌트) Streaming (스트리밍) Turbopack(alpha) : Rust 기반. Webpack 보다 7..
-
[Next.js] Dark Mode 구현하기Front-End(Web)/React - 프레임워크(React, Next) 2022. 9. 12. 19:49
전 회사 사람들과 진행하는 사이드 프로젝트에서, 테마(theme.ts)를 세팅하다가 다크모드 적용여부를 논의하였다. (일반적으론, 색상 등으로 설정된 변수명에 값을 넣어주겠지만, 다크모드를 고려하면 방법이 조금 달라진다!) 적용하기로 결정이 되었으며, 이전 프로젝트에서 느꼈듯이 다크테마를 적용하기 위해선 스타일링이 조금 더 복잡해진다. 배경, 텍스트 등에 색상을 그대로 넣는게 아니라, 변수값에 이 색상들을 저장하고 이 변수들을 기반으로 마크업을 적용해야 한다. 다크테마 색상을 어떻게 설정하는지, 각종 설정들과 연계하여 다크테마를 제공하는 것, Next.js SSR에서의 적용 등 다크모드를 적용하면서 내가 고민했던 이슈들과 그 해결법들을 정리해보고 공유해보고자 한다! 🎨 Dark Mode 준비 다크모드는 ..
-
[Next.js] Next.js 12 변경사항Front-End(Web)/React - 프레임워크(React, Next) 2022. 9. 1. 19:34
🤔 서론 작년 10월, Next.js 12버전이 빠르게 릴리즈되었고 컴파일러를 기존 Babel에서 Rust 기반의 SWC로 바꾸면서 빌드 속도가 대폭 상향됬다는 걸 알게되었다. 좀 더 알아보니, 이 뿐만 아니라 최근에 릴리즈된 React 18의 기능들을 지원하기 위한 업데이트도 포함된 것을 확인했다. 이번 기회에, 최근 Next가 12버전으로 업데이트 되면서 어떠한 변화들이 있었는지 한 번 정리해보려고 한다. 🤍 Next.js 12 업데이트 2021년 10월, 11버전이 업데이트된지 약 3달만에 Vercel(Next 개발사)은 다시 12버전을 발표하게 된다. 이번 배포는 개발자 경험(DX, Developer Experience)을 향상시키는 기능, React 18 업데이트 등에 초점이 맞춰져있다고 한다...
-
[Next.js] next/image - <Image> 컴포넌트Front-End(Web)/React - 프레임워크(React, Next) 2022. 3. 13. 13:22
이번에 토이를 Next.js로 진행하면서, 이미지를 Next.js에서 지원하는 컴포넌트로 적용하는 것을 권장한다는 메세지를 보았다. Next.js v10부터 컴포넌트를 지원했으며, 주요 목적이 바로 이미지 최적화(Optimization) 인 것이다. 컴포넌트를 사용하는 의의와 사용법에 대해 간단하게 공부하면서 정리해보았다! 🤍 컴포넌트는? 는 HTML의 태그에서 확장되어 built-in을 최적화하는 Next.js의 이미지 컴포넌트이다. Next.js 공식문서에서 설명하는 컴포넌트 사용의 의의는 아래와 같다. Basic Features: Image Optimization | Next.js Next.js supports built-in image optimization, as well as third par..
-
[Next.js + TS] 초기세팅 - (4) Babel 설정Front-End(Web)/React - 프레임워크(React, Next) 2021. 11. 2. 02:39
Next.js + TS 초기세팅에 대한 글을 쓰면서, 마지막으로 Babel 세팅에 대한 내용을 정리하려고 하였으나 이전에 개념만으로도 글이 길어졌다. * [Next.js + TS] 초기세팅 - (3) Babel 개념 : https://abangpa1ace.tistory.com/196 이번 포스팅에서는, Babel을 실제로 세팅하는 방법, 그리고 Next.js 및 TS환경을 좀 더 낫게 사용하기 위해 내가 적용했던 몇 가지 항목들을 설명해보고자 한다. 💛 Babel 과 Typescript 바벨을 설정하기 이전에, Typescript 환경에서 바벨을 쓰는 것의 목적? 의의? 를 이해하기 위한 선행학습이 필요했다. 사실, Typescript tsc(tsconfig.json) 역시 TS를 JS로 컴파일하는데 관..
-
[Next.js + TS] 초기세팅 - (2) ESLint, PrettierFront-End(Web)/React - 프레임워크(React, Next) 2021. 10. 14. 05:15
지난, CRA 초기세팅 및 Typescript 세팅에 이은 2번째 글이다. 주제는 ESLint, Prettier! 뒤에서도 설명하겠지만, 이 툴들은 기능적인 부분보다는 동기들과의 프로젝트 협업을 위한 세팅에 사용되었다. 이들의 역할을 알아보고, 나도 단순히 적용만 하고 지나쳤던 설정들에 대해 자세히 알아보았다. 📓 ESLint - 개요 ESLint는 Javascript, Typescript 의 코딩 스타일 도구이다. JS코드가 ECMAScript Specification에 부합하는지 검사하는 툴이다. 코딩 스타일 가이드라인을 지정하여, 패턴을 준수하지 않을 경우 사후에 발생할 수 있는 잠재적 문제점을 사전에 방지하기 위해 사용되는 것이다. * 본래, TS는 TSLint 라는 코딩 스타일 도구가 있었으나,..
-
[Next.js] Pre-RenderingFront-End(Web)/React - 프레임워크(React, Next) 2021. 7. 7. 01:45
오늘도 역시, Next.js의 주요기능인 Pre-Rendering에 대해 포스팅하려고 한다. 이전에, Next.js 입문에서 작성한 Pre-Rendering 부분을 좀 더 구체화하며, 관련된 메서드까지 소개하기 위함이다! * 이전 포스팅(Next.js 입문) : https://abangpa1ace.tistory.com/177 [Next.js] Next.js 입문 🤔 Next.js를 시작하며.. 정말 오랜만에 블로그를 쓰는것 같다. 이제 입사 1개월이 되어 task를 맡기도 하고, 구현에 맘이 앞서다 보니 중간중간 찾아본 주요한 정보들을 정리하는 시간을 가지지 못 abangpa1ace.tistory.com React 개발을 하면서, Data Fetch를 위해 componentDidMount() 라이프사이클..
-
[Next.js] Dynamic Routes(페이지 이동)Front-End(Web)/React - 프레임워크(React, Next) 2021. 7. 1. 21:32
오늘은 next.js의 주요 기능 중 하나라고 할 수 있는, 페이지의 구성과 이동(라우팅)에 대해 포스팅하려고 한다. 사실, React에서도 라우팅에 관한 서드파티를 지원한다.(React-Router-DOM) 이를 통해, 라우터 경로별로 컴포넌트를 그린다. Next도 비슷한 원리로 라우팅을 지원할 것이며, React-Router와는 다른 차이점 혹은 장점이 있기에 사용되는 걸거라 예상된다. 사용법과 그 장점에 대해 한 번 학습해보겠다! 🤍 Pages & Dynamic Routes Next.js 프레임워크의 사용규칙 중 하나는 바로, 페이지 컴포넌트들은 반드시 Pages 디렉토리에 담아야한다는 것이다. 그 이유는, 이 Pages 디렉토리 경로값이 곧 우리가 이동할 페이지 컴포넌트의 경로값이 되기 때문이다!..