본문 바로가기
반응형

개발737

리액트 - 크롬 확장 프로그램에서 현재 페이지의 URL과 HTML 가져오기 (Retrieve URL and HTML of the Current Page in a Chrome Extension) 리액트 전체 링크 참고- 크롬 확장 프로그램 사이드 패널 만들기 (React Chrome Extension Side Panel Example) 이전 글에 이어 버튼을 클릭할 경우, 다음과 같이 현재 페이지의 URL과 HTML을 출력해 보자.manifest.json 수정 크롬 확장 프로그램이 특정 페이지에서 동작하도록 권한을 추가한다. 아래 옵션은 모든 URL에 접근이 가능하다는 뜻이 된다."host_permissions": [""] 그리고 permissions에서 activeTab을 추가한다. "permissions": ["storage", "scripting", "tabs", "sidePanel", "notifications", "activeTab"],eslintrc 파일 추가 chrome API를 .. 2025. 1. 10.
리액트 - 크롬 확장 프로그램 사이드 패널 만들기 (React Chrome Extension Side Panel Example) 리액트 전체 링크 참고- 크롬 확장 프로그램에서 현재 페이지의 URL과 HTML 가져오기 다음과 같이 리액트 Application을 크롬 확장 프로그램의 사이드 패널로 만들어보자.파일 추가 public 폴더에 manifest.json, background.js를 추가한다. public/manifest.json{ "manifest_version": 3, "name": "React Side Panel Extension", "version": "1.0", "description": "React app in Chrome Side Panel", "permissions": ["storage", "scripting", "tabs", "sidePanel", "notifications"], "action": .. 2025. 1. 6.
[Kaggle] Pandas Profiling 사용방법 타이타닉 데이터를 로드한 후,import numpy as np # linear algebraimport pandas as pd # data processing, CSV file I/O (e.g. pd.read_csv)# 타이타닉 데이터 로드url = "https://raw.githubusercontent.com/datasciencedojo/datasets/master/titanic.csv"data = pd.read_csv(url)data.head() pandas_profiling을 import하면import pandas_profilingdata.profile_report() 아래와 같은 에러가 발생하게 된다.PydanticImportError: `BaseSettings` has been moved to .. 2025. 1. 5.
아키텍처 스타일, 패턴 (Architectural Style and Pattern) Architecture & Design Pattern 전체 링크  아키텍처 스타일 (Architectural Style)- 시스템의 구조와 구성 요소들 간의 조직된 상호작용 방식을 기술하는 패턴의 집합- 일반적인 설계 접근 방식을 나타내며, 특정 문제 해결을 위한 구체적인 패턴보다는 더 큰 규모와 범위에서 사용- Client-Server, Peer-to-Peer, Event-Driven Architecture, Service-Oriented Architecture, ... 아키텍처 패턴 (Architectural Pattern)- 재사용 가능한 해결책을 제공하는 고수준의 설계 템플릿- 시스템의 기본 구조를 설계하고, 구성 요소 간의 관계와 상호작용을 규정하고, 여러 품질 속성을 동시에 고려- MVC 패턴.. 2024. 7. 19.
아키텍처 뷰 (Architectural View) Architecture & Design Pattern 전체 링크  아키텍처 뷰 (Architectural View)- 시스템의 구조를 표현한 것으로 시스템 측면을 강조- 시스템의 다양한 측면을 다른 관점에서 표현하고, 시스템을 더 잘 이해하고, 의사소통을 원할하게 하기 위해 필요- 다양한 이해당사자 관점에서 표현, 복잡도를 관리하고 상호 일관성을 유지한다. 4+1 ViewSEI View Siemens Four View4+1 View Logical View (클래스, 객체 다이어그램)- 시스템의 기능적 요구사항을 다루며, 시스템의 주요 설계 요소와 그 관계를 모델링 Development View (컴포넌트 다이어그램, 소프트웨어 모듈 구조)- 소프트웨어의 모듈 구조를 보여주며, 시스템의 소스 코드 구조와 .. 2024. 7. 18.
아키텍처 전술 (Architectural Tactics) Architecture & Design Pattern 전체 링크  참고- 품질 속성 시나리오 (Quality Attribute Scenarios) 품질 속성 Trade-off 관계 가용성 vs 성능높은 가용성을 위한 Redundancy와 장애 조치는 오버헤드로 인해 성능에 영향을 준다. 상호운용성 vs 보안다양한 시스템 간의 데이터 교환과 통합을 허용하면, 보안 취약점이 높아진다. 변경용이성 vs 성능모듈화와 추상화로 인해 성능이 저하될 수 있다. 성능 vs 보안보안을 강화하기 위한 암호화와 인증 과정으로 성능이 저하된다.Availability (가용성)- 시스템이 정상적으로 작동하고 사용 가능한 상태를 유지하는 정도 Detect Faults (장애 탐지)- Ping / Echo : 네트워크 연결 상태를.. 2024. 7. 18.
품질 속성 시나리오 (Quality Attribute Scenarios) Architecture & Design Pattern 전체 링크  참고- 아키텍처 전술 (Architectural Tactics) 품질 속성 (Quality Attritbues)- 소프트웨어 시스템이 충족해야 하는 비기능적 특성을 의미- NFR의 구체적인 형태로 시스템의 품질을 측정하고 평가한다.- Availability, Interoperability, Modifiability, Performance, Security, Testability, Usability 등 품질 속성 시나리오 (QAS, Quality Attribute Scenarios)- 시스템의 품질 속성을 구체적으로 정의하고 평가하기 위한 방법 1) 자극원 (Source) : 자극을 일으키는 주체2) 자극 (Stimulus) : 시스템에 영.. 2024. 7. 17.
리액트 - Vercel로 리액트 프로젝트 배포하기 리액트 전체 링크 참고- gh-pages로 리액트 프로젝트 배포하기- Netlify로 리액트 프로젝트 배포하기- Netlify 배포 에러 해결하기 이번에는 Vercel로 무료 웹 호스팅 서비스에 리액트를 배포해 보자. Vercel 페이지로 이동해 Start Deploying 버튼을 클릭한다. GitHub 프로젝트를 배포할 예정이므로 Continue with GitHub 버튼을 클릭한다. Vercel과 깃허브가 연동되도록 Authorize Vercel 버튼을 클릭하자. 이제 Install 버튼을 누르자. 배포가 필요한 저장소를 연결한다. 깃허브의 저장소가 연결되면 리액트 프로젝트를 Import 하자. Project 이름을 설정한다. ([Project Name]-[random string].vercel.ap.. 2024. 5. 2.
Node JS - FormData와 multer로 여러 파일 업로드하기 (Upload Multiple Files with FormData and multer) Node JS 전체 링크 참고- multer로 이미지 업로드하기 다음과 같이 웹에서 여러 파일을 업로드하면 서버로 전송되도록 구현해 보자.리액트 input 태그에 multiple을 설정하면 여러 파일을 선택할 수 있다. handleUpload 구현은 전체 코드를 참고하자.formData의 append를 이용해 e.target.files를 순회하면서 파일을 추가한다.한글 파일이 있는 경우 파일 이름을 처리하기 위해 encodeURIComponent를 이용해야 한다.formData와 config("content-type": "multipart/form-data")를 post에 설정하여 서버로 전송하면 된다.import React from "react";import axios from "axios";const.. 2024. 4. 27.
반응형

티스토리툴바