라이트하우스? 구글에서 개발한 웹 페이지의 품질을 개선할 수 있는 오픈소스 형태의 자동화 도구입니다. Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps. 다음과 같은 지표를 확인할 수 있습니다. Performance 1. Fist Contentful Paint(FCP) - 브라우저가 첫 번째 콘텐츠를 랜더링 하는 데 걸리는 시간 - 웹 페이지 초기 로딩 속도 2. Largest Contentful Paind(LCP) - 가장 큰 크기의 콘텐츠를 랜더링 하는 걸리는 시간 - 사용자가 주요 콘텐츠를 볼 수 있을 때까지 걸리는 시간 3. Total b..
에러 문구 error ESLint: Failed to load config "next/core-web-vitals" to extend from. Referenced from: /vercel/path0/.eslintrc 원인 어쩐지 에러가 안잡히는 부분이 있더라더니 next.js에서의 ESLint 설정을 제공하는 패키지를 설치 하지 않았었다. 아래 명령어로 패키지를 설치하고 해결! 해결 npm i --save-dev eslint-config-next eslint-config-prettier eslint-plugin-prettier https://stackoverflow.com/questions/69480558/error-failed-to-load-config-next-to-extend-from Error:..
주절주절 분명 예전에는 하트를 누르면 늦게나마 빨간 하트가 되었는데 요청은 정상적으로 되나 빨간 하트로 변하지 않았다. const session: UserInfo | null = await getServerSession(authOptions); const db = (await connectDB).db('forum'); let result = await db.collection('post').findOne({ _id: new ObjectId(props.params.id) }); if (result) { result._id = result._id.toString() as unknown as ObjectId; } let foundOne; if (session) { foundOne = await db.colle..
문제 오랜만에 뜯어본 Next.js의 게시판 프로젝트에 다음과 같은 에러가 발생했습니다. 비동기 함수인 컴포넌트는 프로미스 객체를 리턴합니다. 하지만 이게 왜... 문제죠? 멋진 icyJoseph의 의견에 따르면 typescript가 async 컴포넌트를 이해 하지 못한다고 합니다. 따라서 해당 주석을 달아 임시방편으로 오류를 해결할 수 있다고 합니다. 해결방안 1. 주석달기 export default async function Home() { return ( {/* @ts-expect-error Server Component */} 뭔가 멋진 메인 사진을 걸고 싶어요 캐러셀같은거 넣으면 좋겠다 ); } 아무래도 주석이 있는 것은 영 찜찜합니다. 해결방안 2. 업데이트하기 역시 정답은 공식문서에 있었습니..
모모 프로젝트에서는 회원정보의 프로필사진, 닉네임, 지역, 자기소개 내용을 수정할 수 있습니다. 이 중에 프로필 사진 변경 (사용자가 파일을 직접 업로드하는 경우) 기능을 포스팅해 보겠습니다. 우선 사용자는 input에 파일을 업로드할 수 있어야 합니다. type 속성은 "file"로 설정해 줍니다. accept 속성은 허용할 확장자 명을 입력해 줍니다. 💡 파일 업로드 하는 부분을 못생긴 input창이 아닌 이미지를 보여주고 싶다면 안에 위치시키면 됩니다. 💡 만약 여러 개의 파일을 업로드하고 싶으시면 multiple 속성을 추가해 주시면 됩니다. input에서 파일을 업로드하여 변경이 일어나면 이미지를 변경하는 함수 handleImgChange를 실행시켜줍니다. 다음은 handleImgChange 함..
모모 프로젝트에서 구현한 무한스크롤에 대해서 포스팅 해보겠습니다. 저는 지난번 솔로 프로젝트에서 라이브러리를 이용해서 무한스크롤을 구현해본 경험이 있는데요 이번에는 내장된 API인 observer API와 react-query의 useInfiniteQuery 훅으로 무한스크롤을 구현해 보았습니다. 무한 스크롤의 작동원리는 두 단계로 진행이 됩니다. 1. 스크롤이 뷰포트 바닥에 닿았는지 감지 2. 필요한 데이터 요청 useInfiniteQuery 사용하기 const { data, fetchNextPage, hasNextPage, isLoading, isError, }: UseInfiniteQueryResult = useInfiniteQuery( ['filteredList', keyword, selected..
설치 1. eslint npm install eslint --save-dev 2. prettier npm install prettier --save-dev 3. eslint-config-prettier - eslint는 linting 하고 prettier는 formatting을 한다. - eslint에 코드를 formatting관련 rule이 일부 포함되어있다. - 이 rule들이 prettier와 다른 설정을 가지고 있으면 설정 충돌이 발생한다. - eslint에서 formatting 관련 rule들을 해제해주는 eslint plugin npm install eslint-config-prettier --save-dev 4. husky - 패키지를 설치해도 작업자가 사용안하면 소용이 없다. - 개인이 확..
메인프로젝트에서 react-query를 사용해 유저정보를 get요청으로 받아 RTK 전역 상태로 저장해서 사용을 했었습니다. 받은 유저정보 데이터는 staleTime 즉 데이터의 신선도가 0이었기 때문에 계속해서 유저의 정보를 요청하는 api가 계속해서 호출이 되었습니다. 유저정보의 변경이 잦지 않기 때문에 이는 불필요한 호출이라고 판단했고 react-query가 캐싱기능을 제공하는데 RTK로 데이터를 캐싱할 이유가 없었습니다. 비동기 데이터를 리덕스가 관리하는 것이 적합하지 않은 이유는 아래 참고한 블로그에서 dispatch 시점... 에 관하여 설명이 잘 되어있습니다. 그래서 유저정보가 쓰이는 컴포넌트들을 보아하니 1. 헤더 (프로필사진, 닉네임) 2. 메인 글목록페이지 (유저 지역) 3. 마이페이지..
