본문 바로가기

전체 글

리액트로 radar chart 구현하기, 변형하기 (chart.js) Radar chart 구현 설치하기 npm install react-chartjs-2 chart.js import 하기 import { Chart as ChartJS, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend, } from "chart.js"; import { Radar } from "react-chartjs-2"; Data set export const data = { labels: [ "가", "나", "다", "라", "마", "바", ], datasets: [ { label: "그램그램", data: [1, 1, 1, 1, 1, 1], fill: true, // 선 안쪽 색상 채워짐 backgroundColor: .. 더보기
최적화 최적화 방법들 최적화 기법 (1) DOM 트리 가볍게 만들기 // 수정 전 첫 번째 두 번째 세 번째 // 수정 후 : 불필요한 div 요소 제거 첫 번째 두 번째 세 번째 (2) 인라인 스타일 사용하지 않기 //수정 전 마진 10px 이것도 마진 10px //수정 후 : class와 CSS로 대체 마진 10px 이것도 마진 10px .margin10 { margin: 10px; } (3) 사용하지 않는 CSS 제거하기 (4) 간결한 셀렉터 사용하기 캐시 사용하기 캐시가 유효한 시간 동안 네트워크 리소스를 아낄 수 있음 파일을 다시 받아올 필요가 없기 때문에 브라우저 로딩이 빨라짐 로딩이 빨라진 만큼 빠른 사용자 경험 제공 가능 자바스크립트 트리쉐이킹 (1) 필요한 모듈만 import 하기 (2)Babe.. 더보기
Filter 로 중복제거하기 "blogs": [ { "id": 1, "title": "My First Blog", "body": "Why do we use it?\nIt is a long established fact that a reader will be distracted by the readable content of a "author": "김코딩", "likes": 30 }, { "id": 2, "title": "Opening Party!", "body": "Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.", "author": "박해커", "likes": 100 }, { "id": 3, "title".. 더보기
웹팩 만들기 1. 디렉토리 생성 2.npm init -y ---> package.json 파일 생성 3. src/index.js. 파일생성 4.웹팩을 사용하기 위해서는 npm으로 webpack, webpack-cli를 설치 npm install -D webpack webpack-cli 5.웹팩 config 파일 작성 // webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), // './dist'의 절대 경로를 리턴합니다. filename: 'app.bundle.js', }, }; 6. 번들링하기 npx webpack 번외.. 더보기
브라우저랜더링 브라우저랜더링과정에 대해 설명하시오 1.사용자가 브라우저를 통해 웹사이트에 접속하면 브라우저는 DNS를 통해 서버의 아이피 주소를 파악 2.브라우저는 파악한 ip주소에 있는 서버와 3-handshake를 완료하고나서 서버에 데이터를 요청하는 http request를 합니다. 그리고 서버로부터 데이터를 받는데 이것을 HTTP Response라고합니다. ————————————————————————————————————- 3.서버로부터 받은 데이터를 통해 html parsing 하여 돔트리 만들다 중간에 스타일태그가 나오면 css를 파싱하여 cssom 트리를 만든다. 파싱중간에 스트립트 태그가 나오면 자바스크립트 엔진에게 권한을 넘겨서 자바스크립트 코드를 파싱하여 Ast생성후 실행합니다. 이과정에서 돔파싱 중.. 더보기
웹표준 웹접근성 웹 표준 : 웹에서 표준적으로 사용되는 기술이나 규칙 웹 : "공간" 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간 크롬, 엣지, 사파리, 오페라, 파이어폭스 등 최신 웹 브라우저들은 모두 웹 표준을 지원한다. 따라서 웹 표준에 맞추어 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다. 장점: 1. 유지보수의 용이성 : 각 영역이 분리되면서 유지보수 용이 + 코드경량화 :트래픽 비용감소 2. 웹 호환성 확보:웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과 3.검색 효율성 증대: 검색 엔진에서 더 높은 우선 순위로 노출될 수 있다. 4.웹 접근성 향상 크로스 브라우징(Cross Browsing)이란 웹 사이트에 접.. 더보기
리액트 버튼만들기 import styled from "styled-components"; import { createGlobalStyle } from "styled-components"; //전역 스타일 설정 const GlobalStyle = createGlobalStyle` button{ padding:5px; } //Styled Components로 컴포넌트를 만들고 const BlueButton = styled.button` background-color: blue; color: white; `; //만들어진 컴포넌트를 재활용해 컴포넌트를 만들 수 있다 const BigBlueButton = styled(BlueButton)` padding: 10px; margin-top: 10px; //마우스를 올려놨을때 &:h.. 더보기
ui ux 분석 사용성평가 UI 분석 사용중인 UI 디자인 패턴 컬럼 그리드 시스템 사용 여부 UX 분석 피터 모빌의 UX 7요소 충족 여부 1.유용성 2.사용성 3.매력성 4.신뢰성 5.접근성 6.검색 가능성 7.가치성 User flow 그려보기 사용성 평가 제이콥 닐슨의 10가지 사용성 평가 기준 충족 여부 1.시스템상태의 가시성 2.시스템과 현실세계의 일치 3,사용자 제어 및 자유 4.일관성 및 표준 5.오류 방지 6.기억보다는 직관 7.사용의 유연성과 효율성 8.미학적이고 미니멀한 디자인 9.오류의 인식, 진단, 복구를 지원 10.도움말 및 설명 문서 더보기

티스토리툴바