❓ 정의- Fragment는 React에서 여러 JSX 요소를 하나의 부모 요소로 감싸야 할 때, 추가적인 DOM 노드를 생성하지 않고 그룹화할 수 있도록 도와주는 컴포넌트다.- 일반적으로 JSX 문법에서는 하나의 부모 요소만 반환해야 하는 제약이 있는데, Fragment는 이러한 제약을 해결하면서도 DOM 구조를 간결하게 유지하고 성능을 최적화하는 데 도움을 준다. - React 개발자들이 컴포넌트를 설계할 때 불필요한 태그를 제거하고, 가독성과 유지보수성을 높이는 데 유용하다.▶ 기본 사용 예시import React from "react";function App() { return ( Title Description );}단축 문법( )을 사용하면 더 간결하게 작..

여태 진행했던 프로젝트들에선 zustand로만 전역 상태 관리를 했었다.const { setSelectedTheme, selectedThemeType } = useIngameThemeStore()그리고 이런 식으로 아주 간단하게 사용하고 있었으나... 최적화를 할 수 있는 방법을 우연찮게 알아냈다. 이걸왜이제서야바로 Selector와 shallow의 조합이다.import { shallow } from "zustand/shallow";const { setSelectedTheme, selectedThemeType } = useIngameThemeStore( (state) => ({ setSelectedTheme: state.setSelectedTheme, selectedThemeType: sta..

❓ useMemo- 계산 비용이 높은 작업의 결과를 메모이제이션하여 동일한 입력값에 대해 반복적으로 계산하지 않도록 한다. ▶ 기본 사용 예시import React, { useMemo } from 'react';function ExpensiveCalculationComponent({ num }) { const result = useMemo(() => { console.log('Expensive calculation...'); return num * 2; }, [num]); return Result: {result};}❓ useCallback- 함수 자체를 메모이제이션하여 렌더링 시 불필요하게 함수가 재생성되지 않도록 한다. 주로 자식 컴포넌트에 콜백을 전달할 때 사용된다.▶ 기본 사용 예..

❓ 정의- 시멘틱 마크업(Semantic Markup)은 HTML 요소를 사용해 콘텐츠의 의미와 목적을 명확히 전달하는 방식이다.- 단순히 콘텐츠의 외형을 정의하는 것이 아니라, 각 요소가 담고 있는 정보의 역할과 의미를 설명한다.- 예) 는 페이지 머리글, 은 독립적인 콘텐츠, 는 내비게이션 링크, 는 페이지 하단 정보▶ 기본 사용 예시 My Website Article Title Article Content Copyright © 2025❗ 사용이유✅ 접근성 향상- 스크린 리더와 같은 보조 기술이 시멘틱 요소를 통해 콘텐츠의 구조와 의미를 더 잘 이해할 수 있다. 예를 들어 는 내비게이션 영역으로 인식되어 사용자가 주요 콘텐츠로 바로 이동할 수 있다.✅ SEO 개선- 검색 엔진은 ..

❓ JWT access Token- JWT Access Token은 사용자가 인증된 상태를 유지하고, 서버와 클라이언트 간 안전하게 정보를 교환하기 위해 사용된다. 이 토큰은 API 요청 시 Authorization 헤더에 포함되어 서버에서 인증을 처리할 수 있도록 한다.▶ 기본 사용 예시1. 사용자가 로그인하면 서버에서 Access Token과 Refresh Token을 발급2. 클라이언트는 Access Token을 저장하여 이후 API 요청 시 사용3. Access Token이 만료되면 Refresh Token을 사용해 새로운 Access Token을 발급❗ 사용이유✅ Stateless 인증- Access Token은 서버가 상태를 저장하지 않아도 인증을 처리할 수 있어 확장성이 뛰어나다.✅ 빠른 검..

프로그래머스의 프론트엔드 과제테스트 중 자바스크립트의 정렬 문제가 나왔다.여태 진행했던 프로젝트들에선 정렬을 백엔드에서 처리했었기 때문에 조금 당황했다... 이참에 정리해두고자 한다.❓ Array.prototype.sort()- Array.prototype.sort() 메서드는 배열의 요소를 제자리에서 정렬하며, 정렬된 배열에 대한 참조를 반환한다.- 기본적으로 배열의 요소를 문자열로 변환한 후, UTF-16 코드 유닛 값을 기준으로 정렬한다.▶ 기본 사용 예시const fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.sort();console.log(fruits); // ["Apple", "Banana", "Mango", "Orange"]문자열을 사전 ..