<div id="readability-page-1" class="page"><div><blockquote>
인프런 박용주 님의 'Next.js 시작하기(feat. 지도 서비스 개발)' 강의를 들으며 공부한 내용들을 참고했습니다.
</blockquote>
<ol>
<li>create next app (with ts) 설치</li>
</ol>
<blockquote>
npx create-next-app@latest --typescript 
or 
yarn create next-app --typescript 
or 
npm create next-app --typescript
</blockquote>
<a href="https://nextjs.org/docs/getting-started">https://nextjs.org/docs/getting-started</a>
설치 과정에서 여러 옵션을 적용할 것인지 안내가 나옴 
예를들어, eslint 같은 확인해서 체크.
1-1 npx vs yarn vs npm vs vite
<ol start="2">
<li>Eslint 
코드에 대한 룰. 
물론 커스텀도 가능.</li>
</ol>
<a href="https://nextjs.org/docs/basic-features/eslint">https://nextjs.org/docs/basic-features/eslint</a>
2-1 eslintrc.json
<pre><code>{
 "extends": ["next/core-web-vitals"]
}</code></pre>
next/core-web-vitals는 next.js에서 제안하는 개발자 권장 사항.
<img src="https://velog.velcdn.com/images/2taesung/post/cf75dfc9-7fb9-41b6-806d-4fc4f2769129/image.png">
2-2 eslint 적용
window vscode extention 설치 
<img src="https://velog.velcdn.com/images/2taesung/post/c2a80ec1-ff3f-4c5a-8100-241d49ab9996/image.png">
setting에서 ESLint 옵션들을 선택 적용.
<img src="https://velog.velcdn.com/images/2taesung/post/d22d228f-0276-46fc-9e74-ebcad8f2d0c5/image.png">
2-3 적용 결과 확인
<img src="https://velog.velcdn.com/images/2taesung/post/4c76c0a3-6545-4871-96e5-fd00a24f796f/image.png">
권장하지 않는 방식으로 코딩할시 eslint 알림이 잘 발동함.
<ol start="3">
<li>Prettier 
말그대로 코드를 예쁘게 만드는 code formatter 
나아가 auto fix 기능도 있음 
예를 들어, 세미콜론을 빼먹은 경우 저장할 때 자동으로 생성 해준다.</li>
</ol>
<a href="https://prettier.io/docs/en/install.html">https://prettier.io/docs/en/install.html</a> 
3-1 설치
<blockquote>
yarn add --dev --exact prettier
</blockquote>
3-2 .prettierrc.json 생성 및 셋팅
<blockquote>
echo {}&gt; .prettierrc.json
</blockquote>
<pre><code>{
 "trailingComma": "es5",
 "tabwidth": 2,
 "semi": true,
 "singleQuote": true
}</code></pre>
trailingComma 옵션이 es6가 아니라 왜 es5 일까 싶었는데 
<img src="https://velog.velcdn.com/images/2taesung/post/e21bda95-1ea1-40b7-b874-448b088b3bf5/image.png"> 
Prettier 공홈에 가보니 그냥 옵션 이름인듯 하다. 
물론 버전시기 등과 관계는 있었겠지만.
3-3 eslint와 충돌 방지 
next.js Prettier와 ESlint가 역할이 겹치는 부분이 있어 충돌을 방지해주어야함.
3-3-1 설치
<blockquote>
npm install --save-dev eslint-config-prettier 
or 
yarn add --dev eslint-config-prettier
</blockquote>
3-3-2 .eslintrc.json 파일에 prettier 추가
<pre><code>{
 "extends": ["next/core-web-vitals", "prettier"]
}</code></pre>
<img src="https://velog.velcdn.com/images/2taesung/post/10fbb2cb-68fe-4cc1-bc2e-6978ff636ef9/image.png">
3-4 editor에 적용 
환경이나 editor의 종류에 따라 적용을 위한 액션들이 다르다. 
윈도우에서 vscode에 적용할 경우 extention을 깔아주어야 settings formatter에 default값으로 설정이 가능. 
<img src="https://velog.velcdn.com/images/2taesung/post/52ecaff8-4d42-4791-9864-f9569a1ab424/image.png">
<a href="https://prettier.io/docs/en/editors.html">https://prettier.io/docs/en/editors.html</a>
<img src="https://velog.velcdn.com/images/2taesung/post/561f044a-db95-4f14-b4c0-5f4e44ffe076/image.png">
<img src="https://velog.velcdn.com/images/2taesung/post/727ef678-2a04-4827-8636-bdc961f21814/image.png">
3-5 prettier는 적용 했는데 자동으로 auto fix를 안해줄 경우
<img src="https://velog.velcdn.com/images/2taesung/post/6abc2bb5-7329-4701-9afd-3c8cb34578c5/image.png">
<img src="https://velog.velcdn.com/images/2taesung/post/957fd183-93dd-44f0-873e-b909b4941436/image.png">
<blockquote>
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
</blockquote>
3-6 정상 변형 확인
<ul>
<li>참고 
ESlint 가 Ide와 호환이 되지 않은 경우 상단 바에 빨간 에러 발생 
=&gt; ESlint 버전 8.22 버전 이하로 다운.</li>
</ul>
지금 바쁘니 ... git hook husky 설정은 다음에 ...</div></div>

2taesung.log

Taesung Lee

인프런 박용주 님의 'Next.js 시작하기(feat. 지도 서비스 개발)' 강의를 들으며 공부한 내용들을 참고했습니다.
create next app (with ts) 설치
npx create-next-app@latest --typescript
or
yarn create next-app --typescript
or
npm create next-app --typescript
https://nextjs.org/docs/getting-started
설치 과정에서 여러 옵션을 적용할 것인지 안내가 나옴
예를들어, eslint 같은 확인해서 체크.
1-1 npx vs yarn vs npm vs vite
Eslint
코드에 대한 룰. 
물론 커스텀도 가능.
https://nextjs.org/docs/basic-features/eslint
2-1 eslintrc.json
{
  "extends": ["next/core-web-vitals"]
}
next/core-web-vitals는 next.js에서 제안하는 개발자 권장 사항.
2-2 eslint 적용
window vscode extention 설치
setting에서 ESLint 옵션들을 선택 적용.
2-3 적용 결과 확인
권장하지 않는 방식으로 코딩할시 eslint 알림이 잘 발동함.
Prettier
말그대로 코드를 예쁘게 만드는 code formatter
나아가 auto fix 기능도 있음
예를 들어, 세미콜론을 빼먹은 경우 저장할 때 자동으로 생성 해준다.
https://prettier.io/docs/en/install.html
3-1 설치
yarn add --dev --exact prettier
3-2 .prettierrc.json 생성 및 셋팅
echo {}> .prettierrc.json
{
  "trailingComma": "es5",
  "tabwidth": 2,
  "semi": true,
  "singleQuote": true
}
trailingComma 옵션이 es6가 아니라 왜 es5 일까 싶었는데 
Prettier 공홈에 가보니 그냥 옵션 이름인듯 하다.
물론 버전시기 등과 관계는 있었겠지만.
3-3 eslint와 충돌 방지
next.js Prettier와 ESlint가 역할이 겹치는 부분이 있어 충돌을 방지해주어야함.
3-3-1 설치
npm install --save-dev eslint-config-prettier
or
yarn add --dev eslint-config-prettier
3-3-2 .eslintrc.json 파일에 prettier 추가
{
  "extends": ["next/core-web-vitals", "prettier"]
}
3-4 editor에 적용
환경이나 editor의 종류에 따라 적용을 위한 액션들이 다르다.
윈도우에서 vscode에 적용할 경우 extention을 깔아주어야 settings formatter에 default값으로 설정이 가능.
https://prettier.io/docs/en/editors.html
3-5 prettier는 적용 했는데 자동으로 auto fix를 안해줄 경우
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
3-6 정상 변형 확인
참고 
ESlint 가 Ide와 호환이 되지 않은 경우 상단 바에 빨간 에러 발생
=> ESlint 버전 8.22 버전 이하로 다운.
지금 바쁘니 ... git hook husky 설정은 다음에 ...

Next.js 개발환경 셋팅하기

댓글