![]()
요즘 리액트를 열심히 공부했는데, 포트폴리오도 리액트로 만들면 좋겠다 해서 리액트로 리메이크하고 있습니다.원래 포트폴리오 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 = "안녕하세요! 저..
![]()
프로젝트를 만들고 있는 도중, 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에서 서버 사이드와 클라이언트 사이드 라..
![]()
리액트 개발을 하면서, 컴포넌트를 하나씩 다 생성하고, 커스텀하고, 스타일 하다 보면, 많은 시간이 소모되는 경험이 있으실 겁니다. (저 또한 그랬어요...)ppt 탬플릿처럼 이미 만들어진 컴포넌트를 불러오기만 하면, 원하는 스타일대로 사용할 수 있지 않을까? 해서 MUI라는 것을 찾았습니다! 1. Material UI란?Material UI란? (공식 홈페이지 바로가기)React 애플리케이션에서 사용자 인터페이스(UI) 컴포넌트를 쉽게 만들 수 있도록 도와주는 컴포넌트 라이브러리입니다.이는 일관성 있고 직관적인 UX를 제공하기 위해 만들어졌습니다.즉, 간편하게 컴포넌트를 구성할 수 있다는 얘기지요. 2. MUI 설치바로 설치해봅시다! (공식 홈페이지 설치방법)설치하기 전에, MUI는 React 라이브러..
![]()
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 폴더에서 이미지를 가져와 봅시다..
React 프로젝트 빌드하는 법 1. React 프로젝트 빌드 - #1. vsCode에서 터미널에 들어간 후, npm run build라고 입력 - #2. 생성된 build 파일을 미리 만들어 놓은 깃허브 repository에 넣음
![]()
immer 1. immer - React와 함께 사용되며, JavaScript에서 불변성을 관리하기 위한 라이브러리 중 하나 - 상태 관리 및 업데이트를 보다 간편하게 만들어줌 - 불변성을 지키면서 상태 업데이트 가능 2. 사용방법 ※ immer 사용 시, 설치 필요 (npm install immer or yarn add immer) - produce 함수를 사용하여, 업데이트할 데이터를 전달하고, 업데이트할 내용을 함수 안에서 변경함 const userState = { name: 'Kim', age: 15, }; const newState = userState(state, (draft) => { draft.age += 1; }); console.log(newState); - 중첩된 객체와 배열의 업데이..
![]()
React 프로젝트 생성 원하는 프로젝트에서 cmd에 들어간 후, npx create-react-app 프로젝트명 입력
![]()
useParams 1. useParams - React 애플리케이션에서 동적 URL 파라미터를 추출하는데 사용되는 훅 - 사용자 정의 데이터를 전달하는 데 유용 - 이를 통해, 블로그 게시물 ID or username과 같은 정보를 URL에 포함시킬 수 있음
![]()
NavLink 1. NavLink - React Router에서 제공하는 컴포넌트 - 네비게이션 메뉴 or 링크를 만들 때 사용함 2. 예시 - RouterEx.js - NavLink에서 to로 이동할 URL을 지정 import React from "react"; import { Routes, Route, Navigate, useLocation, NavLink, } from "react-router-dom"; function HomeMainPage() { return ( Home, Main ); } function HomeAboutPage() { return ( HOME, ABOUT ); } export default function RouterEx() { const location = useLocati..
![]()
useLocation 1. useLocation - React Router 라이브러리의 일부 - React 기반 웹 애플리케이션에서 현재 URL의 정보를 가져오는 데 사용되는 훅 - 현재 경로 및 관련 정보에 쉽게 엑세스할 수 있도록 도와줌 2. 예시 - RouterEx.js - location.pathname으로 현재 경로를 나타냄 import React from "react"; import { Routes, Route, Navigate, useLocation } from "react-router-dom"; function HomeMainPage() { return ( Home, Main ); } function HomeAboutPage() { return ( HOME, ABOUT ); } export..
![]()
Router※ 24.05.04 부로 수정하였습니다. 1. RouterRouter란? 사용자의 웹 애플리케이션 내에서 다양한 URL 경로에 따라 다른 컴포넌트를 렌더링하기 위한 도구입니다.React 애플리케이션의 라우팅을 관리하고, URL에 따라 애플리케이션의 다른 부분을 표기할 수 있게 합니다.이를 통해, 사용자가 애플리케이션을 사용할 때, 뒤로 가기, 앞으로 가기, 북마크 등과 같은 브라우징 기능 사용 가능합니다. ※ Router를 사용하려면, React Router 라이브러리를 설치해야 합니다. 2. Router 특징Router에는 여러가지 컴포넌트가 존재합니다.BrowserRouter컴포넌트 최상위에 작성되어 경로 변경에 대해 여러 편의 기능을 제공합니다.Routes여러 Route 컴포넌트를 ..
![]()
Recoil Persist 1. Recoil Persist - Recoil 상태 관리 라이브러리와 함께 사용할 수 있는 라이브러리 중 하나 - Recoil 상태를 로컬 스토리지 or 세션 스토리지와 같은 웹 브라우저 저장소에 영속적으로 저장 및 복원하는 기능을 제공 - 이를 통해, 웹 애플리케이션의 상태를 사용자의 브라우저 세션 간에 유지할 수 있음 - Recoil로 관리되는 상태를 브라우저 저장소에 저장하고, 다시 로드하는 기능을 제공해 애플리케이션의 지속성을 개선
