![]()
🎉 구현 결과 🚩 구현 목표 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로 초기화가 수행된다. 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 모든 선언문을 소스코드에서 찾아내 먼저 실행하기 때문입니다...
🚩 프로그래밍 프로그래밍이란 프로그래밍 언어를 사용해 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션. 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며, 그 결과물이 코드입니다. 🚩 프로그래밍 언어 명령을 수행하는 주체는 컴퓨터입니다. 그래서 사람이 이해할 수 있는 자연어가 아니라 컴퓨터가 이해할 수 있는 언어, 즉 기계어로 명령을 전달해야 합니다. 하지만 기계어로 직접 명령을 전달하는 것은 어려운 일입니다. 그래서 사람이 이해할 수 있는 약속된 구문(문법)으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기(컴파일러 혹은 인터프리터)를 이용하는 것 입니다. 🚩 참고 모던 자바스크립..
🚩 기존 애니카드 디자인 기존 애니카드는 width: 100%, height: 152px 고정되어 있어서 부자연스러운 이미지를 가지고 있었습니다. 기존 애니카드 🚩 변경된 애니카드 디자인 위 문제를 해결하기 위해 element의 종횡비를 유지하는 방향으로 디자인이 변경되었습니다. 🚩 종횡비 유지 1: padding-bottom 활용 HTML 이미지 element 이미지를 감싸는 element ... // 생략 CSS .image-container padding-bottom: 70%는 부모 width의 70% 비율을 height로 가집니다. padding-bottom: 100%는 부모 width의 100% 비율을 height로 가지기 때문에 정사각형이 됩니다. .image padding에 밀려있는 이미지를..
![]()
🚩 페이지 하단에 도달했는지 확인하는 방법 Intersection Observer API 타겟 요소(element)와 브라우저 viewport의 교차점을 관찰합니다. 타겟 요소가 사용자 화면에 보이는지 안보이는지 판단 화면에 보이면 지정한 콜백 함수 실행 scroll 이벤트와 달리 비동기적으로 실행되며, reflow를 발생시키지 않아 성능 이점이 있습니다. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 🚩 useIntersectionObserver hook useIntersectionObserver() 구현 export default function useIntersectionObserver({ target, // t..
🚩 로컬 브랜치 이름 변경 현재 위치한 브랜치 이름 변경 git switch working-branch git branch -m new-branch-name 현재 위치한 브랜치가 아닌 다른 브랜치 이름 변경 git branch -m old-branch new-branch 🚩 원격 브랜치 이름 변경 Git에서 원격 브랜치 이름을 변경하는 직접적인 명령어가 없기 때문에, 새로운 브랜치를 만들고 기존 브랜치를 삭제하는 방식을 사용합니다. 첫 번째 방법 이름이 변경된 로컬 브랜치를 원격 저장소에 push 기존 원격 브랜치를 삭제 git push origin new-branch git push origin -d old-branch 두 번째 방법 콜론(:)은 원격 저장소에 있는 브랜치를 삭제하는 명령어 git pu..
🚩 Local Storage 저장된 데이터는 브라우저를 닫아도 계속 유지됩니다. 오리진(domain·port·protocol)이 같은 탭, 창 전체에서 공유 한 창의 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있습니다. 🚩 Session Storage 저장된 데이터는 브라우저를 닫거나 탭을 닫으면 삭제됩니다. 오리진이 같은 브라우저 탭, iframe에서 공유 현재 떠 있는 탭 내에서만 데이터가 유지됩니다. 🚩 API 두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다. Storage.setItem() setItem(key, value): 키-값 쌍을 보관합니다. getItem(key): 키에 해당하는 값을 받아옵니다. removeItem(key): 키와 해당 값을 삭제합니다. clear():..
![]()
🚩 git stash Git에서 현재 작업 디렉토리의 변경 사항을 임시로 저장하고 나중에 다시 복원할 수 있는 명령어 🚩 명령어 변경 사항 저장하기 git stash git stash save "message": 메시지를 추가할 수 있습니다. git stash -u: 추적되지 않는(untracked)파일과 변경된 파일을 모두 스태시에 저장하는 옵션입니다. feat/253 branch에 다음 변경 사항이 있을 때 git stash 명령을 사용하면, 새로운 파일(untracked)은 스태시에 저장되지 않습니다. git stash -u 명령어를 사용하면 새로운 파일도 함께 스태시에 저장됩니다. 저장된 스태시 목록 확인 git stash list 스태시 복원 git stash pop stash@{n}: 특정 스..
![]()
setInterval을 이용하여 타이머를 구현했었는데, 타이머를 등록하고 브라우저의 다른 탭으로 이동하면 시간이 제대로 맞지 않는 문제가 있었습니다. https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#reasons_for_delays_longer_than_specified 그 이유는 브라우저가 백그라운드 탭의 부하를 줄이기 위해 setInterval이 지연 실행되고 있었습니다. ▶ 문제 해결 이전에는 단순히 setInterval을 1초 간격으로 실행해서 타이머가 늦어지는 문제가 발생했습니다. 시작 시점과 현재 시점의 경과된 시간을 Date.now()를 이용하여, 백그라운드 탭에서 활성 탭으로 돌아왔을 때 타이머 시간이 제대로 계산되도록 했습니다. ..
![]()
기능 설명 공통 기능 Sub Tab Item을 클릭하면, 해당 하는 Tap Panel 위치로 이동한다. scroll 이벤트 시, 각 Tap Panel 위치에 도달하면 해당 하는 Sub Tab Item이 active 상태가 된다. resize 이벤트 시, Tap Panel의 위치를 재설정한다. 모바일 기능 active 상태인 Sub Tab Item으로 자동 가로 스크롤 ▶ scroll에 따른 active 상태 변경 사용자의 scroll에 따라 Sub Tab의 active 상태가 변경될려면 다음 식이 성립하면 됩니다. 현재 스크롤된 값 > Tap Panel 절대 위치 현재 스크롤된 값을 구하는 방법은 window.scrollY 를 이용하고, 각 Tap Panel의 절대 위치를 구하는 방법은 window.sc..
