COCO World

의외로 자주 사용되는 스킬이라 이번에 두번째 만들게 되면서 포스팅하게 되었다. 여러가지 배열값들을 나열하여 일치된 classname 중에서 특정 div값을 클릭하였을 때, 해당 요소만 CSS를 변경하여 사용자에게 보여주는데 이는 classname 동적으로 활용하는 방법이다. 보통 useState를 사용하여 값을 상태관리하겠지만 본 사용자는 리덕스를 사용하고 있어 slice를 통해 상태관리하였다. 따라서, Redux와 useState 두 가지 사용방법을 적용해보겠다. 1. Redux Toolkit의 Slice를 사용해 적용하기 메인 컴포넌트의 HTML {storeObj.state.employeeList?.map((item, idx) => ( storeObj.callbacks.selecteNameState(..

trim() 자체적으로 양 옆 공백을 제거해주는 메서드 replace() 정규식을 이용하여 양 옆 공백을 제거해주는 메서드로 좀 더 커스터마이징으로 활용 가능 1. trim() let str = ' 반가워요! '; let trimValue = str.trim(); console.log(trimValue); // 출력 '반가워요!' 2. replace() let str = ' 반가워요! '; let trimValue = str.replace(/^\s+|\s+$/gm, ''); console.log(trimValue); // 출력 '반가워요!' 2-1. replace의 모든 공백 제거 let str = ' 반 가 워 요 ! '; let trimValue = str.replace(/ /gi, ''); cons..

코드 구조 const Page = () => { const onChanged = useCallback((e) => { e.target.value = e.target.value.trim() const value = e.target.value; onChange(e); },[onChange]); return ( ) } onChange의 역할 : 입력 상태가 실시간으로 업데이트되어 최신 상태를 유지하며, 사용자에게 실시간 피드백을 제공 단점: 상태 업데이트가 발생할 때마다 컴포넌트가 재렌더링되어 성능에 영향을 줄 수 있다. 따라서, onChange 메서드 값의 변경이 있을 때에만 onChanged의 함수가 실행될 수 있도록 useCallback을 통해 onChange를 의존성 배열에 넣어두었고, input의 입..

🌱 리액트에서의 State(상태) 의미 State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위하여 사용한다 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다 State 값이 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링 한다 State는 컴포넌트에 대한 데이터 또는 정보를 포함하는데 쓰이는 리액트 내장 객체이다. 컴포넌트 상태는 시간이 지남에 따라 변경될 수 있는데 변경될 때마다 컴포넌트는 다시 렌더링해야 사용자에게 변경된 상태값을 보여줄 수 있다. State 변경은 사용자 작업 또는 시스템 생성 이벤트에 대한 응답으로 발생할 수 있으며 이 변경은 컴포넌트의 동작, 렌더링 방법을 결정한다. 3가지의..

개요 React 라이브러리로 개발된 애플리케이션을 웹페이지에서 처음 로드할때 index.js와 index.html로 인하여 처음 실행된다. 어떻게 진행되는지 간단히 알아보자. src폴더의 index.js 다른 곳에서는 보이지 않지만 웹 페이지가 로드되면 제일 처음 실행되는 파일이다. 작성된 코드가 그대로 실행되는 것이 아니라 코드의 변형된 버전이 실행된다. 프로젝트 설정에서는 스크립트를 통해 코드를 변형 및 최적화하는데 그 작업이 실행되고 있는 것이다. 프로젝트 설정이란? 더보기 예를 들어, import './index.css'; 라는 선언으로 CSS파일을 가져오는 명령어를 실행하였지만 일반적인 자바스크립트 파일에서는 적용되지 않는 명령어임에도 실행되게 해주는 프로젝트 설정이다. 역할 react-dom으..

🌏 알고리즘의 성능 분석 시간복잡도와 공간복잡도는 알고리즘 성능 평가를 위한 척도로 사용되고 있습니다. 시간 복잡도 : 특정한 크기의 입력에 대하여 알고리즘의 수행 시간 분석 공간 복잡도 : 특정한 크기의 입력에 대하여 알고리즘의 메모리 사용량 분석 그렇다면 알고리즘의 성능 분석은 왜 필요한가? 프로그램의 규모가 방대해질수록 처리해야하는 데이터의 양이 많아지고, 양이 많아질수록 알고리즘 간의 효율성을 따질 수 밖에 없다. 알고리즘의 수행능력에 따라 연산하는 컴퓨터 내의 메모리와 같은 자원을 효율적으로 사용할 수 있어야 한다. 🌏 시간 복잡도 시간 복잡도는 특정 알고리즘이 어떤 문제를 해결하는데 걸리는 시간을 의미합니다. 알고리즘의 절대적인 실행 시간을 나타내는 것이 아닌 알고리즘을 수행하는데 연산들이 몇..

ERROR 발생 필자는 리액트 실행 중 console.log에 아래와 같은 경고를 만났다. Invalid dom property `stroke-width`. did you mean `strokewidth` 해결방법 svg 파일을 가져올 때, ' stroke-width' 와 'fill-rule'로 가져와지는데 문법형식을 지키지 않아서 나는 오류이기 때문에 아래와 같이 고쳐줘야 한다. => 자바스크립트의 '카멜표기법'으로 바꿔줘야 한다.

위의 에러를 검색해보니 web-vitals 모듈이 설치되지 않아서 문제가 발생하였다. yarn create react-app으로 프로젝트를 항상 생성해왔는데 왜 이번에 위의 모듈만 설치가 되지 않아 문제가 되었는지는 모르겠다.. npm가 아닌 yarn을 사용하고 있어서 아래와 같은 명령어로 해결완료! yarn add -D web-vitals