티스토리

NewBean의 웹과 콩나무
검색하기

블로그 홈

NewBean의 웹과 콩나무

newbean-j.tistory.com/m

프론트엔드 개발자의 성장일기

구독자
1
방명록 방문하기
공지 문의 (juv6262@naver.co⋯ 모두보기

주요 글 목록

  • 리액트에서 타이핑 이벤트 만들기 요즘 리액트를 열심히 공부했는데, 포트폴리오도 리액트로 만들면 좋겠다 해서 리액트로 리메이크하고 있습니다.원래 포트폴리오 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 = "안녕하세요! 저.. 공감수 1 댓글수 0 2024. 6. 19.
  • 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에서 서버 사이드와 클라이언트 사이드 라.. 공감수 0 댓글수 0 2024. 6. 16.
  • Material UI 설치하기 리액트 개발을 하면서, 컴포넌트를 하나씩 다 생성하고, 커스텀하고, 스타일 하다 보면, 많은 시간이 소모되는 경험이 있으실 겁니다. (저 또한 그랬어요...)ppt 탬플릿처럼 이미 만들어진 컴포넌트를 불러오기만 하면, 원하는 스타일대로 사용할 수 있지 않을까? 해서 MUI라는 것을 찾았습니다! 1. Material UI란?Material UI란? (공식 홈페이지 바로가기)React 애플리케이션에서 사용자 인터페이스(UI) 컴포넌트를 쉽게 만들 수 있도록 도와주는 컴포넌트 라이브러리입니다.이는 일관성 있고 직관적인 UX를 제공하기 위해 만들어졌습니다.즉, 간편하게 컴포넌트를 구성할 수 있다는 얘기지요. 2. MUI 설치바로 설치해봅시다! (공식 홈페이지 설치방법)설치하기 전에, MUI는 React 라이브러.. 공감수 0 댓글수 0 2024. 6. 16.
  • 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가 연동되어 있다면, 내가 배포할.. 공감수 1 댓글수 0 2024. 5. 5.
  • Prop Drilling과 Contect API Prop Drilling1. Prop DrillingPropDrilling이란? 컴포넌트 간에 데이터를 전달할 때, 발생할 수 있는 패턴을 뜻합니다.이는 상위 컴포넌트에서 데이터(상태)를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주게 됩니다.중간 컴포넌트 입장에서는 타겟 자식 컴포넌트에게 데이터를 전달해주기 위해 사용하지 않는 프로퍼티를 받게 됩니다.여러 개의 컴포넌트를 거쳐야 한다면, 가장 먼저 Props가 어디서 온 것인지 추적하기 어려워 유지보수에 비효율적입니다.2. Context APIContext API는 React에서 데이터를 전역으로 공유하기 위해 사용하며, 주로 Props Drilling 문제를 해결하기 위해 사용합니다.Context API의 주요 구성 요소와 작동.. 공감수 0 댓글수 0 2024. 4. 29.
  • public 폴더에서 이미지 가져오기 public 폴더에서 이미지 가져오기 1. public 폴더 리액트 프로젝트를 하는 도중, 이미지 파일을 많이 불러와야 하는 상황이 발생하는 경우가 있습니다. import로 이미지를 불러오니, 너무 많은 코드가 작성되고 심지어 지저분합니다.. import로 불러오는 방식 대신 public 폴더에 이미지 파일들을 옮긴 후, 불러오겠습니다! 그 전에, public 폴더에 대해 알아봅시다. public 폴더란? 정적 자산을 호스팅하기 위한 장소입니다. 이 폴더의 파일들은 빌드 프로세스에서 변경되지 않고, 그대로 유지됩니다. CSS 파일, 이미지, 폰트 등의 정적 자산들은 public 폴더에 위치할 수 있습니다. 2. public 폴더에서 이미지 가져오기 그럼 이제, public 폴더에서 이미지를 가져와 봅시다.. 공감수 0 댓글수 0 2024. 4. 22.
  • immer 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); - 중첩된 객체와 배열의 업데이.. 공감수 0 댓글수 0 2023. 9. 8.
  • React 프로젝트 생성 React 프로젝트 생성 원하는 프로젝트에서 cmd에 들어간 후, npx create-react-app 프로젝트명 입력 공감수 0 댓글수 0 2023. 9. 8.
  • useParams useParams 1. useParams - React 애플리케이션에서 동적 URL 파라미터를 추출하는데 사용되는 훅 - 사용자 정의 데이터를 전달하는 데 유용 - 이를 통해, 블로그 게시물 ID or username과 같은 정보를 URL에 포함시킬 수 있음 공감수 0 댓글수 0 2023. 9. 6.
  • NavLink 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.. 공감수 0 댓글수 0 2023. 9. 6.
  • useLocation 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.. 공감수 0 댓글수 0 2023. 9. 5.
  • Router Router※ 24.05.04 부로 수정하였습니다. 1. RouterRouter란? 사용자의 웹 애플리케이션 내에서 다양한 URL 경로에 따라 다른 컴포넌트를 렌더링하기 위한 도구입니다.React 애플리케이션의 라우팅을 관리하고, URL에 따라 애플리케이션의 다른 부분을 표기할 수 있게 합니다.이를 통해, 사용자가 애플리케이션을 사용할 때, 뒤로 가기, 앞으로 가기, 북마크 등과 같은 브라우징 기능 사용 가능합니다.    ※ Router를 사용하려면, React Router 라이브러리를 설치해야 합니다. 2. Router 특징Router에는 여러가지 컴포넌트가 존재합니다.BrowserRouter컴포넌트 최상위에 작성되어 경로 변경에 대해 여러 편의 기능을 제공합니다.Routes여러 Route 컴포넌트를 .. 공감수 0 댓글수 0 2023. 9. 5.
  • Recoil Persist Recoil Persist 1. Recoil Persist - Recoil 상태 관리 라이브러리와 함께 사용할 수 있는 라이브러리 중 하나 - Recoil 상태를 로컬 스토리지 or 세션 스토리지와 같은 웹 브라우저 저장소에 영속적으로 저장 및 복원하는 기능을 제공 - 이를 통해, 웹 애플리케이션의 상태를 사용자의 브라우저 세션 간에 유지할 수 있음 - Recoil로 관리되는 상태를 브라우저 저장소에 저장하고, 다시 로드하는 기능을 제공해 애플리케이션의 지속성을 개선 공감수 0 댓글수 0 2023. 9. 4.
  • atomFamily atomFamily 1. atomFamily - Recoil에서 제공하는 중요한 개념 중 하나로, 동적으로 생성되는 상태를 처리하는 데 사용 - 동적으로 생성되는 상태에 대한 일반적인 패턴을 쉽게 구현 가능 2. 사용방법 import { atom, atomFamily } from 'recoil'; // atomFamily를 사용하여 동적으로 생성된 상태를 정의 const noAtomFamily = atomFamily({ key: 'noAtomFamily', // 고유한 키를 제공 default: (no) => no, // 상태의 기본값을 설정 }); // atomFamily를 사용하여 여러 상태를 생성 const noAtom1 = noAtomFamily('no1'); const noAtom2 = noAt.. 공감수 0 댓글수 0 2023. 9. 4.
  • Atoms Atoms 1. Atoms - Recoil에서 가장 중요한 개념 중 하나 - 애플리케이션의 상태를 나타내는 단위로, 전역적으로 공유되어야 하는 데이터를 저장하는데 사용 - 각 atom은 고유한 키를 가지며, 초기 상태를 가질 수 있음 - Atom은 읽기 및 쓰기 작업을 할 수 있는 상태를 나타냄 2. 예시 - RecoilEx.js import React, { useState } from "react"; import { Button } from "@mui/material"; import { atom, useRecoilState } from "recoil"; const page1NoAtom = atom({ key: "RecoilEx/page1NoAtom", default: 0, }); const page2N.. 공감수 0 댓글수 0 2023. 9. 1.
  • Recoil Recoil 1. Recoil - Facebook에서 개발한 React 애플리케이션의 상태 관리 라이브러리 - React 애플리케이션에서 상태를 관리 및 공유하는 데 도움을 주는 도구 - 컴포넌트 간에 데이터를 전달하고 업데이트하기위한 간편한 방법을 제공 2. Recoil의 주요 특징 및 개념 - Atoms - Recoil에서 가장 중요한 개념 중 하나 - 애플리케이션의 상태를 나타내는 단위로, 전역적으로 공유되어야 하는 데이터를 저장하는데 사용 - 각 atom은 고유한 키를 가지며, 초기 상태를 가질 수 있음 - Atom은 읽기 및 쓰기 작업을 할 수 있는 상태를 나타냄 - Selectors - atom에서 파생된 값을 계산하고 반환하기 위한 함수 - 다른 atom or 다른 selector를 기반으로.. 공감수 0 댓글수 0 2023. 9. 1.
  • useCallback useCallback 1. useCallback - React의 Hook - 함수 컴포넌트 내에서 함수를 Memoization하고 재사용하기 위해 사용되는 도구 - 불필요한 함수 재생성을 방지하고 성능을 최적화할 수 있음 - 일반적으로 React 컴포넌트 내에서 함수 정의 시, 컴포넌트 리렌더링될 때마다 새로운 함수 인스턴스가 생성 → 이는 성능 저하를 초래하여, 이 문제를 해결하기 위해 useCallback을 사용 → 함수를 캐싱하고 이전에 생성된 함수 인스턴스를 재사용함 2. 예시 - App.js import React, { useState, useCallback } from "react"; import "./App.css"; let SubCallCount = 0; function Sub({ no1,.. 공감수 0 댓글수 0 2023. 8. 11.
  • React.memo React.memo 1. React.memo - React에서 사용되는 성능 최적화를 위한 기능 - 컴포넌트가 이전에 렌더링한 결과를 기억하고, 동일한 속성(props)로 다시 렌더링될 때, 이전 결과를 재사용할 수 있음 - 부모 컴포넌트가 업데이트되더라도, 컴포넌트의 속성이 변경되지 않았다면, React.memo를 사용해 불필요한 렌더링을 방지하고 성능을 향상시킴 2. 사용방법 import React from 'react'; const MyComponent = React.memo(props => { // 컴포넌트 렌더링 로직 }); export default MyComponent; 공감수 0 댓글수 0 2023. 8. 11.
  • useMemo useMemo 1. useMemo - React의 훅 중 하나로, 성능 최적화를 위해 사용 - 계산 비용이 높은 함수 결과를 이전 계산 결과와 비교해, 이전 결과와 동일하다면 이를 재사용하여, 렌더링 성능 향상 2. useMemo 구문 - dependency 들은 이 함수가 의존하는 값들을 나타냄. → 의존성 값들이 변경되었을 때만 다시 실행되고, 그렇지 않으면 계산한 결과를 재사용 const memoizedValue = useMemo(() => { // 계산 비용이 높은 작업 수행 return result; }, [dependency1, dependency2, ...]); 3, 예시 - App.js import React, { useState, useMemo } from "react"; import ".. 공감수 0 댓글수 0 2023. 8. 11.
  • useRef useRef 1. useRef - React 라이브러리에서 제공하는 훅(Hook) - 함수형 컴포넌트 내에서 DOM 요소 or 값을 참조할 때, 사용되는 도구 - 이를 통해, 컴포넌트의 렌더링 사이클과는 독립적으로 값을 저장 및 유지 가능 → useState와 달리, 리렌더링을 하지 않고 값을 저장 및 유지함 2. 예시 - RefEx.js import React, { useState, useRef } from "react"; function RefEx() { const formInputNoRef = useRef(null); const [no, setNo] = useState(""); const notice = () => { formInputNoRef.current.focus(); if (!no) { al.. 공감수 0 댓글수 0 2023. 8. 8.
  • props props 1. props - React 라이브러리를 사용하는 컴포넌트 기반의 웹 애플리케이션에서 사용되는 용어 - React 컴포넌트는 함수 or 클래스 형태로 정의될 수 있으며, 이들은 속성을 받아들일 수 있음 - 이러한 속성들은 컴포넌트 내부에서 사용되어, 컴포넌트의 동작 or 표시 내용을 결정하는데 활용 2. 사용방법 - ProductListItem.js import React, { useState } from "react"; function ProductListItem(props) { // props를 사용하여, 데이터 전달 const imgNo = props.imgNo; const productName = props.name; const productPriceFormatted = props.p.. 공감수 0 댓글수 0 2023. 8. 2.
  • JSX JSX 1. JSX (JavaScript XML) - React와 같은 JavaScript 라이브러리를 위해 만들어진 확장 문법 - JavaScript 코드 안에서 XML과 비슷한 형태의 마크업을 작성할 수 있음 2. JSX의 특징 - JavaScript의 확장 문법이기 때문에, JavaScript 코드와 매우 유사 - XML과 비슷한 구조를 가지고 있어, 태그들을 사용하여 컴포넌트를 정의 및 중첩 가능 - JSX 조각을 별도의 변수로 분리 가능 3. 예시 - NumberCounter.js import React, { useState } from "react"; const NumberCounter = () => { const [no, setNo] = useState(0); // 별도의 변수로 분리 con.. 공감수 0 댓글수 0 2023. 7. 28.
  • useMemo useMemo 1. useMemo - 복잡한 연산 or 계산이 필요한 값을 Memoization하여, 성능을 최적화하는 데 사용 ※ Memoization : 이전에 계산한 값을 저장하여, 동일한 입력이 주어질 때, 다시 계산하는 대신, 저장된 값을 반환 - 특정 값이변경될 때만, 해당 값을 다시 계산하고, 그렇지 않은 경우, 이전에 계산된 값을 재사용할 수 있음 2. 사용방법 const a = useMemo(() => { // 계산하고자 하는 값 or 연산 }, [b]); - [b] : 의존성 목록으로, 이 목록에 포함된 값들이 변경될 때에만 useMemo의 콜백 함수를 실행 ※ 의존성 목록이 변경되지 않으면, 이전에 계산된 값을 재사용함 ※ 의존성 목록 생략 시, useMemo의 콜백 함수는 한 번만 .. 공감수 0 댓글수 0 2023. 7. 10.
  • Reducer Reducer 1. Reducer - 상태 관리를 위해 사용 - 복잡한 상태를 가진 컴포넌트에서 상태 업데이트 로직을 분리하여 관리할 수 있음 - 즉, 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수임 2. 사용방법 - ReducerEx.js import React, { useReducer } from "react"; function reducer(state, action) { switch (action.type) { case "INCREMENT": return { value: state.value + 1 }; case "DECREMENT": return { value: state.value - 1 }; default: return state; } } const ReducerE.. 공감수 0 댓글수 0 2023. 7. 7.
  • Context Context 1. Context - React 애플리케이션에서 컴포넌트 간에 데이터를 전달하는 메커니즘 - 중간 컴포넌트를 건너뛰고, 컴포넌트 트리 내에서 데이터를 직접 전달할 수 있음 - 즉, Context는 state를 쉽게 공유할 수 있게 함 2. 사용방법 - ContextEx.js import React, { createContext, useContext } from "react"; // Context를 사용하여, background의 색을 지정 const ThemeContext = createContext("pink"); const ContextEx = () => { const theme = useContext(ThemeContext); const style = { width: "100px",.. 공감수 0 댓글수 0 2023. 7. 7.
  • useEffect useEffect 1. useEffect - React 라이브러리에서 제공하는 훅(Hook) 중 하나 - 함수형 컴포넌트에서 부작용(side effect)을 처리하기 위해 사용 ※ 여기서 부작용이란? 컴포넌트 외부와의 상호작용을 의미 - useEffect를 사용 시, 컴포넌트가 렌더링되고 난 후, 특정 작업을 수행할 수 있음 - 컴포넌트의 생명주기와 관련된 작업을 처리 ※ 컴포넌트 생명주기 : 컴포넌트가 생성되고 소멸될 때까지의 과정 - useEffect 함수는 두 개의 매개변수를 받음 - 첫 번째 매개변수는 작업을 담은 콜백 함수 (컴포넌트가 렌더링될 때마다 실행됨) - 두 번째 매개변수는 의존성 배열(dependency array)로, 배열에 지정된 값이 변경될 때만 콜백 함수를 실행 2. 사용방법 .. 공감수 0 댓글수 0 2023. 7. 5.
  • useState useState 1. useState - React 라이브러리에서 제공하는 훅(Hook) 중 하나 ※ 훅(Hook) : 함수형 컴포넌트에서 상태(State) 관리와 기능들을 사용하기 위한 기능을 제공하는 함수 - 함수형 컴포넌트에서도 상태(State)를 관리할 수 있음 - 배열 형태의 반환값을 가지며, 배열의 첫 번째 요소는 현재의 상태 값, 두 번째 요소는 상태 값을 변경할 수 있는 함수 2. 사용법 - Counter.js import React, { useState } from "react"; const Counter = () => { // 변수 선언 const [value, setValue] = useState(0); return ( 현재 카운터 값은 [{value}]입니다. {/* 버튼 클릭 시,.. 공감수 0 댓글수 0 2023. 7. 5.
  • 외부 컴포넌트 파일을 이용한 출력 외부 컴포넌트 파일을 이용한 출력 1. 외부 컴포넌트 파일을 이용한 출력 - React는 외부 컴포넌트 파일을 이용하여 출력할 수 있음 - 효율성이 높고, 수정이 용이함 2. 사용방법 - 외부 파일을 하나 생성 (ex : HelloWorld.js) - 외부 파일에 다음과 같이 입력 - HelloWorld.js에 다음과 같이 입력 import React from "react"; const HelloWorld = () => { return ( Hello World!! ); }; export default HelloWorld; - App.js에 다음과 같이 입력 import React from "react"; // import로 외부 컴포넌트를 불러옴 import HelloWorld from "./HelloW.. 공감수 0 댓글수 0 2023. 7. 4.
  • React React 1. React - 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리 - 컴포넌트 기반 아키텍처를 사용하여 웹 및 모바일 애플리케이션의 UI를 구축하는 데 사용 - JSX라는 문법을 제공하여, JavaScript와 HTML을 조합하여, 컴포넌트를 작성할 수 있도록 함 ※ JSX : JavaScript XML의 약자로, React와 함께 사용되는 JavaScript 확장 문법 - 다양한 확장성과 유용한 라이브러리 및 도구를 제공 2. React 설치 - npx를 사용하기 위해 node.js를 설치함 - 원하는 폴더에 cmd로 접속한 후, npx create-react-app . 이라고 입력 - 그 후, VScode에 들어간 뒤, 터미널에 npm run start 라고 입력 - 그러면.. 공감수 0 댓글수 0 2023. 7. 4.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.