본문 바로가기

React/Next.js6

Next.js | loading.js, error.js, global-error.js, not-found.js [loading.js] - 로딩 중 UI 넣을 때 사용 - page.js 옆에 loading.js 이름의 파일 생성하면 page.js 로드 전에 loading.js 안의 내용 미리 보여줌 - 컴포넌트 만들고 안에 로딩중에 보여줄 UI 제작 (client component 사용 가능) - 리액트에서의 과 동일 역할을 해주는데, Next.js에서는 편리성을 위해 loading.js 파일에 적으면 자동으로 로 바꿔주어 가능 [에러페이지 만들려면] 1. error.js 만들고 2. export default client 컴포넌트 (항상 client component만 넣을 수 있음) - page.js에서 에러가 나면 해당 에러페이지를 보여줌 - error props는 에러내용 출력, reset props는 해당.. 2023. 4. 27.
Next.js | 캐싱(cache), Dynamic rendering / Static rendering + 강제 변환, useEffect, DB 저장 관습, Link 태그 [캐싱(cache)] - 결과를 잠깐 저장해두고 재사용 - 페이지 캐싱 : 페이지 완성본을 잠깐 저장해두고 재사용 - GET 요청결과 캐싱 : GET 요청결과를 잠깐 저장해두고 재사용 await fetch('/URL', {cache : 'force-cache'}) - 매번 서버로 새 요청 (실시간 데이터 중요) await fetch('/URL', {cache : 'no-store'}) - 60초마다 캐싱된 데이터 갱신해줌 await fetch('/URL', {next : {revalidate : 60}) - 캐싱된 데이터는 하드 용량을 차지함 - connectDB 사용한 DB 입출력 코드 캐싱 방법 1. GET 요청시 DB 데이터 보내주는 서버 API 만들어두고 fetch()로 바꾸면 캐싱기능 사용가능 .. 2023. 4. 27.
Next.js | Ajax 서버 요청, 서버에 데이터 전송(fetch), 애니메이션 [서버에 필요한 데이터가 없으면?] 1. 유저가 데이터를 전송하도록 코드 작성 2. DB 조회 [Ajax 서버 요청] - fetch() 함수 사용해서 서버로 GET, POST, PUT, DELETE 요청 가능 - 사용시 요청보내면 항상 새로고침이 되는데 ajax는 새로고침 없이 요청 보낼 수 있음 - 요청완료시 (서버응답시) 특정 코드를 실행하고 싶으면 .then(()=>{}) 붙여서 코드 작성 - fetch('경로', { method : 'POST, body : '전송하고 싶은 데이터' }) 하면 POST, PUT, DELETE 요청도 가능 - 서버로 array, object 전송시 서버와 데이터 주고받을 때는 문자 및 숫자만 가능하기 때문에 JSON.stringify( { xxx : 'xxx' } ).. 2023. 4. 27.
Next.js | MongoDB - Collection, Document, findOne(), insertOne(), updateOne() [Collection] - 하나의 폴더 [Document] - 하나의 문서 * DB 입출력 코드는 server component 안에서만 사용 [MongoDB에서 document 하나를 지정해서 가져오고 싶을 땐] .findOne({}) 사용, _id 권장 [insertOne()] - document 하나 발행 [updateOne()] - document 하나 수정 - .updateOne( {수정할 게시물 정보}, {$set: { 속성: '내용', 속성: '내용'}} ) - $set 연산자 : 기존 값 교체, 만약 없으면 추가해줌 - $unset 연산자 : 기존에 있던 키값 제거 - $inc 연산자 : 덮어쓰는 것이 아닌 기존 값이 숫자면 그곳에 숫자를 더하거나 뺄 때 사용 2023. 4. 27.