저번 글에 이어서 휠 이벤트(= 스크롤) 시 화면이 fadeInOut 이 되면서 페이지가 전환되게 구현해보았다. 구현 포인트마우스 휠 사용 시 fadeInOut 이 되면서 한 페이지 씩 넘어가기handleScrollVertical 함수handleScrollVertical함수는 useCallback을 통해 메모이제이션되므로, 동일한 함수 참조가 유지된다. ( useCallback을 사용 안 하면 컴포넌트가 리렌더링 될 때마다 handleScrollVertical 함수가 새로 생성된다. useEffect 내부의 클린업 함수가 이전 함수와 같은 참조를 가지지 않기 때문에 이벤트 리스너를 정확히 제거하지 못 할 수 있다.)event.deltaY값을 사용하여 사용자가 스크롤 하는 방향을 결정합니다 (event.d..

프로젝트 중 FullPage 스크롤 구현이 필요하여 라이브러리 없이 제작해보았다. 구현 포인트마우스 휠 사용 시 한 페이지 씩 넘어가기풀 페이지를 차지 하지 않는 footer까지 스크롤 가능하게 하기화면구조body 태그에 overflow-y: hidden; 속성을 주고 화면 높이 만큼을 가지고 있는 section 태그에 overflow-y: auto; (outer 클래스 명) 속성을 주어 사용자가 페이지 전체를 스크롤 하지 못하게 방지하며 outer 섹션 내부에서만 스크롤이 가능하게 한다.outer 섹션안에 fullPage를 만들고 싶은 화면 높이 만큼을 가지고 있는 section 들과 footer를 넣어준다. html  cssbody { overflow-y: hidd..

달력 (히트맵) 만들기 (1) 이어서…  이전 글에서는 달력을 만들었다면 이번 글에서는 날짜에 해당하는 포스트 수와 Home에서 이번 달 만이 아닌 다른 달과 년도를 선택할 수 있는 모달 창과 월 별 총 포스팅 수, 달력을 만든 에 넘겨줄 props 를 구한다. 날짜에 해당하는 포스트 수달력을 만들기 전에 날짜마다 포스팅 된 글 수를 구한다.map() 함수를 사용하여 각 포스트의 created_time을 추출하고, 이를 JavaScript의 Date 객체로 변환하여 해당 날짜를 한국 표준시(UTC+9)로 변환하고, 날짜 정보에서 시간 부분을 제외한 후 toISOString()을 통해 ISO 형식의 문자열로 변환해 split("T")[0]을 사용하여 날짜 부분 만을 추출하여 korDate에 저장한다.cre..

개인 웹사이트를 만들면서 깃 헙에 있는 잔디처럼 하루에 포스팅 된 글 수를 한 눈에 보고 싶어 아펙스 차트의 히트맵을 사용하여 잔디와 조금 다르게 구현했다. 구현 포인트월 별 히트 맵 ( 달력처럼 구현 )페이지 진입 시 오늘 날짜 해당 월에 대해 보여주기년, 월 선택 가능하게마우스 호버 시 포스트 갯 수 툴 팁으로 보여주기히트 맵을 사용하여 달력 구현dynamic 을 사용하여 ApexCharts를 import 시켰다.( 관련 글 : https://min-sun.vercel.app/blog/f3df2808-d7ac-4b7f-b2b4-0acda188806d ) 달력 제작 시 고려해야 할 사항전달, 다음날 날짜가 같은 주에 있는 첫 번째 주, 마지막 주 일 자 수를 구해야 한다. 이번 달 날짜 수먼저 Home..

여러 리스트 중 리스트들이 개별로 기능하는 방법에 대해 정리했다. 고려할 사항리스트 중 클릭한 리스트만 열고 닫을 수 있어야 한다.다른 리스트를 열더라도 기존 열린 리스트에 영향이 없어야 한다.리스트 click 이벤트를 주어 handleShowDetail 함수를 통해 해당 리스트의 값을(여기서는 index) 받아researchDetailLiStates에 저장된 값 중 빋아 온 리스트에 대한 값을 반전 시켜 새로운 상태를 업데이트한다.const [researchDetailLiStates, setResearchDetailLiStates] = useState({});const handleShowDetail = (index) => { // setResearchDetailLiStates 함수를 사용하여 이전 상..

개인 블로그 이력서 페이지에서 이력서를 pdf로 다운 받을 수 있는 기능을 추가 하기 위해 file-saver라는 라이브러리를 사용했다. (지금은 비활성화시킴 ) file-savernpm file-saverAn HTML5 saveAs() FileSaver implementation. Latest version: 2.0.5, last published: 4 years ago. Start using file-saver in your project by running `npm i file-saver`. There are 5083 other projects in the npm registry using file-saver.www.npmjs.com 설치npm i file-saver 다운로드 방법fetch("/re..

프로그래머스 코딩테스트 하던 중 자주 쓰지 않았던 fill()메서드를 활용한 경우가 많아 익숙하지 않은 메서드를 학습해보고자 fill()메서드에 대해 정리해보았다.fill()fill(value, start, end)배열의 start index 부터 end index 전까지(end index는 미 포함) value값으로 채워주는 함수이다.value : 배열에 넣을 값 start : value 값을 채울 배열의 시작 index (기본 값 : 0) end : value 값을 채울 배열의 종료 index로 end는 포함하지 않습니다.  (기본 값 : 배열의 길이) 예시const array = ['a', 'b', 'c', 'd'];array.fill('A', 1, 3); // ['a', 'A', 'A', 'd']..

진행한 프로젝트 중 광고 영상이 재생되고 영상이 끝나면 링크 이동하는 페이지가 있었다.여기서 더 발전해 광고 영상 재생 중 해당 광고 관련 회사 qr코드와 영상 재생 중간 쯤 영상을 스킵하는 버튼이 등장하는 것을 추가하기로 해 비디오와 관련된 이벤트를 알아보았다. 해당 기능을 위해 필요한 정보전체 영상 길이영상 길이의 중간 지점현재 재생 지점전체 영상 길이와 중간 지점은 "loadedmetadata”, “duration” 를 활용한다.loadedmetadata는 미디어의 현재 재생 위치에 있는 프레임이 로드를 완료한 경우에 실행되는 이벤트로 duration 속성을 활용해 전체 영상 길이를 반환한다.Video.addEventListener('loadedmetadata', () => { videoElemen..

특정 문자 포함 여부를 확인하는 정규식 규칙(리터럴)을 매번 헷갈려 정리해보았다.정규식 메서드test()test() 메서드를 활용해 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환한다.const regex = /coffee/;const txt = "I love coffee";console.log(regex.test(txt));// truematch()문자열에서 정규 표현식에 매칭 되는 항목들을 배열로 반환한다.const regex = /coffee/;const txt = "I love coffee";console.log(txt.match(regex));//["coffee"]replace()정규 표현식에 매칭되는 항목을 대체 문자열로 반환한다.console.l..

매번 헷갈리는 알파벳 배열만드는 방법에 대해 기록해보았다. 알파벳 배열아스키코드를 활용하는 방법으로 ‘A’ 문자가 65번으로 1씩 더해 26글자를 배열화 시킨 방법이다.const arr = Array.from({ length: 26 }, (v, i) => String.fromCharCode(i + 65));console.log(arr)/*[ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']*/// 대문자 알파벳 배열const upperCaseAlphabets = Array.from({ length: 26 }, (_,..