Next.js "use cache" 한방에 이해하기!

Next.js "use cache" 한방에 이해하기!얼마 전, Next.js Conf 2024가 성황리에 개최되었습니다! 컨퍼런스에서 가장 뜨거운 관심을 받았던 주인공은 바로 "use cache" 기능이 아닐까 싶은데요. 오늘은 이 "use cache" 기능이 도대체 뭔지, 어떻게 활용하는지, 그리고 왜 주목해야 하는지, 속 시원하게 알려드리겠습니다! 혹시 Next.js의 캐시 기능 때문에 머리 아팠던 경험이 있으신가요? 그렇다면 이 글을 끝까지 읽어보세요. "use cache"가 여러분의 고민을 해결해 줄 겁니다! (참고) "use cache"는 2024년 10월 30일 기준으로 아직 실험적인 기능입니다. Next.js App Router의 기존 캐시 기능, 뭐가 문제였을까?App Router에서는 기..

• format_list_bulleted Javascript
• · 2024. 10. 30.
• textsms

Next.js 15의 혁신적인 캐시 기능

Next.js 15의 혁신적인 캐시 기능Next.js 15가 핫한 이슈로 떠오르고 있는 요즘, 가장 주목받는 기능 중 하나가 바로 대폭 개선된 캐시(Cache) 기능입니다. 새롭게 도입된 use cache 기능 덕분에 기존 Next.js의 복잡했던 캐시 전략이 훨씬 간편하고 효율적으로 변신했는데요. 이번 업데이트로 개발자들은 더욱 쉽고 유연하게 캐시 전략을 활용할 수 있게 되었고, 개발 경험도 크게 향상될 것으로 기대됩니다. 자, 그럼 지금부터 use cache 기능을 중심으로 Next.js 15의 캐시 기능에 대해 자세히 알아볼까요? Next.js 14, 캐시 기능의 불편한 진실1. fetch() 함수의 함정Next.js 14에서는 fetch() 함수를 사용하면 기본적으로 데이터가 캐시되었습니다. 하지..

• format_list_bulleted Javascript
• · 2024. 10. 30.
• textsms

잘 모르는 JavaScript와 파생 언어의 세계

잘 모르는 JavaScript와 파생 언어의 세계JavaScript의 역사JavaScript는 1995년 Brendan Eich에 의해 개발되었습니다. 처음에는 Netscape Navigator라는 웹 브라우저에 포함되어, 인터랙티브한 웹 페이지를 만들기 위한 스크립트 언어로 설계되었습니다. 초기 이름은 "Mocha"였으나, 이후 "LiveScript"로 변경되었고, 최종적으로 "JavaScript"라는 이름이 되었습니다. 이 이름은 당시 인기 있었던 프로그래밍 언어 "Java"의 이름을 빌려 마케팅 효과를 노린 것입니다. 그러나 기술적으로 Java와는 다른 언어입니다. ECMAScript와의 관계JavaScript는 엄밀히 말하면 ECMAScript라는 표준 규격에 기반합니다. ECMAScript는 J..

• format_list_bulleted Javascript
• · 2024. 10. 18.
• textsms

Deno v2가 출시되었습니다! - Deno v1.0.0부터의 변화와 현재의 실무 관행

Deno v2가 출시되었습니다! - Deno v1.0.0부터의 변화와 현재의 실무 관행Deno v2가 정식으로 출시되었습니다 이번 글에서는 Deno v1.0.0 출시 시점부터 Deno v2.0.0까지의 주요 변화와 실무에서의 적용 사례를 정리해 보겠습니다. Go 스타일 API의 변화 - 웹 표준 준수 강화Deno v1.0.0 당시의 API 설계Deno v1.0.0 시점의 API와 명령어들은 Go의 영향을 많이 받았습니다.예를 들어:다양한 리소스에 대한 IO 인터페이스 (Deno.Reader/Deno.Writer)deno run 명령어 (스크립트 실행기)deno fmt 명령어 (포매터)deno doc 명령어 (API 문서화 도구)deno test 명령어 (테스트 실행기)Deno는 초기부터 웹 표준 준수를 ..

• format_list_bulleted Javascript
• · 2024. 10. 18.
• textsms

최신 React 폴더 구조: 5단계로 쉽게 알아보는 리액트 프로젝트 구성법

최신 React 폴더 구조: 5단계로 쉽게 알아보는 리액트 프로젝트 구성법리액트(React) 애플리케이션을 체계적으로 구성하는 것은 프로젝트가 커질수록 더 중요한 요소로 자리잡는데요. 특히 파일과 폴더를 어떻게 잘 정리하느냐가 프로젝트의 성공 여부에 큰 영향을 미치게 됩니다. 많은 분들이 이 부분에 대해 궁금해 하시더라고요. 그래서 이번 글에서는 제가 여러 해 동안 리액트 프로젝트를 진행하면서 자연스럽게 익힌 폴더 구조를 5단계로 정리해 보려고 합니다. 이 방법은 소규모 프로젝트부터 대규모 애플리케이션까지 모두 적용할 수 있는 실용적인 가이드인데요. 각 단계마다 어떻게 구성할지 알아보도록 할까요? 1. 하나의 React 파일에서 시작하기첫 번째 단계는 아주 간단합니다. 대부분의 리액트 프로젝트는 src/..

• format_list_bulleted Javascript
• · 2024. 10. 18.
• textsms

Next.js에서 알아보는 서버 컴포넌트, 클라이언트 컴포넌트, 정적/동적 라우트 & 캐싱

Next.js에서 알아보는 서버 컴포넌트, 클라이언트 컴포넌트, 정적/동적 라우트 & 캐싱Next.js의 서버 컴포넌트(Server Component)와 클라이언트 컴포넌트(Client Component), 그리고 정적(Static) 라우트와 동적(Dynamic) 라우트, 캐싱에 대해 혼란스러우신가요? React 개발자로서 Next.js와 React Server Components(RSC)에 입문하게 되면, 기존에 익숙했던 클라이언트 사이드 React와 서버 사이드 개념이 섞이면서 어떻게 접근해야 할지 막막할 수 있습니다. 이 글에서는 이러한 새로운 패러다임을 이해하기 위한 정신적 모델(Mental Model)을 구축해 나갈 텐데요, 중요한 내용들을 하나씩 간단하게 설명드리겠습니다. 서버 컴포넌트와 클라..

• format_list_bulleted Javascript
• · 2024. 10. 18.
• textsms