Next (7) 썸네일형 리스트형 NextJS (7) _app 만약 모든 페이지에 똑같은 작업을 하고 싶다면 _app 파일에 대해 알아야 한다 _app 파일은 다른 파일들을 렌더링 하기 전에 _app파일을 제일 먼저 렌더링을 한다 그럼 바로 예시를 봐보자 예) 우선 pages folder안에 파일들을 만들어주고 이렇게 _app 파일을 만들어줬다 _app파일은 Component와 pageProps props들을 받는데 Component prop은 프로그램 실행을 할 때 Component props에서 모든 component들을 하나씩 불러와 작업을 한다 예) 예를 들어 프로그램을 실행시키면 _app 파일은 Index component를 불러와 작업을 한다는 뜻 이후 Info component도 불러와 작업시킨다 pageProps는 단순히 각 component에 있는 .. NextJS (6) Global Styles styles jsx는 component 내로 한정되어 있다 예를 보면서 이해를 해보자 Example. import Link from "next/link"; export default function NavBar() { return ( Home ); } 이렇게 NavBar component가 있다고 치고 import NavBar from "./Navbar"; export default function Screen() { return ( ); } Screen.js 파일을 만들어서 screen component 안에 NavBar을 불러와 따로 스타일 적용을 못 시킨다는 뜻이다 코드에 보면 anchor에 대한 스타일 적용이 안된다 이럴 때 필요한 게 global styles이고 사용 방법이 쉽다 import N.. NextJS (5) Styles JSX NextJS에서 CSS를 사용하려면 몇 가지 방법이 있는데 그중 하나는 styles JSX이다 이건 nextJS에서만 있는 고유한 CSS 방법이라 생소할수도 있는 데 사용 방법은 되게 간단하다. Example. nav tag, active class 이런식으로 style tag에 jsx prop을 넣어준 뒤 tag나 class에 스타일 적용을 할 수 있어서 되게 간편하다 Next JS (4) Routing ReactJS를 써봤다면 익숙한 Link를 nextJS에서도 routing 할 때 써준다 anchor을 쓰지 않는 이유는 client-side-navigation이 없기 때문인데 이게 무슨 뜻이냐면 anchor을 사용하여 routing을 하게 된다면 페이지를 이동할 때마다 새로고침을 하게 되고 이게 속도를 굉장히 느리게 만든다. Link를 사용하면 새로고침이 안되고 페이지 이동이 빠르기 때문에 Link를 통해 라우팅 하면 된다 Example. Home NextJS (3) Server-Side Rendering (SSR) vs Client-Side Rendering (CSR) client-side rendering (CSR) 은 간단하게 말하면 브라우저가 모든 걸 한다는 뜻이다. 브라우저가 모든 걸 (JS, react, etc) 다 갖고 온 후에 UI 가 보이게 되고 이거의 문제점은 연결 속도가 느리면 HTML도 렌더링이 되지 않아 모든 걸 다 fetch 하기 전까지 빈 화면만 나오게 된다. 혹은 JS가 비활성화가 되어 있다면 빈 화면만 쭉 뜨게 된다 (JS를 사용해 렌더링을 하기 때문) reactJS 가 client-side rendering이다 하지만 nextJS는 server-side rendering (SSR)은 HTML을 먼저 생성한다 그래서 연결속도가 느리거나 JS가 비활성화되어 있더라도 HTMl 코드는 뜨는 걸 확인할 수 있다 NextJS (2) Pages NextJS 프로젝트를 만들고 나서 pages 폴더 안에 있는 파일들을 만들면 각 파일들의 이름을 따서 자동으로 새로운 페이지로 추가된다 다만 주의해야 될게 함수는 항상 export default 이여야 페이지가 정상적으로 만들어진다 이렇게 만든 후 npm run dev로 실행시킨 뒤 http://localhost:3000/about 페이지로 가보게 되면 이렇게 About text가 잘 나오는 걸 확인할 수 있다 또한 존재하지 않는 페이지에 들어가면 사진과 같이 자동적으로 404 오류 페이지를 만들어낸다 NextJS (1) NextJS 프로젝트 시작하기 터미널에서 npx create-next-app@latest 앱 이름 typescript을 쓴다면 npx create-next-app@latest --template typescript 참고로 nodeJS version 16.8 이하면 npm run dev 오류가 나기 때문에 업데이트를 해줘야 한다 이전 1 다음
