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

FLUX pattern Flux 패턴 자바스크립트에서 데이터 레이어를 생성하기위한 아키텍쳐로 Flux라는 이름으로 패턴이 구현되었다. 프로그램의 데이터에 대한 명확하고 이해하기 쉬운 업데이트 경로를 만드는데 중점을 둔다. 개발과정에서는 변경사항을 추적하는 것이 간단하고, 버그를 찾고 수정하는것이 용이해진다. 개요 플럭스를 가장 잘 설명하기 위해 MVC와 같은 주요 클라이언트 측 아키텍처 중 하나와 비교해 보면 알 수 있는데, 클라이언트 측 MVC 애플리케이션에서 사용자의 상호 작용은 컨트롤러의 코드를 트리거한다. 컨트롤러는 모델의 메소드를 호출하여 하나 이상의 모델에 대한 변경 사항을 조정하는 역할을 한다. 이는 모델이 변경되면 하나 이상의 뷰에 통보하고 모델에서 새 데이터를 읽고 사용자가 새 데이터를 ..

css3 perspective responsive to mouse

await-to-js - npm (npmjs.com) 용도: Async await wrapper for easy error handling 설치) $ npm i await-to-js --save $ yarn add -D await-to-js TypeScript Usage) 공식 홈의 타입스크립트 예시가 적절치 않고 에러가 있어서 다음의 내용으로 작성해 보았다 import to from 'await-to-js'; interface ServerResponse { test: number; } export async function usage() { // const p = Promise.resolve({ test: 123 }); const [err, data] = await to( new Promise((res..

문자열로 받은 파라메터를 가지고 함수를 호출하는 경우 (아마) 가끔 쓸일이 있는 eval() 호출자와 동일한 권한으로 코드를 실행할 수 있기 때문에 위험하다. 예를들어 FileAPI를 사용하는 경우 엑세스하여 악의적인 작업을 수행할 수 있기 때문이다. eval과 new Function 모두 문자열을 js 코드로 분석한다는 공통점이 있지만 다음의 차이가 있다. eval 은 현재 실행 컨텍스트에서 구동되면 실행지점의 지역변수에 엑세스 할 수 있다. 그러나 Function은 지역변수에 엑세스 할수 없기 때문에 더 안전하다. RunCode.ts class RunCode{ public static exec(obj:any){ return Function(` "use strict"; return ( ${obj} ) ..

이번 실무 프로젝트에서 사용한 타입스크립트 설정파일이다. 컴파일러 옵션에 대한 정확한 작동 방식을 돕기 위해서 꼼꼼하게 설명해 놓았다. .tsconfig.json { "compilerOptions": { // js와 jsx 파일도 포함시키도록 한다. 점진적으로 바꿔나갈때 사용 "allowJs": true, // 모듈 타입.nodejs는 commonjs를 사용하므로 설정함 "module": "commonjs", // es6 모듈 사양에 따라 commonJS모듈을 가져올 수 있다. 기본 내보내기가 없는 모듈에서 대체 모듈 가져오기를 실행한다. import foo from 'foo' 와 import * as foo from 'foo' "esModuleInterop": true, // 사용할 es 버전 "tar..

단어강조 정해진 키워드가 입력되면 색상으로 강조 About 루니툰 정품 ♡ 꾸안꾸룩, 홈웨어룩으로 활용하기 좋은 맨투맨 반바지 트레이닝 세트를 소개할게요 :) 드롭된 숄더라인과 여유있게 넉넉한 가오리핏의 맨투맨과 전체 허리밴딩으로 바디에 편안하게 핏되는 밴딩 반바지가 세트로 구성된 트레이닝이에요. 러블리한 루니툰 캐릭터들로 사랑스러운 포인트는 up! 간편한 트레이닝 룩부터 집앞 마실룩, 캠핑룩 등으로 가볍고 편안하게 스타일링을 완성해주구요, 세트로도 완성도 있는 캐주얼룩 연출에도 좋지만 각각 따로 다양한 상의,하의와 매치해 활용해주셔도 좋아요 ♡ 사랑스러운 옐로우, 핑크 두 컬러 구성으로 준비했구요, 취향따라 초이스하실 수 있으니 놓치지마세요 :) TIP 원단 특성상 물세탁시 수축이나 변형의 가능성이 있..

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 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..

배열메서드 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 객체들은 문..