죽이죽이

Custom Hook ※ 사용하는 이유 - 재사용이 가능한 로직을 별도의 함수로 만들어 다른 컴포넌트에서도 사용 가능하게 할 수 있다. - React에서 제공하는 built-in-hook과 동일하게 use로 시작하는 네이밍 컨벤션을 따른다. ※ 예시 - App.js const [tasks, setTasks] = useState([]); const transformTasks = (tasksObj) => { const loadedTasks = []; for (const taskKey in tasksObj) { loadedTasks.push({ id: taskKey, text: tasksObj[taskKey].text }); } setTasks(loadedTasks); }; const { isLoading, ..

debounce ※ 설명 - 동일한 이벤트가 반복해서 실행되는 경우 일정 시간 지연 시킨 후 처리한다. - 일정 시간 안에 동일 이벤트가 다시 발생하면 마지막 발생 시점부터 일정 시간을 지연한다. ※ 예시 import React, { useEffect, useState } from "react"; export default function CleanUp() { const [text, setText] = useState(""); const [textIsValid, setTextIsValid] = useState(false); // useState로 선언한 text의 값이 바뀔때마다 useEffect 내부 실행 useEffect(() => { // 0.5초 마다 Validation 진행 const timer..

Portal ※ Portal이란? - DOM의 일부 자식 컴포넌트를 DOM의 다른 부분으로 렌더링 할 수 있게 해주는 기능이다. ※ Portal을 사용하는 이유 - 대표적으로 modal 같은 경우는 전체 컴포넌트에 뒤덮힐 수 있는 요소이기 때문에 최상위 요소(html, body) 하위에 있어야 한다. - 또한 부모 컴포넌트의 스타일링의 영향을 받게 되기때문에 별도의 번거로운 후처리를 해주어야 한다. - 이를 Portal을 사용하여 부모-자식 관계를 유지하면서 독립적으로 원하는 위치에서 동작을 할 수 있게 해준다. ※ 사용 방법 ※ 예시 - index.html // 모달을 렌더링해줄 새로운 html 요소 생성 // 모달을 렌더링해줄 새로운 html 요소 생성 - Dice.jsx {ReactDOM.creat..

데이터 정렬 방법 ※ Number - string 타입으로 변환 후 비교를 한다. // 숫자가 10 미만일때는 정상적으로 정렬이 된다. const numberList1 = [5, 7, 2, 4]; console.log(numberList1.sort()); // [2, 4, 5, 7] // 숫자가 10이 넘어가면서부터 원하는 방향과 다르게 정렬이 된다. const numberList2 = [5, 10, 1, 7]; console.log(numberList2.sort()); // [1, 10, 5, 7] // sort 함수 내부에서 비교함수를 사용해서 비교할 경우 정상적으로 정렬이 된다. // 비교함수에서 a값은 앞에 값, b값은 뒤에 값을 가리킨다. console.log(numberList2.sort((a..

이벤트 버블링이란? ※ 이벤트 버블링이란? - 이벤트가 발생한 하위 요소에서 시작해 상위 요소로 전파되는 단계이다. - 하위 요소를 감싸는 모든 상위 요소는 해당 이벤트를 감지할 수 있다. ※ 예시 - addEventListener의 3번째 인자로 아무값도 넣어주지 않을 경우 default 값은 버블링이다. Child ※ id="third" 요소 클릭 - third 요소에서 시작해서 이벤트가 상위 요소로 전파된다. (third => second => first => parent 순서) 이벤트 캡처링이란? ※ 이벤트 캡처링이란? - 이벤트가 최상위 요소에서 시작해 하위 요소로 전파되는 단계이다. ※ 예시 - addEventListener의 3번째 인자로 true 값을 넣어줄 경우 이벤트 캡처링이 일어난다...

디버깅이란? ※ 디버깅이란? - 개발 과정에서 발생하는 오류나 버그를 찾아내고 수정하는 과정을 뜻한다. 에러의 종류 ※ 컴파일 에러 - 컴파일을 할 때 발생하는 에러이다. - Syntax Error, Type Error, Refernece Error 등 ※ 런타임 에러 - 컴파일 과정을 마친 후에 사용자에 의해 실행 시 발생하는 에러이다. - 0 나누기 오류, Null 참조 오류, 메모리 부족 오류 중단점 (break points) 찍기 ※ 소스코드에서 중단점 찍기 - 문제의 원인으로 추정되는 함수에 debugger 코드 작성 - 플레이어 추가 버튼 실행 - debugger에 의해 중지 - 다음 코드 확인 ※ 브라우저에서 중단점 찍기 - 개발자 도구 키기

CSS Frameworks TailwindCSS ※ 장점 - HTML과 CSS 파일을 별도로 관리할 필요가 없다. - 클래스 명을 고민할 필요가 없다. - 디자인이 일관되어있다. - 자유롭게 커스텀이 가능하다. ※ 설치

CSS 모듈 ※ 사용하는 이유 - 이름 충돌 방지 : CSS 모듈은 클래스 이름을 지역적으로 유지하므로 다른 모듈이나 전역 스타일과 충돌하지 않는다. (각 모듈이 독립적으로 작동) - 재사용성과 유지 보수성 향상 : 컴포넌트별로 스타일을 모듈화함으로써, 코드의 재사용성과 유지 보수성을 향상시키며, 특정 컴포넌트에 대한 스타일 변경이 해당 컴포넌트만 영향을 미치게 된다. - 가독성 향상: 클래스 이름에 대한 명명 규칙이 모듈 내에서만 적용되므로 다른 부분의 클래스 이름과 구분이 쉽기때문에 가독성이 향상된다. ※ 사용 방법 - css 파일 생성 : 컴포넌트명.module.css - 컴포넌트에서 import - 클래스명 지정 : styles.클래스명