코딩이야기45 [React] React-Hooks 간단 정리 (1) 대표적인 React-Hooks• useState12345678910111213141516171819202122232425// 기존에 우리가 사용하던 일반 방식setState(number + 1); // 함수형 업데이트 setState((currentNumber)=>{ return currentNumber + 1 }); **차이점 button onClick={() => { setNumber(number + 1); // 첫번째 줄 setNumber(number + 1); // 두번쨰 줄 setNumber(number + 1); // 세번째 줄 }} />// 코드가 3개를 써놔도 1번만 실행되어서 1만 증가 button .. 2024. 7. 3. [Next.js] Prisma 개념 및 사용법 프리즈마는 대중적인 타입스크립트 지원 ORM 중 하나입니다. 프리즈마 설치 전에 기본적인 DB 개발 환경은 갖춰두어야 합니다. 설치 명령은 아래와 같습니다.npm i prisma 사용법설치 후 프로젝트에 프리즈마 적용을 위해 아래 명령을 실행합니다. 그러면, 루트에 prisma 폴더와 함께 그 아래 schema.prisma 파일이 새로 생성됩니다. 덤으로 데이터베이스 스키마 정보 연동을 위한 환경변수 설정에 필요한 .env 파일도 알아서 생성해줍니다.npx prisma init✔ Your Prisma schema was created at prisma/schema.prismaYou can now open it in your favorite editor.warn You already have a .giti.. 2024. 6. 11. [React] scrollTo 스크롤 이벤트 오류 (찔끔찔끔 올라가는 버그) 홈페이지를 만들면서 클릭하면 최상단으로 올라가는 버튼을 만들었습니다. 123const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); };Colored by Color Scriptercs 문제 상황엄청나게 간단한 코드인데 원인 모를 버그가 생깁니다.버튼을 누르면 찔끔(?) 올라갔다가 멈추는 현상이 발생합니다.왜 그런걸까 아무리 생각해봐도 답이 안나오는 상황에 구글링을 열심히 하여 해결방법을 찾았습니다. 12345678910const scrollToTop = () => { const scrollStep = -Math.floor(window.scrollY / 15); const scrollInterval = se.. 2024. 6. 11. [React] 뒤로가기 막는 방법 (feat.모달창) 문제 상황모달을 열고 닫은 뒤 뒤로가기 버튼을 누르면 이전 URL로 넘어 가면서 모달창이 다시 열리는 현상이 발생했습니다. 이 현상을 해결하기 위해 useEffect를 사용하여 뒤로가기를 누를때 동작을 정의해주는 함수를 만들어 주었습니다.홈페이지 전체에서 뒤로가기를 막아야 되기 때문에 App.js에 추가해 주었습니다. 1234567891011function App() { useEffect(() => { const preventGoBack = () => { window.history.go(1); console.log("prevent go back!"); }; window.history.pushState(null, "", window.location.pathname);.. 2024. 6. 11. 이전 1 2 3 4 5 6 7 ··· 12 다음
