[Next.js] Dynamic Routes 사용 방법
Next.js에서 Dynamic Routes 사용 방법에 대해 알아보겠습니다. Dynamic Routes Next.js에서는 page에 대괄호([param])를 추가하여 Dynamic Route를 생성할 수 있습니다. pages/movies 경로에 [id].js 파일을 생성하면 /movies/1, /movies/abc 등과 같은 경로로 접속할 수 있습니다
Next.js에서 Dynamic Routes 사용 방법에 대해 알아보겠습니다. Dynamic Routes Next.js에서는 page에 대괄호([param])를 추가하여 Dynamic Route를 생성할 수 있습니다. pages/movies 경로에 [id].js 파일을 생성하면 /movies/1, /movies/abc 등과 같은 경로로 접속할 수 있습니다
Next.js에서 Redirect와 Rewrite 설정 방법에 대해 알아보겠습니다. Redirect와 Rewrite 설정은 next.config.js 파일에서 설정하게 됩니다. next.config.js Next.js에서 커스텀 설정을 하기 위해서는 프로젝트 디렉터리의 루트에 next.config.js 또는 next.config.mjs 파일을 만들 수 있
Next.js에서 Head 사용 방법에 대해 알아보겠습니다. Title 설정 Next.js에는 페이지 헤더의 제목을 변경하고 meta를 추가할 수 있는 내장 컴포넌트를 가지고 있습니다. 123456789101112import Head from 'next/head';export default function Home() { return (
Next.js에서 스타일 적용하는 방법에 대해 알아보겠습니다. 1. CSS-in-JS 가장 간단한 방법은 인라인 스타일입니다. 1234567export default function Home() { return ( <div> <div style={{ color: 'red' }}&
Next.js에서 Rouing 하는 방법에 대해 알아보겠습니다. <a> 사용 <a> 태그를 사용해서 페이지 이동을 할 수 있습니다. 하지만 페이지 이동 시 전체 페이지 새고로침이 되는 문제가 발생했습니다. 12345678export default function NavBar() { return ( <nav>
Next.js를 사용하는 프로젝트 생성 하는 방법에 대해 알아보겠습니다. 시스템 요구 사항 Node.js 14.6.0 이상 MacOS, Windows(WSL 포함) 및 Linux 가 지원됩니다. 프로젝트 생성 리액트 프로젝트를 생성하는 방법과 비슷하게 create-next-app 명령어를 사용합니다. @latest 를 추가하면 최신 버전으로 프로젝트
WPF에서 Windows Forms(WinForm) Control 사용하는 방법에 대해 알아보겠습니다. 참조 추가 프로젝트에 다음 어셈블리에 대한 참조를 추가합니다. WindowsFormsIntegration System.Windows.Forms XAML에 추가 WinForm 컨트롤을 사용하려는 XAML 파일을 열고 아래 네임스페이스 매핑을 추가합니
키바나(Kibana) 사용 방법에 대해 알아보겠습니다. 운영환경 Windows Kibana Version: 7.17.8 키바나를 실행합니다. 키바나는 기본적으로 5601 포트를 사용하는데, 웹 브라우저를 열고 http://localhost:5601 주소를 입력합니다. 서버 상태 확인 키바나의 서버 상태는 http://localhost:5601/sta
Kibana(키바나): 시각화와 엘라스틱서치 관리 도구 키바나는 오픈서치의 자유-오픈 소스 후계자가 오픈서치 대시보드인 일래스틱서치용의 소스 이용이 가능한 데이터 시각화 대시보드 소프트웨어이다. 일래스틱서치 클러스터에 색인된 내용 기반의 시각화 기능을 제공한다. 사용자는 막대, 선, 산점도 플롯, 원 그래프, 지도를 다량의 데이터에 맞추어 만들 수 있다
윈도우 환경에서 Elasticsearch 8.X 버전을 설치 및 실행하는 방법에 대해 알아보겠습니다. 윈도우에서는 파일을 다운로드하고 압축을 푼 다음 실행 파일을 실행하면 엘라스틱서치가 설치되는 구조입니다. 다운로드 먼저 설치를 위해 공식홈페이지로 이동합니다. https://www.elastic.co/kr/downloads/elasticsearch 현재
백엔드 개발이든, 클라이언트 사이드 로직을 다루는 풀스택 개발이든, 클라우드 네이티브 환경에서 서비스 배포를 담당하는 엔지니어든, 2025년에는 여러분의 개발 흐름에서 주목해야 할 변화들이 있습니다. 다음은 2025년에 반드시 알아야 할 C#의 10가지 핵심 사항입니다
초보자든, 몇 년의 경험을 쌓은 개발자든 상관없이, 이 글은 실제 개발 경험에서 얻은 교훈과 실수, 그리고 깨달음을 바탕으로 작성되었습니다. 이제부터 .NET 개발자로서 반드시 알아야 할 최고의 팁과 트릭을 공유하겠습니다. 1. 비동기 프로그래밍(Async Progra
많은 개발자들이 ChatGPT를 활용하고 있지만, 단순한 코드 생성에 그치는 경우가 많습니다. 하지만 상위 1% 개발자들은 ChatGPT를 단순한 코드 생성기가 아니라 개발 파트너로 활용하여 복잡한 시스템을 빠르게 구축하고 있습니다. 다음은 ChatGPT를 사용하여 생
Docker 이미지는 디스크 공간을 차지하고 배포 속도를 늦추는 문제를 유발할 수 있습니다. 하지만 최상위 DevOps 팀들은 이미 이미지 크기를 최대 99%까지 줄이는 기술을 활용하고 있습니다. 이번 글에서는 이러한 숨겨진 최적화 기법을 공개합니다. 🚀 과도한 Do
애플리케이션의 성능 병목 현상은 효율성, 확장성, 사용자 경험을 저하시킬 수 있습니다. 많은 .NET 개발자들은 무의식적으로 성능을 저하시킬 수 있는 안티 패턴을 따르게 됩니다. 이번 글에서는 대표적인 .NET 성능 저하 안티 패턴 10가지를 살펴보고, 그것이 왜 문제
안녕하세요. 블로그를 시작한지 얼마 안 된 새내기입니다. 이전에는 네이버 블로그에 조금씩 업로드를 하였었는데, Github 에 연동된 블로그가 있어 시작하게 되었습니다. 개발 경력은 쌓이는데 개발에 대한 내용을 기록한 적이 많이 없어 이번 계기로 열심히 기록해보려고 합
보유기술 Programming Laguage Java, JavaScript, TypeScript, HTML5, CSS Python, Dart C#, C++ Framework / Library Spring Framework, Spring Boot, JPA, Queryds