[NDD-22] FE 초기 셋팅 (5h / 5h) #2
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- dependency
"@emotion/babel-plugin": "^11.11.0",
"@emotion/babel-preset-css-prop": "^11.11.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
-- dev
"@babel/cli": "^7.23.0",
"@babel/core": "^7.23.2",
"@babel/preset-env": "^7.23.2",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.23.2",
"@types/react": "^18.2.35",
"@types/react-dom": "^18.2.14",
"@typescript-eslint/eslint-plugin": "^6.9.1",
"@typescript-eslint/parser": "^6.9.1",
"babel-loader": "^9.1.3",
"eslint": "^8.53.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"html-webpack-plugin": "^5.5.0",
"prettier": "^3.0.3",
"ts-loader": "^9.5.0",
"typescript": "^5.2.2",
"webpack": "^5.89.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.15.1"
tsc --init 을 통한 tsconfig 셋팅
webpack 기반 react 초기 셋팅 진행
prettier & eslint 설정
milk717
reviewed
Nov 6, 2023
FE/tsconfig.json
Outdated
Comment on lines
1
to
11
| { | ||
| "compilerOptions": { | ||
| "target": "es5", // 결과 파일 형식 | ||
| "module": "es2015", // module 형식 | ||
| "esModuleInterop": true, // import시 namespace alias 가능 | ||
| "moduleResolution": "node", | ||
| "jsx": "react-jsx", | ||
| "jsxImportSource": "@emotion/react" | ||
| }, | ||
| "include": ["src"] | ||
| } |
There was a problem hiding this comment.
tsconfig 옵션은 아직 확정되지 않은걸까요?
저는 개인적으로 타입을 엄격하게 검사하는 것이 좋아서
"strict": true,
"noImplicitAny": true,
이 두가지 옵션도 넣는게 좋습니다!
There was a problem hiding this comment.
좋습니다 아직 최소의 옵션만을 추가해 두었는데, 요것까지 추가해서 올려보겠습니다
|
eslint에 unused-imports 플러그인 추가해 주실수 있나요? 사용하지 않는 import를 지워주는 플러그인 입니다 그리고 기존에 합의 봤던 콘솔은 올리지 말자인데 다음과 같은 룰을 추가하면 콘솔이 있을시 warn이나 error로 설정할 수 있습니다!! 웹팩 설정 고생많으셨습니다 |
현재 모노레포 형태에서 진행되어 root 경로를 통해 tsconfig를 찾을 수 없던 문제 해결, 또한 하단의 react/no-unknown-property 에 대한 옵션을 추가함으로 css-props 문제 해결
e9d540e 다음과 같이 추가해보았습니다!! |
Yoon-Hae-Min
pushed a commit
that referenced
this pull request
Nov 11, 2023
* feat: FE 초기 셋팅
- dependency
"@emotion/babel-plugin": "^11.11.0",
"@emotion/babel-preset-css-prop": "^11.11.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
-- dev
"@babel/cli": "^7.23.0",
"@babel/core": "^7.23.2",
"@babel/preset-env": "^7.23.2",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.23.2",
"@types/react": "^18.2.35",
"@types/react-dom": "^18.2.14",
"@typescript-eslint/eslint-plugin": "^6.9.1",
"@typescript-eslint/parser": "^6.9.1",
"babel-loader": "^9.1.3",
"eslint": "^8.53.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"html-webpack-plugin": "^5.5.0",
"prettier": "^3.0.3",
"ts-loader": "^9.5.0",
"typescript": "^5.2.2",
"webpack": "^5.89.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.15.1"
tsc --init 을 통한 tsconfig 셋팅
webpack 기반 react 초기 셋팅 진행
prettier & eslint 설정
* feat: eslint & prettier 셋팅
* fix: tsconfig 수정 및 새로운 규칙에 따른 index.ts 예외 처리
* feat: unused import 관련 설정 추가
현재 모노레포 형태에서 진행되어 root 경로를 통해 tsconfig를 찾을 수 없던 문제 해결,
또한 하단의 react/no-unknown-property 에 대한 옵션을 추가함으로 css-props 문제 해결
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Why
CRA 없이 webpack 기반 초기 셋팅을 진행합니다.
기술 스택중 하나인 emotion의 css-props를 사용하기 위해선
선택지가 총 세가지가 있었습니다.
아래의 emotion 공식문서에 따르면 cra 로는 css-props가 불가능 하다고 합니다. (babel 설정이 불가능한 부분이 있기 때문)
https://emotion.sh/docs/css-prop
How
해당 글에서 제안하는 방식을 적극 이용합니다.
https://medium.com/@uk960214/cra-%EC%97%86%EC%9D%B4-react-%EC%95%B1-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-ts-eslint-prettier-4-eslint-prettier-709a93f6befb
다만 아래에서 적혀있는 emotion css-props가 공식문서에서 제안하는 방식인 .babelrc 의 수정만으로는 불가능 했는데
아래와 같이 webpack.config.js 에서 다음과 같이 babel-loasder에 option을 달아 해결할 수 있었습니다,
해결할 수 있었던 이유는 아래와 같습니다.
Webpack과 Babel을 함께 사용할 때 babel.config.json 파일과 Webpack의 babel-loader 설정은 서로 다른 목적으로 사용됩니다.
babel.config.json은 Babel 자체의 구성 파일로, Babel이 JavaScript 코드를 변환하는 방법을 정의합니다. 여기에는 사용할 프리셋과 플러그인을 지정할 수 있습니다.
한편, Webpack의 babel-loader는 Webpack이 모듈을 빌드할 때 Babel을 사용하여 JavaScript 파일을 변환하는 방법을 정의합니다. babel-loader 설정은 Webpack이 어떤 파일에 대해 Babel을 사용할 것인지 (test로 정의된 파일 확장자), node_modules 같은 특정 폴더를 제외할 것인지, 그리고 Babel에 전달할 옵션을 포함합니다.
babel.config.json에 설정을 해도 Webpack에서 babel-loader를 통해 명시적으로 해당 설정을 사용하도록 지정하지 않으면, Webpack은 Babel을 사용하여 파일을 변환하지 않습니다. 즉, babel.config.json은 Babel의 설정을 정의하지만, Webpack이 그 설정을 사용하도록 지시하는 것은 babel-loader의 역할입니다.
또한, Webpack은 여러 환경에 따라 다른 Babel 설정을 사용할 수 있도록 babel-loader에 options을 통해 직접 설정을 제공할 수 있게 합니다. 이를 통해 개발 환경과 프로덕션 환경에서 다른 Babel 설정을 적용할 수도 있습니다.
결론적으로, babel.config.json은 Babel의 전역 설정을 제공하지만, 실제로 Webpack과 함께 사용할 때는 babel-loader의 설정을 통해 Webpack 빌드 프로세스에서 이를 활용하게 됩니다.
(위의 방식은 문제가 있습니다. 해당 문제를 분석한 백로그를 추가합니다. https://milk717.atlassian.net/browse/NDD-156)
테스크 상세내용
(본 테스크는 이성인의 babel과 webpack에 대한 깨달음을 바탕으로 진행될 예정입니다. 중요도는 낮습니다. 기능상 동일합니다)
선요약 : 현재 babel과 webpack 두곳에서 option에 대해 불필요하게 중복선언 중입니다.
지금 사용중인 webpack.config.json의 babel 은 아래와 같습니다.
사진을 통해서 확인해보면 webpack.config.json에서 babel-loader를 통해서 상속받은 babel정보를 바탕으로 새로운 옵션을 추가해서 사용중입니다. 따라서 책임분리가 잘 진행되지 않고 있음을 확인할 수 있었습니다.
하지만 당연히도 babel을 상속받기 때문에 설정을 모두 babel로 옮겨 책임분리를 하는것이 필요했습니다!
또한 babel.config.json 을 .babelrc로 변경해서 작성할 예정입니다.
현재 우리는 monorepo를 사용중이지만 사이드 이펙트를 관리할 능력이 부족하기 떄문에 전역으로 관리될 babel.config.json 이 아닌 현재 dir을 관리할 babelrc 로 변경할 필요가 느껴졌습니다.
Result
emotion 관련
hot mode를 통해 dev 개발 속도 상승
webpack serve --mode development --open --hot--hot은 Hot Module Replacement(HMR)을 활성화하여, 변경된 모듈만을 교체하는 방식으로 페이지 새로고침 없이도 업데이트를 반영할 수 있게 합니다.
Reference
https://medium.com/@uk960214/cra-%EC%97%86%EC%9D%B4-react-%EC%95%B1-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-ts-eslint-prettier-4-eslint-prettier-709a93f6befb
https://blog.naver.com/dlaxodud2388/223147930389
Link
https://milk717.atlassian.net/browse/NDD-13?atlOrigin=eyJpIjoiOGZkOWRmNWEyNGQ5NDhjZWI5OWMzMTk5MTI4YjZkYjgiLCJwIjoiaiJ9