본문 바로가기

전체 글408

카테고리 없음

파이썬 가상환경 10초 만에 설정하기

파이썬에서 전역으로 라이브러리로 설치하다보면 프로젝트별 모듈이 부딪친다.이를 방지하려면 폴더별(프로젝트별)로 라이브러리가 적용되도록, 가상환경을 설정해야 한다. 그런데 구글링을 해보면 10초 만에 끝낼 일을 너무 복잡하게 설명한 자료가 많다.아래 방법이 가장 간단하다. 정말 10초 만에 할 수 있다.* 기본전제: 파이썬 pc 설치 1) 폴더 생성- 프로젝트를 만들 폴더를 생성한다. 2) 가상환경 명령어 입력 - 파워셸(윈도우)을 열고, ` python -m venv env ` 를 입력한다. 3) 활성화- 파워셸에서 바로 ` .\env\Scripts\activate `를 입력한다. 경로 앞의 (env)가 가상환경이 되었음을 알려준다.이제 해당 경로에 ` pip ~~~ `로 모듈을 자유롭게 설치..

2026. 9. 17.
코드 스터디

「마이크로서비스 & 파이어베이스 CI·CD」(5) github Action & 파이어베이스 호스팅 연결

이번 포스팅에서 github Action에 이어 파이어베이스 호스팅까지 연결해보자. 1] 파이어베이스 호스팅 설정 marketing폴더의 코드를 빌드하는 파이어베이스 호스팅 사이트를 추가한다. 파이어베이스 호스팅에서 새로운 사이트를 추가한 뒤, 사이트 이름을 복사한다.(firebase.json에서 사용될 예정) 그리고 marketing폴더에서 firebase init hosting을 실행한다. 만일 firebase명령어가 실행되지 않는다면 'firebase-tools' npm모듈을 설치하고 로그인 한다. (아래 사진의 container폴더(x) → marketing(o)) 호스팅 설정에서 기본 폴더는 'dist(웹팩 빌드)'로 설정한다. 2] firebase.json 호스팅 초기설정 결과 생성된 fire..

2023. 4. 14.
코드 스터디

「마이크로서비스 & 파이어베이스 CI·CD」(4) github Action 연결

github Action은 웹팩(빌드 폴더)과 연결된다. 이를 위해 빌드를 위한 웹팩 프로덕션 설정이 필요하다. 1] /config/webpack.xxx.js 수정 웹팩 빌드를 위해 webpack.prod.js를 추가한다. 그런데 HtmlWebpackPlugin모듈은 개발팀 자체 테스트용(webpack.dev.js), 배포용(webpack.prod.js) 모두 필요하기 때문에 아래와 같이 webpack.common.js파일로 이동시킨다. package.json에서 build 실행문을 추가한다. 여기까지 진행했다면, container를 웹팩으로 빌드해보자. output폴더를 따로 지정하지 않았다면, 새로 생성된 'dist폴더'에서 통합된 개발코드를 확인할 수 있다. 2] marketing/config/we..

2023. 4. 13.
코드 스터디

「마이크로서비스 & 파이어베이스 CI·CD」(3) github 설정

MicroFront 워크플로를 요약하면 위와 같다. 개발 회사는 각 로컬에서 리액트, 뷰, 앵글러, 바닐라(뭐든 상관없음)로 개발하여 웹팩으로 빌드를 실행한다. 각 개발팀 위치와 인력은 프랜차이즈처럼 언제든 교체 가능하며, 위치도 상관없다. 개발1팀(배포팀)이 알려준 깃허브의 프로젝트와 파이어베이스 프로젝트 id, key만 있다면, 그것으로 각 개발팀은 1개의 프로젝트를 진행하는 회사의 팀이다. 그리고 지난 포스팅(2)에서는 webpack.dev.js까지 생성했으므로 MicroFront개발의 첫번째 단계까지 완성했다. 첫 번째 단계에서는 회사(로컬)에서 자체적으로 모듈을 테스트 할 수 있지만 타팀과 협력이 되지 않는 까막눈 상태다. 모놀리틱 서비스에서는 이 단계에서 github & AWS or Fireb..

2023. 4. 12.
코드 스터디

「마이크로서비스 & 파이어베이스 CI·CD」(2) 패키지 폴더 통합

"「마이크로서비스 & 파이어베이스 CI·CD」(1) 초기 설정" 포스팅에서 marketing패키지(폴더)를 빌드하는 과정까지 진행했다. 이제 marketing폴더의 개발코드는 팀으로써 관리가 되며, container패키지(폴더)가 하위 패키지에 데이터를 전달하거나 제어할 수 있어야 한다. 1] container / config 생성 marketing/config 폴더를 통째 복사하여 container폴더에 붙여넣는다. 2] container / package.json 수정 container에서 웹팩을 실행할 수 있는 명령문을 package.json의 scripts값에 넣어준다. 3] public / index.html container 역시 리액트를 사용할 예정이므로 'root' ID를 index.htm..

2023. 4. 10.
코드 스터디

「마이크로서비스 & 파이어베이스 CI·CD」(1) 초기 설정하기

웹팩을 사용한 마이크로 서비스의 구조는 아래와 같다. 프로젝트(myBlog) 하위 구조로써 각 패키지들이 존재하며(auth, container, dashboard, marketing) 각 패키지들은 독립적으로 빌드가 가능하다. 1] 패키지 구성 각 패키지별로 필요한 모듈이 다르지만 기본적으로 '웹팩, 바벨'은 공통이다. 현 프로젝트는 auth, container, marketing패키지는 같은 모듈을 설치하며, dashboard는 chart.js와 같은 독자적인 모듈을 몇개 더 설치하는 구성이다. 각 패키지 폴더에서 'npm초기화'를 실행한다.(package.json 생성) 이후 아래 모듈을 모두 설치해준다.(container, auth, marketing) ** 'html-webpack-plugin'모..

2023. 4. 8.
코드 스터디

「WebPack 개발」 5 의존성 중복해결 & 함수형 적용

웹팩으로 하위 모듈(폴더)을 빌드하는 경우, 하위 모듈끼리 충돌하는 경우가 발생할 수 있다. 이번 포스팅에서는 하위 모듈간 충돌을 해결하는 방법과 container에서 하위 모듈로 데이터를 전달하는 방식에 관해 알아보자. 1] 하위(모듈)폴더/ webpack.config.js 현재 cart, product는 'faker'모듈을 사용하고 있다. 이로써 container의 8080포트는 faker모듈을 2번 불러온다.(중복 발생) 하위 폴더에서 모듈 중복을 제거하기 위해서 위와 같이 'shared'키 값으로 해당 모듈을 설정한다.(cart, product 모두 적용) 그리고 다시 8080포트를 실행해보면 아래와 같이 faker모듈이 1회만 실행되는 것을 볼 수 있다. 2] 하위(모듈)폴더/ bootstrap..

2023. 4. 7.
코드 스터디

「WebPack 개발」 4 Federation(합치기)

Federation은 사전적 용어로 '연합'을 의미하는데, 쉽게 '합치기'라 생각하면 된다. webpack은 Federation을 통해 마이크로서비스를 제작할 수 있는 기반을 제공해준다. 이번 포스팅에서는 Federation에 관해 알아보자. 1] product / Federation모듈 import Federation을 실행할 수 있는 웹팩 플러그인, 'ModuleFederationPlugin'모듈을 import한다. 현재 platform폴더 아래에는 container, product폴더가 있으며, container폴더가 배포팀(팀장)이므로 주인이다. 나머지 폴더는 하위 개발팀이므로 각 팀들의 개발코드를 상부에 보고(exposes)해야 한다. 따라서 ModuleFederationPlugin의 expos..

2023. 4. 6.
코드 스터디

「WebPack 개발」 3 마이크로 프론트엔드 개발

「webpack 개발」 1, 2편에서 웹팩에 관한 사용법을 숙지했다면, 대규모 프로젝트에서 필수적인 '마이크로서비스 아키텍처' 를 구현할 수 있다. 이번 포스팅에서는 platform을 개발한다는 가정 하에 각 팀들을 배치해보자. 1] 폴더 정리 Platform(프로젝트명) 폴더 아래 각 개발팀들을 폴더별로 배치한다. 팀장이 주관하는(배포) 메인 폴더, 'container'를 생성한 뒤, 웹팩에 필요한 npm 모듈을 설치한다. - webpack - webpack-cli - webpack-dev-server - html-webpack-plugin - nodemon(권장사항) 2] public (폴더)생성 클라이언트가 접근할 수 있는 public폴더와 index.html파일을 생성한다. 3] src(폴더)생성..

2023. 4. 5.
코드 스터디

「WebPack 개발」 2 html페이지 생성

"「WebPack 개발」 1 웹펙 세팅 & 웹서버 실행" 포스팅에서 'localhost:8081/main.js' 웹 호스팅을 실행시켰다. 그러나 테스트를 진행하려면 결과를 쉽게 볼 수 있는 index.html페이지가 필요하다. 1] 'html-webpack-plugin' 설정 'html-webpack-plugin'모듈을 설치했다면, public폴더에 있는 .html파일을 실행할 수 있다. webpack.config.js파일에서 htmlWebpackPlugin모듈을 불러온 뒤, plugins값을 아래처럼 설정한다. new HtmlWebpackPlugin()은 빌드 과정에서 public폴더에 있는 .html파일을 연결시켜주는 역할을 한다. 2] 'index.html' 생성 public폴더를 생성한 후, (테..

2023. 4. 4.

티스토리툴바