본문 바로가기

JavaScript

 (22)
Next.js 라우팅: next/router vs next/navigation, 무슨 차이일까? 안녕하세요 :) Next.js에서 라우팅을 처리할 때, 두 가지 주요 라이브러리를 사용할 수 있습니다. next/router와 next/navigation인데요, 이 둘은 다른 방식의 라우팅을 처리하고, 사용하는 방식과 상황이 다릅니다. 오늘은 이 두 가지 라이브러리에 대해 알아보고 최신 트랜드는 무엇인가에 대해 알아보도록 하겠습니다. 먼저 next/router를 먼저 보실까요? next/routernext/router는 Next.js의 전통적인 라우팅 방식입니다. 페이지 기반 라우팅을 주로 사용하던 시절부터 제공되어 왔으며, 클래식 페이지 디렉터리 구조와 함께 작동합니다. 예제 코드는 다음과 같습니다.import { useRouter } from 'next/router';const Example = (..
WebRTC로 실시간 미디어 송출 구현하기 안녕하세요 :)  오늘은 WebRTC를 통해, '실시간 미디어 송출하기'를 구현했던 기억을 살려서 비슷하게 시나리오를 하나 만든 다음, 어떻게 구현하는 가에 대해 작성해보려고 합니다. 먼저, WebRTC란 무엇인가에 대해 간단하게 알고 넘어가보도록 하겠습니다. WebRCT란?Web Real-Time Coummunication의 약자로, 브라우저 간 실시간 음성, 영상 및 데이터 통신을 가능하게 하는 오픈소스입니다. 별도의 플러그인 설치 없이도 웹 애플리케이션에 실시간 미디어 기능을 통합할 수 있어 개발자들에게 매력적인 선택지가 됩니다.특히, 다양한 인터넷 환경에서도 괜찮은 성능을 발휘하도록 설계되어 있는 라이브러리이기 때문에, 높은 품질의 미디어 스트리밍과 네트워크 적응성을 제공해줍니다. 자, 그럼 We..
useRouter를 사용해 페이지 이동 처리하기 안녕하세요 :) Next.js는 React를 기반으로 한 인기 있는 프레임워크로, 간단하면서도 강력한 라우팅 기능을 제공합니다. 특히, Next.js의 useRouter는 클라이언트 사이드 네비게이션과 경로 정보를 관리하는 데 있어 매우 유용한 툴인데요!이번 글에서는 useRouter가 무엇인지, 그 기능들은 무엇이 있는지 살펴보도록 하겠습니다.라우팅의 간단한 개념라우팅(Routing)이란, 특정 URL 경로에 따라 해당하는 페이지나 컴포넌트를 보여주는 과정입니다. Next.js는 파일 기반 라우팅(File-Based-Routing)을 지원하여 각 파일이 URL 경로로 자동 매핑되게 됩니다.  (라우팅에 대해 더 궁금하시다면 ->https://jinuk-io.tistory.com/entry/%EB%9D%..
라우팅(Routing)이란 무엇인가. 안녕하세요 :) 오늘은 웹 애플리케이션에서 빼놓을 수 없는 라우팅(Routing)에 대해 알아보겠습니다. 라우팅은 사용자가 특정 URL에 접근했을 때, 그 URL에 맞는 화면(페이지 or 컴포넌트)을 보여주는 과정을 말합니다. 특히, React와 같은 SPA(Single Page Application)에서는 라우팅이 조금 다르게 동작합니다.이번 글에서는 전통적인 라우팅과 SPA 라우팅의 차이를 이해하고, 두 방식이 어떻게 다른지에 대해 알아보도록 하겠습니다. 라우팅이란?라우팅(Routing)은 '사용자가 웹 애플리케이션에서 특정 URL 경로에 접근했을 때, 해당 경로와 연결된 페이지나 컴포넌트를 보여주는 과정'입니다. 라우팅은 여러 페이지를 이동할 수 있도록 해주며, React 같은 SPA(Single ..
React 컴포넌트란 무엇인가. 안녕하세요 :) React는 현대 웹 개발에서 가장 많이 사용되는 프레임워크 중 하나입니다. 그 중심에는 컴포넌트(Component)라는 개념이 있는데요. 컴포넌트는 React 애플리케이션을 구성하는 기본이 되는 단위로, 비유하자면 레고 블록에 비유할 수 있습니다. 사실 제가 컴포넌트 내에서 사용하는 React Hooks에 관한 내용을 다루긴 했는데, 정작 컴포넌트에 대해서는 다루질 않았더라고요? 이 글에서는 React 컴포넌트의 개념과 역할, 종류, 그리고 컴포트를 어떻게 구성하고 사용하는지에 대해 알아보도록 하겠습니다. React에 처음 입문하는 분들이나 컴포넌트를 체계적으로 이해하고 싶으신 분들에게 도움이 됐으면 합니다. React 컴포넌트?React 컴포넌트는 웹 페이지를 구성하는 어떠한 블록이라..
제네릭 타입은 무엇이며 왜 쓰는 걸까? 안녕하세요 :) TypeScript를 사용하다 보면 가장 많이 언급되는 개념 중 하나가 바로 제네릭(Generic)입니다. 제네릭은 다양한 데이터 타입을 유연하게 처리할 수 있도록 도와주는 타입스크립트의 도구인데, 코드 재사용성과 타입 안정성을 동시에 제공한다는 장점이 있습니다. 하지만 처음 접할 때는 다소 복잡하고 어렵게 느껴질 수 있죠.그래서 이 글에서는 제네릭의 기본 개념부터, 활용 예시, React와 같은 프레임워크에서의 확장법까지 단계적으로 알아보고자 합니다. 제네릭 타입이란?제네릭(Generic) 타입은 TypeScript에서 다양한 타입의 데이터를 유연하게 처리하기 위한 타입 지정 방법 중 하나입니다. 코드 작성 시 데이터의 타입을 명시하지 않고, 대신 타입을 변수처럼 동적으로 설정할 수 있..
알아두면 좋은 TypeScript와 JavaScript의 차이점 안녕하세요 :) TypeScript와 JavaScript는 웹 개발에서 자주 쓰이는 언어입니다. 특히 TypeScript는 JavaScript의 확장 언어로서, 코드의 유지보수성을 향상시킬 수 있는 언어입니다. 하지만, 많은 사람들이 '왜 TypeScript를 사용해야 하는지', '왜 TypeScript 코드를 JavaScript로 변환해야 하는지' 잘 모르는 경우가 많은 거 같습니다. 이번 글에서는 TypeScript와 JavaScript의 차이점을 설명하고, 왜 코드의 변환이 이루어져야 하는지에 대해 다뤄보겠습니다. 먼저 두 언어가 무엇인지부터 간단히 살펴보도록 하겠습니다. TypeScript와 JavaScript란 무엇인가?프로그래밍 언어는 각각의 목적과 특징을 가지고 있습니다. TypeScript..
WebPack 설치 및 설정하기 안녕하세요 :) 2024.12.11 - [JavaScript] - WebPack이란 무엇인가? 기본 파헤치기이전에, 'WebPack이란 무엇인가? 기본 파헤치기' 글에서 WebPack이란 무엇인가에 대해서 다뤄보았습니다. 이번 글에서는 WebPack을 설치하고 설정을 어떻게 해야 하는지에 대해 알아보려고 합니다! 먼저, WebPack을 프로젝트 폴더에 설치해야 합니다. WebPack을 설치하기 전에, Node.js를 설치해줘야 합니다. Node.js 설치 방법왜 Node.js가 필요할까요?WebPack은 기본적으로 Node.js 환경에서 동작하는 도구이기 때문입니다. Node.js는 JS를 서버 사이드에서 실행할 수 있게 해주는 런타임으로, WebPack을 비롯한 많은 개발 도구들이 Node.js를 기반..

티스토리툴바