프로젝트 세팅하기 (feat. 험난한..을 곁들인)

코드잇 스프린트에서 첫 팀 프로젝트를 시작하면서 내가 초기 세팅을 맡게 되었다.

레포지토리 만들고 폴더 구조만 만들어놓으면 되는줄 알았지.... 근데 생각보다 부딪히는 문제들이 많아서 하나씩 적어보려고 한다. 

---

먼저 팀원들과 아래 내용을 합의했다. 

1. 어떤 CSS를 사용할 것인가 - module.css 

2. 폴더 구조는 어떻게 구성할 지 

3. 어떤 lint 를 사용할 지 - eslint, prettier, stylelint + husky (세부 설정값까지)

4. 상태관리 - Context

5. R&R - 기능 구현 분담, 문서화, 발표 등 

6. 

---

내가 부딪힌 문제들은 아래와 같다.

1. lint와 formatter간의 버전 충돌 (config를 사용했는데도..) 

  - 근본적인 해결책이 아닌건 알지만  npm install -legacy-peer-deps 를 사용해서 무시하고 진행하려고 했지만 코드 하나 적을때마다 에러가 발생해서 결국 다 엎고 다시 설치했다. 

 

2. .eslintrc.js 파일명은 더이상 사용하지 않는다 > eslint.config.js

 

속성이름 : 속성값;

이런 식으로 작성되어있는데 자꾸 콜론 자리에 세미콜론을 사용하라는거다 

파일 명을 바꾸고 해결이 되었다.

 

https://eslint.org/docs/latest/use/configure/configuration-files

Configuration Files - ESLint - Pluggable JavaScript Linter

 

 

3. stylelint 에서 더이상 사용하지 않는 rules 속성값이 있다 . 공식 문서의 중요성을 깨달았다. 

https://stylelint.io/migration-guide/to-15/#deprecated-stylistic-rules

Migrating to 15.0.0 | Stylelint

처음에 아래 사이트를 이용했는데 업데이트가 안됐나보다. 

https://maximgatilin.github.io/stylelint-config/ - 사용하지말것... 

 

 

4. 'React' must be in scope when using JSX react/react-in-jsx-scope

즉 JSX를 사용할때 import React from 'react'; 를 매 파일마다 적어줘야한다. 

내용이 길어져서 따로 작성

'React' must be in scope when using JSX react/react-in-jsx-scope

결론은 .eslintrc.js 파일명→  eslint.config.js 으로 수정해서 해결됨 

 

5. prettier 

TypeError: A dynamic import callback was not specified.

https://github.com/prettier/prettier-vscode/issues/3007

A dynamic import callback was not specified · Issue #3007 · prettier/prettier-vscode

이 글을 하나씩 읽어보다가 

vscode 를 종료하고 다시 켜보면 해결된다는 글을 보고 오잉? 하면서 시도해봤는데 바로 해결 ㅋㅋㅋㅋ 아놔 ㅜ 

---

여러가지를 해결하면서 챗지피티에 의존하는 것은 문제 해결에 별로 큰 도움이 되지 않는다는 점을 깨달았다 ^ ^ ..

그간 많은 의존을 했고, 그게 안좋은거라는 얘기도 들었지만 뭔가 안된다 싶을땐 지피티를 켜게되곤 했다 ㅜ 

구글링을 했을땐 다양한 사례와 해결 방법을 시도해볼수 있었는데 그에 비해 지피티는 단편적인 해결책만 주는것 같다. 

 

이제 다시 나머지 세팅하러 가세

https://eslint.org/docs/latest/rules/

Rules Reference - ESLint - Pluggable JavaScript Linter

 

https://stylelint.io/user-guide/rules/

Rules | Stylelint