본문 바로가기

분류 전체보기253

[REACT] 컴포넌트 성능 최적화 많은 데이터 렌더링하기 check list 2500개 세팅 크롬 개발자 도구를 통한 성능 모니터링 F12로 개발자 도구로 들어가서 Performance탭에 들어간다. 왼쪽 위 Record 버튼을 누르고 기록을 시작한다. 리스트 중 하나를 체크하여 리렌더링 시킨다. 1300ms 정도 걸린다. 느려지는 원인 분석 자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 때 check list 1을 체크하면 App 컴포넌트의 state가 변경되면서 App 컴포넌트가 리렌더링된다. 부모 컴포넌트가 리렌더링 되었으니 그 안의 2500개의 컴포넌트가 리렌더링된다. 느리다. 그래서 최적화를 해줘야 한다. React.memo를 사용하여 컴포넌.. 2020. 1. 6.
[Vue] 뷰 프로젝트 생성 및 서버 시작하기 Vue.js 공식 홈페이지를 봐도 프로젝트 생성하고 실행을 설명하는 부분을 찾지 못해서 작성합니다. 해당 내용은 공식 홈페이지에서 제공하는 동영상 가이드를 보고 정리한 것입니다. https://www.vuemastery.com/courses/real-world-vue-js/vue-cli Vue CLI 3 - Creating our Project - Real World Vue.js | Vue Mastery Learn how to create a project with Vue CLI 3 from the command line and with the Vue UI. Then learn how the project is structured and how the app is getting loaded. www.vu.. 2020. 1. 5.
[REACT] 컴포넌트 스타일링 일반 CSS 컴포넌트를 스타일링하는 가장 기본적인 방법 import // App.js import './App.css'; BEM naming 이름을 지을때 해당 클래스가 어디에 사용되는지 명확하게 작성하는 방식 EX) .card-title-primary Sass 전처리기 Sass Less Stylus PostCSS 이 중 Sass, Less가 가장 많이 쓰이는 듯 하다. Less 사용자로서 Less의 문법이 더 쉽다. SCSS와 SASS의 차이는 중괄호, 세미콜론의 유무 차이다. 사용 node-sass 설치 utils 함수 분리하기 sass-loader 커스터마이징 node_modules에서 라이브러리 불러오기 @import '~' 를 사용하면 '../../' 없이 편하게 불러올 수 있다. // yarn.. 2019. 12. 21.
[웹표준,웹접근성] HTML TAG 웹 접근성에 대해 공부하다보니 평소에 잘 쓰지 않던 태그들이 많다는 것을 알게 되었고, 이에 대해서 한번 리뷰를 해보려고 합니다. 정리하다 보면 좋은 태그들을 발견할 수 있지 않을까 싶습니다. !DOCTYPE 태그 정말 자주 보는 태그인데 정확히 어떤 의미인지 몰라서 알아봤습니다. 'doctype 선언'이라고 보통 읽고, document type 선언을 의미합니다. 페이지가 어떤 HTML버전으로 쓰였는지 설명합니다. HTML 4.01에서는 doctype 선언이 DTD를 조회한다고 합니다. 왜냐하면 HTML 4.01 SGML(tandard Generalized Markup Language) 기반으로 만들어졌기 때문입니다. DTD는 마크업 언어를 명시하고, 그래서 그 브라우저는 콘텐츠들을 정확하게 렌더하는 .. 2019. 12. 19.
[REACT] HOOKS REACT HOOKS useState 함수형 컴포넌트에서 상태 관리하기 위해 사용 import React, { useState } from 'react'; const Info = () => { const [name,setName] = useState(); const [nickname,setNickname] = useState(); const onChangeName = e => { setName(e.target.value); } const onChangeNickname = e => { setNickname(e.target.value); } return ( 이름:{name} 닉네임:{nickname} ); } export default Info; useEffect 컴포넌트가 렌더링 될 때마다 특정 작업을 실.. 2019. 12. 18.
[웹표준,웹접근성] 웹 접근성 가이드라인 2.1 리스트 (WCAG 2.1) 웹 접근성 가이드라인 2.1 리스트 (WCAG 2.1) Perceivable 인지할 수 있는(요소) Text Alternatives 텍스트 대체- 1.1.1 Non-text Content 비-텍스트 내용 Time-based Media 시간 기반 미디어 - 1.2.1 Audio-only and Video-only (Prerecorded) 오디오 전용, 비디오 전용(미리 기록) - 1.2.2 Captions (Prerecorded) 캡션,설명(미리 기록) - 1.2.3 Audio Description or Media Alternative (Prerecorded) 오디오 설명, 미디어 대체(미리 기록) - 1.2.4 Captions (Live) 캡션,설명(실시간) - 1.2.5 Audio Description.. 2019. 12. 17.
[웹표준, 웹접근성] 웹 접근성 가이드라인 1.0 (WCAG 1.0) Quick Tips to Make Accessible Web Sites * W3C에서 발췌한 내용입니다. WCAG 1.0이기 때문에 간단하게 10가지로 정리하였습니다. 현재 WCAG 2.1까지 나와 있습니다. 이 팁들은 완벽한 가이드라인이 아니라고 명시하고있습니다. [ 10 Quick Tips ] 2019. 12. 17.
[웹표준, 웹접근성] Techniques For WCAG 1.0 * 웹 접근성의 기술중에서 일반적인 기술에 관해 번역 및 작성 해보려고합니다. G1각 페이지에서 메인 화면으로 바로 가는 링크 더해주기 이 기술은 반복되는 여러 웹 페이지를 무시하는 메커니즘을 제공합니다. 보통 웹 페이지 상단 좌측에 위치시킵니다. 절차 그 링크가 웹페이지에서 포커스가 가능한 첫번째 요소인지 점검합니다. 그 링크의 설명이 메인화면에 연결되어 있다고 전달하는지 점검합니다. 그 링크가 항상 보이거나, 키보드 포커스일때에도 보이는지 점검합니다. G4 웹 페이지가 일시정지 하였을 때, 일시정지하거나 재시작 할 수 있게 허락해주기 이 기술은 컨텐츠의 이동 또는 스크롤을 일시정지하는 방법을 제공합니다. 절차 움직임이나 스크롤이 멈추는지 확인하고 스스로 재시작하지 않는지 점검합니다. 움직임이나 스크롤.. 2019. 12. 17.
[React] 라이프사이클 * 김민준님의 '리액트를 다루는 기술'을 공부하며 개인적으로 정리한 내용입니다. 접두사 Will : 어떤 작업을 작동하기 전에 실행 Did : 어떤 작업을 작동한 후에 실행 라이프 사이클 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는 것 업데이트 언마운트 : 마운트의 반대과정, DOM에서 제거 마운트 컴포넌트 만들기 constructor : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 render : UI를 렌더링 componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 업데이트 props가 바뀔때 state가 바뀔때 부모 컴포넌트가 리렌더링 될 때 this.f.. 2019. 12. 16.

티스토리툴바