Next.js로 웹서비스 만들기 4주차 - 게시판 만들기 (Dynamic Routes, 페이지 이동, MongoDB 데이터 수정)
·
Next.js
게시물 상세페이지 만들기 게시판 DB에 글 데이터를 몇 개 집어넣고 리스트를 조회하는거까지 해봤으니, 이제 특정 게시물을 눌렀을 때 해당 게시물의 상세페이지로 넘어가는 기능을 구현할 차례이다. Dynamic Route 현재 게시물 리스트는 /list에서 조회하고 있고, 게시물을 선택하면 그 게시물의 id 값에 따라 /detail/1, detail/2, detail/3 이런식으로 url이 바뀌면서 그 내용을 보여주면 된다. 1. 다음과 같이 detail 폴더를 만들고, 그 안에 [id]라는 폴더를 또 만든다. [폴더명] -> 폴더 생성 시 이렇게 대괄호로 감싸게 되면, 이 부분에 어떤 내용이 와도 상관없다는 의미가 된다. 따라서 /detail/123, /detail/ㅇ 이렇게 입력해도 /detail/[id..
Next.js로 웹서비스 만들기 3주차 - Next.js에서 MongoDB 사용하기
·
Next.js
State의 변경 ✅ state를 변경시키려면 스프레드 연산자를 사용하여 값을 복사한 후, 복사본의 값을 변경시켜야 한다. 이는 리액트의 불변성과 관련있는데, 리액트는 기존 state와 새 state의 값을 비교하여 다를 경우에만 상태 변화를 감지한다. 불변성을 지켜줌으로써 효율적인 상태 업데이트를 하는 것이다. 때문에 상태를 직접 수정하기보다 복사본을 만들고 이 값을 변경해주는 것이 바람직한데, 여기서 또 주의할 점이 있다.let [ count, setCount ] = useState(0); let newCount = state # -> (x) let newCount = [...count] # -> (o)위 예시 코드의 세 번째 줄과 같이 작성할 경우, 데이터의 값을 복사하는 것이 아니라 값의 주소를 ..
Next.js로 웹서비스 만들기 2주차 - SSR, 캐싱, 자동 라우팅, 서버 컴포넌트
·
Next.js
Next.js를 많이 사용하는 이유?Server-Side-Rendering의 재유행CSR(Client Side Rendering) : 브라우저에서 실시간으로 html을 생성 -> 부드러운 사용자 경험 제공SSR(Server Side Rendering) : 서버에서 html을 미리 만들어 전송한 것을 브라우저에서 띄움 -> 페이지 로딩 속도 향상, 검색 시 노출도 증가 💭 Next.js의 렌더링 방식Pre-Rendering - SSR - SSG - ISR이에 관해 자세한 내용은 따로 작성할 예정 . . . 참고 - https://enjoydev.life/blog/nextjs/1-ssr-ssg-isr#isr-incremental-static-regeneration Next.js의 캐싱언제 데이터가 캐싱 될까..
해안해
'Next.js' 태그의 글 목록