영화 (36) 썸네일형 리스트형 20. Deployment(배포) 완료 소스 압축 (2) 19. Deployment(배포) 완료 소스 압축 (1) 18. Deployment(배포) 1. Vercel 계정 생성 Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.com 2. CSS Modules 추가Next Js는 CSS 적용할때 어떠한 Configuration(구성)을 하지 않고 CSS파일을 import만 하면 된다.모든 페이지들은 layout 파일이 근간이기 때문에 모두 같은 CSS 파일을 공유한다. styles > global.csshtm.. 17. Data Fetching(데이터 가져오기) - Error Handling(오류 처리) 16. Data Fetching(데이터 가져오기) - Suspense(임시적 로딩상태) Suspendse component로 감싸게 되면 데이터를 fetch 하기 위해 이 안의 component를 await하는 것이고병렬적으로 2가지를 동시에 fetch를 할 수 있는데 하나의 요청이 완료되면 즉시 component가 render가 된다.component가 준비되면 그 UI를 사용자에게 전달해주고 그리고 준비되는 동안에는 fallback을 전달해준다.MovieDetail component에서 fetch를 하지 않아 loading 파일은 아무것도 하지 않는다.왜냐하면 await 하는게 아무것도 없기 때문이다.loading component가 전체 페이지를 완전히 대체하는 것이었고 요청이 둘 다 마무리 되어야 페이지가 표시되었다.하지만 suspense component를 사용하게 되면 병렬적으로.. 15. Data Fetching(데이터 가져오기) - 병렬 요청(Parell Request) 병렬요청(Parell Request)이란?두개 이상의 비동기 작업을 동시에 실행하여 전체 실행 시간을 단축하는 방식이다.이는 비동기 처리의 효율성을 높이기 위한 대표적인 최적화 기법이다. 병렬 요청 vs 순차 요청항목순차 요청병렬 요청실행 방식첫 번째 요청이 끝나야 다음 시작여러 요청을 동시에 시작코드 예시await A(); await B();await Promise.all([A(), B()]);전체 소요 시간A + B 시간A와 B 중 더 오래 걸리는 시간만큼만 소요성능느림빠름 14. Data Fetching(데이터 가져오기) - Loading Components(로딩 UI) 서버 실행 시 브라우저가 로딩이 걸리면서 로딩화면이 보이게 되는데getMovies 함수가 완료되면 데이터가 보여지게 된다.server componet에서 fetch하는 중에 loading 파일을 제공하면 그 파일이 나타나게 된다.server component가 fetch를 끝내면 Next JS는 loading component를 page component로 바꿔준다.이는 streaming 덕분인데 여기서 일어나는 일들은 이 페지이가 content를 streaming하기 때문이다.나중에 http streaming 문서를 읽을 수 있는데 하지만 실제로 일어나는 건 백엔드에서 로딩중이라는 뜻이다.그래서 브라우저는 백엔드 작업이 완료되지 않았다고 생각하고 로딩을 하는 것이다.하지만 Next JS는 사용자가 페이.. 13. Data Fetching(데이터 가져오기) - Server Side(서버 측면) 어떤 일이 발생하기를 기다리려고 await를 사용할 때 async를 무조건 사용해야 한다!!!부모 함수에 무조건 async가 있어야 한다!!! about-us 경로를 갔다가 home으로 돌아오면로딩 없이 데이터를 가져오게 되는데 그 이유는 Next JS는 프레임워크이며 fetch된 url를 자동으로 캐싱 시켜주기 때문이다. 검사로 들어가서 Network 탭을 열고 새로고침 해도 movies에 대한 API를 사용하고 있지 않다는걸 확인할 수 있다.movies에 대한 API를 가져오는건 백엔드이다.서버 재시작 후 movies에 대한 API를 가져올때 빠르게 느껴지는 이유는단지 server component에서 Next JS가 fetch한 것을 기억하기 때문이다. 이전 1 2 3 4 5 다음
