레이블이 vscode인 게시물을 표시합니다. 모든 게시물 표시
레이블이 vscode인 게시물을 표시합니다. 모든 게시물 표시

20250115

Streamlit : 이미지 분류 및 데이터 시각화 앱 만들기 (Mac 환경)

1. 개발 환경 설정

Python 및 Streamlit 설치

  1. Python 설치: Python 3.8 이상이 필요합니다. Mac에서 Python이 설치되어 있지 않다면, Python 공식 웹사이트에서 다운로드
  2. 가상 환경 생성:
    python3 -m venv streamlit_env
    source streamlit_env/bin/activate
  3. 필요한 라이브러리 설치:
    pip install streamlit pandas numpy matplotlib tensorflow_hub pillow

Streamlit 설치 확인

Streamlit이 올바르게 설치되었는지 확인하려면 다음 명령을 실행

streamlit hello

브라우저에 Streamlit 데모 앱이 열리면 성공적으로 설치된 것입니다.

2. Streamlit 앱 코드 작성

아래 코드는 이미지 분류와 데이터 시각화를 포함한 Streamlit 애플리케이션입니다.

import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import tensorflow_hub as hub
from PIL import Image

# 앱 제목 및 설명
st.title("이미지 분류 및 데이터 시각화 앱")
st.write("이 앱은 업로드된 이미지를 분류하고 데이터를 시각화합니다.")

# 이미지 업로드 및 분류
uploaded_file = st.file_uploader("이미지를 업로드하세요", type=["jpg", "png", "jpeg"])
if uploaded_file is not None:
    image = Image.open(uploaded_file)
    st.image(image, caption="업로드된 이미지", use_column_width=True)
    st.write("이미지를 분류 중입니다...")

    # TensorFlow Hub에서 사전 학습된 모델 로드
    model = hub.load("https://tfhub.dev/google/imagenet/mobilenet_v2_100_224/classification/5")
    image = image.resize((224, 224))
    image_array = np.array(image) / 255.0  # 정규화
    image_array = np.expand_dims(image_array, axis=0)

    predictions = model(image_array)
    st.write("분류 결과:", predictions.numpy())

# 데이터 시각화
st.header("데이터 시각화")
data = pd.DataFrame(
    np.random.randn(100, 3),
    columns=['특성 A', '특성 B', '특성 C']
)
st.line_chart(data)

# 사이드바 예제
st.sidebar.header("사이드바 설정")
range_slider = st.sidebar.slider("값 범위 선택", 0, 100, (25, 75))
st.sidebar.write(f"선택된 범위: {range_slider}")

3. 코드 저장

위 코드를 image_classification_app.py라는 이름으로 저장하세요:

nano image_classification_app.py

4. 앱 실행

  1. 디렉토리 이동:
    cd /path/to/your/directory
  2. Streamlit 앱 실행:
    streamlit run image_classification_app.py
    브라우저에서 http://localhost:8501로 이동하여 앱을 확인합니다.

5. 주요 기능 설명

  • A. 이미지 업로드 및 분류: 사용자가 이미지를 업로드하면 TensorFlow Hub의 사전 학습된 MobileNet V2 모델을 사용하여 이미지를 분류합니다.
  • B. 데이터 시각화: 무작위로 생성된 데이터를 Pandas DataFrame으로 변환하고 이를 라인 차트로 시각화합니다.
  • C. 사이드바: 사이드바에 슬라이더를 추가하여 사용자 입력을 받을 수 있습니다.

6. 실행 결과

앱 실행 후 다음과 같은 기능을 테스트할 수 있습니다:

  • 이미지를 업로드하고 분류 결과를 확인합니다.
  • 데이터가 라인 차트로 표시되는 것을 봅니다.
  • 사이드바 슬라이더를 조작하여 선택된 범위를 변경합니다.

7. 추가 팁

  • TensorFlow Hub 모델 외에도 다양한 사전 학습 모델을 사용할 수 있습니다.
  • @st.cache 데코레이터를 활용해 데이터 로딩 속도를 최적화할 수 있습니다.
  • Streamlit Cloud를 사용해 앱을 쉽게 배포할 수 있습니다.


20241228

VS Code에서 Prettier 설정

들어가며

코드 작성 시 일관된 스타일을 유지하는 것은 가독성과 협업에서 매우 중요합니다. 이를 도와주는 도구로 Prettier가 널리 사용됩니다. 특히, VS Code와 결합하면 자동으로 포맷팅을 적용하여 개발 시간을 절약할 수 있습니다. 이번 글에서는 VS Code에서 Prettier를 설치하고 설정하는 과정을 소개합니다.

Prettier란?

Prettier는 JavaScript, TypeScript, HTML, CSS 등 다양한 언어를 지원하는 코드 포맷터입니다. 팀원 간의 코드 스타일 충돌을 방지하며, 설정한 규칙에 따라 자동으로 코드 스타일을 맞춰주는 것이 특징입니다. 이를 통해 개발자는 코드 작성에만 집중할 수 있습니다.

VS Code에서 Prettier 설정하기

1. Prettier 확장 프로그램 설치

  1. VS Code의 사이드바에서 Extensions 아이콘을 클릭합니다.
  2. 검색창에 "Prettier - Code formatter"를 입력하고, Prettier 확장을 설치합니다.

설치가 완료되면, Prettier가 활성화된 상태로 코드 포맷팅을 적용할 준비가 됩니다.

2. 기본 포맷터로 Prettier 설정

VS Code의 기본 포맷터로 Prettier를 설정하려면 아래 단계를 따르세요:

  1. 파일환경 설정설정으로 이동합니다.
  2. 검색창에 "default formatter"를 입력합니다.
  3. Editor: Default FormatterPrettier로 선택합니다.

3. 저장 시 포맷팅 설정

코드를 저장할 때 자동으로 포맷팅되도록 설정하려면 다음 단계를 따르세요:

  1. 설정 파일(settings.json)을 엽니다.
  2. 다음 내용을 추가합니다:
{
    "editor.formatOnSave": true
}
        

이제 코드를 저장할 때마다 Prettier가 자동으로 코드 스타일을 정리합니다.

추가 설정: Prettier 규칙 변경하기

Prettier는 기본적으로 표준 스타일을 따르지만, 팀의 요구에 따라 설정을 변경할 수 있습니다. 설정 파일(.prettierrc)을 생성한 후, 아래와 같이 규칙을 정의할 수 있습니다:

{
    "semi": false,
    "singleQuote": true,
    "tabWidth": 2
}
        

위 설정은 다음과 같은 규칙을 적용합니다:

  • semi: 세미콜론 생략
  • singleQuote: 작은따옴표 사용
  • tabWidth: 들여쓰기 너비 2칸

문제 해결

설정 후 Prettier가 작동하지 않을 경우, 다음을 확인하세요:

  • Prettier 확장이 제대로 설치되었는지
  • 저장 시 포맷팅 옵션이 활성화되었는지
  • 작업 중인 파일이 Prettier가 지원하는 언어인지

이 외에도 Prettier가 프로젝트별로 다른 설정을 적용하도록 eslint와 함께 사용할 수도 있습니다.

Prettier 옵션

{
  "arrowParens": "always", // 화살표 함수의 매개변수가 하나일 때 괄호를 사용할지 여부
  "bracketSpacing": true, // 객체 리터럴에서 중괄호 내부에 공백 삽입 여부
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
  "jsxSingleQuote": false, // JSX에서 single quote 사용 여부
  "printWidth": 80, // 한 줄에 출력되는 코드의 최대 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식
  "quoteProps": "as-needed", // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single quote 사용 여부
  "tabWidth": 2, // 탭 간격
  "trailingComma": "all", // 여러 줄을 사용할 때 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부
  "parser": '', // 사용할 parser 지정 (자동으로 지정됨)
  "filepath": '', // parser를 유추할 수 있는 파일 경로 지정
  "rangeStart": 0, // 포맷팅을 적용할 파일의 시작 지점
  "rangeEnd": Infinity, // 포맷팅을 적용할 파일의 끝 지점
  "requirePragma": false, // 파일 상단에 정의된 주석을 기반으로 포맷팅 사용 여부
  "insertPragma": false, // 미리 정의된 @format 주석 추가 여부
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ] // 특정 파일별로 옵션을 다르게 설정
}
    

옵션 상세 설명

옵션 설명
arrowParens 화살표 함수의 매개변수가 하나일 때 괄호 사용 여부 ("always" 또는 "avoid")
bracketSpacing 객체 리터럴에서 중괄호 내부 공백 삽입 여부
endOfLine 파일 끝 라인 형식 ("lf", "crlf", "cr", "auto")
jsxSingleQuote JSX에서 single quote 사용 여부
printWidth 한 줄에 출력되는 코드의 최대 길이
semi 세미콜론 사용 여부
singleQuote single quote 사용 여부
tabWidth 탭 간격 (기본값: 2)
trailingComma 후행 콤마 사용 방식 ("none", "es5", "all")

20241227

Laravel + VSCode

Laravel이란?

Laravel은 PHP의 인기 있는 프레임워크로, 웹 애플리케이션 개발을 효율적으로 도와줍니다. Laravel은 코드의 재사용성을 높이고, 개발자가 복잡한 작업을 더 쉽게 처리할 수 있도록 다양한 기능을 제공합니다.

Laravel 설치 및 서버 실행

Laravel을 설치하기 위해서는 Composer가 필요합니다. Composer는 PHP 소프트웨어와 라이브러리의 의존성을 관리하는 패키지 관리자입니다. 이를 통해 필요한 확장 기능을 쉽게 설치하고 관리할 수 있습니다.

1. Composer 설치

Composer를 설치하려면 Composer 공식 웹사이트에서 다운로드하고 설치를 진행합니다.

  1. "Getting Started"를 클릭합니다.
  2. "Setup" 파일을 다운로드하여 Composer를 설치합니다.
  3. 설치 후, 아래 명령어를 통해 Composer가 제대로 설치되었는지 확인할 수 있습니다:
    composer --version

2. Laravel 프로젝트 설치

Laravel을 설치하고 새로운 프로젝트를 생성하려면, 프로젝트를 배치할 폴더로 이동한 후 아래 명령어를 실행합니다:

composer create-project --prefer-dist laravel/laravel 프로젝트명

위 명령어를 실행하면, Laravel 프로젝트가 생성됩니다.

3. 서버 실행

Laravel 프로젝트 폴더로 이동하여 아래 명령어로 서버를 실행합니다:

php artisan serve

서버를 종료하려면 Ctrl + C를 눌러 서버를 중지할 수 있습니다.

4. 웹 브라우저에서 확인

웹 브라우저에서 localhost:8000을 입력하여 Laravel 서버가 정상적으로 실행되는지 확인합니다.

VSCode 세팅

Laravel 프로젝트를 VSCode에서 쉽게 작업하려면, Laravel 관련 익스텐션을 추가하는 것이 좋습니다.

추천 익스텐션 목록:

  • Laravel Artisan: Artisan 명령어를 쉽게 실행할 수 있게 도와주는 익스텐션.
  • Laravel Blade Snippets: Blade 템플릿 코드 자동 완성을 도와주는 익스텐션.
  • Laravel Blade Spacer: Blade 코드 인식 기능을 추가하는 익스텐션.
  • Laravel Go to View: view('welcome')와 같은 코드에서 해당 뷰 파일로 바로 이동할 수 있게 도와주는 익스텐션.
  • Laravel Snippet: Laravel 코드 자동 완성 기능을 제공하는 익스텐션.
  • Live Sass Compiler: SCSS 파일을 저장하면 자동으로 컴파일을 해주는 익스텐션.
  • PHP IntelliSense: PHP 코드 자동 완성과 정의로 이동하는 기능을 제공하는 익스텐션.
  • Getter Setter Generator: 자동으로 Getter와 Setter 메서드를 생성해주는 익스텐션.
  • Bracket Pair Colorizer2: 코드 블록의 시작과 끝을 색상으로 구분해주는 익스텐션.
  • Material Icon Theme: 프로젝트 파일의 아이콘을 보기 쉽게 바꿔주는 익스텐션.
  • Env: .env 파일을 보기 좋게 색상 처리를 해주는 익스텐션.

Laravel 프로젝트 디렉토리 구조

Laravel 프로젝트는 여러 중요한 파일과 디렉토리로 구성되어 있습니다. 각 파일과 디렉토리의 역할은 다음과 같습니다:

  • .env: 환경 설정 파일로, 데이터베이스 연결 정보 등이 포함됩니다.
  • config: 애플리케이션의 설정 파일들이 위치하는 디렉토리입니다.
  • artisan: Artisan 명령어를 실행하는 파일입니다.
  • composer.json: Composer를 통해 패키지를 관리하는 파일입니다.
  • package.json: Node.js 패키지를 관리하는 파일입니다.
  • webpack.mix.js: JavaScript 및 SCSS 파일을 컴파일하는 설정 파일입니다.
  • resources: Blade 뷰 파일 등 리소스들이 위치하는 디렉토리입니다.
  • routes/web.php: 웹 애플리케이션의 URL 라우팅을 정의하는 파일입니다.
  • public: 웹 애플리케이션의 공개 파일이 위치하는 디렉토리입니다. (CSS, JavaScript 등)
  • storage: 캐시, 세션, 로그 등의 파일이 저장되는 디렉토리입니다.
  • vendor: Composer 패키지들이 저장되는 디렉토리입니다.
  • bootstrap: Laravel의 초기화와 관련된 파일들이 위치하는 디렉토리입니다.
  • app/Http/Controllers: 컨트롤러 클래스가 위치하는 디렉토리입니다.
  • app/Model: 모델 클래스가 위치하는 디렉토리입니다.
  • resources/views: Blade 템플릿 파일들이 위치하는 디렉토리입니다.