Next.js 프로젝트
1.Next.js14에 Mysql연결하기
프레임워크 : next.js + TS > 참고 db설정파일 https://github.com/zinkkii/NextBoard/blob/master/app/lib/db.jsx > 환경변수 설정 https://nextjs.org/docs/app/api-reference
2.[Next.js + TS] use client, use server
[Next.js + TS] use client, use server
3.next-auth Credentials 로그인 (feat: callbacks 분석)
next.js 14ver, next-auth, ts, mysql workbench next-auth공식문서https://next-auth.js.org/로그인버튼클릭(username, password) (app/sigin/pages)\-> username, p
4.Mysql 리턴타입 에러 해결: RowDataPacket, ResultSetHeader ( Feat. next.js )
Mysql을 쓰다 보니 리턴값이 RowDataPacket\[], ResultSetHeader 이라는 것을 알게 되었다.ResultSetHeader을 이용해 insert한 행의 id를 가져오고 싶었는데Property 'insertId' does not exist on t
5.CSR, SSR, SSG, ISR (Feat. Next.js14)
HTML 렌더링이 클라이언트(사용자의 브라우저)에서 실행되는 방식이다.사용자가 웹 사이트에 방문하면 브라우저는 서버에 HTML,CSS,Javascript 같은 리소스들을 요청한다.서버는 빈 뼈대의 html과 js를 건네주고 브라우저는 이 파일들을 파싱하여 렌더링한다.H
6.Next.js cache
💡 캐싱 대상 : 렌더링 작업, 데이터 요청💡 목적: 애플리케이션 성능을 향상, 비용 절감캐시 : 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소캐싱 : 파일 복사본을 캐시 또는 임시 저장 위치에 저장하여 보다 빠르게 액세스할 수 있도록 하는 프로세스By
7.구글소셜로그인으로 가져온 이미지 next/image로 최적화하기
next.config.js 파일에 url 코드가 추가되어야함. 보안 이슈💡 next.js의 Image 태그 사용시 file size가 확연히 줄어듬.💡 그 만큼 화질이 깨지는 문제가 있음props quality(defautl 75, 1~100)로 화질을 개선할 수
8.Data Fetching할 때 Suspense가 작동안되는 경우
내가 원하는 것 : GET API를 fetch를 하는 동안 화면에 스켈레톤 코드를 그리고 싶다. 그래서 suspense를 사용했다.결과 : 잉? suspense의 fallback이 렌더링 안된다.useEffect(의존성 배열이 \[]일때)는 suspense보다 먼저 발