말랑말랑제리스타일

React JS로 프로젝트를 진행하고 있는데 아래 화면과 같이 헤더 잘림 현상이 발생했습니다.개인적으로 헤더, 푸터 잘림 현상을 없애고 스크롤 바를 없애려고 시도해 봤는데요.그 과정을 알려드립니다.React JS에서 Header 잘림 현상 원인 확인일단 레이아웃의 JS 소스와 CSS 소스부터 봅시다.function Layout({title, footermessage, menu_list}) { return ( );}Layout 파일의 JS 소스입니다.헤더는 클래스가 따로 없고, 내부에도 header 태그로 감싸주기만 했습니다...

쿠버네티스에서 Deployment를 배포했는데 Deployment does not have minimum availability. 에러 발생연결된 Pod 확인kubectl get pods -n 명령어를 입력하면 pod들이 나옵니다.이 중에서 해당 Deployment에 연결된 pod가 보일 겁니다.이 pod 명을 복사합니다.kubectl describe pod -n dev 명령어를 다시 입력해 줍니다.하단에 Event라는 영역이 있고 여기에 Container image "이미지 명" aleady present on machine이라는 문구가 나오네요.Deployment yaml수정Deployment yaml 수정 화면으로 가줍시다.imagePullPolicy가 IfNotPresent로 되어있네요.Alwa..

미니콘다를 C드라이브에 설치해서 가상환경을 세팅하고 파이썬 코딩을 하고 있었는데요.어느 순간 PC 메모리가 너무 늘어나서 확인해 보니 범인을 찾았습니다.범인은 바로 미니콘다였는데요.앱데이터 용량이 자그마치 12GB 이상이더라고요...전혀 미니멀하지 않은 미니콘다를 지우기로 결심했습니다.미니콘다를 지우고 파이썬을 설치할 건데 또 pip로 이것저것 설치하다 보면 용량이 늘어나겠죠.그래서 D 드라이브에 설치하기로 했습니다.일단 프로그램 추가 및 제거에서 미니콘다를 삭제처리해 줍니다.파이썬 D 드라이브에 설치일단 파이썬을 설치하기 위해 파이썬 설치파일을 아래 공식 사이트에서 다운로드합니다. Download PythonThe official home of the Python Programming Languagew..

Create React Application을 이용해서 만든 React 프로젝트를 DockerFile을 생성하고 Docker Repository로 배포하는 방법입니다.Docker 회원가입과 Docker Desktop 설치가 완료되었다고 가정하고 시작하겠습니다.Docker Repository 생성 먼저 Docker 사이트로 들어가서 Docker Repository를 생성해 줍니다. Docker Hub Container Image Library | App ContainerizationIncrease your reach and adoption on Docker Hub With a Docker Verified Publisher subscription, you'll increase trust, boost disc..

React Router 6.x 버전으로 올라오면서 생긴 기능으로 Link 대신 Nav Link를 사용해서 현재 표시 중인 링크를 확인할 수 있게 되었는데요. active link라고 하는 그 기능을 이용해 봤습니다.기존에 Active를 사용하지 않았던 소스 일단 기존에 Active를 사용하지 않았던 소스는 아래와 같습니다.import { Link } from "react-router-dom";function Sidebar({ menu_list, styles}) { return ( {menu_list.map((menu) => ( ..

신규 프로젝트를 구상하면서 React JS로 Header, Footer, Sidebar가 있는 레이아웃을 만들 일이 생겼습니다.React 화면 컨트롤은 Browser Router를 사용했고 이왕 만드는 거 다른 프로젝트에서 재사용 가능하도록 최대한 모듈을 구분해서 만들어봤습니다.React 프로젝트 화면 구조 구상일단 이번에 생성할 React 프로젝트의 레이아웃 뼈대는 요런식으로 만들 겁니다.Header, Footer를 따로 빼고 메인 화면 좌측에 Sidebar를 넣어줄 예정이며, App Screen 부분을 Router를 이용해 이동시킬 겁니다. React 프로젝트 레이아웃 뼈대를 잡기 위한 프로젝트 생성먼저 VS Code와 node JS는 React를 해보신 분이라면 어렵지 않게 설치하실 테고, 이미 설..

Webpack의 Module Federation Plugin을 이용한 마이크로 프론트엔드 서비스를 구현해 봤습니다.간단한 컨테이너 앱에 마이크로 앱 두 개를 보여주는 형식으로 만들었기 때문에 Webpack의 Module Federation Plugin을 이용한 마이크로 프론트엔드 구현 방식을 이해하는 목적으로 사용해 주시면 좋을 것 같네요.Webpack과 마이크로 프론트엔드란?자 일단 마이크로 프론트엔드와 Webpack이 뭔지부터 간단히 이해를 해보죠.먼저 마이크로 프론트엔드는 프론트엔드의 소스를 여러 개로 분할해서 서비스하는 방식입니다.여러 사람이 같이 운영하는 프론트엔드 화면의 개발에 상당히 유용하겠죠.Webpack은 자바스크립트 모듈 중 하나로 여러 개의 파일을 하나로 병합해서 컴파일해 주는 모듈입..

클라우드 서비스에는 크게 3가지 유형이 존재합니다. IaaS, PaaS, SaaS 이렇게 3가지인데요.간단히 한번 알아봤습니다. IaaS 방식 클라우드 서비스IaaS 방식의 클라우드 서비스는 Infrastructure as a Service의 약자로 기본적인 인프라만을 클라우드 서비스 업체에서 제공하는 서비스 방식입니다.서비스해 주는 영역은 서버 및 저장소, 네트워크 방화벽 및 보안 등이 있죠.여기서 클라우드 공급자는 단순히 서버가 멈추거나 인프라가 올바로 작동하게 유지만 해주면 되는 겁니다.반면 클라우드를 사용하는 업체나 사용자는 클라우드 서비스를 구성하고 최신 상태를 유지하면서 최종 사용자에게 서비스까지 제공해줘야 하는 거죠.쉽게 말해 IaaS는 서버 관리만 해주는 클라우드 서비스라고 보시면 됩니다...