말랑말랑제리스타일

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 태그로 감싸주기만 했습니다...

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은 자바스크립트 모듈 중 하나로 여러 개의 파일을 하나로 병합해서 컴파일해 주는 모듈입..

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

VS Code로 Blazor 웹앱을 생성하는 순서를 알아봤습니다.Blazor는 닷넷을 이용해 웹앱을 만들 수 있는 오픈소스 프레임워크입니다.설치해야 될 요소VS Code로 Blazor 웹앱을 생성 및 실행하기 위해 필요한 구성요소들입니다.VS Code 설치대부분 설치되어있을거라 생각해 따로 서술은 하지 않겠습니다.VS Code 설치하시면 됩니다.C# Dev Kit 확장프로그램 설치VS Code Extension에서 C#을 검색하면 C# Dev Kit이라고 맨 위에 나옵니다.이걸 설치하면 됩니다.닷넷 코어 설치하기 사이트에서 닷넷 최신버전을 받을 수 있습니다.저는 최신 릴리즈 버전인 8.0 버전을 설치했습니다. .NET 다운로드(Linux, macOS 및 Windows)Linux, macOS 및 Windo..

웹의 경우 워낙에 npm으로 만들어진 모듈이 많다 보니 어떤 기능을 사용할 때 어떤 npm 모듈을 설치해야 될지 고민될 때가 많죠. 저 역시 gif encoding을 하려고 찾아보니 npm 모듈만 서너 개가 넘더라고요. 그래서 고민하던 중 찾은 사이트를 하나 소개합니다. npm trends 사이트 소개 바로 npm trends라는 사이트를 소개하겠습니다. 여러 가지 npm의 사용량을 분석할 수 있는 사이트로 당연히 같은 기능이라면 최근 많이 사용되는 npm 모듈이 편하거나 기능이 좋은 경우가 많겠죠. 이렇게 gif encoding 관련 npm 모듈을 찾아보니 ffmpeg를 제외하고 4가지 정도가 있더라고요. https://npmtrends.com/gif.js-vs-gifencoder-vs-gifshot-..