❓ [에러 내용] Failed to parse source map from '/Users/hyeong-il/Desktop/seb44_pre_006/node_modules/@toast-ui/editor/dist/purify.js.map' file: Error: ENOENT: no such file or directory, open '/Users/hyeong-il/Desktop/seb44_pre_006/node_modules/@toast-ui/editor/dist/purify.js.map' 실행에는 문제가 없지만 이와 같은 에러가 떠서 마음이 불편하다. 🔑 [에러 해결] "scripts": { "start": "GENERATE_SOURCEMAP=false react-scripts start", } packa..
❗️ Styled-Components 설치 중 오류 발생 ❗️ 오류 상황 styled-components 설치 npm install styled-components styled-components 를 설치하기 위해 공식 문서에 나온 위와 같은 명령어를 입력했는데 다음과 같은 오류가 발생했다. npm err! cannot read properties of null (reading 'edgesout') 오류 원인 latest version of styled-components is v6 but there is some issue while doing npm i styled-components styled-components version6 이후로 다음 명령어시 문제가 발생 오류 해결 //Use V5, npm..
React Hook은 렌더링 최적화를 위한 Hook도 존재하며 그 역할을 하는 Hook이 바로 useCallback과 useMemo이다. useCallback Hook에 대하여 알아보고, useMemo 와 useCallback의 차이에 대하여 작성해보았다. useCallback 이란? useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook이다. useCallback은 함수의 재사용을 위해 사용하는 Hook이다. useCallback만 사용해서는 useMemo에 비해 괄목할 만한 최적화를 느낄 수는 없다. 왜냐하면 useCallback은 함수를 호출을 하지 않는 Hook이 아니라, 그저 메모리 어딘가에 함수를 꺼내서 호출하는 Hook이기 때문이다. 따라서 단순히 컴포넌트 ..
컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있다. 하지만 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다. React Hook은 함수 컴포넌트가 상태를 조작하고 및 최적화 기능을 사용할 수 있게끔 하는 메서드이며 그 중 렌더링 최적하를 위한 Hook이 존재하는데, useCallback과 useMemo가 바로 그 역할을 하는 Hook이다. useMemo란? useMemo은 특정 값(value)을 재사용하고자 할 때 사용하는 Hook이다. useMemo를 호출하여 이전에 구축된 렌더링과 새로이 구축되는 렌더링을 비교해 value 값이 동일할 경우에는 이전 렌더링의 value 값을 그대로 재활용할 수 있게 된다. 이는 메모이제이션(Memoiz..
Diffing Algorithm React 의 Render 함수는 jsx 문법에 맞는 React Element 를 반환합니다. 이때 상태가 변하거나 프로퍼티가 변해서 DOM을 업데이트해야 하는 경우에 변경된 부분만 감지해서 바뀐 부분만 업데이트 하는 방식을 취하게 되는데, 이 변경된 부분을 감지하는 방법을 Diffing Algorithm 이라고 합니다. 여기서 "비교"란 Virtual DOM 끼리의 비교를 의미하며, React는 이전상태와의 비교를 위해 항상 이전 상태의 Virtual DOM의 사본을 유지한다. React 가 DOM 트리를 탐색하는 방법 React는 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때, 트리의 레벨 순서대로 순회하는 방식으로 탐색한다. 즉 같은 레벨(위..
Virtual DOM 이란? Virtual Dom은 Real DOM 의 가벼운 사본과 같다. JavaScript 객체로 이루어진 가상의 DOM 트리를 사용하여 실제 DOM 조작을 최소화하고 성능을 최적하는 기술 Real DOM DOM 은 Document Object Model의 약자로, 문서 객체 모델을 의미한다. DOM 은 브라우저가 HTML 문서를 조작할 수 있도록 트리 구조화한 객체 모델이다. DOM 의 조작 속도가 느려지는 이유? DOM 은 계층적 형태의 트리 구조로 구성되어 있다. 자료구조 중에서도 특히 트리는 "데이터 저장"의 의미보다는 "저장된 데이터를 더 효과적으로 탐색" 하기 위해 사용되므로, 빠른 자료 탐색 성능이 장점인 자료구조라고 볼 수 있다. 트리 구조로 된 DOM은 JavaScr..
리액트에서 컴포넌트는 하나의 기능 단위로 구분된 코드 모음, 즉 데이터 + 화면이 같이 존재한다 . 따라서 컴포넌트 내부 조직은 데이터가 변경되면 화면이 바뀌는, 데이터 중심으로 동작한다. 컴포넌트에서 외부로부터 받아오는 데이터는 props, 컴포넌트 안에서 바뀌는 데이터는 state로 구분할 수 있다. props란? 더보기 prpos란 컴포넌트의 프로퍼티(properties)를 의미한다. 자바스크립트에서 함수를 생각하면 이해를 하기 쉽다. 함수를 전달 인자와 함께 호출하면, 호출된 함수 내부에서 그 전달 인자를 매개변수로 받아와 접근할 수 있듯이, 상위 컴포넌트에서 호출된 하위 컴포넌트에 속성 값을 전달하면, 그 속성 값 props라는 객체를 하위 컴포넌트에서 접근 할 수 있다. 실제 함수를 호출할 때..
🧐 Redux 란 무엇인가? 자바스크립트에서 상태관리를 할 수 있는 라이브러리고, 변경되는 상태 데이터를 전역 저장소에 보관하여 관리함으로써 상태관리의 복잡성을 해소할 수 있는 도구이다. 특히 리액트 프로젝트에서 많이 사용되지만, 리액트와는 독립적인 라이브러리로 바닐라 자바스크립트에서도 사용할 수 있다. 리액트에서 컴포넌트 단위로 코드를 작성하고, 컴포넌트 안에서 상태가 존재한다면 여러 컴포넌트에서 해당 상태에 접근하기 위해 필연적으로 props drilling 이 일어날 수 밖에 없다. 이는 코드의 복잡성을 증가시키고 그렇기 때문에 유지보수가 어렵고 앱의 동작을 예측하기 힘들어진다. 리덕스에서는 상태와 컴포넌트 구조를 분리시킴으로써 상태가 업데이트되는 흠을 추적하기 쉽게하고, 결과적으로 컴포넌트를 구성..
SPA 란? 기존에는 웹페이지를 미리 준비해두었다가, 로딩할 때 새 페이지를 서버 측에서 전달받아와 렌더링을 했었는데 규모가 커지고 사용자와의 상호작용이 많아짐에 따라서 속도 저하의 문제가 발생했다. 이를 해결하기 위한 것이 SPA(Single-Page Application)이다. SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식으로 작동하는 웬애플리케이션이나 웹 사이트를 말합니다. 정리하면 필요한 데이터만 받아와서 부분을 업데이트 하는 방식으로 작동하는 웹 애플리케이션, 웹 사이트를 SPA라고 한다. SPA의 단점 첫 화면의 로딩 시간이 길다는 단점이 있다. 첫 화면 로딩 시 읽어..
JSX 란? JSX(Java Script XML)는 Javascript가 확장된 문법이다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환시켜줘야 한다. 왜 JSX를 써야할까? - 한 눈에 볼 수 있는 기능과 디자인 JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인 할 수 있다. React에서는 JSX를 이용해서 DOM 코드보다 명시적으로 코드를 작성 할 수 있다. JSX를 사용함으로써 코드를 이해하기 쉬워지며, Babel이 알아서 JSX 코드를 변환해 주니 가독성이 높고 작성하기 쉽다. 💡 JSX 규칙 1. 반드시 부모 요소 하나가 감싸는 형태여..
