IT/Next.js

· IT/Next.js
Next.js14를 기준으로 App router와 Pages router를 각각 CSR/SSR/SSG/ISR을 구현해 봤다.왜 굳이 둘 다 한 거죠...?라고 한다면 처음에는 App router로 구현하여 동작과정을 확인하려고 했다. 하지만 내 예상과 다르게 동작해 둘 다 구현했다.실제로 둘 다 구현해 보니... 차이점이 있었다!구현에 사용한 예시는 API에서 시간을 받아와 화면에 보여주는 페이지이다. CSR (Client Side Rendering)사용자가 페이지에 진입할 때, 서버로부터 빈 HTML을 받아오고 이후 브라우저에서 JS를 통해 필요한 데이터를 API로 받아와 화면을 그린다. 즉, 초기 로딩 시에는 빈 화면이 나타나고 JS가 실행되고 데이터가 로드된 후에 콘텐츠가 나타난다.예시 코드impo..
· IT/Next.js
CORS 에러 발생오늘도 어김없이 CORS에러가 나를 찾아왔다..ㅎㅎ 에러의 원인http://localhost:3000(프론트)에서 https://www.test.co.kr(백앤드)로 요청을 날려서로 다른 Origin이기 때문에 브라우저에서 SOP(동일 출처 정책)에 의하여 차단한 것이다axios.get('https://www.test.co.kr/api/item/diver.gate.php', { params: { searchType: 'REVIEW', sortOption: 'UPDATE', caType: 1, displaySize: 10, },}) CORS란?CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유 정책이다 기본적으로 브라우저가..
솔B
'IT/Next.js' 카테고리의 글 목록