![]()
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에서 서버 사이드와 클라이언트 사이드 라..
![]()
리액트 개발을 하면서, 컴포넌트를 하나씩 다 생성하고, 커스텀하고, 스타일 하다 보면, 많은 시간이 소모되는 경험이 있으실 겁니다. (저 또한 그랬어요...)ppt 탬플릿처럼 이미 만들어진 컴포넌트를 불러오기만 하면, 원하는 스타일대로 사용할 수 있지 않을까? 해서 MUI라는 것을 찾았습니다! 1. Material UI란?Material UI란? (공식 홈페이지 바로가기)React 애플리케이션에서 사용자 인터페이스(UI) 컴포넌트를 쉽게 만들 수 있도록 도와주는 컴포넌트 라이브러리입니다.이는 일관성 있고 직관적인 UX를 제공하기 위해 만들어졌습니다.즉, 간편하게 컴포넌트를 구성할 수 있다는 얘기지요. 2. MUI 설치바로 설치해봅시다! (공식 홈페이지 설치방법)설치하기 전에, MUI는 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 = () =>..
![]()
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 폴더에서 이미지를 가져와 봅시다..
![]()
데이터 포맷 1. 데이터 포맷 이번엔 데이터 포맷에 대해 알아보겠습니다. 데이터 모팻이란? 데이터를 어떻게 표현하고 구조화하는지에 대한 것입니다. 다양한 종류의 데이터를 처리하고 다룰 때, 사용됩니다. 2. 데이터 포맷 종류 JavaScript에서 자주 사용되는 몇가지 데이터 포맷에 대해 알아봅시다. 1) JSON JSON(JavaScript Object Notation)은 JavaScript에서 데이터를 표현하기 위한 경량의 데이터 형식입니다. 키-값 쌍의 집합으로 구성되어 있으며, 배열과 객체의 형태를 가집니다. JSON의 기본적인 형태는 다음과 같습니다. { "students": [ { "name": "Kim", "age": 20, "sex": "female", "grade": 3 } ] } JS..
![]()
웹 스토리지 1. 웹 스토리지 웹 스토리지에 대해 알아보겠습니다. 웹 스토리지란? 웹 브라우저에서 데이터를 장시간 보관하기 위한 메커니즘입니다. 주로 두가지 유형이 있습니다. 로컬 스토리지(Local Storage) : 브라우저 종료 시에도 유지되는 데이터 세션 스토리지(Section Storage) : 새로 고침 시에도 유지되는 데이터 (같은 탭 내에서만) 웹 스토리지는 쿠키와 달리 요청 헤더에 포함되지 않고, 클라이언트에서만 조정 가능하며, 해당 URL에서만 접근 가능합니다. 2. 웹 스토리지 쓰기, 접근, 삭제 웹 스토리지 쓰기, 접근, 삭제 또한 로컬과 세션으로 나뉩니다. 웹 스토리지 쓰기는 다음과 같은 방법으로 사용합니다. // 1. 웹 스토리지 쓰기 // 로컬 스토리지 localStorage...
![]()
쿠키 받아오기(Cookie) 1. 쿠키 받아오기 이번엔 브라우저 기능인 쿠키에 대해 알아보겠습니다. 쿠키(Cookie)란? 브라우저에 저장되는 작은 크기의 문자열을 뜻합니다. 주로 웹 브라우저에서 사용되며, 웹 서버에서 클라이언트로 전송되어 클라이언트의 로컬 컴퓨터에 저장됩니다. 2. 쿠키의 구성 쿠키의 구성은 다음과 같습니다. Name : 키 Value : 값 Domain : 사용하는 도메인 Path : 접근 경로 Expires / max-age : 쿠키 만료일 HttpOnly : HTTP외의 통신 허용 여부 Secure : 보안 설정 3. 쿠키 설정 쿠키를 설정하는 방법은 크게 두가지가 있습니다. 클라이언트 코드에서는 다음과 같습니다. document.cookie="name=juv; path=/; m..
![]()
네트워크 요청 1. 네트워크 요청 네트워크 요청에 대해 알아봅시다. 네트워크 요청이란? 클라이언트가 서버에 데이터를 요청하거나 보내는 일련의 통신 과정을 말합니다. 2. Fetch API Fetch API는 JavaScript에서 네트워크 요청을 만들고 응답을 다루는 기능을 제공하는 기술입니다. 기존의 XMLHttpRequest 객체보다 더 간결하고 강력한 인터페이스를 제공하합니다. fetch 함수는 주로 다음과 같은 방식으로 사용합니다. fetch('URL', { method: 'POST', // method : 네트워크 요청의 종류 headers: { // headers : 서버에 부가적으로 전달할 정보를 넣음 Cookie: '', }, body: { // body : 데이터를 실어 보내는 필드 na..
![]()
에러 핸들링(Error Handling) 1. 에러 핸들링(Error Handling) 에러 핸들링에 대해 알아봅시다! 에러 핸들링(Error Handling)이란? 코드 실행 중 발생할 수 있는 예외 상황에 대응하는 방법입니다. 올바른 에러 핸들링은 애플리케이션의 안정성을 높이고, UX를 향상 시킵니다. 2. 사용방법 대표적인 에러 핸들링 DOM 이벤트는 다음과 같습니다. try { // 실행하려는 코드 } catch (error) { // error 객체 // 에러 발생 시, 실행할 코드 } finally { // 항상 실행할 코드 } 여기서 error 객체의 속성은 다음과 같습니다. Error { name : 에러명, message : 에러의 상세 내용, stack : 호출 스택, } 예를 들어 봅..
