setTimeout, setInterval, clearInterval 이란?   css 애니메이션 강의를 들으면서 setInterval을 처음 보게되어 찾아보고 공부한 내용을 내 방식대로 쉽게 작성해서 공유하려고 작성한다. 1. setTimeout기본 형태: setTimeout(Fn, delay)setTimeout 메서드는 일정시간 후에 함수를 실행시켜주는 메서드 입니다.ex)setTimeout(()=>{console.log("hi")}, 1000); // 1초후에 console에 hi 출력됨 2. setInterval기본 형태: setInterval(Fn, delay)setInterval 메서드는 일정시간마다 계속해서 함수를 실행시켜주는 메서드 입니다.ex)setInterval(()=>{console...

태그로 모달(modal) 만들기??    이 글을 작성하게 된 이유원래는 실제 프로젝트에서 useModal 커스텀훅과 상위 파일인 layout.tsx에 div태그에 id값을 주어야 하는 방법까지 번거롭게 작업했었다.하지만 강의를 들으면서 상위 layout 파일에 div 요소도 안넣고 더 간편하게 사용하는 방법을 알게 되어 글을 작성해본다.import '../styles/globals.css';import Providers from './providers';export default function RootLayout({ children,}: Readonly) { return ( {children} );}'use client';import..

Prisma + Next.js 같이 사용할때 warn(prisma-client) 오류 해결   현상prisma랑 next.js를 같이 사용하는 프로젝트일 경우 dev 모드를 사용하면 아래와 같은 warning이 나온다.warn(prisma-client) There are already 10 instances of Prisma Client actively running. next dev 모드는 node.js 캐쉬를 없애기 때문에 매번 PrismaClient를 새로 생성해서 성능 문제를 일으키므로 매번 생성하지 못하도록 코드를 수정해주어야 합니다. 해결vscode에 주석으로 공부한 내용 적어두어서 복붙했습니다!/src/db/index.tsimport { PrismaClient } from "@prisma/c..

Recoil이란? Recoil 사용법!    강의를 들으면서 공부 중 Recoil 라이브러리를 처음 접하게 되어 나중에봐도 안까먹으려고 포스팅 합니다.. (나를 위해) 시작하기 앞서호환성 및 단숨함을 이유로 외부의 글로벌 상태관리 라이브러리를 사용하는 것 보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 좋다.. 좋지만 사용하는 이유가 있겠죠?React에는 다음과 같은 한계가 있다- 컴포넌트의 상태는 공통된 상위요소까지 끌어올려야만 공유가 될 수 있으므로, 이 과정에서 거대한 트리가 다시 렌더링 되는 좋지 못한 효과를 야기한다.- Context는 단일 값만 저장할 수 있고, 여러 값의 집합을 담을 수는 없다.결론적으로- 이 두 가지 특성이 트리의 최상단(state가 존재하는 곳)부터 트리의..

Failed to load config "react-app" to extend from. 오류해결   강의를 들으면서 공부를 잘 하고 있던 도중에 package.json, eslint-cofig-react--app이 충돌이 일어나 Failed to load config "react-app" to extend from 이라는 오류가 나왔다 ㅎ.ㅎ  해결방법구글링을 하던 중 해결방법을 찾아서 나중에 보고 해결하고자 포스팅 합니다!npm install eslint-config-react-apporyarn add eslint-config-react-app 필자는 여기서 yarn add -D eslint-config-react-app으로 설치하기는 했습니다! (-D devDependencies로 설치)해결완료!

React은(는) UMD 전역을 참조하지만 현재 파일은 모듈입니다. 대신 가져오기를 추가해보세요. 오류해결 현상react component 내에 작성된 JSX 표현식에서 에러가 발생했다 stackoverflow 댓글에서 해결 방법을 찾았다https://stackoverflow.com/questions/64656055/react-refers-to-a-umd-global-but-the-current-file-is-a-module 'React' refers to a UMD global, but the current file is a moduleI updated my project to create react app 4.0, and I'm slowing moving over my files to TypeScri..

filter VS backdrop-filter 블러 효과    1. filter https://developer.mozilla.org/ko/docs/Web/CSS/filter filter - CSS: Cascading Style Sheets | MDNCSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.developer.mozilla.org filter는 하위요소 전체에 블러 처리를 할 수 있습니다. EX_)  주의!filter- filter 사용시 하위요소까지 효과가 적용되어 헤맸던 적이 있는데 별개의 형제요소를 새로 만들어 백그라운드를 주고 효과를 적용해서 해결했었다.- filter를 사용하니 하얀색 ..

dvh, svh, lvh (모바일 주소 표시줄 영역) 이란?    프로젝트를 하면서 팀원 중 한분의 코드에서 dvh라는 속성을 처음보고 포스팅 하게 되었습니다! 모바일 주소 표시줄 영역에 의해서 100vh로 높이 값을 설정했다고 하더라도 화면이 짤리는 경우가 발생합니다. 해결방법으로div {height:100vh; height:-webkit-fill-available;}위와 같이 -webkit-fill-available 값을 height값에 적용하는 방법이 있는데 이 방법은 ios에서만 적용이 되고 안드로이드에서는 적용이 안되는 문제가 있기 때문에 권장하진 않습니다. 1. svh (short viewport height)svh는 사용자 화면 기준으로 가장 짧은 뷰포트 값을 가져옵니다. 주소 표시줄이 없어..

height VS min-height 1. heightheight: 500px을 적용한 경우 div 태그 내의 컨텐츠가 500px을 넘어가면 밖으로 삐져 나온다  2. min-heightmin-height: 500px을 하게되면 500px의 높이는 유지한채 컨텐츠가 늘어날수록 컨텐츠의 높이가 늘어납니다