삼바의 성장 블로그

서론 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render. React를 사용하여 App을 만들던 도중 위와 같은 오류를 만나게 되었고, 이를 useCallback Hook API를 사용하여 해결하였습니다. 해결은 했지만 위와같은 Warning이 왜 발생했는지 그리고 어떻게 해결할 수 있는지 이해를 하지 못하여 공부하며 이 글을 적어봅니다. 제가 공부한 흐름에 따라 정리해놓은 부족한 글..

일반적으로 React에서는 부모 컴포넌트와 자식 컴포넌트가 상호작용할 수 있는 수단이 props 밖에 없습니다. 자식을 수정하려면 새로운 props 를 전달하여 자식을 다시 렌더링해야합니다. 하지만 React에서의 상태의 흐름에서 벗어나 직접적으로 자식 컴포넌트의 인스턴스 혹은 DOM 엘리먼트를 수정해야하는 경우도 있습니다. VanillaJS 일반적으로 JS에서 DOM Element를 수정해야하는 경우, 특정 DOM을 지정하기 위해 선택자를 사용합니다. 특정한 DOM요소에 style을 따로 적용하거나 속성 값을 바꾸는등 다양한 작업을 할 수 있습니다. /* 안녕하세요 */ // 예시 const myElement = document.querySelector('#my-id'); myElemen..

{list.map((item, index) => ())} map 함수를 사용하여 DOM Elements들을 만들 경우 key 값이 없으면 Each child in an array or iterator should have a unique "key" prop. 이라는 에러와 만나게 됩니다. {list.map((item, index) => ())} 따라서 우리는 종종 배열의 index 값을 사용하여 key 값을 넣어 에러를 피하곤 합니다. 하지만 이렇게 key 값으로 index 를 넣는 것은 React를 통해 완성된 페이지가 잘못된 데이터를 보여줄 수 있게하는 원인이 됩니다. 왜 index 에 key 값을 넣는 것이 비효율적인 동작을 야기하는지, 그리고 어떻게 해결할 수 있을지 알아봅시다. React 트리 ..

HTML 작업을 하다보면 태그에 margin: 0; padding: 0; 을 설정했음에도 불구하고 1 ~ 5px 의 공백이 생기는 것을 볼 수 있습니다. 우선 해결방법을 먼저 소개하고 왜 이러한 공백이 생기는지 이야기해보려 합니다. 해결방법 두 가지 해결방법이 있습니다. 저는 주로 블록 요소로 속성을 변경시키는 방법을 사용합니다. 블록 요소로 속성을 변경 간단하게 태그에 css 속성으로 display: block; 을 추가하여 해결합니다. img { display: block; } 혹은 태그에 style 속성을 사용하여 해결할 수도 있습니다. vertical-align vertical-align 의 기본 값은 baseline 인데 이 값을 top 혹은 bottom 으로 변경해줍니다. **** 발생 원인 ..

프로젝트의 규모가 커짐에 따라 관리가 어려워진 상태들이 생겨났고 이를 위해 상태 관리 라이브러리를 사용하고자 합니다. 하지만 다양한 라이브러리 중 어떠한 것을 사용해보는 것이 좋을지에 대한 의문이 생겼고 이러한 의문은 내가 "상태(Status)"가 무엇인지, "상태 관리"가 왜 필요한지에 대해 명확히 모르는 것에서 시작된다고 생각합니다. 따라서 상태와 상태 관리가 무엇인지, 그리고 이를 다루기 위한 Redux를 알아보려 합니다. 상태 관리란? 기존 웹페이지를 개발하는 것 뿐만아니라 이제 웹앱이라고 불리는 개발을 더 많이하게 되었습니다. 사용자들은 더 이상 페이지를 오고가는 UX를 원하지 않고 따라서 하나의 페이지를 띄워놓고 그 안에서 데이터를 주고 받으면서 화면을 실시간으로 변경하는 SPA가 웹 개발의 ..

Bundler 비교Webpack vs Rollup vs Parcel자바스크립트는 간단한 작업을 위해 만들어졌지만, 사용자에게 더 나은 경험을 위해 자바스크립트로 구현하는 기능이 많아졌습니다. 따라서 코드의 양이 늘어났고 복잡해졌습니다.따라서 HTML에서 태그를 통해 로드하는 것만으로 의존성이 있는 코드 사이에 순서를 보장하기 어려워졌고 따라서 CommonJS, ES6 Module과 같은 모듈화 개념들이 등장하였습니다.Bundler는 의존성이 있는 모듈 코드를 하나 혹은 여러개의 파일로 만들어주는 도구입니다. Chrome등 최신 브라우저에서는 ES6 Module을 지원하기도 하지만, 모듈화하여 작성한 코드를 브라우저에서 바로 실행할 수 없으므로 가공이 필요한데 번들러가 이 역할을 합니다.대표적인 번들러로 ..

📌 React Hooks React 16.8로 업데이트 되며 class를 작성하지 않고도 state 와 같은 React의 기능을 사용할 수 있게 되었습니다. import React, { useState } from 'react'; function Example() { // "count"라는 새로운 상태 값을 정의합니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } Hook의 특징 Hook의 특징은 다음과 같습니다. 선택적 사용: 기존의 코드를 다시 작성할 필요 없이 컴포넌트 안에서 Hook을 사용할 수 있습니다. Hook이 필요없는 경우에는 굳이 사용하실..

Webpack Core ConceptsWebpack 은 Modern JavaScript Application을위한 정적 모듈 번들러입니다 . Webpack은 애플리케이션에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성 하는 종속성 그래프 를 내부적으로 빌드합니다.Module과거의 독립적인 작업을 하던 Javascript 코드들과 다르게 Modern Javascript에서는 브라우저에서 실행되고 있는 완전한 애플리케이션을 실행할 수 있을 뿐아니라, Node.js와 같이 다른 컨텍스트에서 Javascript를 사용하기도 합니다. 따라서 Javascript 프로그램을 필요에 따라 가져올 수 있도록 별도의 모듈로 분할하고자하였고 Modular Programming 관점에서, 개발자들이 프로그램을 기능적으..

스크립트단에서 에러를 찾거나 해결할 수 있도록 현대 브라우저들에서는 개발자 도구를 지원합니다. 그 중 크롬 개발자 도구를 어떻게 사용할 수 있는지 간단히 알아보고자 합니다. 실행방법 개발자 도구를 실행하는 방법은 주로 두 가지가 있습니다. 단축키 크롬 개발자 도구를 실행하는 단축키는 다음과 같습니다. (오토핫키를 쓰면 더 쉽습...) F12 Ctrl + Shift + i 메뉴를 통한 접근 크롬창 우측 상단의 Chrome 맞춤설정 및 제어 버튼을 누릅니다. 도구 더보기 > 개발자 도구 를 클릭합니다. Elements 브라우저에 렌더링된 DOM과 CSS를 조작할 수 있습니다. 좌측의 DOM 노드영역에서 DOM을 추가하거나 제거할 수 있으며, 우측 Styles 영역에서 실시간으로 스타일(css)에 대한 편집이..

What is the difference between an element and a component in React?React에서 Element와 Component의 차이는 무엇입니까? 나의 답변Element는 React내에서 DOM node를 가리키는데 사용하곤 합니다.React내에서 Component는 function혹은 class이며, state를 가지고 있습니다. 추가학습ElementsElements는 React Application을 구성하는 블럭과 같습니다. Element는 immutable 하며, 우리가 화면에서 보게되는 것을 이야기합니다.Element는 바로 사용되지는 않으며, Component에서 리턴받아서 사용되곤 합니다.​xconst element = Hello, World!;Co..