외곈 World 👽🌏

🎈 JSON Server 사용하기

1. REST / REST API / Json Server

• REST: 웹의 기본 프로토콜인 HTTP 를 기반으로 구현되며 , HTTP 메서드와 URL 을 이용하여 자원과 하고자하는 행동을 표현함.
• REST API: REST 한 방식으로 설계된 API.
• Json Server: JSON 파일을 이용하여 Rest API 서버를 빠르고 간단하게 생성 하기 위한 도구. 
  ex) (GET) http://example.com/wedding/1 : 1번 id 청첩장 가져오기

2. JSON Server 사용하기

https://github.com/typicode/json-server

01. JSON Server 설치

yarn add -D json-server

• 루트경로에 db.json 생성

{
  "posts": [
    { "id": "1", "title": "a title", "views": 100 },
    { "id": "2", "title": "another title", "views": 200 },
    { "id": "3", "title": "json-server", "views": 200 }

  ],
  "comments": [
    { "id": "1", "text": "a comment about post 1", "postId": "1" },
    { "id": "2", "text": "another comment about post 1", "postId": "1" }
  ],
  "profile": {
    "name": "typicode"
  }
}

• package.json에 아래 내용 추가

"dev:db": "json-server --watch db.json --port=8888" 
// watch옵션을 주면 db.json의 변경사항을 개발서버에 실시간 반영해준다.

• 실행

yarn dev:db

02. 동작 test (https://github.com/typicode/json-server?tab=readme-ov-file)

• Filter
  

  

  •  title이 json-server인 데이터 불러오기 테스트
    http://localhost:8888/posts?title=json-server
• 실행결과 
  

  

  
  
• Paginate
  Use _page and optionally _limit to paginate returned data. In the Link header you'll get first, prev, next and last links.
  

  GET /posts?_page=7   
  ​

  • _page=7 : 일곱 번째 페이지를 요청한다.
  • _limit 파라미터가 명시되지 않았으므로, json-server는 기본적으로 페이지당 10개의 항목을 반환한다.
  • 결과 : 기본 페이지당 10개 항목을 사용해 61~70번째 데이터를 반환한다.

  GET /posts?_page=7&_limit=20
  

  • _page=7: _page=7으로 일곱 번째 페이지를 요청한다.
  • _limit: _limit=20을 지정하여 페이지당 20개의 항목을 가져온다.
  • 일곱 번째 페이지에서 20개의 항목을 반환한다. 따라서, posts 데이터 중 121번째에서 140번째 항목까지를 반환한다. 
• Sort
  _sort=f1,f2
  데이터를 특정 필드를 기준으로 정렬할 수 있다. 정렬할 때는 쿼리 파라미터 _sort를 사용하고, 정렬 순서는 기본적으로 오름차순이며, 내림차순으로 설정하려면 필드 앞에 -를 붙인다.
  

  GET /posts?_sort=id,-views

  1. GET /posts?_sort=id
  • id 필드를 기준으로 오름차순 정렬
  • posts 데이터가 id 값이 작은 순서대로 정렬되어 반환 된다.
  2. GET /posts?_sort=-views
  • views 필드를 기준으로 내림차순 정렬합니다.
  • posts 데이터가 views 값이 큰 순서대로 정렬되어 반환 된다.
  3. 다중 정렬 예시: GET /posts?_sort=id,-views
  • 여러 개의 필드를 정렬 기준으로 사용할 수 있으며, id 필드를 오름차순으로 먼저 정렬한 다음, 동일한 id 값이 있을 경우 views 필드를 기준으로 내림차순 정렬한다.
  • 우선 id 값이 작은 순서대로 정렬되며, 같은 id 값을 가진 항목들은 views 값이 큰 순서대로 정렬된다.

👿 에러상황

eslint prettier 줄바꿈 에러 왕창………

ERROR in [eslint]
src\\App.tsx
  Line 1:26:   Delete `␍`  prettier/prettier
  Line 2:30:   Delete `␍`  prettier/prettier
  Line 3:19:   Delete `␍`  prettier/prettier
  Line 4:1:    Delete `␍`  prettier/prettier
  Line 5:41:   Delete `␍`  prettier/prettier
  Line 6:39:   Delete `␍`  prettier/prettier
  Line 7:1:    Delete `␍`  prettier/prettier
  Line 8:35:   Delete `␍`  prettier/prettier
  Line 9:17:   Delete `␍`  prettier/prettier
  Line 10:11:  Delete `␍`  prettier/prettier
  Line 11:38:  Delete `␍`  prettier/prettier
  Line 12:38:  Delete `␍`  prettier/prettier
  Line 13:59:  Delete `␍`  prettier/prettier
  Line 14:12:  Delete `␍`  prettier/prettier
  Line 15:60:  Delete `␍`  prettier/prettier
  Line 16:13:  Delete `␍`  prettier/prettier
  Line 17:11:  Delete `␍`  prettier/prettier
  Line 18:31:  Delete `␍`  prettier/prettier
  Line 19:37:  Delete `␍`  prettier/prettier
  Line 20:26:  Delete `␍`  prettier/prettier
  Line 21:36:  Delete `␍`  prettier/prettier
  Line 22:10:  Delete `␍`  prettier/prettier
Failed to compile.

🧐 에러 원인

Git 설정과 VSCode 설정이 서로 충돌했기 때문에 에러 발생. "files.eol": "\n" 설정이 이미 VSCode에 있었지만, Git이 줄 바꿈 형식을 자동으로 변환하는 설정(core.autocrlf)이 활성화된 상태였기 때문에 발생한 문제

✨ 에러 해결

✅ Git 설정 업데이트

Windows에서 CRLF가 기본 줄 바꿈이 되지 않도록 다음 명령어로 Git 설정을 업데이트합니다.

# 프로젝트 로컬에서 실행
git config core.autocrlf false

# 글로벌 설정을 업데이트하는 경우
git config --global core.autocrlf false

• 모든 파일 LF로 변환

# Windows 환경에서 Git Bash 또는 WSL 사용 시
git ls-files -z | xargs -0 dos2unix

::참고:: 

Prettier 및 ESLint 강제 적용

npx prettier --write .
yarn eslint --fix .

VSCode에서 줄 바꿈 일괄 변경

• 명령 팔레트(Ctrl+Shift+P)에서 “Change All End Of Line Sequence”를 선택하고, LF로 변경

👿 에러 상황

Compiled with problems:
ERROR
[eslint] Invalid Options: - Unknown options: extensions, resolvePluginsRelativeTo - 'extensions' has been removed. - 'resolvePluginsRelativeTo' has been removed.

🧐 에러 원인

ESLint 9 버전 문제로 발생

✨ 에러 해결

• eslint 9버전 제거

yarn remove eslint

• 다운그레이드

yarn add -D eslint@8.57.0

• yarn berry zero install - sdk 업데이트

yarn dlx @yarnpkg/sdks vscode

출처: https://mariais.tistory.com/entry/Eslint-error-해결-방법-extensions-has-been-removed-resolvepluginsrelativeto-has-been-removed

👿Yarn Berry 프로젝트 환경 설정 중 .yarn/cache 생성되지 않는 문제

Yarn Berry 프로젝트 환경 설정 중 .yarn/cache 생성되지 않는 문제. yarn install을 아무리 시도해도 캐시폴더가 생성되지 않음..

🧐 에러 원인

• 이전에는 enableGlobalCache의 기본값이 false였기 때문에, 각 프로젝트가 로컬 .yarn/cache 폴더에 의존성을 저장하도록 되어 있었다.
• 하지만 최근 업데이트에서 enableGlobalCache의 기본값을 true로 변경하여, 전역 캐시 사용을 기본 설정으로 적용하게 되었다.
• 따라서 Yarn의 최신 버전에서는 enableGlobalCache: false 설정을 .yarnrc.yml에 직접 추가해야만 로컬 캐시가 생성된다. 설정 파일에 해당 옵션을 직접 추가하지 않으면, Yarn은 전역 캐시를 사용하므로 .yarn/cache 폴더가 생성되지 않기 때문에 문제가 발생 했던 것!

✨ 에러 해결

• .yarnrc.yml 파일에 enableGlobalCache: false 설정 추가
  

  //.yarnrc.yml 
  nodeLinker: pnp
  enableGlobalCache: false
  ​

• 설정 변경 후 프로젝트 의존성 재설치
  

  yarn install

드디어 cache파일이 생성되었다!!

프로젝트 환경설정

🍀 ES Lint / Prettier 설정

1. eslint, prettier 패키지 설치
   • yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-config-react-app
2. Config 설정 분리
   • package.json의 "eslintConfig”부분을 별도의 .eslintrc.json파일로 분리 후 추가 설정 작성
     

     //.eslintrc.json
     
     {
         "extends": [
             "react-app",
             "react-app/jest",
             "plugin:prettier/recommended"
         ],
         "plugins":["prettier"],
         "rules":{
             "prettier/prettier":"error"
         }
     }
     ​

   • .prettierrc 파일 생성
     

     //prettierrc 
     
     {
         "useTabs": false,
         "printWidth": 80,
         "tabWidth": 2,
         "singleQuote": true,
         "trailingComma": "all",
         "endOfLine": "lf",  // 파일의 줄 끝(Line Ending) 형식을 지정
         "semi": false,
         "arrowParens": "always"
         }
     ​

3. setting.json 파일에 아래 코드 추가
   • Ctrl + Shift + P를 눌러 명령 팔레트를 열기 → "Preferences: Open Settings (JSON)"을 입력하고 선택

     // 수정 후 저장할 때 eslint로 autofix 실행
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "true"
     },
     // 파일의 줄 끝(Line Ending) 형식을 지정. 앞으로 생성되는 파일들은 lf(mac)로 생성됨
     "files.eol":"\\n",
   

   ✅ 파일의 줄 끝 형식 :: mac vs window
   "files.eol": "\n": 파일의 줄 끝을 유닉스/리눅스 스타일인 LF (Line Feed) 형식으로 지정
   "files.eol": "\r\n" : 파일의 줄 끝을 Windows 시스템의 기본 형식인 CRLF 형식으로 지정
   
   
4. vscode에 적용
   

   yarn dlx @yarnpkg/sdks vscode
   

5. prettier에서 세미콜론 제거 설정했기 때문에 package.json에 아래 코드 추가
   

   //package.json
       "lint": "eslint \\"src/**/*/{js,jsx,ts,tsx}\\"",
       "lint:fix": "eslint \\"src/**/*/{js,jsx,ts,tsx}\\""
   
   

   • 적용

   yarn lint:fix
   

6. Craco Alias 설정
   • 설치
     

     yarn add -D @craco/craco craco-alias

   • tsconfig.paths.json 정의
     

     // tsconfig.paths.json
     {
         "compilerOptions":{
             "baseUrl":".",
             "paths":{
                 "@/*": ["src/*"],
                 "@components/*":["src/components/*"]
             }
         }
     }

   • craco.config.js 정의
     

     // craco.config.js
     module.exports = {
       plugins: [
         {
           plugin: CracoAlias,
           options: {
             source: 'tsconfig',
             tsConfigPath: 'tsconfig.paths.json',
           },
         },
       ],
     }

   • Tsconfig에 tsconfig.paths.json extends 시키기
     

     // tsconfig.json
     {
       "extends": "./tsconfig.paths.json",
       "compilerOptions": {
         "target": "es5",
         "lib": ["dom", "dom.iterable", "esnext"],
         "allowJs": true,
         "skipLibCheck": true,
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
         "strict": true,
         "forceConsistentCasingInFileNames": true,
         "noFallthroughCasesInSwitch": true,
         "module": "esnext",
         "moduleResolution": "node",
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "react-jsx"
       },
       "include": ["src", "tsconfig.paths.json"]
     }
     
     ​

🍀 scss 설정

yarn add classnames sass

• global.scss 생성
• App.module.scss 생성
• src\App.tsx

import classNames from 'classnames/bind'
import styles from './App.module.scss'

const cx = classNames.bind(styles)

//    <div className={cx('container')}> 이런식으로 사용!

🍀 1. 프로젝트 생성하기

• yarn 설치

npm install -g yarn

• Create React App 기반 프로젝트 생성

yarn create react-app wedding --template typescript

🍀 2. Yarn Berry(PnP) 설정

1. node_modules 폴더 삭제
   
2. berry 버전 설정 ::  yarn set version berry
   

   yarn set version berry

3. root 경로에 .yarnrc.yml파일 생성
   

   //.yarnrc.yml 파일에 pnp 설정하기 (node_modules 대신 pnp방식 사용!)
   nodeLinker: pnp
   

4. yarn install
   

   yarn install
   

확장 프로그램 ZipFS 설치

Yarn Berry에서 TypeScript를 사용할 때 zipfs 확장 기능이 필요한 이유는 Yarn의 Plug'n'Play(PnP) 방식 때문이다. Yarn Berry는 node_modules 폴더 없이 .zip 파일을 통해 의존성을 관리하는데, 이때 파일 시스템을 .zip 형식으로 저장하고 불러오는 과정에서 zipfs가 필요하다.따라서 zipfs를 설치하면, Yarn Berry의 PnP 방식과 TypeScript 환경 간의 호환성을 높여준다. zipfs 확장 기능은 .zip 파일로 저장된 패키지들을 파일 시스템처럼 읽을 수 있도록 지원하여, PnP 환경에서 TypeScript나 기타 툴이 정상적으로 패키지 파일을 탐색할 수 있게 한다.

6. Yarn Berry의 Plug'n'Play(PnP) 방식과 VSCode의 통합 설정

yarn dlx @yarnpkg/sdks vscode

🔥👿 주의!!
명령 팔레트(Ctrl+Shift+P)를 열고 TypeScript: Restart TS Server"를 선택 → "Use Workspace Version”부모 폴더가 아닌 프로젝트 폴더 자체에서 VSCode를 열어야 한다!!!! vscode가 부모폴더로 열려있다면 Use Workspace Version가 보이지 않음...
참고:: https://github.com/yarnpkg/berry/issues/4788

🍀 3. typescript 설정

워크스페이스 버전에 맞는 타입스크립트 버전을 사용하도록 허용해주기

🍀 4. .gitignore에 추가

# yarn zero install
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

# 참고::  https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored

🍀 5. App.test.tsx의 타입에러 제거하기

yarn remove @testing-library/jest-dom

yarn add -D @types/testing-library__jest-dom @testing-library/jest-dom

🍀 6. yarn start!!!!!!!!!!!!!!!!!!!!!!!

yarn start

🎈 가상 환경(virtual environment)

Python의 가상 환경(virtual environment)은 프로젝트마다 고유한 패키지와 의존성을 관리할 수 있도록 별도의 Python 환경을 생성하는 도구이다. 가상 환경을 사용하면 프로젝트마다 독립적인 Python 패키지 환경을 구축할 수 있어, 패키지 버전 충돌을 방지하고, 다른 프로젝트와의 의존성 문제를 해결할 수 있다.

** 가상 환경의 필요성

Python 프로젝트마다 사용해야 하는 라이브러리들이 다를 수 있고, 라이브러리가 같더라도 버전이 다를 수 있다. 이 경우 같은 시스템 환경에서 이 두 프로젝트를 관리하기가 어려울 수 있다. 가상 환경을 사용하면 프로젝트별로 라이브러리 버전을 독립적으로 관리할 수 있다.

** 요약

• 가상 환경 활성화: conda activate myenv
• 코드 실행: python my\_script.py 또는 python (인터프리터 사용)
• 가상 환경 비활성화: conda deactivate

1. 가상 환경 생성하기

✅ 가상 환경 생성

새로운 가상 환경을 생성하려면 conda create 명령어를 사용한다.

conda create --name myenv

위 명령어는 myenv라는 이름의 가상 환경을 생성한다. 환경 이름은 원하는 대로 지정할 수 있다.

✅ 특정 Python 버전을 지정하여 환경 생성

특정 Python 버전을 사용해야 하는 경우, 버전을 명시하여 가상 환경을 생성할 수 있다.

conda create --name myenv python=3.8

위 명령어는 Python 3.8 버전을 사용하는 myenv 가상 환경을 생성한다.

✅ Python 3.10** 버전을 사용하는 새로운 가상 환경 myenv01을 생성하는 명령어

conda create -n myenv python=3.10

⭐ --name 옵션은 환경의 이름을 지정하는 두 개의 대시(--)가 있는 긴 형태의 옵션이며,

단축형 옵션으로는 -n(대시 하나)도 사용할 수 있다.

2. 가상 환경 활성화

생성한 가상 환경을 사용하려면 활성화해야 한다.

conda activate myenv

터미널에 (myenv)와 같이 표시되며, myenv 가상 환경이 활성화된 상태임을 나타낸다.

3. 패키지 설치 및 관리

가상 환경이 활성화된 상태에서 conda install 명령어로 패키지를 설치할 수 있다.

conda install requests

위 명령어는 현재 활성화된 myenv 환경에만 requests 패키지를 설치한다.

✅ conda와 pip을 함께 사용하기

Conda 환경에서 제공되지 않는 패키지가 있을 경우, pip를 통해 설치할 수도 있다. Conda와 pip를 함께 사용할 때는 가상 환경이 활성화된 상태에서 pip install을 사용하는 것이 중요하다.

pip install some_package

이렇게 하면 해당 패키지는 myenv 환경 내에만 설치되며, 시스템 전역 환경에는 영향을 미치지 않는다.

4. 가상 환경 비활성화

가상 환경 사용을 마쳤으면, conda deactivate 명령어로 환경을 비활성화하여 시스템 기본 환경으로 돌아갈 수 있다.

conda deactivate

5. 가상 환경 관리

✅ 가상 환경 목록 확인

현재 생성된 모든 가상 환경을 확인하려면 conda env list 또는 conda info --envs 명령어를 사용한다.

conda env list

✅ 가상 환경 삭제

사용하지 않는 환경은 conda remove --name myenv --all 명령어로 삭제할 수 있다.

conda remove --name myenv --all

🎈 가상 환경의 장점

• 프로젝트 독립성: 여러 프로젝트마다 필요한 패키지와 Python 버전을 독립적으로 관리할 수 있어, 충돌 없이 작업할 수 있다.
• 버전 제어: 특정 프로젝트의 요구 사항에 맞춰 Python 및 패키지 버전을 고정하여 작업 재현성을 높일 수 있다.
• 시스템 보호: 시스템의 기본 Python 환경에 영향을 주지 않으므로, 시스템 전반의 안정성을 유지할 수 있다.

Miniconda를 사용한 가상 환경 관리는 여러 프로젝트를 효율적으로 관리하고, 각 프로젝트별로 일관된 작업 환경을 설정하는 데 매우 유용하다.

🎈 외부 라이브러리 (External Libraries)

Python의 외부 라이브러리는 커뮤니티나 특정 개발자가 제공하는 패키지로, 기본 설치된 표준 라이브러리 외에도 다양한 기능을 제공한다. 외부 라이브러리는 데이터 분석, 웹 스크래핑, HTTP 요청 등 다양한 작업에 유용하며, pip 패키지 관리자를 통해 설치할 수 있다. 외부 라이브러리를 사용하려면 먼저 설치가 필요하다.설치 후, import 키워드를 통해 사용할 수 있다.

1. pandas

데이터 분석을 위한 라이브러리

pandas는 데이터 분석과 조작에 유용한 라이브러리로, 테이블 형식의 데이터를 다루기에 편리하다. 데이터프레임(DataFrame)이라는 구조를 통해 행과 열로 구성된 데이터를 쉽게 조작할 수 있다.

• 설치 명령어: pip install pandas

import pandas as pd

# 데이터프레임 생성
data = {'Name': ['Karina', 'Winter', 'Ningning', 'Giselle'], 'Age': [24, 23, 21, 23]}
df = pd.DataFrame(data)
print(df)

# 데이터프레임의 특정 열 출력
print(df['Name'])  # Output: Name 열의 값

# 기초 통계 정보 출력
print(df.describe())  # 데이터의 통계 요약 정보

# DataFrame을 Excel 파일로 저장
df.to_excel('aespa_data.xlsx', index=False)

• to_excel() 메서드를 사용하여 DataFrame을 Excel 파일로 저장할 수 있다.( openpyxl 또는 xlsxwriter 라이브러리를 설치)
• 설치 명령어: pip install openpyxl
•  index=False: 이 옵션은 DataFrame의 인덱스를 파일에 포함시키지 않도록 설정한다. 만약 인덱스를 포함하려면 index=True로 설정하거나, 옵션을 생략할 수 있다.

⭐ 터미널 출력 결과

2. requests

HTTP 요청을 보내기 위한 라이브러리. 

HTTP 요청을 쉽게 보낼 수 있는 라이브러리로, 웹 API를 호출하거나 웹 페이지의 HTML을 가져올 때 자주 사용된다.

• 설치 명령어: pip install requests

✅ GET 요청 

import requests

response = requests.get("https://api.github.com")
print(response.status_code)   # 응답 상태 코드 출력
print(response.json())        # JSON 형식의 응답 데이터 출력

• requests.get()는 GET 요청을 보내서 데이터를 가져오는 메서드.
• https://api.github.com은 GitHub의 API 엔드포인트로, 기본적인 정보를 제공한다.
• response.status_code: HTTP 상태 코드 출력. 200은 요청이 성공적으로 처리되었음을 의미한다.
• response.json(): JSON 형식으로 응답 데이터를 출력한다.

✅ POST 요청 

import requests

data = {'key': 'value'}
response = requests.post("https://httpbin.org/post", data=data)
print(response.json())        # JSON 형식의 응답 데이터 출력

• requests.post(): POST 요청을 보내는 메서드로, 주로 데이터를 서버에 전송할 때 사용함.
• data=data: 서버로 전송할 데이터를 지정합니다. 예시코드에서는 {'key': 'value'}라는 딕셔너리를 데이터로 전송.
• https://httpbin.org/post: httpbin.org는 테스트용으로 많이 사용되는 서비스로, 요청을 그대로 되돌려준다.
• response.json(): JSON 형식으로 응답 데이터를 출력한다.

3. tqdm

반복 작업의 진행 상태를 시각적으로 보여주는 프로그레스 바 라이브러리.

• 설치 명령어: pip install tqdm

아래 코드를 실행하면, 10번의 반복 작업이 진행되는 동안 각 작업 사이에 0.1초씩 지연되며 프로그레스 바가 조금씩 채워지는 모습을 볼 수 있다.

from tqdm import tqdm
import time

# tqdm을 사용하여 반복 작업에 프로그레스 바 적용
for i in tqdm(range(10)):
    time.sleep(0.1)  # 작업을 지연시켜 진행 상태를 확인 가능하게 함

• for i in tqdm(range(10)): range(10)은 0부터 9까지 10번 반복되는 루프를 생성하며, tqdm을 통해 각 반복을 시각적으로 보여준다.
• time.sleep(0.1): 각 반복 사이에 0.1초의 지연을 추가한다. 이 지연이 없으면 프로그레스 바가 너무 빠르게 지나가, 진행 상태를 확인하기 어려울 수 있다.

4. numpy

배열 및 행렬 연산에 강력한 기능을 제공하는 라이브러리. 데이터 분석과 과학 계산에서 많이 사용된다.

• 설치 명령어: pip install numpy

import numpy as np

# 배열 생성 및 연산
array = np.array([1, 2, 3, 4])
print(array * 2)  # Output: [2 4 6 8]

# 2차원 배열 생성
matrix = np.array([[1, 2], [3, 4]])
print(matrix)

5. matplotlib

데이터 시각화를 위한 라이브러리. 그래프와 차트를 그리는 데 유용하다.

• 설치 명령어: pip install matplotlib

import matplotlib.pyplot as plt

# 간단한 라인 그래프 그리기
x = [1, 2, 3, 4]
y = [10, 20, 25, 30]
plt.plot(x, y)
plt.xlabel('X-axis')
plt.ylabel('Y-axis')
plt.title('Simple Line Plot')
plt.show()