본문 바로가기

분류 전체보기

 (341)
node-sass 설치 오류 node-sass 설치 과정 오류 (Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/node-sass) ※ 이 글은 예전 블로그에서 퍼온 글입니다. 나만 그런지 모르겠는데 gem sass는 잘 설치 되던데 node-sass를 설치하려고 하니 자꾸 에러가 떠서 환장하는 줄 알았다. 보통은 sudo npm install -g node-sass so-tired.tistory.com 설치 커맨드 sudo npm install -g --unsafe-perm node-sass 정상 설치 후 확인 node-sass -v
React) Hooks : useRef Hooks : useRef useRef는 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해줍니다. 아래 예제에서 register 버튼을 눌렀을 때 포커스가 input으로 넘어가는 코드를 작성했습니다. view 여기서 input에 숫자를 입력하고 register 버튼을 누르면 바로 직후에 아래와 같이 input으로 포커스가 넘어갑니다. example source code import React, { useState, useMemo, useCallback, useRef } from 'react'; const getAverage = list => { console.log('평균값 계산 중...'); if (list.length===0) return 0; const sum = list.reduce((a,b..
React) Hooks : useCallback 으로 렌더링 성능 최적화하기 Hooks : useCallback useCallback은 주로 렌더링이 자주 되는 상황에서 성능 최적화를 위해 사용됩니다. 컴포넌트는 랜더링될때마다 컴포넌트 내부의 함수들을 모두 새로 생성하는데 useCallback을 사용하면 useMemo에서 이전에 계산된 값을 재사용하여 불필요한 연산을 피했던 것 처럼, 생성해 둔 함수를 재사용해 불필요한 함수 생성을 줄일 수 있습니다. 컴포넌트 렌더링이 자주 발생하거나 렌더링 해야 할 컴포넌트가 많은 경우 이를 이용해 성능 최적화를 해주는 것이 좋습니다. const example = useCallback(() => {생성할 함수...},[배열]); 두번째 파라미터로 주어지는 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 알려주는 것입니다. examp..
React) Hooks : useMemo를 이용하여 연산 최적화하기 Hooks : useMemo useMemo는 이전에 계산한 값을 재사용하는데 사용하는 Hook 입니다. useMemo(() => 연산할 함수, deps 배열); 여기서 deps 배열 안에 넣은 내용이 바뀌면 등록한 함수를 호출하여 연산하고, 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용합니다. 즉, 매번 연산을 수행하는 것이 아니라 두번째 파라미터로 전달한 배열의 값이 바뀔 때에만 연산을 하는 것입니다. 이를 통해 불필요한 연산을 하지 않을 수 있습니다. 다음은 리스트에 숫자를 추가하여 리스트 값들의 평균을 보여주는 함수형 컴포넌트입니다. view source code import React, { useState, useMemo } from 'react'; const getAverage = list ..
React ) Hooks : useReducer 사용하기 Hooks : useReducer useReducer는 리액트에서 reducer를 사용하게 해주는 Hook 입니다. 현재 상태, 업데이트에 필요한 정보를 담은 action 값을 전달받아 새로운 상태를 반환하는 함수입니다. action 상태를 변화시키기 위해 필요한 정보를 담은 액션은 다음과 같이 형태로 이루어져 있습니다. 뒷장에서 배울 리덕스에서는 액션안에 이 type 객체가 반드시 있어야 한다고 합니다. { type: 'ACTIONTYPENAME', ... } 카운터 구현 view 첫화면은 다음과 같습니다. 아래 +1 버튼을 누르면 current value 값이 1 증가하고, -1 버튼을 누르면 1 감소합니다. source code import React, { useReducer } from 'reac..
React) 컴포넌트의 수명주기 Lifecycle 컴포넌트의 수명주기 LifeCycle 리액트 컴포넌트에는 수명주기 Lifecycle이 있습니다. 수명은 페이지가 렌더링 되기 전 준비과정부터 페이지가 사라질 때가지를 말합니다. 프로젝트를 하다보면 컴포넌트를 렌더링 하기 전에 처리해야할 작업이 있고, 렌더링 이후에 업데이트 하기 전 후 처리해야 할 작업 등이 있습니다. 이렇게 컴포넌트 수명 주기에 따른 처리를 위해 사용하는 것이 라이프사이클 매소드 입니다. 이것은 클래스형 컴포넌트에서만 사용할 수 있고, 함수형 컴포넌트에서는 Hooks를 사용하여 비슷한 기능을 사용할 수 있습니다. 라이프 사이클의 종류 마운트 Mount 업데이트 Update 언마운트 Unmount 마운트 Mount DOM이 생성되고 웹 브라우저 상에 컴포넌트들이 나타나는 것을 마운트라고 ..
React) 사용자 입력 받아 데이터 추가, 제거하기 사용자 입력 받아 데이터 추가, 제거하기 view 초기 화면은 다음과 같습니다. input에 사용자가 텍스트를 입력하고 add 버튼을 누르면 이렇게 추가됩니다. 그리고 각 항목의 왼쪽 delete 버튼을 누르면 해당 항목이 제거됩니다. source code import React, { useState } from 'react'; const Iteration = () => { const [seasons, setSeasons] = useState([ { id: 1, name: 'spring' }, { id: 2, name: 'summer' }, { id: 3, name: 'fall' }, { id: 4, name: 'winter' } ]); const [inputText, setInputText] = use..
map() 함수 사용하기 자바스크립트 배열의 map() 함수 map() 함수는 자바스크립트 배열 객체의 내장 함수입니다. while 또는 for 로 반복문을 짜는 것처럼 자바스크립트에서는 map 함수를 이용해서 반복되는 컴포넌트를 렌더링 할 수 있습니다. 문법 arrayItem.map(callback, [argument]) arrayItem은 배열로 이루어진 데이터입니다. 이 값에 map 함수를 사용합니다. 이때 callback 함수에는 배열 내부 각 요소들로 생성하는 함수로 currentValue, index, array를 파라미터로 가집니다. cueentValue : 배열의 항목 중 현재 처리할 항목 index : currentValue의 인덱스 값 array : 현재 처리하고 있는 원본 배열 그리고 콜백 함수 내부에서 사용..

티스토리툴바