8 Days A Week

원본 export default function Header({ currentMonth, setCurrentMonth, setCurrentWeek, }: { currentMonth: Date; setCurrentMonth: React.Dispatch; setCurrentWeek: React.Dispatch; }) { const changeMonthHandle = (btnType: string) => { if (btnType === 'prev') { setCurrentMonth(subMonths(currentMonth, 1)); } if (btnType === 'next') { setCurrentMonth(addMonths(currentMonth, 1)); } }; const changeWeekHandle..

요구사항: API 요청에서 header에 hash key를 담아 보내야 하는 상황에서 URL에 있는 키 정보를 next/router를 통해 추출해 사용하고자 했음. 기존 Axios client 파일에서는 hook을 사용할 수 없어 해결방안을 모색. 구글링을 통해 본 대부분의 경우는 header에 key를 담는 경우에 대해서 local storage 값을 사용하고 있었다. 이를 해결하기 위해서 자체를 감싸줄 수 있는 훅을 생성했다. // axiosInterceptor.tsx import axios, { AxiosResponse } from 'axios'; import React, { useState, useEffect } from 'react'; import { useRouter } from 'next/r..

페이지 라우트 이동 시 스크롤 구현 및 스크롤 애니메이션 추가 import React, { useEffect } from "react"; import { useLocation } from "react-router-dom"; type ScrollProps = { children: React.ReactNode; }; function ScrollToTop(props: ScrollProps) { const { pathname } = useLocation(); useEffect(() => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); }, [pathname]); return {props.children}; } export default ScrollToT..

Tailwind CSS Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. 장점 Tailwind CSS는 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 Uitility Class를 활용하는 방식으로 HTML에서 스타일링 할 수 있다. 빠른 스타일링 작업이 가능 class 혹은 id명을 작성하기 위한 고생을 하지 않아도 된다. 유틸리티 클래스가 익숙해지는 시간이 필요할 수 있지만 IntelliSense 플러그인이 제공돼서 금방 익숙해질 수 있다. react-beautiful-dnd 리액트에서 드래그앤드랍에 대한 기능을 제공하는 npm 라이브러리 https://github.com/atlassian/react-b..

3d 스크롤 window.addEventListener("scroll", function () { console.log(document.body.offsetHeight - this.window.innerHeight); }); 전체 문서 높이 - 현재 창 높이 = 전체 스크롤할 수 있는 범위 (function () { const houseElem = document.querySelector(".house"); let maxScrollValue = document.body.offsetHeight - this.window.innerHeight; window.addEventListener("scroll", function () { console.log(pageYOffset / maxScrollValue); })..

스크롤 다루기 (function () { const outputElem = document.querySelector(".output"); window.addEventListener("scroll", function () { outputElem.innerHTML = window.pageYOffset; }); })(); window.pageYOffset 속성으로 페이지 Y축 픽셀 위치를 얻을 수 있다. (function () { const outputElem = document.querySelector(".output"); const ilbuniElem = document.querySelector(".ilbuni"); window.addEventListener("scroll", function () { //..

Event Handler 만들 때 주의 위 코드는 DOM 요소를 계속 선택하기 때문에 효율적이지 못하다. 리팩토링 1 변수를 따로 밖에 선언한 후 사용한다. 리팩토링 2 한 함수에 많은 기능이 들어가있기 때문에 함수를 분리해준다. 추후 개선이 용이하다.

translatex 또는 translatey를 사용하는 것보다 translate3d를 사용하면 하드웨어 가속을 사용할 수 있어 좋다. 이런 식으로 작성해주면 좋다. https://developer.mozilla.org/ko/docs/Web/API/Element/classList Element.classList - Web API | MDN **Element.classList**는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다. developer.mozilla.org

리액트는 라이브러리 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다. 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것이다. 프레임워크는 여러개의 라이브러리를 포함하고 있다고 생각할 수 있다. 리액트가 라이브러리인 이유는 리액트가 전적으로 UI를 렌더링하는데 관여하기 때문이다. 리액트 컴포넌트 컴포넌트(Component)는 리액트로 만들어진 앱을 이루는 최소 단위이다. 리액트 컴포넌트는 두가지가 있다. 클래스형 컴포넌트(Class Components) 함수형 컴포넌트(Functional Components) 리액트 Hooks의 등장 이후로는 함수형 컴포넌트를 이용해서 개발을 주로 한다. 브라우저가 그려지는 원리와 가상돔 CRP과정으로 그려지는 브라우저에서 DOM이 어떤 인터렉션으로..

Not wrapped in act 경고 리액트에서 act 경고는 컴포넌트에서 아무것도 일어나지 않을 것으로 예상하고 있을 때 컴포넌트에 어떤 일이 일어나면 나오는 경고이다. act 함수로 감싸주어야 한다. act(()=>{ // fire event that update state }); 지금까지 act로 감싸준 적이 없는데 잘 된 이유 react-testing-library 내부 API에 act를 이미 내포하고 있어서 따로 설정하지 않아도 됐다. (리액트 콜 스택 안에 있을 때) 에러가 난 이유 컴포넌트가 비동기 API 호출로 렌더링이 일어나기 전에 테스트가 종료되는 경우 act로 감싸주어야 한다. (리액트 콜 스택 밖에 있어서) 이 때는 waitFor API를 사용해 테스트가 끝나기 전에 컴포넌트가 다..