분류 전체보기129 [Excel] 엑셀 함수 / 컴활 1급 실기 연습 얼마 전, 기관에서 배포하는 공시 자료를 확인할 일이 생겨 정말 오랜만에 엑셀 작업을 해봤습니다. 이전에 관련 자격증을 취득한 후 엑셀과 액세스를 완벽히 다룰 수 있다 생각했는데 실상은 그게 아니더군요. 정말 간단한 정보만 기록된 문서였는데 함수나 서식, 필터 등등.. 열심히 공부했던 것들이 전부 기억이 나질 않았습니다. 해서, 일상에서 흔히 사용될만한 내부 함수와 필터, 조건부 서식 등 사용법을 몇 가지 다뤄보려 합니다. 본 포스팅은 복습 겸 유용한 정보를 공유하고자 작성하는 것이며 첨부된 이미지와 자료는 직접 제작했습니다. 자료는 추후 추가되거나 삭제될 수 있으며 엑셀 기능 활용법과 예시를 먼저 작성해봤습니다. 목차 ● 1. 함수 ·········· 1-1. 설명 ·········· 1-2. 연산자와.. 2023. 6. 20. [React] 최적화(4) - 프롭스 드릴링(Props Drilling) 프롭스 드릴링(Props Drilling)이란 상위 컴포넌트가 하위 컴포넌트로 Props를 전달할 때 발생하는 구조적 문제를 말한다. 예를 들어, 최상위 컴포넌트가 직계비속 중 사촌쯤 되는 하위 컴포넌트에게 데이터를 전달해야 한다고 생각해 보자. 이 데이터는 최상위 컴포넌트의 하위(자식) 컴포넌트를 경유하고 또 그 컴포넌트의 자식을 건너고, 또 일촌을 건너야 비로소 전달되는 구조적인 문제를 갖고 있다. 즉, 그저 경유하기만 하는 컴포넌트가 최소 2개나 있다는 뜻이다. 여기서 만약 상태 데이터의 이름이나 직/간접적으로 참조하고 있는 함수의 이름이 변경되어야 한다면 어떤 문제가 발생할까? 이 데이터가 경유하고 있는 모든 컴포넌트를 열어 하나씩 수정해야 하는 아주 끔찍한 일이 발생할 것이다. 이를 프롭스 드릴.. 2023. 3. 28. [React] 최적화(3) - useCalback, 함수형 업데이트 지난 시간에 React.memo 훅을 이용한 고차 컴포넌트에 대해 알아봤다. 간단히 복습해 보면 React.memo는 불필요한 렌더링을 최소화하기 위해 사용되는 훅킹 함수로, 결과적으론 메모이징된 컴포넌트 자체를 반환했었다. 이렇게 반환된 컴포넌트는 다른 컴포넌트로 전달될 수 있으며, 이처럼 컴포넌트를 받는 컴포넌트를 고차 컴포넌트라 불렀다. React.memo 훅은 앞에서 알아본 대로 굉장히 유용하지만 한 가지 단점을 갖고 있다. 그 특성상 비원시 타입(배열 또는 구조체 등)에 대해 얕은 비교를 수행한다는 점인데 즉, 실질적인 데이터가 아닌 주소를 비교하여 부모의 리렌더링으로부터 재생성되는 함수에 대해서는 정확한 예외처리를 하지 못한다는 것이다. 만약 위와 같은 상황에서 Props로 함수를 전달받는 컴.. 2023. 3. 27. [React] 최적화(2) - Raect.memo 리액트 메모이제이션에 대해 알아보자. 리액트 공식 사이트에서 설명을 찾아보면 React.memo는 고차 컴포넌트라고 나와있다. 여기서 말하는 고차 컴포넌트란 무엇일까? 일단 컴포넌트는 실행 가능한 독립적인 기능을 말한다. 최상위 컴포넌트를 제외한 나머지 컴포넌트는 언제나 부모(상위)로부터 호출되고 자신만의 동작을 수행한다. 이때 컴포넌트의 호출부에서 Props라는 속성 값을 전달할 수 있으며 이 값은 대개 본인의 의지와 상관없이 부모가 리렌더링 될 때마다 재전달 된다. 이로 인해 렌더링이 불필요한 컴포넌트도 다시 렌더링 작업을 수행하게 되는데 위에서 말한 고차 컴포넌트는 이런 작업을 최소화한 컴포넌트라 보면 된다. React.memo가 생성한 컴포넌트는 기존에 전달된 Props를 기억할 수 있는 능력을 .. 2023. 3. 24. [React] 최적화(1) - useMemo 메모이제이션을 이용한 최적화 방법에 대해 알아보자. 보통 알고리즘 공부할 때 배우는 건데 리액트에서 최적화 문제를 해결할 때도 사용된다고 한다. 메모이제이션에 대해선 이미 알고 있으니 어떻게 사용되는지만 알아보자. 리액트 자체적으로 지원하는 훅 기능을 이용하는데 useMemo를 불러온 후 최적화가 필요한 때에 적절히 이용하기만 하면 된다. 아래 예시를 보자. 1 import React, {useMemo, useEffect, useState} from "react"; 2 3 const [data, setData] = useState([]); 4 5 const getApiRef = async()=>{ 6 const res = await fetch("https://small-pond.tistory.com")... 2023. 3. 23. [Javascript] 비동기 처리(3) - async, await 이전 글에서 return new Promise 구문을 통해 약속된 객체를 생성하고 리턴값을 활용하는 방법에 대해 알아봤다. 이 방법 외에도 async 키워드를 활용한 비동기 처리 방법이 있다고 한다. 해당 키워드가 붙는 함수의 경우 결과 값을 Promise 객체에 담아 리턴하는데 똑같이 then 메서드를 이용해 접근할 수 있다. 아래 예시를 보자. function displayText(){ return "Display Text On Window" } async function AsyncDisplayText(){ return "Display Text On Window" } console.log(displayText(), AsyncDisplayText()); 둘 다 같은 값을 리턴하는데 콘솔로 출력해 보면 .. 2023. 3. 18. 이전 1 2 3 4 ··· 22 다음 반응형
