머리가 나뻐서 삽질 SAP(Study And Programming)

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식 기본 구문 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 // Stage 4(finished) proposal ({a, b, ...rest} = {a: 10, b..

썸네일 프리뷰 jquery 코드를 가져왔는데 브라우저 오른쪽, 브라우저 하단에 잘리는 현상때문에 가져온 라이브러리의 이미지 처리 방식을 전부 수정하였다. 제이쿼리는 그냥 셀렉터 내용만 있으니 중요한게 아니라서 패스하고, 아래의 속성들로 구현할 수 있다. window.innerWidth, window.innerHeight nautralWidth nautalHeight 참고로 가로는 510px 로 고정이고, 세로 사이즈는 비례식을 적용하여 동적으로 적용해야 정확하게 높이까지 적용 될 것이다. HTML ... ... serpiko-imagepreview.js /** * serpiko 허정진 * * 2020.10.11 * */ (function($) { $.previewImage = function(option..

배열메서드 filter, indexOf 를 사용하여 조금더 발전적인 방법으로 비교하기 1. 메서드 준비 filter : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다. 주의할 점은 map() 과 같은 배열 메서드의 경우 내부 함수의 리턴값으로 '문자, 숫자, 배열' 등 다양한 타입이 가능하지만 filter는 오직 boolean 타입만 반환해야 한다는 점 입니다. indexOf : 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. 2. 몸풀기 중복되지 않는 값 가져오기: array1 배열에서 array2 배열을 비교했을 때 ..

엑셀 다중 시트 저장(내보내기) XML로 스타일을 컨트롤하여 직접 엑셀 내보내는 바닐라 스크립트를 찾았는데 몇가지 기능을 추가하였다 소소한 타입 기능 추가 1) attribute에 data-style이 Number 이면 1000 단위마다 콤마를 표기한다. '' 2) XML 의 ss:DafaultColumnWidth 로 열의 기본 너비를 적용했다(일일이 정하기 귀찮아서 그냥 100px로 넣었다..) '{rows}

두개의 JSON 값 비교 하기 : compare two JSON have the same properties 1. 값을 문자열로 바꾸어서 비교해보기 JSON.stringify() 로 값을 JSON 표기법의 문자열로 바꾸어서 비교. JSON.stringify() JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. developer.mozilla.org 값의 형태가 정해져 있고, 아래의 조건을 명확하게 벗어난 경우라면 제일 간단하게 사용해볼만 하다. 배열이 아닌 객체의 속성들은 어떤 특정한 순서에 따라 문자열화 될 것이라고 보장되지 않는다. 같은 객체의 문자열화에 있어서 속성의 순서에 의존하지 않는다. Boolean, Number, String 객체들은 문..

Microsoft Edge 크로미움으로 재탄생 2020년 1월 15일에 Edge가 크로미움 버전으로 릴리즈되었다. 크롬과 같이 개발자도구, 내부 앱 확장프로그램등 기능이 충실해졌고 무엇보다 세션이 다르므로 크롬과 동시에 켜서 테스트하기가 좋아졌다;;; 검색 공급자가 bing 으로 되어있는데 역시 불편.. 검색공급자를 바꾸기 전에 [ 더보기(...) > 도움말 및 피드백 > 정보 ] 에서 버전이 83.xxx 인지 확인하고 만약 버전이 다르면 인터페이스가 다를 수 있으므로 빠르게 다른 설정글을 검색해서 참조하기 바란다. 검색 공급자 변경하기 설정 개인 정보 및 서비스 마우스 스크롤 내려보면 "서비스" 항목 에서 "주소 표시줄" 선택 주소표시줄에서 검색 엔진에 Google(혹은 바꾸고 싶은 검색엔진)을 기본값..

Syntax 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. Internet Explorer 를 제외한 현재의 브라우저, 단말기에서 모두다 지원한다고 보면된다. 더보기 백틱(` `) Grave accent 로 사용하고, ${expression} 으로 표현식을 사용한다. 아래와 같이 여기까지는 보편적인 사용의 예이다. `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag `string text ${expression} string text` Expression interpolation 표현식 삽입법 템플릿 리터럴안에 간단한 수식을 표현하려면 아래와 같다. var a = 5;..

실무에서 작업 중, 반복된 패턴을 순회하며 [ 기존값에 현재값을 적재(acuumlator)] 하는 상황에서 reduce함수가 생각나서 사용해보았다. reduce reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 리듀서 함수는 네 개의 인자를 가집니다. 누산기accumulator (acc) 현재 값 (cur) 현재 인덱스 (idx) 원본 배열 (src) 리듀서 함수의 반환 값은 누산기(어큐멀레이터)에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다. 객체를 합칠때는 ... 연산자를 이용해서 합칠수도 있지만 아래와 같이 FIXED_DATA라는 상수의 값(혹은 옵션)이 연속해서 추가되는 상황이라면 함수로 빼..

VSCode 마켓플레이스에서 ESLint와 Prettier 를 설치하고, npm에서 ESLint 설치한다. .prettierrc와 .jsconfig.json 작성(import할때 경로를 자동으로 추천해준다 ) 하고 ESLint-plugin-react-hook (hooks사용시 ESLint로 규칙을 도와줌) 을 설치할 것이다 마지막으로 .eslintrc.json 에서 Prettier 설정과, hook 설정을 적용할 것이다 # VSCode 마켓플레이스에서 Prettier - Code formatter ( 제작자 Esben Petersen ) 설치 수동사용법 : F1 > format 입력 엔터 자동사용법 : 파일 > 기본 설정 > 설정 > format on save 검색 >파일 저장할때마다 코드 자동 저장됨 ..

이전에도 좋은 내용을 많이 올리고 있었지만, Kent C. Dodds가 전업 교육자 선언을 한 이후 더 좋은 리액트 기본에 대한 글이 많이 올라오고 있다. 특히 Hook에 관해서. 이번에 When to useMemo and useCallback이라는 글을 올려 주었는데, 나도 실무에서 Hook을 점진적으로 적용하면서 두 훅을 쓸 때 공식 문서를 좀 보고 가볍게 원리를 파악해놓고 쭉 쓰고 있었다. 그래서 심층적인 이해를 한 상태로 ‘어느 타이밍에 사용하는 것이 옳은가?’ 라는 생각을 깊게 해 보지 않았다. 따라서 글을 읽고 요약을 하면서 어느 타이밍에 useMemo, useCallback 을 사용하고, 궁극적으로 이 글이 짚고자 하는 핵심에 대해 복습하고자 한다. 그냥 번역문이 아니라 본문을 읽으면서 요약..