![]()
🎉 구현 결과 🚩 구현 목표 1. 사용자의 검색 키워드와 일치하는 검색 목록 보여주기 2. 위, 아래 방향키로 검색 목록 이동하기 📝 컴포넌트의 전체 구조 더보기 export default function SearchFormWithList({ monsters, responsive, visuallyHidden = false, }: Props) { const { text, searchRef, listRef, filterdMonsters, selected, cursor, listOpen, handleTextChange, handleTextClear, handleOpenList, handleCloseList, handleLinkClick, } = useSearch(monsters); const pathname ..
🚩 join 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. const arr = ['a', 'b', 'c']; console.log(arr.join()); // a,b,c console.log(arr.join('')); // abc console.log(arr.join('-')); // a-b-c 🚩 splice 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가합니다. 원본 배열의 내용을 변경합니다. ( *원본 배열을 변경하지 않으려면 .toSpliced() 사용 ) 반환값은 제거한 요소를 담은 배열 .slice(인덱스, 삭제할 개수, 추가할 아이템) const arr = ['a', 'b', 'c']; const result = arr.splice(1, 1); console.log(arr)..
🚩 object-position https://developer.mozilla.org/en-US/docs/Web/CSS/object-position 대체 요소(img, iframe, video, embed)의 content를 정렬합니다. 기본값은 50%, 50%으로 가운데 정렬입니다. HTML 삽입 미리보기할 수 없는 소스
🚩 Intl 문자열, 날짜 및 시간, 숫자 등 국제화 및 지역화 작업을 수행하는데 사용됩니다. 🚩 적용하기 // 첫 번째 인자 locales: 지역 // 두 번째 인자 option Intl.NumberFormat(locales, { notation: "compact", // 'compact' maximumFractionDigits: 1, // 소수 자리 표현 }).format(num); // 1.2천 console.log(Intl.NumberFormat('ko-KR', { notation: "compact", maximumFractionDigits: 1, }).format(1234)); // 1.2억 console.log( Intl.NumberFormat("ko-KR", { notation: "compa..
🚩 오류 발생 상황 1. react-slick 라이브러리의 Slider Syncing(AsNavFor)을 사용중 (https://react-slick.neostack.com/docs/example/as-nav-for) 2. MainCarousel의 item을 클릭하면 해당 애니 페이지로 이동하지않는 오류 발생 (마지막 애니의 페이지로 이동) 3. Slider Syncing에서 onClick이벤트 발생 시, animeId가 제대로 전달되지 않는것으로 파악 const handleClick = (e: React.MouseEvent, animeId: number) => { if (dragging) { e.stopPropagation(); return; } console.log(animeId); // naviga..
![]()
🚩 오류 yarn으로 CRA 리액트 프로젝트를 만든 뒤, 파일을 수정하면 다음과 같은 오류가 발생합니다. 🚩 해결 1. yarn add -D eslint-config-react-app 2. 프로젝트 가장 상위에 .yarnrc.yml 파일 생성 후 다음 내용 붙여넣기 packageExtensions: react-scripts@*: peerDependencies: eslint-config-react-app: '*' 3. yarn cache clean 4. yarn install
🚩 스코프 식별자가 유효한 범위 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 🚩 스코프의 종류 전역 스코프 코드의 가장 바깥 영역 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수 → 어디서든지 참조할 수 있다. 지역 스코프 함수 몸체 내부 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수 → 자신의 지역 스코프와 하위 지역 스코프에서 유효하다. 🚩 함수 레벨 스코프 var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정합니다. var i = 10; for (var i = 0; i < 5; i++) { console.log(i); // 0 1 2 3 4 } console.log(i) // 5 🚩 블록 레벨 스코프 let, const 키워드로 선언된 변수..
🚩 호이스팅 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 특징을 호이스팅이라 합니다. 🚩 var 호이스팅 console.log(score); // 변수 참조, undefined var score = 7; // 변수 선언문 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로, score가 참조되는 시점에는 아직 score 변수 선언이 실행되지 않아 참조 에러가 예상됩니다. 하지만 참조 에러가 발생하지 않고 undefined가 출력됩니다. var는 선언과 초기화가 동시에 진행되기에 undefined로 초기화가 수행된다. 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 모든 선언문을 소스코드에서 찾아내 먼저 실행하기 때문입니다...
