전체 글530 [ 자바스크립트(JavaScript) ] window.history.pushState와 history.replaceState을 알아보자 📍 window.history.pushState와 history.replaceState을 알아보자 history.pushState()는 브라우저의 세션 기록 스택에 새롭게 추가한다. 문법은 다음과 같은데, (pushState(state, unused, url?)) state는 사용자가 새로운 페이지로 이동할 때마다 popstate 이벤트가 발생한다. unused는 역사적 이유로 존재하며, 생략할 수 없다. 추후에 변경 예정이므로 당분간 빈 문자열('')을 사용하자. url을 사용하면 해당 URL로 이동하지 않지만, 나중에 사용자가 브라우저를 재 시작하면 해당 URL 로드를 시도할 수 있다. 반환 값은 undefined이다. 포인트는 URL값은 현재 URL과 동일한 출처(same origin)여야 하는데,.. 2022. 10. 26. [ Next.js ] next/router 사용시 무한 렌더링 이슈 해결하기 📍 next/router 사용 시 무한 렌더링 이슈 해결하기 Next.js로 특정 페이지에 접속하면 무한 새로고침 되는 이슈를 발견했다. 이슈를 트래킹해보니 원인은 next/router - Router.replace 때문이었는데, 클라이언트 사이드에서 Router.replace를 사용한 이유는 필터에 조건을 넣고 검색 버튼을 클릭하면 해당 필터 값을 쿼리에 추가하여 다른 사람에게 링크를 공유할 때 필터를 두 번 조작하지 않도록 하기 위함이었다. 그래서 Router.replace와 state를 잃지 않고 pathname과 query 값을 업데이트 할 수 있는 옵션인 shallow Routing: true를 추가했으나 무한 렌더링(새로고침) 되는 이슈가 생겼다. 왜 이런 현상이 발생하는지 알아보기 위해 구글.. 2022. 10. 25. [ 스토리북(StoryBook) ] Object(...) is not a function 에러가 뜰 때 📍 Object(...) is not a function 에러가 뜰 때 스토리북에 샘플 데이터를 추가하고 npm run dev명령어를 실행하니까 다음처럼 Object(...) is not a function 에러가 뜨는 현상을 마주했다. 원인은 간단했는데, @storybook/addon-knobs 패키지에서 import한 props 문자열 타입을 string으로 사용했기 때문이다. 패키지를 뒤져보니 typescript에서 사용하는 string 타입은 @storybook/addon-knobs 패키지에서 text 타입으로 사용하고 있었다.(export declare function text(name: string, value: string, groupId?: string): string;) 문자형은 당연히 .. 2022. 10. 17. [ Next.js ] Rewrites와 Redirects 알아보기 📍 Rewrites와 Redirects 알아보기 로컬에서 Next.js로 작업할 때 한 개 프로젝트가 아니라 두 개 프로젝트를 동시에 실행해야 하는 경우가 종종 있다. 예를 들면 로그인을 담당하는 A프로젝트(port: 3001)에서 본인인증을 담당하는 B프로젝트(port: 3000)를 실행하는 경우가 그런 경우다. 이럴 때 A에서 B프로젝트로 넘어가려면 http://localhost:3000/verifications를 작성하고 다시 B에서 A프로젝트로 넘어올 때는 http://localhost:3001/auth-web을 작성하고 AWS를 통해 배포 할 때는 path만 남겨두고, 로컬에서 테스트 할 때는 다시 호스트와 포트를 붙이고.. 이렇게 수동적이고 번거로운 작업을 지속하다간 다른 작업을 하지 못할 것.. 2022. 10. 11. [ 타입스크립트(TypeScript) ] PropsWithChildren으로 children 짧게 작성하기 📍 PropsWithChildren으로 children 짧게 작성하기 React에서 Component를 작성하다 보면 props에 children을 선언하는 경우가 종종 있다. 그런데, 매번 children과 해당 타입을 명시해주는 것은 번거롭지 않은가? 그래서 children의 타입을 따로 명시해주지 않아도 되는 react에서 지원하는 PropsWithChildren문법이 있다. PropsWithChildren은 React.PropsWithChildren로 사용하거나 혹은 import { PropsWithChildren } from 'react'로 사용 할 수 있고 타입은 다음과 같다. type PropsWithChildren = P & { children?: ReactNode | undefined }.. 2022. 9. 23. 이전 1 ··· 7 8 9 10 11 12 13 ··· 106 다음
