fix: eslint setting, font setting#103
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
chamny20
left a comment
There was a problem hiding this comment.
setting 관련해서 공부할 수 있는 pr인 것 같아요~
울온니 최고 :>
There was a problem hiding this comment.
헉 우리가 eslintrc.json 파일 세팅이 제대로 안되어있었군요!?
이 부분은 어떻게 다시 세팅을 하신 건가요?
There was a problem hiding this comment.
next.config 관련해서 괜찮은 아티클이 있어 공유합니다~
https://han-py.tistory.com/503
| @@ -1,5 +1,9 @@ | |||
| /** @type {import('next').NextConfig} */ | |||
| const nextConfig = { | |||
| reactStrictMode: true, | |||
There was a problem hiding this comment.
요렇게 설정하게 되면 react에서 관련 부분에 있어서 <React.StrictMode>를 한 거랑 마찬가지군요!
React.StrictMode : application 내에서 문제가 일어날 수 있는 부분에 대한 경고를 알려주는 기능
| const nextConfig = { | ||
| reactStrictMode: true, | ||
| eslint: { | ||
| ignoreDuringBuilds: true, |
There was a problem hiding this comment.
빌드 시에 eslint를 무시하는 설정이군요!
갑자기 궁금해진 게..
이 세팅을 true로 하는 게 보편적인 것 같던데, 프로젝트 관리?측면에서 보면 이 설정을 키는 게 나은 건지 끄는 게 나은 건지 궁금하네요!
There was a problem hiding this comment.
음 제 생각에는 선택인 것 같은데 일단 우리 프로젝트에 error가 너무 많아서 임의로 추가해뒀어요!
There was a problem hiding this comment.
요거는 저도 항상꺼두는데요~ 요 ignoreDuringBuilds next.js의 eslint룰이 따로 존재하는데 해당 룰이 저희가 eslint룰 세팅해둔거와 다른 경우 룰이 중복되기 때문에 에러가 발생해서 지금처럼 따로 eslin룰을 가져가는 경우에는 꺼두는게 좋습니다~
안그러면 빌드시 항상 실패합니다~
There was a problem hiding this comment.
관련 아티클 공유합니당!
- https://velog.io/@kimconut/package.json%EC%9D%98-dependencies%EC%99%80-devdependencies%EC%9D%98-%EC%B0%A8%EC%9D%B4
- https://80000coding.oopy.io/fb570d89-1874-424c-b0d2-5cf2bada3867
- https://www.codeit.kr/community/questions/UXVlc3Rpb246NjBlNmQwN2I2ZjU1NDAxYWEyNzAyYjE1
플젝할 때 빌드 시간이 꽤 길어 고민이었는데,,
승민님이 분리하라고 하신 이유가 잘 나와있네요~ :>
| "esModuleInterop": true, | ||
| "module": "esnext", | ||
| "moduleResolution": "bundler", | ||
| "moduleResolution": "Node", |
There was a problem hiding this comment.
흠.. 아래 링크를 깊게 보진 못했지만 이 내용 관련해서 잘 이해가 안가네요
혹시 bundler에서 Node로 수정된 이유가 있을까요?
There was a problem hiding this comment.
두번째 아티클과 같은 경우였습니다 다시 bundler로 수정했어요~!
There was a problem hiding this comment.
"moduleResolution": "bundler" 옵션이 추가된 pr
There was a problem hiding this comment.
localFont에 대해 깊게 한번 봐야겠어요!
weight 관련 문제는 회의 때 한번 얘기해봐요~!
There was a problem hiding this comment.
eslint 룰 세팅관련해서 제가 나중에 설명드려도 좋을 것 같네요! ㅎㅎ
세팅은 잘 하신것 같아요~! 이제 추가적으로 룰을 켜고 코드 수정해나가면 될 것 같아요!
그리고 save auto fix를 설정안해두신것 같은데~ 요거는 거의 필수로 해두세요!
지금은 yarn lint 스크립트를 돌려야만하는 번거로움이 있지만, 이 과정을 파일 저장시 자동으로 lint 체크 후 수정까지 해준답니다~
vscode의 settings.json에서 수정이 가능합니다~
https://www.digitalocean.com/community/tutorials/workflow-auto-eslinting
요건 제가 항상 사용하는 eslint rule을 패키지화해둔건데 eslint룰 세팅 참고해주세요! 궁금한거있으면 여쭤봐주세용!
| "react/jsx-filename-extension": ["warn", { "extensions": [".ts", ".tsx"] }], | ||
| "no-useless-catch": "off" | ||
| } | ||
| } No newline at end of file |
There was a problem hiding this comment.
eol(end of line)은 꼭 신경써서 넣어주세요! 마지막에 개행을 넣는게 posix 명세에 정의되어있기 때문에 꼭 신경써서 넣어주어야합니다!
이유는 각 운영체제마다 개행 차이도 존재하고, 마지막에 개행으로 끝나지 않으면 해당 줄은 실제 줄로 간주하지 않아서 일부 프로그램에서는 문자로 처리하지 않을 수 있어요! (-표시가 마지막에 개행처리가 없다는것입니다~)
3.206 Line
A sequence of zero or more non- <newline> characters plus a terminating <newline> character.
| const nextConfig = { | ||
| reactStrictMode: true, | ||
| eslint: { | ||
| ignoreDuringBuilds: true, |
There was a problem hiding this comment.
요거는 저도 항상꺼두는데요~ 요 ignoreDuringBuilds next.js의 eslint룰이 따로 존재하는데 해당 룰이 저희가 eslint룰 세팅해둔거와 다른 경우 룰이 중복되기 때문에 에러가 발생해서 지금처럼 따로 eslin룰을 가져가는 경우에는 꺼두는게 좋습니다~
안그러면 빌드시 항상 실패합니다~
📝PR Description
이슈 번호 : #101
🔨작업 내용
💎결과 (사진 및 작업 결과)