COCO World

🍓 Stack(스택)과 Queue(큐) : Stack과 Queue는 자료구조로서 사용되는 개념입니다. Stack이란? LIFO(Last In First Out)정책을 사용하는 자료구조로서 데이터를 차곡차곡 쌓아 올린 형태입니다. 가장 마지막에 삽인된 자료가 가장 먼저 삭제되는 구조를 가지고 있습니다. 데이터를 삽입할때의 연산을 push, 데이터를 뺄 때의 연산을 pop 이라 일컫습니다. 후입 선출의 구조라고도 말합니다. 스택의 삽입,삭제 시간 복잡도는 O(1)입니다. 장점으로는 top을 통해 접근하기 때문에 데이터 접근, 삽입, 삭제가 빠릅니다. 단점으로는 top 이외의 위치의 데이터에 접근하기 위해서는 그 중간의 데이터들을 거쳐가야 합니다. Stack의 사용 사례 웹 브라우저 방문기록 (뒤로가기) 실..

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

🍋 React-Query : React 어플리케이션에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 작업을 도와주는 라이브러리이다. 🌱 Redux, Mobx와의 차이점 react-query는 서버상태를 다루는 라이브러리, redux와 mobx는 클라이언트 상태를 다루는 라이브러리이다. 🌱 fetch와 axios와의 차이점 fetch와 axios는 실제 API 요청을 수행하여 직접 리소스를 불러오는 역할의 라이브러리이고, react-query는 API를 통해 불러온 서버의 상태를 내부적으로 캐싱 및 동기화하는 등 잘 활용할 수 있게 도와주는 라이브러리이다. 🍋 React-Query의 장점 별도의 설정 없이 즉시 사용이 가능하다 캐싱을 효율적으로 관리해준다 같은 데이터에 대한 여러번 ..

1. 사건 해결장면 2. 코드 현황 state들 // 유저리스트 데이터 state const [userList, setUserList] = useState([] as any); // 검색 조건 state const [searchTerm, setSearchTerm] = useState(''); const [filterList, setFilterList] = useState([] as any); 체크 박스 관련 변수들 // 개별 항목을 체크했을 때의 state const [isCheckingBox, setIsCheckingBox] = useState(false); // 체크항목 저장하는 변수 state const [checkedArr, setCheckedArr] = useState([]); // 개별 체크표..

에러 발생 리액트 실행 중 'Cannot read properties of undefined (reading 'cancelToken')' 에러가 발생했다. 원인은 axios의 interceptor를 사용하는 와중에 깜빡하고 return을 넣어주지 않았기 때문이다. instance.interceptors.request.use( function(config) { console.log(config) const token = getCookie('userCookie') if ( token ) { config.headers.authorization = token } } ) 해결 방안 return 값을 넣어주자. instance.interceptors.request.use( function(config) { cons..

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

1. Redux 의 흐름 구조 [1] 상태가 변경되어야 하는 이벤트가 발생하면 변경될 상태에 대한 정보가 담긴 Action 객체 생성 [2] 만든 Action 객체는 Dispatch 함수의 인자로 담겨져 전달됨 [3] Dispatch함수를 통해 담겨져 온 Action 객체는 Reducer 함수로 전달해줌 [4] Reducer 함수는 Action 객체의 데이터값을 확인하고, 그 값을 가공하여 전역 상태 저장소인 Store의 상태를 변경 [6] Store에서 변경된 상태값은 React의 리렌더링을 통해 컴포넌트에서 보여줌 2. 리액트 개발 시, 렌더링 최적화 방법에 이용할 수 있는 다음 세 가지의 특징과 차별점 React.memo [1] React.memo 특징 : React는 먼저 컴포넌트를 렌더링 한 뒤..