vite-plugin-next-router

프로젝트를 Vite로 만들기 시작했습니다.프로젝트 안에서 페이지 이동을 간편하게 하기 위해, React Router를 사용하려고 했는데, 흥미로운 플러그인을 발견했어요! 1. vite-plugin-next-router란?vite-plugin-next-router란? Vite와 Next.js를 결합하여, React 애플리케이션의 라우팅을 최적화하는 플러그인입니다.이는 Next.js의 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 기능을 결합하는 역할을 해요.기존에 저는 , , 를 사용해, 동적 라우팅을 구성했었어요.하지만, 이 플러그인은 폴더명을 따라 자동으로 라우팅 되기에, 이 플러그인을 선택했습니다! 2. 설치방법[설치 홈페이지 바로가기(npm)]두 가지 값을 입력해서, 플러그인을 설치해 ..

• format_list_bulleted Front-End Study/Vite
• · 2024. 6. 17.
• textsms

CRA 대신 Vite를 선택한 이유

프로젝트를 만들고 있는 도중, React Router v7에 대한 발표 번역 글을 보게 되었습니다.그 글 중에 한 부분이 관심이 쏠리더군요?간단하게 요약하면, React Router는 Vite를 선호하며, Vite를 기반으로 개발할 계획이라고 하네요.Vite가 무엇인지 모르는 저는 CRA(Create React App)과 Vite 둘 중 하나를 고르기 전에, 둘 다 무엇이고, 어떤 차이가 있는지 알아보겠습니다! 1. CRA(Create Reate App)[CRA 공식 홈페이지 바로가기]CRA는 Zero-configuration 설정을 지향한다고 합니다.즉, 개발자가 설정 파일을 신경 쓰지 않고, 바로 React 프로젝트를 시작할 수 있도록 한다고 하네요! 또한, 웹팩(Webpack)을 사용하여, 애플리케..

• format_list_bulleted Front-End Study/Vite
• · 2024. 6. 17.
• textsms

BrowserRouter과 HashRouter의 차이

SPA(Single Page Application)를 개발한 경험이 있으실 겁니다.페이지 이동 시, 리액트 라우터(React Router)를 사용해 라우팅을 구현하는 개발을 하던 도중, 라우터의 기능인 BrowserRouter와 HashRouter가 존재하더군요!그 두 가지는 무엇이며, 어떤 기능을 제공하는지 알아보고자 합니다.  1. BrowserRouterBrowserRouter 공식 홈페이지 바로가기BrowserRouter는 HTML5의 History API를 사용하여, URL을 관리합니다.pushState, replaceState, popState 같은 이벤트를 사용합니다.또한, https://test.com/about 같은 클린한 URL을 제공하며, SPA에서 서버 사이드와 클라이언트 사이드 라..

• format_list_bulleted Front-End Study/React
• · 2024. 6. 16.
• textsms

문화공공데이터 Open API 사용하기

Open API를 사용하기 위해, 여러 사이트를 찾아본 경험이 있을거에요. 저도 프로젝트에 필요한 여러 Open API를 찾던 도중, 좋아 보이는 사이트를 발견했습니다! 1. 문화공공데이터광장 문화공공데이터광장 바로가기 문화공공데이터광장 www.culture.go.kr 사이트에 대해 알아보기 전에, 문화공공데이터가 무엇일까요? 문화공공데이터란? 문화체육관광부 및 타 부처, 지자체에서 보유하고 있는 유산, 예술, 체육, 관광, 한글 문화재 등 다양한 문화 분야의 공공데이터를 의미합니다.즉 , 정부는 공공데이터 개방을 통해 사용자의 창의성 및 혁신적 아이디어와 결합하여, 새로운 비즈니스를 창출할 수 있는 생태계를 구축하고자 하는 것이에요! 2. 사용방법그럼 사용해 봐야겠죠! 사용방법에 대해 알아봅시다. 2-..

• format_list_bulleted Back-End Study/REST API
• · 2024. 6. 16.
• textsms

Material UI 설치하기

리액트 개발을 하면서, 컴포넌트를 하나씩 다 생성하고, 커스텀하고, 스타일 하다 보면, 많은 시간이 소모되는 경험이 있으실 겁니다. (저 또한 그랬어요...)ppt 탬플릿처럼 이미 만들어진 컴포넌트를 불러오기만 하면, 원하는 스타일대로 사용할 수 있지 않을까? 해서 MUI라는 것을 찾았습니다! 1. Material UI란?Material UI란? (공식 홈페이지 바로가기)React 애플리케이션에서 사용자 인터페이스(UI) 컴포넌트를 쉽게 만들 수 있도록 도와주는 컴포넌트 라이브러리입니다.이는 일관성 있고 직관적인 UX를 제공하기 위해 만들어졌습니다.즉, 간편하게 컴포넌트를 구성할 수 있다는 얘기지요. 2. MUI 설치바로 설치해봅시다! (공식 홈페이지 설치방법)설치하기 전에, MUI는 React 라이브러..

• format_list_bulleted Front-End Study/React
• · 2024. 6. 16.
• textsms

REST API

1. API지금부터 REST API에 대해 알아봅시다!그 전에 먼저 API란 무엇일까요?API란? Application Programming Interface의 약자로, 프로그램에서 사용할 수 있도록, 운영 체제 or 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 말합니다. API를 불러오는 과정은 사용자(웹 서비스)가 API에게 정보 요청을 하면, API는 제공자(DB)에게 요청을 전달합니다.그 다음, 제공자가 API에게 데이터를 제공하고 API는 사용자에게 데이터를 전달하는 역할을 합니다.즉, 간단히 말해 클라이언트가 특정 기능을 이용하기 위해 어떤 주소로 요청을 보내면, 서버가 응답을 해주는 체계입니다. 클라이언트 입장에서 요청의 종류는 크게 4가지로 분류됩니다. 이를 합쳐 C..

• format_list_bulleted Back-End Study/REST API
• · 2024. 6. 10.
• textsms

json-server

json-server1. json-serverjson-server에 대해 알아봅시다!json-server란? JSON 파일을 기반으로 아주 짧은 시간에 RESTful API를 구축할 수 있게 해주는 도구입니다.개발 중에 API 서버가 필요할 때, 또는 프로토타입을 빠르게 만들고 테스트하기 위해 유용하게 사용할 수 있습니다. 2. 특징json-server는 빠른 시간안에 로컬에서 실행 가능한 RESTful API 서버를 구축할 수 있습니다.또한, 단일 JSON 파일을 DB로 사용합니다.기본 CRUD 기능을 자동으로 제공합니다.쿼리 매개변수를 사용하여 데이터 검색, 필터링 및 페이징을 지원합니다.프로덕션의 활용은 불가능합니다. 3. 설치다음과 같이 입력하여 설치할 수 있습니다. (npm 기준)※ 이때, -g..

• format_list_bulleted Computer Science
• · 2024. 5. 22.
• textsms

TypeScript가 적용된 React 프로젝트 생성

TypeScript가 적용된 React 프로젝트 생성1. TypeScript가 적용된 React 프로젝트 생성TypeScript가 적용된 React 프로젝트를 생성해 봅시다!※ 자세한 내용은 Create React App 공식문서 참고cmd 터미널 안에 다음과 같이 입력하여 TS 프로젝트를 생성합니다 .npx create-react-app 프로젝트명 --template typescript 그러면 정상적으로 프로젝트가 생성되었음을 확인할 수 있습니다. 리액트 파일처럼 사용하고 싶으면, 다음과 같이 입력하여 타입을 지정해야 합니다.import React from 'react';import Header from './components/common/header';const App:React.FC = () =>..

• format_list_bulleted Front-End Study/TypeScript
• · 2024. 5. 12.
• textsms

웹 서버(Web Server)

웹 서버(Web Server)1. 웹 서버웹 서버(Web Server)에 대해 알아봅시다!웹 서버(Web Server)는 클라이언트(웹 브라우저)로부터 HTTP 요청을 받아들이고, 요청된 웹 페이지 or 파일을 제공하는 소프트웨어입니다.웹 서버의 주요 기능은 다음과 같습니다. 1) HTTP 요청 처리웹 서버는 클라이언트(웹 브라우저)로부터 HTTP 요청을 받습니다.이 요청은 HTML 문서, 이미지, CSS 파일, JavaScript 파일 등을 요청할 수 있습니다. 2) 정적 콘텐츠 제공웹 서버는 정적 파일(HTML, 이미지, CSS, JavaScript)을 클라이언트에게 직접 제공합니다.이러한 파일들은 서버에서 변경되지 않고 고정된 형태로 제공합니다. 3) 동적 콘텐츠 처리일부 웹 서버는 동적 콘텐츠 생..

• format_list_bulleted Computer Science
• · 2024. 5. 11.
• textsms

Vercel로 React 배포하기

Vercel로 React 배포하기1. VercelVercel로 React를 배포해 봅시다.먼저 배포하기 전에, Vercel이 무엇일까요?Vercel이란? 웹 애플리케이션을 배포하고 호스팅하기 위한 클라우드 플랫폼입니다.이 플랫폼은 개발자들이 프런트엔드 및 백엔드 애플리케이션을 쉽게 배포하고 관리할수 있도록 도와줍니다.Vercel은 정적 사이트, SPA(Single Page Application), 서버리스 함수, API 엔드포인트 등을 호스팅할 수 있는 기능을 제공합니다.2. Vercel로 React 배포하기그럼 이제 배포해 봅시다!#1.  vercel 사이트에 들어가서 회원가입 후, 오른쪽 상단의 Add new... → Project를 클릭해 줍니다. #2. GitHub가 연동되어 있다면, 내가 배포할..

• format_list_bulleted Front-End Study/React
• · 2024. 5. 5.
• textsms