말랑말랑제리스타일

React 레이아웃에 공통적으로 사용할 버튼이 필요해 플로팅 버튼을 추가해 봤습니다.버튼을 누르면 위로 다른 버튼들이 펴지는 형태로 코딩해 봤고 펴지는 로직이 생각보다 어려웠네요.React 플로팅 버튼 버튼 리스트 생성먼저 FloatingButton.js 파일을 생성하고 버튼 리스트를 생성해 줍니다.각 버튼에는 id, text, onClick 메서드를 갖도록 하고 플러스 마이너스 버튼은 따로 추가해 줄 거라 이 리스트에서는 포함하지 않습니다.import { useState } from "react";function FloatingButton({styles}) { const buttonList = [ {id: "Cbtn", text: "C" ,onClick:cBtnClick}, {id: "Rb..

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..

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를 해보신 분이라면 어렵지 않게 설치하실 테고, 이미 설..

node js를 이용해서 React 프로젝트를 최초 생성하고 샘플 코드를 지워 초기 상태로 만들어주는 방법입니다.React 프로젝트 생성하기React 프로젝트를 생성하기 위한 준비물은 Node JS밖에 없습니다. Node.js — Download Node.js®Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org링크로 들어가서 다운로드하고 설치하면 됩니다.설치가 되었는지 확인하기 위해서는 파워쉘 등 터미널을 하나 열어서 "node -v" 명령어를 입력해 보면 됩니다.이렇게 버전이 나오면 제대로 설치가 되어있는겁니다.확인이 되었다면 npx 명령어로 React 프로젝트를 생성해 봅시다.npx create-react..