![]()
vue를 공부하던 도중, 컴포넌트 기반 개발을 하고 있었습니다.컴포넌트가 늘어날수록 script도 같이 늘어나면서 코드가 너무 길어지는 문제가 발생했습니다.이를 해결하기 위해, 어떤 방법이 있을지 찾아보던 도중, 웹팩(Webpack)에 대해 알게 되었어요! 1. 웹팩(Webpack)웹팩(Webpack)은 JavaScript 애플리케이션을 위한 모듈 번들러(Module Bundler)입니다.많은 수의 JavaScript 파일을 관리하고, 최종적으로 배포 가능한 형태로 묶어주는 도구입니다.이를 사용하면, 여러 모듈과 자원을 하나 or 여러 파일로 번들링 할 수 있어요.※ 번들링(Bundling) : 여러 개의 파일 or 모듈을 하나의 파일로 묶는 과정 2. 설치그럼 일단, 설치를 해봅시다!설치를 하기 전에,..
지금까지는 정의, 사용 방법 등 정보 중심의 글을 주로 작성해왔지만, 앞으로는 제가 개발하면서 겪은 문제점이나 흥미로운 주제를 공유하려고 합니다.같은 고민을 하고 있는 분들과 함께 고민해보자는 느낌으로 글을 작성할 예정입니다.물론, 그렇다고 정보 글을 아예 작성하지 않는 것은 아니에요.여전히 유용한 정보와 팁도 함께 제공할 것입니다.앞으로도 좋은 글로 찾아뵙겠습니다.많은 관심과 피드백 부탁드립니다!감사합니다!
![]()
요즘 리액트를 열심히 공부했는데, 포트폴리오도 리액트로 만들면 좋겠다 해서 리액트로 리메이크하고 있습니다.원래 포트폴리오 main 페이지에서 사용하는 타이핑 이벤트를 적용하고자 해요.일단 먼저, 어떻게 작용하는지 확인해봅시다! main.js// 타이핑 이벤트const firstContent = "안녕하세요! 저는 프론트엔드 개발자 전유빈입니다.";const firstText = document.querySelector(".text-1");let i = 0;function FirstTyping() { if (i 결과 다 되었으면, 이것을 이제 리액트로 변환해 봅시다! Typing.jsximport React from "react";// 타이핑 이벤트const firstContent = "안녕하세요! 저..
![]()
프로젝트를 Vite로 만들기 시작했습니다.프로젝트 안에서 페이지 이동을 간편하게 하기 위해, React Router를 사용하려고 했는데, 흥미로운 플러그인을 발견했어요! 1. vite-plugin-next-router란?vite-plugin-next-router란? Vite와 Next.js를 결합하여, React 애플리케이션의 라우팅을 최적화하는 플러그인입니다.이는 Next.js의 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 기능을 결합하는 역할을 해요. 기존에 저는 , , 를 사용해, 동적 라우팅을 구성했었어요. 하지만, 이 플러그인은 폴더명을 따라 자동으로 라우팅 되기에, 이 플러그인을 선택했습니다! 2. 설치방법[설치 홈페이지 바로가기(npm)]두 가지 값을 입력해서, 플러그인을 설치..
![]()
프로젝트를 만들고 있는 도중, React Router v7에 대한 발표 번역 글을 보게 되었습니다.그 글 중에 한 부분이 관심이 쏠리더군요?간단하게 요약하면, React Router는 Vite를 선호하며, Vite를 기반으로 개발할 계획이라고 하네요.Vite가 무엇인지 모르는 저는 CRA(Create React App)과 Vite 둘 중 하나를 고르기 전에, 둘 다 무엇이고, 어떤 차이가 있는지 알아보겠습니다! 1. CRA(Create Reate App)[CRA 공식 홈페이지 바로가기]CRA는 Zero-configuration 설정을 지향한다고 합니다.즉, 개발자가 설정 파일을 신경 쓰지 않고, 바로 React 프로젝트를 시작할 수 있도록 한다고 하네요! 또한, 웹팩(Webpack)을 사용하여, 애플리케..
![]()
SPA(Single Page Application)를 개발한 경험이 있으실 겁니다.페이지 이동 시, 리액트 라우터(React Router)를 사용해 라우팅을 구현하는 개발을 하던 도중, 라우터의 기능인 BrowserRouter와 HashRouter가 존재하더군요!그 두 가지는 무엇이며, 어떤 기능을 제공하는지 알아보고자 합니다. 1. BrowserRouterBrowserRouter 공식 홈페이지 바로가기BrowserRouter는 HTML5의 History API를 사용하여, URL을 관리합니다.pushState, replaceState, popState 같은 이벤트를 사용합니다.또한, https://test.com/about 같은 클린한 URL을 제공하며, SPA에서 서버 사이드와 클라이언트 사이드 라..
![]()
Open API를 사용하기 위해, 여러 사이트를 찾아본 경험이 있을거에요. 저도 프로젝트에 필요한 여러 Open API를 찾던 도중, 좋아 보이는 사이트를 발견했습니다! 1. 문화공공데이터광장 문화공공데이터광장 바로가기 문화공공데이터광장 www.culture.go.kr 사이트에 대해 알아보기 전에, **문화공공데이터**가 무엇일까요?문화공공데이터란, 문화체육관광부 및 타 부처, 지자체에서 보유하고 있는 유산, 예술, 체육, 관광, 한글, 문화재 등 다양한 문화 분야의 공공데이터를 의미합니다. 즉 , 정부는 **공공데이터 개방**을 통해 사용자의 창의성 및 혁신적 아이디어와 결합하여, 새로운 비즈니스를 창출할 수 있는 생태계를 구축하고자 하는 것입니다! 2. 사용방법그럼 사용해 봐야겠죠! 사용방법에 대해 ..
![]()
리액트 개발을 하면서, 컴포넌트를 하나씩 다 생성하고, 커스텀하고, 스타일 하다 보면, 많은 시간이 소모되는 경험이 있으실 겁니다. (저 또한 그랬어요...)ppt 탬플릿처럼 이미 만들어진 컴포넌트를 불러오기만 하면, 원하는 스타일대로 사용할 수 있지 않을까? 해서 MUI라는 것을 찾았습니다! 1. Material UI란?Material UI란? (공식 홈페이지 바로가기)React 애플리케이션에서 사용자 인터페이스(UI) 컴포넌트를 쉽게 만들 수 있도록 도와주는 컴포넌트 라이브러리입니다.이는 일관성 있고 직관적인 UX를 제공하기 위해 만들어졌습니다.즉, 간편하게 컴포넌트를 구성할 수 있다는 얘기지요. 2. MUI 설치바로 설치해봅시다! (공식 홈페이지 설치방법)설치하기 전에, MUI는 React 라이브러..
![]()
1. API지금부터 REST API에 대해 알아봅시다!그 전에 먼저 API란 무엇일까요?API란? Application Programming Interface의 약자로, 프로그램에서 사용할 수 있도록, 운영 체제 or 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 말합니다. API를 불러오는 과정은 사용자(웹 서비스)가 API에게 정보 요청을 하면, API는 제공자(DB)에게 요청을 전달합니다.그 다음, 제공자가 API에게 데이터를 제공하고 API는 사용자에게 데이터를 전달하는 역할을 합니다.즉, 간단히 말해 클라이언트가 특정 기능을 이용하기 위해 어떤 주소로 요청을 보내면, 서버가 응답을 해주는 체계입니다. 클라이언트 입장에서 요청의 종류는 크게 4가지로 분류됩니다. 이를 합쳐 C..
![]()
json-server1. json-serverjson-server에 대해 알아봅시다!json-server란? JSON 파일을 기반으로 아주 짧은 시간에 RESTful API를 구축할 수 있게 해주는 도구입니다.개발 중에 API 서버가 필요할 때, 또는 프로토타입을 빠르게 만들고 테스트하기 위해 유용하게 사용할 수 있습니다. 2. 특징json-server는 빠른 시간안에 로컬에서 실행 가능한 RESTful API 서버를 구축할 수 있습니다.또한, 단일 JSON 파일을 DB로 사용합니다.기본 CRUD 기능을 자동으로 제공합니다.쿼리 매개변수를 사용하여 데이터 검색, 필터링 및 페이징을 지원합니다.프로덕션의 활용은 불가능합니다. 3. 설치다음과 같이 입력하여 설치할 수 있습니다. (npm 기준)※ 이때, -g..
![]()
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 = () =>..
![]()
웹 서버(Web Server)1. 웹 서버웹 서버(Web Server)에 대해 알아봅시다!웹 서버(Web Server)는 클라이언트(웹 브라우저)로부터 HTTP 요청을 받아들이고, 요청된 웹 페이지 or 파일을 제공하는 소프트웨어입니다.웹 서버의 주요 기능은 다음과 같습니다. 1) HTTP 요청 처리웹 서버는 클라이언트(웹 브라우저)로부터 HTTP 요청을 받습니다.이 요청은 HTML 문서, 이미지, CSS 파일, JavaScript 파일 등을 요청할 수 있습니다. 2) 정적 콘텐츠 제공웹 서버는 정적 파일(HTML, 이미지, CSS, JavaScript)을 클라이언트에게 직접 제공합니다.이러한 파일들은 서버에서 변경되지 않고 고정된 형태로 제공합니다. 3) 동적 콘텐츠 처리일부 웹 서버는 동적 콘텐츠 생..
![]()
Vercel로 React 배포하기1. VercelVercel로 React를 배포해 봅시다.먼저 배포하기 전에, Vercel이 무엇일까요?Vercel이란? 웹 애플리케이션을 배포하고 호스팅하기 위한 클라우드 플랫폼입니다.이 플랫폼은 개발자들이 프런트엔드 및 백엔드 애플리케이션을 쉽게 배포하고 관리할수 있도록 도와줍니다.Vercel은 정적 사이트, SPA(Single Page Application), 서버리스 함수, API 엔드포인트 등을 호스팅할 수 있는 기능을 제공합니다.2. Vercel로 React 배포하기그럼 이제 배포해 봅시다!#1. vercel 사이트에 들어가서 회원가입 후, 오른쪽 상단의 Add new... → Project를 클릭해 줍니다. #2. GitHub가 연동되어 있다면, 내가 배포할..
![]()
Prop Drilling1. Prop DrillingPropDrilling이란? 컴포넌트 간에 데이터를 전달할 때, 발생할 수 있는 패턴을 뜻합니다.이는 상위 컴포넌트에서 데이터(상태)를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주게 됩니다.중간 컴포넌트 입장에서는 타겟 자식 컴포넌트에게 데이터를 전달해주기 위해 사용하지 않는 프로퍼티를 받게 됩니다.여러 개의 컴포넌트를 거쳐야 한다면, 가장 먼저 Props가 어디서 온 것인지 추적하기 어려워 유지보수에 비효율적입니다.2. Context APIContext API는 React에서 데이터를 전역으로 공유하기 위해 사용하며, 주로 Props Drilling 문제를 해결하기 위해 사용합니다.Context API의 주요 구성 요소와 작동..
![]()
public 폴더에서 이미지 가져오기 1. public 폴더 리액트 프로젝트를 하는 도중, 이미지 파일을 많이 불러와야 하는 상황이 발생하는 경우가 있습니다. import로 이미지를 불러오니, 너무 많은 코드가 작성되고 심지어 지저분합니다.. import로 불러오는 방식 대신 public 폴더에 이미지 파일들을 옮긴 후, 불러오겠습니다! 그 전에, public 폴더에 대해 알아봅시다. public 폴더란? 정적 자산을 호스팅하기 위한 장소입니다. 이 폴더의 파일들은 빌드 프로세스에서 변경되지 않고, 그대로 유지됩니다. CSS 파일, 이미지, 폰트 등의 정적 자산들은 public 폴더에 위치할 수 있습니다. 2. public 폴더에서 이미지 가져오기 그럼 이제, public 폴더에서 이미지를 가져와 봅시다..
