개발 일지

원본 배열을 변경하지 않고 참조만 하는 메서드 join() slice() concat() toString() 원본 배열을 변경하지 않고 반복적으로 참조만 하는 메서드 forEach() map() filter() every() some() reduce() reduceRight() entries() keys() values() 원본 배열을 변경하는 메서드 push() pop() shift() unshilft() fill() reverse() sort() splice() [참고] forEach와 map의 차이 - Array.prototype.forEach() 배열의 모든 요소가 한 번씩 순회하면서 제공된 함수를 한 번 실행한다. 각 배열의 요소에 특정한 작업을 수행할 때 사용된다. map과의 차이점은 배열을 ..

1. 필요성 위의 로딩 이미지를 아마 한 번쯤은 모두가 접해 보았을 것이다. 페이지가 로딩되면서 UI가 렌더링이 되기 전에 위와 같은 이미지들을 노출시켜서 사용자가 기다릴 수 있도록 유도하는 것이다. 그러나 사용자 입장에서 이러한 화면을 보는 것이 그렇게 유쾌하지는 않다. 웹은 그 기능이 다양해짐에 따라 정적인 요소(html, css, javascript) 뿐만 아니라 동적인 요소(데이터베이스 연동, API 통신 등) 들을 다루게 되면서 복잡도가 증가하고, 거대해졌다. 무거워진 웹은 사용자에게 보여지기까지 수초가 걸리게 한다. 이러한 로딩 시간의 길어짐은 사용자의 경험(UX)에 직접적인 영향을 미친다. 지연속도가 늘어날수록 이탈률은 증가하며 구매 전환율은 급감한다. 우리의 사용자는 기다려주지 않는다. 프..

일반적으로 React에서 ref는 HTML 엘리먼트를 할당하는데 사용된다. DOM에 직접 접근하기 위해 ref를 사용하기도 한다. (Javascript에서 고유 id 부여하는 것처럼) 그런데, 함수형 컴포넌트에서 타입스크립트 사용시 무심코 useRef 훅을 사용하게 되면 typeError를 만나게 된다. 가장 좋은 방법은 ref를 null로 초기화하는 것이다. 또한 유형 인수를 사용하여 ref 속성으로 사용되는 요소에 대해 각각 HTMLInputElement 유형으로 ref를 캐스팅해야 합니다. import * as React from 'react'; const App = () => { const ref = React.useRef(null); React.useEffect(() => { if (ref.cu..

https://rachelslab.tistory.com/83 17장. 냄새와 휴리스틱 (1) # 휴리스틱(heuristics) 사전적 의미 : "경험적인, 스스로 발견하게 하는" 복잡한 문제는 복잡하게 생각하지말고, 단순하게 생각하는 것부터 시작하자. Bottom-Up 방식처럼 단순한 논리적 사고과정을 rachelslab.tistory.com 26. 정확하라 코드에서 무언가를 결정할 때는 항상 "확신"이 있어야한다. 이번에 한 번 성공했다고, 이제 됐어! 라고 생각하는 것은 금지해야할 행동이다 ❌ (매일 이런 충동을 느낀다...) 결정을 내리는 타당한 근거아 있어야 하며, 예외 처리를 할 방안도 가지고 있어야 한다. 코드에서의 모호함 또는 부정확함은 언제나 제거 대상이라는 사실을 명심하자 28. 조건을 ..

# 휴리스틱(heuristics) 사전적 의미 : "경험적인, 스스로 발견하게 하는" 복잡한 문제는 복잡하게 생각하지말고, 단순하게 생각하는 것부터 시작하자. Bottom-Up 방식처럼 단순한 논리적 사고과정을 거쳐서 의사결정을 하고, 경험치를 바탕으로 이를 점차 빌드업 시키는 방법이다. "제한된 합리성’이란 다양한 의사결정 상황에서 인간의 인지적인 한계로 인해 발생하는 의사결정 문제를 인지적 한계 안에서 다룰 수 있는 범위로 축소시키고, 간단해진 과업의 수행에 한해 규범적 규칙을 이용한다는 것을 의미한다." - 위키백과 - 본문에서 강조하고자 했던 내용들을 총정리하는 목적으로 작성해보고자 한다. ## 주석(Comment) 1. 부적절한정보 주석의 역할은 코드와 설계에 있어 기술적인 설명을 부연하는 수단..

[오류화면] 1. .zshrc 로 이동 vim .zshrc 2. 아래 명령어 입력 후 저장 export LC_ALL=ko_KR.UTF-8 3. "locale" 명령어를 입력하여 아래와 같이 잘 추가되었는지 확인한다. LANG="" LC_COLLATE="ko_KR.UTF-8" LC_CTYPE="ko_KR.UTF-8" LC_MESSAGES="ko_KR.UTF-8" LC_MONETARY="ko_KR.UTF-8" LC_NUMERIC="ko_KR.UTF-8" LC_TIME="ko_KR.UTF-8" LC_ALL="ko_KR.UTF-8" 이후 git log 입력 시 정상 노출됨

점진적인 개선(Progressive Improvement) 출발은 나쁘지 않았다. 그러나 소스가 방대해지면서, 확장성이 부족했던 모듈을 어떻게 개선해 나갈지에 대해 정리해보자. 처음에 코드를 작성할 때는 나름의 함수 그리고 변수명을 고려하여, 작성을 한다. 그러나 완성된 코드를 보면, 지저분하기 짝이 없었던 경험을 누구나 다 해봤으리라 짐작한다. # 프로그래밍은 과학보다는 “공예”에 가깝다. 처음 부터 완벽한 작품을 만들기란 어려운 것이다. 거듭한 리팩토링 끝에 그나마 깨끗한 코드를 만들 수 있다. 우선 수정 작업에 들어가기 전, 1차 초안을 보며 자신을 되돌아본다. 내가 대충 짜서 방치해둔 코드를 다른 사람이 보게 되면 어떨지 항상 생각하면서 작성하는 습관을 들이자 # 점진적으로 개선하다 개선 이라는 ..

동시성(Concurrency) 콜백지옥은 프론트엔드 개발자라면, 한 번쯤은 겪어봤을 것이다. 중첩의 중첩의 중첩을 만들어내는 콜백은 최대한 지양해야 한다. 콜백이 대체 무엇이길래? 다른 함수의 인자(argument)로 넘겨주는 함수이다. 함수와 함수를 연결해준다고 생각하면 이해하기 쉽다. [동기 vs 비동기] 자바스크립트는 단일(single) 스레드 프로그래밍 언어이다. 동기 = 싱글 스레드 = 순차적 실행 모두 동일한 의미이다. 싱글 스레드는 하나의 코드가 실행되어 끝난 시점에 다음 코드 시작 지점이 연결된 형태이다. 단일 스레드는 선행 작업이 완료될 때까지, 다른 일을 수행하지 못하고 기다린다. -> 블로킹 발생 (콜 스택 멈춤 상태) 한 번에 하나의 콜 스택을 가진다. // 동기적으로 3초 마다 배..

켄트 백이 제시한 4가지 규칙을 모두 시행하면 소프트웨어 설계 품질이 높아진다. (중요도 순) 1. 모든 테스트를 실행한다. 2. 중복을 없앤다. 3. 프로그래머의 의도를 표현한다. 4. 클래스와 메서드 수를 최소로 줄인다. 단계1. 모든 테스트를 실행하라 설계는 의도한 대로 돌아가는 시스템을 내놓아야 한다. 모든 테스트 케이스를 항상 통과하는 시스템을 '테스트가 가능한 시스템'이라고 부른다. 테스트 케이스를 만들고 반복해서 돌리면 저절로 낮은 결합도, 높은 응집력을 추구하는 객체 지향 방법론을 자기도 모르게 실천하고 있게 될 것이다. 단계2. 리팩토링 새롭게 추가하는 코드를 깔끔하게 정리 후, 테스트 케이스를 돌려본다. 테스트 케이스만 있다면, 우리는 결함도를 걱정하지 않아도 된다. 단계3. 중복 없애..

실제 코드를 치기 전부터 테스트 코드를 치라구? 대체 왜? Why 우리는 왜 테스트 코드를 작성해야 할까? 근본적인 이유에 대해 생각해 볼 필요가 있을 것이다. 그 이유는 '검증이 된 코드인가?'에 대한 명확한 답을 제시할 수 있기 때문이다. 테스트 코드가 없으면, 우리는 이 코드가 제대로 돌아가는 지 검증할 수 있는 방법이 없다. 시스템의 주요한 부분을 수정했을 때, 이 수정한 부분이 다른 소스에 영향이 있는지 없는지를 판단할 기준이 없는 것이다. 이는 결함률을 높이는 원인이 된다. 그래서 테스트 주도 개발(TDD) 개념이 오늘날 성립된 것이다. (많은 선배들의 경험 끝에...) TDD란 : Test Driven Development(테스트 주도 개발)의 약자로, 매우 짧은 개발 사이클을 반복하는 소프..