1. MUI 설치 MUI 설치 시 일괄 설치가 되는 것 같은데.. 안되어 있다면 @MUI/LAB 을 설치해주도록 하자. $ npm install @mui/lab 2. MUI 테스트용 treeview 생성 import React from "react"; import TreeView from "@mui/lab/TreeView"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import TreeItem from "@mui/lab/TreeItem"; const TreeViewExample = () => { return ( ); }; ..

"성공적인 웹 어플리케이션은 UX 디자인과 사용자 인터페이스 모두에 대한 강력한 기반을 갖추어야 한다." - Brad Frost BootStrap Material-UI what? 반응형 웹사이트 개발을 위한 CSS, HTML, JS 프레임워크 Material Design 원칙을 따르는 React UI 프레임워크 개발 주체 트위터 Meterial Design - 구글 MUI - unnamed team 적용 예시 에어비앤비, 드롭박스, 애플뮤직, 트위터 ... NASA, Amazon, Unity, Google 및 모든 제품... grid sys 완벽 반응형 디자인 제공. 12열 그리드 시스템. infomation layout 모바일 및 데스크톱(모바일 우선) 용 모바일 및 데스크톱(데스크톱 우선) 용 dep..

1. MVC Architecture Model(데이터) - View(화면) - Controller (컨트롤러) * Ajax 로 부터 받는 데이터 - Model * HTML 과 CSS 로 만들어지는 화면 - View * javascript가 데이터를 받아 조작하여 서버에 전달 - Conroller Ajax를 통해 서버에서 HTML을 만들지 않고 데이터만 교환이 가능하게 되었고, JS로 DOM을 조작하는 작업이 중요함에 따라 jQuery를 통해 Ajax와 DOM을 다루게 되었는데... 2. MVVM 아키텍처 Model(데이터) - View(화면) - ViewModel(데이터를 화면에 보여지는 값으로 변경) 리액트의 특징 중 하나였던 선언형 프로그래밍과 연관됨. * . 프론트엔드 아키텍처 변화 정리 프론트엔드..

React 란? Facebook 에서 주도하여 개발하여 UI를 효과적으로 구축하기 위해 사용하는 JS 기반 라이브러리. React 자체로는 Framework 라고 부를 수 있는 기준인 Routing, 상태관리 기본 제공을 충족하지 못해서 '라이브러리'이지만, React 생태계로서는 Framework. React 등장 배경 기존: 특정 DOM 을 선택한 뒤, 해당 DOM에 어떤 이벤트가 발생하면 이에 대한 change 가 일어나도록 설정하는 방식. - 유저와의 상호작용이 자주 일어나는 경우 이에 따른 변화를 동적으로 UI에 표현해야 한다면 그만큼 애플리케이션이 복잡해지고 관리가 힘들어짐. React 특징 1. 가상 DOM 기존의 경우 하나의 데이터가 바뀌어도 화면 전체가 리렌더링 되어서 전체 화면이 다시 ..

전제 조건 react 가 잘 설치되었으며 chocolatey 같은 부가 프로그램들을 모두 다 설치해두었다는 전제 하에 시작. React 개발환경 구축 대충 얼레벌레 깔아서 리액트 구축해오던 나.. 리액트 환경을 처음부터 구축할 기회가 생겼다. 이거 포스팅에 놓칠 수 없다는 생각이 들어 오늘의 글 건덕지를 하나 잡게 되었다. 1. node.js 설치 no bornatnoon.tistory.com 기본 셋팅에 대해 궁금하다면, 첨부 글을 확인해보도록 하자. 0. 시작 내가 react 프로젝트를 구현할 폴더를 하나 구현해주고, 나는 대상 폴더를 D:\Code 로 선정할 것이다. Code 폴더 우클릭 > 터미널에서 열기(T) 선택 여기서부터 시작. 1. create-react-app 설치 리액트 기본틀 만들기에..

이게 REACT 게시판으로 가야하는지 일반 게시글로 쓰는게 맞을지는 모르지만 일단 TIL 내용이라 어디던 작성해본다. 이 또한 개발 공부니까 ... 어느 날 출근하여 네이버 로그인을 해보니 네이버 메인 UI 디자인이 바뀐 느낌이 확 들었다. 기존의 디자인보다 조금 더 동글동글해지고.. 웹앱스러워진 느낌이 들더라 그리고 chrome extension 에 못보던 불이 켜졌다. this page is using the production build of React! 개발자도구로 살짝만 구경해봤다. 리액트 17버전 쓰고 있고.. 역시 대기업인지 오픈 소스 들은 많이 안 쓴 것 같다. 뭔가 어제 배포 되자마자 구경했으면 더 재미를 봣을 수도 있을 것 같은데 내가 본 게시글들에 비하여 내가 뜯어 볼 수 있는 소스코..

단어 처럼 -. truthly 는 true 같은 것 -. falsy 는 false 같은 것 한마디로 boolean 값인 true, false 를 가지지 않음에도 불구하고 "비슷한" 효과를 내는 값이다. 정도로 생각하면 될 것 같다. 1. falsy 값의 종류 - false / 0 / 음수 / On / "" / null / undefined / NaN * On : BigInt. boolean 으로 사용될 경우 숫자와 같은 규칙을 따른다. * NaN : 숫자가 아닌 값 None of Number 2. falsy 값 판정 if (!변수) {return;} console.log(변수) 이런 식으로 사용하면 위의 falsy 값이 아닌 값만 console 로 찍게 된다. 3. 사용 예시 보통 우리가 뭔가 데이터를 ..

a href={링크} 형식을 이용하면 그냥 현재 탭에서 해당 링크로 이동하게 되는데 나는 탭 하나를 신규로 열어주고 신규 탭에서 해당 링크를 열고 싶다. window.open('url 링크', '_blank')}>하이퍼링크 텍스트 작성 window.open 메서드를 사용하면 되고 두번째 매개변수에 _blank 를 전달해주면 된다.

접속자 ip 가져오기 // 외부 라이브러리 사용 const [ ip , setIp ] = useState(); useEffect( () => { axios.get('https://geolocation-db.com/json/') .then((res) => { setIp(res.data.IPv4) }) },[]) 접속정보 가져오기 (접속자 agent 정보) const userAgent = window.navigator.userAgent console.log 찍어서 확인해보면 값 잘 들어온다. 접속자 정보 가지고 있다가 - 일정 ip 계속 접속 시도하면 - 접속 차단 시키는 방법 구현할 때 사용하면 될듯

사건의 발단 웹을 이것저것 만들어놓고 배포하고 보니 웹에서 보는거랑 폰에서 보는거랑 ui가 조금씩 틀리고 다르게 보이더라.. 문제는 여기에 있었는데.. 문제 1 로고가 보여야 하는데 안 보인다. 문제 2 transform 에 translate 를 먹여 위아래 공백 조절을 잘해서 컨트롤하면 좋겠지만 .. 웹에서는 이쁘게 출력되는 애들이 폰에서는 띄어쓰기 간격이 이상하게 보이는 경우가 있더라 = 예상한 것처럼 구현이 안되고 기기에 따라 디자인이 틀려버림 = 제어 불가 ( 사이드바 height 간격도 폰이랑 웹이랑 다르게 보이더라 ) 그래서 최대한 변수가 없게 만들어야 한다 ! 1. 사이드바 아래 간격을 최대한 많이 두고 (자연스러운 선에서) 2. 적당하게 아래 간격을 띄운 다음 3. 사이드바를 푸터 바 보다..

Code import React, { useState } from "react"; import { PieChart, Pie, Legend, Sector, Cell, ResponsiveContainer } from 'recharts'; const PieChartComponent = () => { const data = [ { name: '제안', value: 4 }, { name: '접수', value: 3 }, { name: '완료', value: 2 }, { name: '보류', value: 2 }, ]; const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; const RADIAN = Math.PI / 180; const renderCustomiz..

회사에서 개발하는 게시판은 디자인이 허접 그자체다. 👻 바꾸고 싶은 마음은 굴뚝 같으나... 쉽지가 않아 어디서 이쁜 디자인들 다 가져와서 뚝딱뚝딱 만들고 픈데... 1. 기능은 다 구현해뒀고 2. 디자인만 엎으면 되는 상태다 그래서 material-UI 를 사용해보려고 하는데 실패했다. 사용 방법에 맞춰 잘 가지고 온 거 같은데 자꾸 인식을 못하기에 왜 그런가 보다보니 리액트 버전 차이 때문에 적용이 안 되더라. 호환성 문제 해결 불가: 이미 만들어진 게시판은 리액트 18.0.1 버전으로 만들어졌는데.. Material-UI 는 리액트 16.8.0 이나 17.0.0 버전이랑만 호환되는 듯 하다.. 오랜만에 이쁜 아이 주워서 기분 좋았는데.. 나는 다른 아이 찾아보도록 해야겠다. 혹시나 나중에 정 아쉬우..