Next.js를 사용하여 클론 코딩을 하기보다 좀 느리더라도 어느정도 코드의 의미를 더 깊이 파악하면서 가보고자 한다.

이번 글에서는 npx create-next-app 명령어를 사용하여 넥스트 프로젝트를 생성했을때 만들어진 파일들에 대해서 들여다보고자 한다.

파악해보고자 하는 목록은 아래와 같다.

1. meta description tag
2. favicon.ico
3. :root
4. prefers-color-scheme
5. CSS variable
6. at-rules
7. cascade layer
8. text-balance 유틸리티 클래스
9. link 태그의 preload 기능
10. script 태그의 async 어트리뷰트
11. script 태그의 nomodule 어트리뷰트

1. Meta description tag

• meta 태그에 관한 내용
• 소셜 미디어에 링크를 공유할때 보이는 설명에 사용
• Search Engine이 검색결과에 사이트 제목 밑에 표시하는 설명에 사용
• 사용법

<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" />

2. favicon.ico

• 브라우저 탭, 주소창, 북마크 등에 나타나는 사이트의 아이콘.
• 파일 확장자는 꼭 ico가 아니어도 된다. (아래 MDN 사이트 내용 확인)

https://developer.mozilla.org/en-US/docs/Glossary/Favicon

• 아래 caniuse 사이트에서는 svg 확장자 쓰면 고해상도, 큰 아이콘들을 쓰는데 좋다고 나와있다

https://caniuse.com/?search=favicon

최종적으로 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에 박혀있다.
  

3. :root

• css에서 세미콜론 기호 : 가 붙어있는 경우 '유사 클래스' 라고 한다.
• :root 유사 클래스는 예약어.
• html 태그의 유사 클래스.
• 그냥 html 태그를 selctor로 사용하는것보다 우선순위가 높다.

html {
	background-color: black;
}

아래가 더 우선순위 높음
:root {
	background-color: black;
}

Next 프로젝트 생성하고 globals.css 확인해보면 root 유사클래스가 보인다.

4. prefers-color-scheme

• media 쿼리에 쓰이는 media feature중 하나
• media 쿼리는 반응형 만들때 많이 볼 수 있다.

@media (min-width: 1000px) {
	대충 이런식
}

• prefers-color-scheme은 유저 컴퓨터 시스템에 적용되어있는 테마 모드를 사용.
• 시스템 테마가 다크 모드이고 media feature 값이 dark 인것을 사용
  

위 코드는 시스템이 다크 모드일때만 적용되는 코드

5. css variable

• css 변수는 -- prefix를 가져야한다.
• var(여기에 css변수) 함수의 인자값으로 던져서 사용
  

6. at-rules

• @ 로 시작합니다.
• @identifier 형식
• @tailwind 는 tailwind 측에서 제공하는 at-rules
• @media 도 at-rules 중 하나.

7. cascade layer

• @layer 로 시작.
• at-rules 중 하나
• @layer test, test2, test3
• 마지막에 정의된 test3가 우선순위가 가장 높음

@layer base {
	:root {
    	color: blue;
    }
}

8. text-balance

• tailwind 에서 제공하는 유틸리티 클래스
• text-wrap 속성 사용
• https://tailwindcss.com/docs/text-wrap

제목 부분의 첫째줄 둘째줄에 적혀있는 글자가 균형이 맞춰진걸 볼 수 있다.
text-balance 가 적용된 경우다.

9. link태그의 preload

• html 렌더링이 되기전에 link태그에 연결된 파일을 다운받게 한다.
• preload 값을 적용하면 as 어트리뷰트도 같이 써줘야한다.
• CSP (Content Security Policy) 적용하고 요청 헤더에 Accept를 정확하게 사용

10. script async

• boolean 값
• html 파싱과 script 파일 다운로드를 병행
• script 파일 다운로드가 완료되면 바로 script 파일 실행
• script 파일 실행중에는 html 파싱 중단
• 사용법

<script src="index.js" async></script>

11. script nomodule

• boolean 값
• ES module 을 지원하는 브라우저들은 해당 스크립트를 실행하지 않음
• 구버전 브라우저 호환성을 위해서 사용

<script src="/_next/static/chunks/polyfills.js" nomodule></script>

넥스트로 프로젝트를 만들면 ES module 을 사용한 것
이 경우 ES module을 지원하지 않는 브라우저들은 모듈 인식을 못함
구버전용 자바스크립트 파일을 따로 만들고 ES module 지원하는 브라우저들은 안 읽도록 처리한 것