@function 1. @function - 사용자 정의 함수를 만들어 스타일 시트에서 재사용 가능한 코드를 작성하는데 사용 - 스타일 속성을 계산하거나 값을 조작할 수 있으며, 더욱 유연한 스타일링 가능 2. 사용법 See the Pen Tistory_Front-End Study_Sass_@function_2. 사용방법 by NewBean0312 (@newbean0312) on CodePen.
Front-End Study
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로 관리되는 상태를 브라우저 저장소에 저장하고, 다시 로드하는 기능을 제공해 애플리케이션의 지속성을 개선
localStorage 1. localStorage - JavaScript에서 localStorage는 웹 브라우저에서 데이터를 로컬로 저장하고, 유지할 수 있는 웹 스토리지 메커니즘 - 클라이언트 측에서 데이터를 영구적으로 저장하기 위한 간단하고 편리한 방법을 제공 - 사용자의 브라우저 세션 간에 데이터를 유지하며, 브라우저를 닫았다 열어도 데이터가 유지됨 2. 사용방법 - 데이터 저장 // localStorage.setItem('키', '값'); // 예시 localStorage.setItem('a', 10); localStorage.setItem('b', 20); console.log(localStorage); - 브라우저 안에 키와 값이 저장됨 - 데이터 가져오기 // const a = local..
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..
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..
Recoil 1. Recoil - Facebook에서 개발한 React 애플리케이션의 상태 관리 라이브러리 - React 애플리케이션에서 상태를 관리 및 공유하는 데 도움을 주는 도구 - 컴포넌트 간에 데이터를 전달하고 업데이트하기위한 간편한 방법을 제공 2. Recoil의 주요 특징 및 개념 - Atoms - Recoil에서 가장 중요한 개념 중 하나 - 애플리케이션의 상태를 나타내는 단위로, 전역적으로 공유되어야 하는 데이터를 저장하는데 사용 - 각 atom은 고유한 키를 가지며, 초기 상태를 가질 수 있음 - Atom은 읽기 및 쓰기 작업을 할 수 있는 상태를 나타냄 - Selectors - atom에서 파생된 값을 계산하고 반환하기 위한 함수 - 다른 atom or 다른 selector를 기반으로..
findIndex 함수 1. findIndex( ) 함수 - 배열 내에서 주어진 조건을 만족하는 첫 번째 요소의 인덱스를 찾는 데 사용되는 배열 메서드 - 콜백 함수를 이용하여 요소를 검색하며, 조건을 만족하는 요소를 찾으면, 해당 요소의 인덱스를 반환 ※ 조건을 만족하는 요소가 없을 시, -1을 반환 2. 예시 const todos = [ { id:10, content:"운동", }, { id:5, content:"목욕", }, { id:2, content:"공부", }, ]; function removeTodo(deleteIndex) { // index가 deleteIndex와 다른 것 들만 반환 return todos.filter((_, index) => index != deleteIndex); }..
fill 함수 1. fill( ) 함수 - 배열의 모든 요소를 지정한 값으로 채우는 메서드 - 원본 배열을 변경하며, 새로운 배열을 반환하지 않음 2. 구문 - value : 배열의 요소를 채울 값 - start : 채우기가 시작될 인덱스 (기본값 : 0) (선택 사항) - end : 채우기가 종료될 인덱스. 즉, 이 인덱스의 요소는 포함되지 않음 (기본값 : array.length) (선택사항) array.fill(value[, start[, end]]) 3. 예시 const numbers= [1, 2, 3, 4, 5]; // 2번째 부터 4번째까지 0으로 변경 numbers.fill(0, 1, 4); console.log(numbers);
every 함수 1. every( ) 함수 - 배열의 모든 요소가 주어진 조건을 만족하는지 확인하고 boolean 값을 반환 - 배열의 모든 요소가 조건을 충족할 때만, 'true'를 반환 - 조건을 만족하지 않는 요소가 있다면 'false'를 반환 2. 예시 // 모든 숫자가 짝수인지 확인 const numbers = [2, 4, 6, 8, 10]; const allEven = numbers.every(number => number % 2 === 0); console.log(allEven); // true // 모든 단어가 'a'로 시작하는지 확인 const words = ['apple', 'banana', 'cherry', 'watermelon']; const allStartWithA = words...
