Frontend (46) 썸네일형 리스트형 2021-04-24 :: Material UI 시작하기 터미널을 통해 아래 코드를 실행시켜 ui/core을 설치 해준다. npm install @material-ui/core npm install @material-ui/icons Material-UI의 기본 폰트인 Roboto를 import 해준다. 기본 html폴더에 폰트 등록하기 public/index/html에 폰트를 등록 해주자. Basic Component Typograph text를 추가할 때 사용하는 컴포넌트이다. Hello, World! Grid - 반응형 cssbaseline -> give default css @material에서 Icon도 많이 사용 가능 gutterBottom paragraph 메인홈페이지 component -> example of deoms, explainat.. 2020-05-21 :: Promise Promise는 ECMASCript 6부터 추가되었다. 비동기 처리를 작성하다 보면 콜백 함수가 중첩되어 알아보기 어려운 코드가 만들어진다. 이때 Promise를 사용하면 복잡하게 중첩된 코드를 더욱 알아보기 쉽게 작성할 수 있다. 비동기 처리의 예 setTimeout이나 addEventListener 메서드는 비동기적으로 실행된다. 하지만 이들을 다루는 코드는 보통 순차적으로 실행되지 않는다. console.log("A"); setTimeout(function() {console.log('B'); }. 0}; console.log("C"); 위와 같은 코드의 실행결과는 A C B가 된다. setTimeout 함수로는 인수로 받은 콜백 함수를 일정 시간이 흐른 후에 실행하도록 예약하는 처리만 하고, 그다.. 2021-05-20 :: Context API Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 이를테면 사용자 로그인 정보, 어플리케이션 환경 설정, 테마 등이 있다. Context API를 이용한 전역 상태 관리 흐름 이해하기 리액트 어플리케이션에서 여기저기에 필요한 데이터는 보통 최상위 컴포넌트인 App의 state에 넣어서 관리한다. 그리고 최상위 컴포넌트에서 해당 데이터를 사용하는 컴포넌트 까지 props형태로 전달해주는데 그 경로가 복잡해지는 경우 관리하기가 매우 복잡하다. 이런 경우 Context API를 사용하면 Context를 만들어 단 한 번에 원하는 값을 받아와서 사용이 가능하다. Context API 사용법 익히기 src 디렉터리에 contexts 디렉터리를 만든 뒤 그 안에 col.. 2021-05-11 :: 컴포넌트 성능 최적화2 느려지는 원인 분석 컴포넌트는 다음과 같은 상황에 리렌더링 된다. 자신이 전달받은 props가 변경될 때 자신의 state가 변경될 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 때 지금 상황을 분석해 보자. 먼저 할 일1을 체크 했을 때 App컴포넌트의 state가 변경되어 App 컴포넌트가 리렌더링 된다. 이어서 자식 컴포넌트인 TodoList 역시 리렌더링이 되고 TodoList의 자식 컴포넌트인 수많은 Todo 컴포넌트 역시 리렌더링 되며 성능의 저하가 발생된다. 할 일1은 리렌더링 되어야 하는 것이 맞지만 그 이외 값이 변경되지 않은 컴포넌트는 리렌더링할 필요가 없다. React.memo를 사용하여 컴포넌트 성능 최적화 컴포넌트의 리렌더링을 방지하기 위해서 우리는 shou.. 2021-05-07 :: 컴포넌트 성능 최적화1 많은 데이터 렌더링하기 성능 최적화를 경험하기 위해 먼저 많은 데이터를 렌더링해 보겠다. function createBulkTodos() { const array = []; for(let i=0; i 2021-05-07 :: SCSS official guide 번역 sass-lang.com/guide Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup. Preprocessing CSS on its own can be fun, but st sass-lang.com 전처리 css가 점점 커지고 복잡해 짐에 따라 관리가 힘들어졌다. 따라서 전처리기의 도움이 필요하다. Sass는 기존의 css에 없었던 변수, nesting, .. 2021-05-07 Todo scss설정하기 CSS 단위 em rem CSS의 길이 단위 중 em rem은 상대적 기준으로 크기를 정한다. em은 상위 요소 기준으로 크기를 정한다. 만약 html테그의 font-size가 16px이고 html의 하위 요소인 body의 font-size를 1.5em으로 잡는다면 body의 실질적인 font-size는 32px이 된다. rem은 최상위 요소인 html 기준으로 크기를 정한다. 세부 작동 방식은 em과 비슷하니 생략하겠다. 요소의 가운데 정렬 아래 코드와 같이 width를 먼저 지정해준 뒤 margin-left, margin-right 속성에 auto 값을 부여하면 가운데 정렬이 된다. .TodoTemplate { width: 512px; //width가 부여된 상황에서 중앙정렬 margin-left: .. 2021-05-06 :: Todo Project1 reactjs.org/docs/refs-and-the-dom.html Refs and the DOM – React A JavaScript library for building user interfaces reactjs.org ref에 접근하기 위해서는 .current를 이용 해 준다. id지정해줄 때 useRef로 많이 처리한다. const id = useRef(4); id.current +=1; 2번째 배열 인자에 꼭 들어가야하는 값들 const onSubmit = useCallback(e=> { onInsert(value); e.preventDefault(); },[onInsert, value]); 최상위 컴포넌트 App에 데이터를 state로 관리해준다. 또한 그 state를 조작하는 메서드 역시 .. 이전 1 2 3 4 5 6 다음
