https://github.com/devyubi/til_npm
각종 라이브러리 설치 및 활용
https://github.com/devyubi/til_npm
Last synced: 2 months ago
JSON representation
각종 라이브러리 설치 및 활용
- Host: GitHub
- URL: https://github.com/devyubi/til_npm
- Owner: devyubi
- Created: 2025-07-21T02:00:56.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-07T00:40:28.000Z (11 months ago)
- Last Synced: 2025-08-07T02:33:50.865Z (11 months ago)
- Language: JavaScript
- Size: 850 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 프로젝트 셋팅
- public/index.html 정리
- package.json 정리
- index.js 정리
- App.js 정리
- index.css 정리
- App.css 제거
- css 폴더 생성/layout.css 생성
- npm 관련 제거(test 등등)
# 기본 ESLint, Prettier 설정
## 1. ESLint
```bash
npm install eslint@latest -D
```
```bash
npm install eslint-config-react-app --save-dev --force
```
- 지금은 최신 버전 mjs 로 진행함.
```bash
npx eslint --init
```
## 2. prettier
```bash
npm i prettier -D
```
- .prettierrc.json 파일 생성
```json
{
"singleQuote": false,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "avoid",
"endOfLine": "auto"
}
```
## 3. ESLint 와 prettier 연결
```bash
npm i eslint-config-prettier -D
npm i eslint-plugin-prettier -D
```
- `eslint.config.mjs` 설정 수정
```mjs
import js from "@eslint/js";
import pluginReact from "eslint-plugin-react";
import pluginPrettier from "eslint-plugin-prettier";
import globals from "globals";
import { defineConfig } from "eslint/config";
export default defineConfig([
{
files: ["**/*.{js,jsx}"],
languageOptions: {
ecmaVersion: "latest",
sourceType: "module",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
globals: globals.browser,
},
plugins: {
react: pluginReact,
prettier: pluginPrettier,
},
rules: {
...pluginReact.configs.recommended.rules,
"prettier/prettier": "warn",
"no-var": "warn",
"no-unused-vars": "warn",
},
settings: {
react: {
version: "detect",
},
},
},
]);
```
- VSCode 의 settings.json 에 내용 추가(`Ctrl + ,`)
```json
"eslint.useFlatConfig": true
```
## 4. 기본 npm 설치하기
- emotion 설치
```bash
npm i @emotion/react
npm i @emotion/styled
```
- scss 설치
```bash
npm i sass -D
```
- react-router-dom 설치
```bash
npm i react-router-dom
```
## 5. react-router-dom 의 라우터 셋팅
- App.jsx 에 작성(Router > Routes > Route)