Next.js를 사용하여 클론 코딩을 하기보다 좀 느리더라도 어느정도 코드의 의미를 더 깊이 파악하면서 가보고자 한다.
이번 글에서는 npx create-next-app
명령어를 사용하여 넥스트 프로젝트를 생성했을때 만들어진 파일들에 대해서 들여다보고자 한다.
파악해보고자 하는 목록은 아래와 같다.
<meta name="description" content="explain your website here" />
적용된 결과는 아래와 같다.
검색엔진이 해당 사이트들의 meta description 태그에 있는 content 값을 긁어서 보여준다.
아래 app/layout.tsx
위 코드에 metadata
변수가 있다.
할당되는 값을 보면 title, description 이 있는데 각각 title, meta 태그를 생성한다.
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
최종적으로 html 파일에는 아래와 같이 박힌다.
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16">
rel
어트리뷰트는 사이트와 href에 걸려있는 파일의 상관관계를 나타내어 파일이 어디에 쓰이는지 파악type
어트리뷰트는 image/x-icon
인데 x-icon
은 favicon 파일 확장자가 ico
일때 사용image/png
이런식으로 사용)type
값은 MIME type
사용되는데 이건 브라우저 네트워크 탭에서 보면 Content-type
에 박혀있다.:
가 붙어있는 경우 '유사 클래스' 라고 한다.:root
유사 클래스는 예약어.html {
background-color: black;
}
아래가 더 우선순위 높음
:root {
background-color: black;
}
Next 프로젝트 생성하고 globals.css
확인해보면 root 유사클래스가 보인다.
@media (min-width: 1000px) {
대충 이런식
}
dark
인것을 사용위 코드는 시스템이 다크 모드일때만 적용되는 코드
--
prefix를 가져야한다.var(여기에 css변수)
함수의 인자값으로 던져서 사용@
로 시작합니다.@identifier
형식@tailwind
는 tailwind 측에서 제공하는 at-rules@media
도 at-rules 중 하나.@layer
로 시작.@layer test, test2, test3
test3
가 우선순위가 가장 높음@layer base {
:root {
color: blue;
}
}
text-wrap
속성 사용제목 부분의 첫째줄 둘째줄에 적혀있는 글자가 균형이 맞춰진걸 볼 수 있다.
text-balance
가 적용된 경우다.
preload
값을 적용하면 as
어트리뷰트도 같이 써줘야한다.Accept
를 정확하게 사용<script src="index.js" async></script>
ES module
을 지원하는 브라우저들은 해당 스크립트를 실행하지 않음<script src="/_next/static/chunks/polyfills.js" nomodule></script>
넥스트로 프로젝트를 만들면 ES module
을 사용한 것
이 경우 ES module을 지원하지 않는 브라우저들은 모듈 인식을 못함
구버전용 자바스크립트 파일을 따로 만들고 ES module 지원하는 브라우저들은 안 읽도록 처리한 것