hoon's bLog

3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 tip16. Set를 이용해 고윳값을 관리하라. 드디어 3장의 마지막 Set!! 를 정리하고 마무리하려고 한다. 앞에 tip15에서 언급했던 강아지에 대한 정보가 들어있는 필터링 조건을 보자. const dogs = [ { 이름 : '맥스', 크기: '소형견', 견종: '보스턴테리어', 색상: '검정색', }, { 이름 : '도니', 크기: '대형견', 견종: '래브라도레트리버', 색상: '검정색', }, { 이름 : '섀도', 크기: '중형견', 견종: '래브라도레트리버', 색상: '갈색', }, ] 사용자가 선택할 수 있는 조건을 알려면 선택할 수 있는 모든 값을 수집해야 한다. 색상 조건을 수집하기 위해 배열 메서드 map()을 활용해보자. fu..

Error 발생 경로 Error handling response: TypeError: Cannot read property 'always' of undefined at chrome-extension://cnfngpgfjllafbghaimjcmailafcdhod/releaseDrag.js:90:49 평소에 잘 보이지 않던 에러가 느닷없이 발생?!!? 뭐지 싶었는데 에러를 자세히 들여다보니 "chrome-extension" 발견!!!!!!!!! 매우 높은 확률로 Chrome 확장 프로그램 관련 에러이다!!!! 해결 끝에 보니 "releaseDrag.js"?!?!!?? 종종 복붙이 되지 않을 때 사용하는 Drag-Free 확장 프로그램 때문이었던 것!!! Drag-Free 때문에 발생되는 오류로 Drag-Fr..

Error 발생 경로 에러는 다음과 같다. react 프로젝트 실행을 위해, yarn start 커맨드를 입력 시 발생했다. 잘되던 게 갑자기 왜 안되지?! 하고 구글링을 해보니 yarn이나 npm이 설치되지 않았을 때 나타나는 오류라고 한다. 해결 yarn이 설치 되지 않은 분은 $ yarn install npm이 설치되지 않은 분은 $ npm install 커맨드를 입력한 후, 다시 yarn start를 실행하면 정상적으로 실행되는 것을 볼 수 있다. 결론 초반에 리액트 프로젝트를 처음 했을 때, 기쁜 마음으로 만들었다가, 부푼 마음으로 yarn start를 실행 했을때, 누구나 한 번쯤 거쳐가는 에러라고 생각이 든다. 이렇게 또 새로운 오류를 발견한 내 손가락이 자랑스럽다!ㅎㅎㅎㅎ....ㅠㅠ 언제나..

3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 tip14. 맵과 펼침 연산자로 키-값 데이터를 순회하라 객체는 순회하기가 번거롭다. 그나마 for ...in문을 사용할 수 있지만 키 외에는 접근할 수 없다. const filters = { color: 'black', breed: 'Retriever' }; function getAppliedFilters(filters) { const keys = Object.keys(filters); const applied = []; for (const key of keys) { applied.push(`${key}:${filters[key]}`); } return `선택한 조건은 ${applied.join(',')} 입니다.`; } Object.keys()로 ..

3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 tip10. 객체를 이용해 정적인 키-값을 탐색해라 원칙적으로 객체는 변화가 없고 구조화된 키-값 데이터를 다루는 경우에 유용하다. "."을 통해 직접 참조하거나 배열처럼 접근이 가능하다. 이처럼 객체는 단순하여 정적인 정보를 다룰 때 훌륭하다. 하지만 계속해서 갱신, 반복, 대체, 정렬해야 하는 정보에는 그닥 비추!.. 단, 기존의 객체를 조작하는 것이 아니라 각각의 함수에서 새로운 객체를 생성하면 조작없이 사용 가능하다. const colors = { red: '#d10202', green: '#19d836', blue: '#0e33d8' } 위와 같이, 데이터가 변경될 가능성이 없는 색상 컬렉션을 공유하는 경우에는 객체를 선택하는 것이 좋다. 중..

Error 발생 경로 에러는 다음과 같다. 현재 상황은 SQL tool Dbeaver에서 "tb_external_server" 테이블을 삭제하려던 도중, sequence인 seq_tb_external_server_pk가 테이블에 종속되어 있으므로 삭제할 수 없다는 에러가 발생한 상황이다. 쉽게 말해, 테이블에 종속된 sequence를 삭제 하기 위해서는 CASCADE 구문을 이용해야 한다는 것!! 해결 DROP TABLE 테이블명 IF EXISTS 시퀀스명 CASCADE; 결론 테이블을 생성/삭제를 하다보면 이렇게 종속되어 있는 sequence 같은 값들을 놓칠 때가 있다. 또한, 테이블을 먼저 삭제하고 sequence만 남아 있는 경우, 나중에 같은 이름으로 생성하지 못하는 경우도 발생한다. 때문에 꼭..

2장 배열로 데이터 컬렉션을 관리하라 tip7. 펼침(Spread) 연산자로 배열을 본떠라 책에서는 펼침 연산자라고 지칭하지만 스프레드 연산자로 정리하겠다.(너무 번역투....) 스프레드 연산자는 마침표 세 개...로 표시하며 자바스크립트에서 아주 중요한 연산자이다. 배열뿐만 아니라 Map Collection이나 Generator를 이용하는 데이터 구조 등에서도 사용할 수 있다. 또한 스프레드 연산자는 단독으로 사용할 수 없고 어떤 곳 안에 정보를 펼쳐 넣어야 한다. 반복문이 늘어날수록 코드는 복잡해지기 때문에 스프레드 연산자를 잘 활용하는 것이 중요하다. 또한 원본 데이터에 영향을 주지 않고 새로운 데이터를 생성할 수 있어 데이터 불변성 유지에 좋다. function selectBook(title, a..

2장 배열로 데이터 컬렉션을 관리하라 tip5. 배열로 유연한 컬렉션을 생성하라 이전 자바스크립트에서는 데이터 컬렉션을 다루는 구조로 배열과 객체 만 있었으나, 모던 자바스크립트에 Map, Set, WeakMap, WeakSet, 객체, 배열 을 사용할 수 있다. 컬렉션을 선택할 때는 정보로 어떤 작업을 할지 먼저 생각 해야한다. 이터러블(iterable)이란 컬렉션의 현재 위치를 알고 있는 상태에서 컬렉션의 항목을 한 번에 하나씩 처리하는 방법을 의미한다. 배열은 이터러블(iterable)이 내장되어 있어 다양한 메소드를 활용할 수 있다. 문자열처럼 자체적으로 이터러블이 존재하거나 이터러블로 변환할 수 있는 데이터 형식이면 배열에 사용하는 모든 작업을 동일하게 실행할 수 있다. 아래 코드는 team 배..