충남대 FE_손동훈1주차 과제 Step1 #29
Conversation
| "baseUrl": "./src", | ||
| "paths": { | ||
| "@components/*": ["./components/*"], | ||
| "@styles/*": ["./styles/*]"] |
There was a problem hiding this comment.
| "@styles/*": ["./styles/*]"] | |
| "@styles/*": ["./styles/*"] |
1.절대경로 설정 이런 오류가 나서 구글링을 해서 수정도 해봤는데 어디가 문제인지 잘 모르겠습니다.
PR 질문에 대한 답변을 여기 남겨볼게요. 첨부해주신 사진에서 에러 메시지를 보면 아래 2가지 에러 메세지를 볼 수 있습니다.
Unable to resolve path to module '@styles/reset'. eslint(import/no-unresolved)'@styles/reset' 모듈 또는 해당 형식 선언을 찾을 수 없습니다. ts(2307)
1번은 eslint에서 절대경로를 인식하지 못해서 발생하는 에러라는걸 알 수 있고, 2번은 ts에서 인식하지 못하고 있다는 점을 알 수 있어요. 작성해주신 eslint config는 tsconfig에 정의된 절대경로를 eslint-plugin-import, eslint-import-resolver-typescript를 활용해서 eslint에서 인식하게 되는데 ts에서 먼저 인식하지 못하고 있으니 tsconfig를 먼저 살펴봐야겠다는 디버깅 과정을 거칠 수 있겠죠.
tsconfig.paths.json을 자세히 살펴보면 @styles/* 정의시 ]가 끝에 우발적으로 들어가서 잘못된 path로 정의되고 있다는 점을 알 수 있습니다. 오타가 있어서 잘 안보였던거죠.
추가로 2번 에러 메시지처럼 에러를 한글로 보기보다는 구글 검색시 영어 자료가 더 많고, copilot과 chatgpt와 같은 프로그래밍에 특화된 llm은 영어로 맥락을 전달했을 때 더 잘 답변하기도 하기에 vscode의 설정은 영어로 하시는걸 추천드리긴 합니다.
| }, | ||
| "settings": { | ||
| "import/resolver": { | ||
| "typescript": {} |
There was a problem hiding this comment.
| "typescript": {} | |
| "typescript": { | |
| "project": "./tsconfig.json" | |
| } |
해당 코멘트에 이어서 답변을 달아둘게요. ts 에러가 해결됐을테니 eslint 에러를 해결해야하는데요, eslint-import-resolver-typescript가 그 역할을 담당하는걸 알고 있으면, 공식 문서를 통해 설정하지 못했거나 잘못 설정한 config가 있는지 확인하는 과정을 거치면 됩니다. 문서에서 Configuration 섹션에 import/resolver의 몇몇 속성이 적용되지 않은걸 알 수 있으실거에요.
| "ecmaVersion": 12, | ||
| "sourceType": "module" | ||
| }, | ||
| "plugins": ["react", "@typescript-eslint"], |
There was a problem hiding this comment.
| "plugins": ["react", "@typescript-eslint"], | |
| "plugins": ["react", "@typescript-eslint", "import"], |
eslint-import-resolver-typescript 문서에 따라 추가해주는게 좋겠습니다.
| @@ -0,0 +1,55 @@ | |||
| { | |||
There was a problem hiding this comment.
커밋 메세지에 대해 피드백드려요. 형식에 맞춰서 잘해주셨는데요, 다만 활용하시는 커밋 형식은 conventional commit을 의미하는데 commit type과 콜론 (:)은 띄우지 말고 붙이는게 엄밀하게는 맞긴 합니다. f79f224 커밋 메시지를 기준으로는 아래처럼 변경되는거죠. 이미 푸쉬한 커밋은 수정할 필요는 없구요, 추후 새롭게 만드시는 커밋에 한해서만 신경써보면 좋을 거 같아요.
- feat : cra typescript템플릿으로 세팅
+ feat: cra typescript템플릿으로 세팅|
|
||
| gitignore를 추가하고, 프로젝트에 불필요한 코드들은 정리해주세요. (ex. 사용하지 않는 icon 등) | ||
|
|
||
| 본인만의 폴더 구조 기준을 세우고 반영해주세요. |
There was a problem hiding this comment.
README에 과제 설명에 있는 "본인만의 폴더 구조 기준을 세우고 반영해주세요. 그리고 README에 업데이트 해주세요." 항목이 작성되면 좋겠습니다.
| "start": "craco start", | ||
| "build": "craco build", | ||
| "test": "craco test", | ||
| "eject": "react-scripts eject" |
There was a problem hiding this comment.
eslint, prettier를 실행할 수 있는 스크립트도 추가되면 쉽게 활용하실 수 있을거에요. 추가해보실 수 있을까요? 시간상 어렵다면 다음에 해주셔도 괜찮습니다.
| "web-vitals": "^2.1.4" | ||
| }, | ||
| "scripts": { | ||
| "start": "craco start", |
There was a problem hiding this comment.
npm start로 개발서버 실행시 주의 메세지가 뜨고 있네요. 코멘트와 동일한 의견대로 한번 진행해보시겠어요?
|
base 브랜치를 각자 GitHub 유저네임으로 변경해달라는 요청이 있으므로 제가 변경해뒀어요. 앞으로 제출하게될 풀 리퀘스트는 모두 해당 브랜치로 제출 부탁드리겠습니다! |
|
2주차 과제 진행을 위해 먼저 병합해둘게요. 제가 남겨드린 리뷰는 후속 PR로 개선해보면 좋겠습니다. |
안녕하세요.
제대로 코딩을 해보는게 처음이라 정보를 하나씩 찾아보느라
프로젝트 세팅에도 시간이 많이 걸렸습니다.
1.절대경로 설정 이런 오류가 나서 구글링을 해서 수정도 해봤는데 어디가 문제인지 잘 모르겠습니다.
2.설정파일의 구성이 문제 없이 되었는지 궁금합니다.