DDOstory

아코디언 디자인은 shadcn/ui의 Accordion을 사용하여 구현하였습니다single 타입 ( Accordion Type = "single" )한 번에 하나의 아코디언 아이템만 펼쳐진 상태로 유지됩니다새로운 아이템을 펼치면 이전에 펼쳐져 있던 아이템은 자동으로 접힙니다사용자가 한 번에 하나의 정보에만 집중하도록 유도합니다사용 시나리오FAQ 페이지사용자가 궁금한 질문을 클릭하면 답변이 펼쳐지고, 다른 질문을 클릭하면 이전 답변은 접히도록 하여 깔끔한 정보 제공이 가능합니다설정 매뉴여러 설정 옵션 중 현재 활성화된 옵션만 보여주고, 다른 옵션을 선택하면 이전 옵션은 숨깁니다단계별 폼복잡한 폼을 단계별로 나누어 한 번에 하나의 단계만 보여줌으로써 사용자의 집중도를 높이고 폼 작성 과정을 간소화합니다장점정..

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, XMLHttpRequest보다 강력하고 유연한 대체제Fetch API 개념 Fetch API는 Request와 Response 객체, 그리고 기타 네트워크 요청에 관련된 것들을 사용하고 CORS와 HTTP Origin 헤더 행동 등 관련한 개념도 포함Fetch API 사용법요청을 생성하고 리소스를 취득하려면 fetch 메서드를 사용fetch()는 window와 worker 컨텍스트 양쪽에서 모두 사용할 수 있는 전역 메서드리소드를 취득할 상황이 생기는 거의 모든 컨텍스트에서 사용 가능fetch() 메서드는 하나의 필수 매개변수로 가져오려는 리소스 경로를 받음반환 값은 해당 요청에 대한 Response로 이행하는 prom..

useTabsimport React, {useState} from "react";import ReactDOM from "react-dom";const content = [ { tab: "Section1", content: "I'm the content of the Section 1" }, { tab: "Section2", content: "I'm the content of the Section 2" },];const useTabs = (initialTab, allTabs) => { if (!allTabs || !Array.isArray(allTabs)) { return; } const [currentIndex, setCurrentInde..

useInputimport React, {useState} from "react";import ReactDOM from "react-dom";const useInput = initialValue = { const [value, setValue] = useState(initialValue); return {value};};const App = () => { const name = useInput("Mr."); return ( Hello `);};const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);input를 업데이트함 useInput은 init..

useStateimport React from "react";import ReactDOM from "react-dom";function App() { return ( Hello Start editing to see some magic happen! );};const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);useState는 항상 2개의 value를 return첫번째 value를 item두번째 value는 값을 변경하게 함import React, {useState} from "react" // useState를 importconst [item, se..

useTitle - react document의 title을 몇개의 hooks와 함께 변경useInput - input 역할을 그대로 함usePageLeave - 유저가 page를 벗어나는 시점을 발견하고 함수를 실행useClick - element를 클릭하는 시점useFadeIn - 어떤 Element든 상관없이 애니메이션을 Element 안으로 서서히 사라지게 함useFullscreen - 어떤 Element든 풀스크린으로 만들거나 일반 화면으로 돌아가게 할 수 있음useHover - 어떤 것에 마우스를 올렸을 때 감지useNetwork - Online 또는 Offline 상태인지 감지useNotification - notification API를 사용할 때 유저에게 알림을 보냄useScroll - ..

🛜 useCounter() Custom Hook 만들기useCounter Hook은 초기 카운드 값을 파라미터로 받아서 카운트라는 이름의 state를 생성하여 값을 제공하고 카운트 증가 및 감소를 편리하게 할 수 있도록 함수를 제공하는 HookuseCounter Hook을 사용하면 어떤 함수 컴포넌트에서든지 카운트 기능을 쉽게 사용 가능🛜 Accommodate Component 만들기Accommodate 컴포넌트는 useCount 훅을 사용하여 카운트를 관리최대 카운트 개수는 maxCapacity라는 이름의 상수로 정의되어 있고 카운트 개수가 최대 용량을 초과하면 경고 문구가 표시되며 더 이상 입장이 불가능useEffect 훅의 작동 방식을 사용하기 위해 일부러 두 개의 useEffect 훅을 사용하..

🖨️ Component컴포넌트 기반의 구조라는 중요한 특징을 가지고 있음모든 페이지가 컴포넌트로 구성되어 있으며 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성컴포넌트를 끼워 맟춰서 새로운 컴포넌트를 개발하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어 자연스레 개발 시간과 유지 보수 비용도 줄일 수 있음자바스크립트의 함수와 비슷React 컴포넌트의 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴React 컴포넌트는 만들고자 하는 대로 props. 즉 속성을 넣으면 해당 속성에 맞춰 화면에 나타날 엘리먼트를 만들어주는 것🖨️ Props리액트 컴포넌트의 입력Props는 prop 뒤에 복수형을 나타내는 s를 붙여서 props이 여러 ..

😭 Automatic Batching앞에서 배운 것처럼 리액트 컴포넌트는 상태가 업데이트될 때마다 재렌더링이 이뤄지기 때문에, 함수 컴포넌트에서 각각의 스테이트가 업데이트될 때마다 재렌더링이 발생유즈 스테이트 훅을 사용해서 선언한 각 스테이트들의 set 함수를 거의 동시에 호출하더라도 호출된 횟수만큼 재렌더링이 발생이러한 문제를 해결하기 위해서 여러 상태의 업데이트가 동시에 발생하면 이 작업들을 묶어서 한번에 처리하는 것이 배칭배칭은 컴퓨터 공학에서 여러 가지 작업을 한 번에 처리한다는 의미를 갖고 있음리액트에서의 배칭은 여러 상태의 업데이트 작업을 한 번에 묶어서 처리하는 것이라고 이해하면 됨기존 리액트 버전에서는 이러한 배칭이 리액트 이벤트 핸들러 내에서만 이루어짐리액트 버전 18에서 오토메틱 배칭..

15.리액트 styled-components를 사용하여 컴포넌트 스타일링 🤯 css와 styled Components를 사용하여 직접 컴포넌트를 스타일링 코드를 작성하기 전에 styled-components 패키지 설치npm install 명령어는 npm이라는 패키지 관리 서비스에 등록되어 있는 패키지를 설치할 수 있도록 하는 명령어Blocks 컴포넌트는 실제로 스타일드 컴포넌트를 사용하여 스타일링하는 컴포넌트스타일드 컴포넌트를 사용하는 방법과 css 코드의 전체적인 구조를 잘 기억해야함블락스 컴포넌트를 화면에 렌더링하기 위해서 index.js 파일 수정vscode의 상단에서 Terminal -> New Terminal을 눌러 새로운 터미널을 하나 실행시킴웹 브라우저의 창이 열리면서 포트에 접속이 됨화..