프론트에서 filter() 함수를 통해 검색 기능을 만들 수 있어 개인 블로그에도 검색 기능을 넣었다.검색어먼저 input 태그의 input의 value값은 event.target.value으로 useState에 value값을 넣어 주며 입력 시 데이터를 필터 할 함수( handleSearchInputChange() ) 에 event.target.value을 넘긴다. React에서 input 관리 관련 글 React에서 input 관리가장 기본이 되는 React에서 input 상태를 어떻게 관리하는지 정리했다. onChange를 통해 useState에 value값을 넣어주면 된다.input의 value값은 event.target.value 이다.import React, { useState } from "..

'SetStateAction' 형식의 매개 변수에 할당될 수 없습니다.ts(2345)해당 오류는 setFilteredList(blogs.results); 에서 발생했다.const [filteredList, setFilteredList] = useState([]);useEffect(() => { setFilteredList(blogs.results); }, [blogs.results]); 해결법useState오른쪽에 타입을 지정하면 된다.const [filteredList, setFilteredList] = useState([]);useEffect(() => { setFilteredList(blogs.results); }, [blogs.results]);

관제 시스템 프로젝트를 진행하면서 기능, 내용 설명에 대한 온보딩 (= Product tour) 을 추가하기로 하여 react-joyride를 적용하여 사용법에 대해 정리하고자 한다. react-joyride npm react-joyrideCreate guided tours for your apps. Latest version: 2.8.2, last published: 3 months ago. Start using react-joyride in your project by running `npm i react-joyride`. There are 215 other projects in the npm registry using react-joyride.www.npmjs.com  react-joyride Ho..

Next Auth(1) 이어서…user 정보 가져오기 & 로그아웃user 정보 가져오고 로그아웃하기 위해서는 ****next-auth/react 에서 signOut, useSession를 불러와야 된다. useSession()useSession()는 data, status 두 값을 포함하는 객체를 반환한다.data는 session / undefined / null 3가지 값을 가진다.status는 loading / authenticated / unauthenticated 3가지 값을 가진다. 사용 예시import { useSession } from "next-auth/react"export default function Component() { const { data: session, status } ..

Next.js 기반으로 관리자 페이지, 관제 시스템 등 권한이 필요한 프로젝트 진행 시 Next-Auth 라는 npm 을 자주 사용하였다. 여러 프로젝트 진행하면서 고려해야 했던 포인트소수 계정일 경우session 기간권한 여부에 대한 스타일, 페이지 차이비 로그인 시 홈 접근 방지 / 로그인 상태 일시 로그인 페이지 접근 방지user 정보 가져오기 & 로그아웃 Next-Auth npm  next-authAuthentication for Next.js. Latest version: 4.24.7, last published: 6 months ago. Start using next-auth in your project by running `npm i next-auth`. There are 324 other ..

여러 프로젝트에서 자주 사용하는 탭 기능에 대해 정리해보았다.tab으로 보여줄 데이터const tabData = [ { title: "Seoul", content: "서울 Seoul. 서울은 대한민국의 수도로서 정치, 경제, 사회, 문화의 중심지이다. 서울의 면적은 605㎢로서 도쿄의 23개 특별구와 비슷하며, 싱가포르와 뉴욕시보다 다소 작은 크기이다. 서울은 외사산과 내사산에 둘러싸인 분지의 지형이다.", }, { title: "Jeju", content: "제주도(濟州島, 영어: Jeju Island)는 대한민국의 남해에 위치한 섬이자 대한민국에서 가장 큰 섬이다. 또한 제주도는 행정구역상 제주특별자치도에 속한다. 섬의 면적..

페이지의 다크 모드, 스타일을 LocalStorage에 저장 후 활용하는 경우가 많다.현재 블로그에서도 테마 저장은 theme 키로 블로그, 프로젝트 페이지 스타일과 포스트 순서를 blog_page_state / project_page_state 이 키로 저장하고 있다.그래서 저장, 가져오기, 삭제하는 방법에 대해 정리했다.LocalStorage 값 저장기본 코드 : localStorage.setItem('key','value')react 에서 아래 코드와 같이 저장하거나 특정 이벤트가 발생하여 저장 할 수 있다.useEffect(() => { localStorage.setItem("save", "saveStorage"); }, []); LocalStorage 값 가져오기기본 코드 : localS..

React에서 부모에서 자식 간에 값을 넘기는 방법에 대해 정리해보았다.부모에서 자식으로 값 전달부모에서 Props를 이용해서 Child 컴포넌트에 전달한다.⭐ props를 이용한다.props란, properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다.(자식이 props를 통해 부모에게 데이터를 줄 수 없다는 뜻)자식이 부모로부터 받아온 값을 사용할 때 방식1번객체 비 구조화를 사용하여 props를 선언한다. 이 경우, Child 컴포넌트는 **user**라는 속성을 직접 사용할 수 있다. 이 방식은 코드를 간결하게 유지하고 가독성을 높일 수 있다. 2번2번 방식은 **props**라는 객체를 통해 모..

Next.js는 리액트 프레임워크로 프리랜더링을 지원하여 SEO 최적화와 성능 개선을 위해 HTML을 먼저 생성한다. 그래서 window를 참조하는 이벤트를 사용하면 에러가 발생 할 수 있다.window 참조 오류 해결 법typeof 연산자 : window 객체가 존재하는 지 판단 하는 방법클라이언트에서 렌더링 할 때까지 기다렸다가, window를 참조할 수 있는 시점에 코드 실행if (typeof window !== "undefined") { // window 객체를 사용하는 코드}// 블로그에서 사용된 코드const [scrennWidth, setScrennWidth] = useState( typeof window !== "undefined" ? window.innerWidth : 0 ); ne..

이번에는 이전 스크롤 위치를 기억하면서 모달 창이 보이면 body 스크롤을 방지하는 방법에 대해 알아 보았다. 모달 창을 여는 index.tsx 로 close를 넘긴다.//index.tsxexport default function Home() { const [modal, setModal] = useState(false); const showModal = () => { setModal(true); }; const close = (x: any) => { setModal(x); }; return ( {[1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13].map((x) => ( ..