회고

이전 글: React 훅(Hook)의 정의와 특징훅(Hook)이란?함수형 컴포넌트에서 React의 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수훅의 종류React는 여러 가지 기본 훅을 제공한다. 가장 많이 사용되는 훅은 다음과 같다.useState: 상태를 관리useEffect: 부수 효과(Side Effect)를 관리useContext: Context API를 사용하여 전역 상태를 관리useReducer: 복잡한 상태 로직을 관리useState와 useEffect 설명1. useState상태를 선언하고 업데이트할 수 있게 해주는 훅상태가 변경되면 컴포넌트가 리렌더링된다.import React, { useState } from 'react';function Coun..

훅이란? 함수형 컴포넌트에서 React의 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수왜 훅(Hooks)이 필요했나?컴포넌트 내부에 캡슐화 된 로직은 다른 컴포넌트와 공유가 쉽지 않았다. 결국 로직을 재사용하기 위해 React 앱에서 Render Props, HOC와 같은 복잡한 패턴을 사용해야 했다. 1. 함수의 한계: 상태 관리 불가능함수는 순수한 로직을 재사용하기에 적합하지만, 상태를 내부적으로 관리할 수 없다. function Counter() { let count = 0; // 이 변수는 함수가 호출될 때마다 초기화됨 const increment = () => { count += 1; console.log(count); }; return i..

멋쟁이사자처럼 2주차 과제로 React + Vite 프로젝트 템플릿을 구성하는 과정과 유의점을 정리  1. Git Git 초기화프로젝트 버전 관리를 위한 Git 초기화git init # -b mainGit 관리 제외➕ .gitignoreGit 관리 제외 파일 - 제외 항목을 추가한다. 라인 엔딩 설정라인 엔딩(line ending): 텍스트 파일 줄의 끝을 나타내는 문자나 문자 조합 UNIX 계열에서는 \\n을 사용하지만, MS-DOS와 Windows에서는 \\r\\n을 사용Windows에서 작성한 파일을 macOS에서 열면 줄 바꿈 표시가 잘못될 수 있어, 모든 텍스트 파일의 줄 바꿈 문자를 자동 변환하도록 설정한다. ➕ .gitattributestext eol=lf 2. 에디터 구성 및 기본 메타 데..

이벤트 위임이벤트가 발생한 요소가 아니라, 부모 요소에서 이벤트를 처리하는 기법. 이벤트가 발생한 요소에 이벤트 핸들러를 설정하는 대신, 해당 이벤트가 버블링(Bubbling)되어 부모 요소에게 전달 될 때 부모 요소에서 이를 처리한다. 즉 이벤트가 부모 요소에 위임(delegation)된다.이벤트 위임의 각기 다른 2가지 사례를 통해 이벤트 위임을 알아보자. 이벤트 위임 사례 1ul 안의 특정 li박스를 클릭 했을 때 강조 적용하기 HTML 박스 박스 박스 박스 JSul.onclick = function (e) { let li = e.target.closest("li");//(1) if (!li) return; if (!ul.contains(li)..

Dom 이벤트의 흐름1. 캡처링이벤트가 하위 요소로 전파되는 단계2. 타깃 단계이벤트가 실제 타깃 요소에 전달되는 단계3. 버블링이벤트가 상위 요소로 전파되는 단계출처: JavaScript Event Flow: Bubbling, Capturing, and Delegation Decoded!를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파된다.(버블링 단계).Dom 이벤트 흐름의 특징캡처링 단계를 사용하는 경우는 거의 없다. 이벤트 타겟 순서는 기본적으로 버블링이다. 이전에는 이벤트 타겟 순서가 브라우저별로 달랐지만, W3C에서 표준 이벤트 실행 순서를 지정했다.타깃이 되는 가장 하위 요소부터 이벤트를 상위로..

Board page기기거래 외 전체 게시판 표시 페이지*Layout : RegionMenu 유기체 컴포넌트 - 현재 아이디 기반 지역 표시(pocketbase)버튼 카테고리 - 주제 클릭 시 주제목록 표시, '같이해요' 클릭 시 '같이해요'게시판 이동게시글 컴포넌트 - pocketbase에서 같이해요와 질의응답 페이지를 조인하여 출력 및 각 카테고리 양식 최적화 *Layout: Header 유기체 컴포넌트 - clickEvent를 index로 받아 한 아이콘만 클릭할 수 있게 제작 단순 게시글 표시 이미지에 빈 alt속성 부여, 텍스트와 중복되는 alt속성 삭제 조도 개선- 웹 접근성 70->100 향상BoardWith page주제 선택 시 주제에 해당하는 게시글 출력최근작성, 모집 중인 글만 확인 가능..