1. 복잡한 코드를 이해하는 것이 왜 어려울까? 결론 적으로 작업 기억 공간이 부족하기 때문이다. 작업 기억 공간과 STM차이 STM의 역할이 정보를 기억하는 것인 반면, 작업 기억 공간의 역할은 정보를 처리하는 것이다. 이 책에서는 ‘작업 기억 공간’이라는 용어를 ‘문제에 적용된 STM’의 의미로 사용된다. STM과 같이 작업 기억 공간도 한 번에 2개에서 6개까지만 기억할 수 있다. 작업 기억 공간의 맥락에서 이 용량을 인지 부하라고 부르며, 너무 많은 요소가 있어 청크로 나뉘지 않는 문제를 풀려고 할 때 작업 기억 공간은 과부하(overload) 상태가 된다. 프로그래밍 관련한 인지 부하의 종류 💡 내재적 부하: 문제 자체가 얼마나 복잡한지 외재적 부하: 외부적 요인에 의해 문제에 추가된 것 본유적..
많은 개발자들이 프로그래밍 문법을 모르더라도 인터넷에 검색하면 되기 때문에 문법에 대한 지식이 중요한 것은 아니라고 생각한다. 하지만 개념, 자료구조, 문법을 더 많이 알수록 두뇌는 더 많은 코드를 쉽게 분리하고 기억하고 처리할 수 있다. 또한 검색 후 작업 중인 코드로 다시 돌아올 때 업무를 회복하는데 드는 에너지가 생각보다 크므로 효율적이지 않다 1. 문법을 기억하기 위한 팁 플래시카드 사용해 문법 배우기 새로운 언어나 프레임워크 혹은 라이브러리를 배울 때 사용하면 좋다. 검색한 단어와 개념을 플래시카드에 적으면 좋다. 정기적으로 꾸준히 반복해서 연습하기 무작정 검색하기 이전에 능동적이고 의도적으로 기억하려고 시도하기 관련된 개념을 생각하면서 정교화하기 2. 기억을 잃어버리는 이유와 더 오랫동안 기억..
해당 글은 2021년 3월 13일에 작성된 글입니다 차트라이브러리 선택 종목 데이터를 매핑하기 위해 React 차트 라이브러리 탐색했습니다. 많은 라이브러리가 존재한다는 것을 알게 되었지만 어떤 것이 현 프로젝트에 맞는 것인지 판단하기 어려워 알맞은 차트 라이브러리가 무엇인지 조사하고 정리했습니다. 필요한 차트 유형 라이브러리 심사 조건 참고하기 쉬운 공식 문서 인기(github star, npm weekly Downloads) 다양한 차트 타입 의존성 여부(의존성이 작은 것을 선호) 필요한 차트 유형을 쉽게 만들 수 있는지 테스트 방식 현 프로젝트 개발에 사용 중인 주식 종목 데이터(stockHistories)를 불러와 lines, candles, box 차트를 구현해봅니다. 차트 라이브러리 react..
이 글은 2021년 5월 1일에 작성되었습니다. 최근 Canvas에 관심이 생겨 뭐라도 따라 해 봐야겠다는 생각을 했습니다. 그러던 중 캔버스의 좋은 예제를 찾게 되었고 해당코드를 react로 변경해 보면서 캔버스의 전체적인 틀을 이해해 보는 시간을 갖게 되었습니다. 코드를 공개해 준 김병찬 님께 감사의 인사를 드립니다. 공개된 코드를 기반으로 폭죽 배경을 Canvas로 그려봤습니다. 1. 선이미지와 텍스트 그리고 배경색은 Html과 CSS로 간단하게 만들고 해당 페이지의 canvas 태그를 쓰고 해당 캔버스를 useRef로 참조합니다. import React, { useEffect, useRef, useState } from "react"; import Firecracker from "../../com..
연구에 의하면 프로그래머의 시간 중 거의 60%를 코드를 ‘작성’하는 게 아니라 ‘이해’하는 데 사용한다고 한다. 따라서 정확도를 유지하면서 코드를 빨리 이해하도록 향상한다면 프로그래밍 기술이 크게 개선되는 셈이다 1. 코드를 신속하게 읽기 우리는 코드를 읽는 법보다 작성하는 법을 훨씬 더 많이 연습한다. 프로그래밍을 처음 배울 때부터 문제를 어떻게 풀고 그것을 코드로 어떻게 구현하는지를 집중적으로 훈련하지만 코드를 읽는 연습은 전무할 것이다. 코드를 신속하게 읽으면 좋은 점 코드를 다시 찾아보는 횟수를 줄일 수 있다 코드를 찾는 데 허비할 시간에 버그를 고치거나 새로운 기능을 추가할 수 있다. 두뇌에서 무슨 일이 일어나는가? /* 삽입 정렬을 구현한 자바 프로그램 */ public class Inser..
1. 코드가 초래하는 세 가지 종류의 혼란개발을 하다 보면 늘 혼란을 겪는다. 이 혼란은 세 가지의 서로 다른 방식으로 발생하고 각각은 LTM(Long-term memory), STM(Short-term memory), 작업 기억 공간(working memory)과 각각 연관되어 있다.해당 항목에 대한 지식이 없기 때문에 발생하는 혼란언어, 알고리즘 또는 업무 영역에 대한 지식이 없어서 발생한다.정보가 부족해서 발생하는 혼란코드를 이해하기 위해 필요한 정보를 충분히 가지고 있지 않을 때 발생한다.처리능력이 부족해서 발생하는 혼란코드가 연산 과정이 많거나 복잡스러운 경우 발생한다.2. 코딩에 영향을 주는 인지과정LTM과 프로그래밍지식이 없다는 것은 두뇌의 장기 기억 공간에 해당 내용이 없다는 것이다.LTM..
이글은 2021년 5월 6일에 작성된 오래된 글이며 그때 당시 저의 부족한 지식으로 작성된 글입니다. Apollo를 쓰면 복잡한 Redux처럼 상태관리 라이브러리가 필요없다! 라는 글들을 많이 봤을 것입니다. 저 또한 Apollo Client를 접하기 전까지는 전역 상태 관리를 위해 React에서는 Redux를 사용했고 Angular에서는 ngxs라는 상태 관리 라이브러리를 이용했습니다. 그런데 이런 상태 관리 라이브러리를 의존 한다는 거 자체가 코드가 복잡하고 양이 늘어나기 때문에 많은 개발자들이 상태 관리 관련 코드 리팩토링을 위해 많은 시간과 에너지를 쓰고있습니다. 특히 React + Redux사용시 action, reducer, type 코드들 때문에 머리가 어지러워지고 데이터 통신, 비동기 처리..
해당글은 2021년 7월 15일에 작성되었으며, 개인 프로젝트를 위한 React의 전반적인 구조에 대한 글입니다. 이거처럼 하지 마세요! 리액트 아키텍처를 생각해보면 폴더구조, API 통신, 페이지 라우터, redux와 redux 미들웨어등을 어떻게 해야될지 고민하게 됩니다. 이번 글은 프로젝트 폴더 구조를 중점으로 3개의 섹션을 나누어 조사한것을 공유 합니다. Section-1 프로젝트 환경 설정 다음 표는 제가 React를 개발하면서 이용한 개발 툴입니다. 개발툴 선택은 개인의 취향에 맞게 사용하면 되지만 React에서도 권장하는 사항이므로 추천합니다. Section-2 프로젝트 구조 /src/assets 정적 데이터 관리 폴더 /src/components 공용 또는 전체적으로 사용되는 컴포넌트는 이..
