프런트엔드19 Chrome 효과적인 유저 디렉토리 설정 방법 Chrome을 사용하면 기본적으로 "C:\Users\\AppData\Local\Google\Chrome" 의 디렉토리로 기본 지정되게 된다. 용량이 C 드라이버가 많으면 상관없겠지만 실수로 C 드라이버를 포멧한다거나 C 드라이버 용량 이슈로 불가피하게 다른 경로로 지정할 필요가 있다. 많은 블로그를 찾아보면 Chrome 바로가기 아이콘의 기동 옵션에 --user-data-dir 설정하면 해결되지만 응용 프로그램등 다른 프로그램에서 클릭하게되면 옵션을 설정한 바로가기가 아닌 Chrome.exe을 실행하게 되므로 --user-data-dir 경로가 무효화 되버리게 된다. 근본적으로 해결하는 것은 레지스트리까지 같이 변경하는 것이지만 공사가 커진다. Chrome의 사용자 디렉토리 변경하려다가 하루종일 크롬 설.. 2022. 11. 18. 프론트엔드 모노레포 전략 모노레포(monorepo)란? 모노레포란 버전 관리 시스템에서 두 개 이상의 프로젝트 코드가 동일한 저장소에 저장되는 소프트웨어 개발 전략이다. 아래과 같은 프로젝트 구조를 보면 이해하기 빠를 것이다. 모노레포 장점 팀 간 협업 개선 모든 프로젝트가 동일한 리포지토리에 포함된다. 즉, 회사의 모든 사람이 코드를 보고 사용할 수 있으므로 공유 라이브러리를 더 쉽게 찾고 활용할 수 있다. 이는 협업 및 코드 재사용을 할 수 있어서 리소스를 절약할 수 있다. 간편한 종속성 관리 모노레포는 내부 및 타사 종속성 관리를 더 간편하고 수월하게 할 수 있다. 특정 버전의 종속성을 고정하여 업데이트가 필요할 때 전체 코드에서 변경 사항 및 이전 버전과의 호환성을 더 쉽게 테스트할 수 있다. 즉, 종속성의 취약점을 관리.. 2022. 5. 3. fabricJS - 이미지에 오버레이 포커스 개요 전체 이미지를 뿌옇게 오버레이 처리하고 네모 박스를 만들어서 포커스 효과를 주고 싶을 경우 jsfiddle : https://jsfiddle.net/yscho03/4uvjsb6L/ 전체 코드 var canvasWidth = 640, canvasHeight = 480; var canvas = new fabric.Canvas('my-canvas', { preserveObjectStacking: 'true', width : canvasWidth, height: canvasHeight }); canvas.setOverlayImage('https://placeimg.com/' + canvasWidth + '/' + canvasHeight + '/people', canvas.renderAll.bind(canv.. 2022. 4. 20. JavaScript - 함수 다루기 함수는 2개 이하가 이상적이다 매개변수의 개수를 제한 하는 것은 함수 테스팅을 쉽게 만들어 주기 때문에 중요하다. 만약 매개변수가 3개 이상일 경우엔 테스트 해야하는 경우의 수가 많아지고 각기 다른 인수들로 여러 사례들을 테스트 해야한다. 3개 이상일 경우는 객체로 매개변수를 만들어서 사용하는 방법이 있다. BAD function createMenu(title, body, buttonText, cancellable) { // ... } GOOD function createMenu({ title, body, buttonText, cancellable }) { // ... } createMenu({ title: 'Foo', body: 'Bar', buttonText: 'Baz', cancellable: tr.. 2022. 4. 18. JavaScript - 객체 다루기 Shorthand Properties 객체에 key-value을 할당 시 변수 그대로 할당을 하면 변수 이름 그대로 key가 되고 변수값 그대로 value로 값을 할당할 수 있다. 예제) BAD const name = "Tom"; const age = 20; const person = { "name" : name, "age" : age, }; console.log(person); // 결과 { age: 20, name: "Tom" } GOOD const name = "Tom"; const age = 20; // 다음과 같이 축약해서 사용 가능하다. const person = { name, age }; console.log(person); // 결과 { age: 20 name: "Tom" } Compute.. 2022. 4. 15. JavaScript - 배열 다루기 Javascript의 배열은 객체다 Javascript 배열 요소 안에 key-value 값이나 함수를 설정해도 입력이 잘되는 것을 확인할 수 있다. const arr = [1, 2, 3]; arr[4] = 'test'; arr['property'] = 'value'; arr['obj'] = {}; arr['{}'] = [1, 2, 3]; arr['func'] = function () { return 'hello'; }; 호출해보면 key-value, 함수 모두 입력되어 있으며 console.log(arr); // output [ 0: 1 1: 2 2: 3 4: "test" func: ƒ () obj: {} property: "value" {}: (3) [1, 2, 3] length: 5 [[Protot.. 2022. 4. 15. JavaScript - 분기 다루기 값,식,문 문법을 간과하는 경우가 있는데, 문법은 컴퓨터를 이해시켜야하기 때문에 중요하다. 값과 식과 문을 구분한다. // "값"이 들어가야하는 자리에 "식"이 들어감 (X) Hello World // 삼항연산자는 "값"으로 귀결되기 때문에 사용 가능 (O) Hello World () : 함수, 우선순위 {} : 값과 식만 들어가야함. 바로 리턴되는 분기문은 논리연산자를 사용해야한다. if (conditionOne) {return one;} // 간단한 연산을 활용한 방법 {conditionOne && one} 삼항 연산자 다루기 피 연산자가 조건, 참일 때, 거짓일 때 세개 인것을 잊지말자. 삼항연산자를 과도하게 중복해서 사용하는 경우를 피하자 1. if를 사용하여 조건을 나누자 2. else-if를 .. 2022. 4. 14. JavaScript - 경계 다루기 min-max 미만, 초과 또는 이하, 이상인지 둘 중 하나로 해석될 가능성이 있다. const MIN_COUNT = 1; const MAX_COUNT = 100; 명시적으로 정의하기 위하여 LIMIT를 붙여서 다음과 같이 개선할 수 있다. const MIN_COUNT_LIMIT = 1; const MAX_COUNT_LIMIT = 100; begin-end 일반적으로 begin은 경계에 포함되고 end는 경계에 포함되지 않는 암묵적인 규칙이 있다. 2022-01-01부터 2022-01-10까지 포함될 것을 예측할 수 있다. function getDate(beginDate, endDate) { // some code } // 2022-01-01부터 2022-01-10까지 포함될 것을 예측할 수 있다. ge.. 2022. 4. 14. JavaScript - 타입 다루기 타입 검사 typeof typeof는 피연산자를 검사해서 타입을 문자열로 반환하는 함수이다. Primitive value (원시적인 string, integer 등)는 typeof로 감별하기가 쉽지만 Reference value (참조되는 Object, Array 등)는 object라는 결과 값으로만 출력이 되므로 정확한 판별에 어려움이 있다. Object, Array 동일하게 object 결과를 가져오게 된다. typeof {} == 'object' // true typeof [] == 'object' // true instanceof instanceof 연산자는 생성자의 프로토타입 (prototype) 속성이 객체의 프로토타입 (prototype) 체인 어딘가 존재하는지를 판별할 때 사용한다. ins.. 2022. 4. 14. JavaScript - 변수 다루기 함수 스코프 (Function Scope) vs 블록 스코프 (Block Scope) 함수 스코프 변수가 함수 내부에서 선언되면 해당 함수 내에서만 액세스할 수 있으며 해당 함수 외부에서 사용할 수 없다. 블록 스코프 if 또는 switch 조건이나 또는 for 또는 while 루프 내부에서 선언된 변수는 해당 특정 조건 또는 루프 내에서 액세스할 수 있다. 간단히 말해서 중괄호 안에 선언된 변수는 블록 범위 내에서 호출된다. var 는 함수 범위로 호출되며 let & const 는 특정 블록 내에 엑세스를 할 수 있다. let은 프로그램을 진행하면서 변경 가능하지만 const는 프로그램이 끝날 때까지 변경되지 않고 일정하게 유지된다. function hello() { if (true) { console.. 2022. 4. 14. TIP - 브라우저 드래그, 복사 붙이기 해제 방법 크롬 브라우저 1. 디버깅 창 (F12) 열기 크롬 브라우저의 디버깅 창 (F12)를 열어줍니다. 2. Disable JavaScript 체크 마우스 우클릭이나 복사 붙이기 방지는 JavaScript를 활용하여 막는 경우가 대부분이다. Perferences > Debugger > Disable JavaScript 를 체크하여 비활성화 시켜준다 비활성화 후에 복사나 드래그를 해보면 된다. IE 브라우저 경우 1. 인터넷 옵션 인터넷 옵션 > 사용자 지정 수준을 클릭한다. 2. 보안 설정 스크립팅 > Active 스크립트 > 사용 안 함 을 선택하고 확인을 눌러준다. 설정 후 IE는 반드시 F5를 눌러서 새로 고침 후에 복사나 드래그를 해보면 된다. 2022. 3. 4. shift 키를 눌렀을때 정사이즈로 scaling 구현방법 shift 키를 눌렀을 경우 객체를 정사이즈로 스케일링하고 shift 키를 누르지 않았을 경우는 반대로 드래그한 비율대로 리사이즈를 하고싶다. 원인 fabricJS에서는 객체 스케일링시 기본 옵션이 정사이즈 비율로 리사이즈되고 shift 키를 눌렀을때 드래그한 비율대로 리사이즈를 한다. 대응 fabricJS에서 이벤트를 제어할 수 있는 확장 함수로 존재하나 이 확장 함수를 활용하여 조건문을 변경하면서 대응하기는 힘들다. fabricJS에서 사용하고 있는 스케일링 조건 함수를 덮어씌우는 방법이다. 데모 페이지 : http://jsfiddle.net/yscho03/egzcopf4 var canvas = new fabric.Canvas('c', { uniScaleTransform: true }); v.. 2020. 6. 4. IE 11 base64 DATA URL 우회 방법 환경 ㆍ브라우저 : IE 11 ㆍ프론트엔드 : vueJS 3.x ㆍ서버 : Python Django 요약 IE 11에서 이미지 태그에 base64 DATA URL이 지원이 되질 않는다. 원인 브라우저 base64 DATA URL 미지원 대응 서버로 base64 DATA URL를 보내 출력하는(우회하는) 방법밖에 없다. - 프론트 소스 (HTML) - 프론트 소스 (JS) function getImageUrl(dataUrl){ var apiUrl = '/api/image/base64/decode'; var dataUrl.split(';'); var dataUrlArr = dataUrl.split(';'); return apiUrl + '?data_url=' + dataUrlArr[1]; } - 백엔드 소스.. 2019. 3. 8. vue-select에서 multiple 옵션 설정 후 다중 선택시 오류 환경 ㆍvueJS 3.x ㆍvue-select 요약 vue-select에서 multiple 옵션 설정 후 다중 선택시 중복체크가 되지 않는다. 원인 빈 오브젝트 체크 오류 대응 원본 파일은 건드리지않고 컴포넌트를 extend 하여 isOptionSelected 메소드를 수정하여 준다. /** v-select custom */ Vue.component('temp-select', vSelect); const Base = Vue.options.components["temp-select"]; const CustomSelect = Base.extend({ methods: { isOptionSelected(option) { return this.valueAsArray.some(value => { if (typeof.. 2019. 2. 14. vueJS - router 설정시 Uncaught SyntaxError: Unexpected token < 오류 환경 ㆍvueJS 3.x 요약 vueJS에서 router의 depth를 세분화하였을 경우 (/depth1/depth2) 동작을 하지 않는다. Uncaught SyntaxError: Unexpected token 2019. 2. 13. 이미지가 겹쳐있을 경우 처리 환경 fabricJS 2.4.0 요약 fabricJS에서 canvas를 생성시 preserveObjectStacking : true 옵션을 설정하면 이미지가 겹쳐있을 경우도 우선순위에 따라 우선순위 맨 위쪽의 이미지 레이어만 클릭이 된다. 우선순위에 관계없이 눈에 보이는 이미지를 바로 선택을 하게 하려면 이벤트를 걸어서 타겟을 바꿔줘야 한다. 대응 // 1. 캔버스 생성 var canvas = new fabric.Canvas(canvasRef, { width: 500, height: 500, preserveObjectStacking : true }); // 2. 마우스 클릭 이벤트 핸들러 설정 canvas.on('mouse:down:before', swapVisibleObject); // 3. swapV.. 2018. 12. 31. webpack 3.0 설정 방법 설정방법 devtool : 소스맵을 생성하여 원본 소스랑 맵핑할 수게 있게 설정하는 부분 (참고 : https://webpack.js.org/configuration/devtool/) module.exports = { devtool: 'source-map', .... devtool 옵션 설명 eval-source-map 모든 기능이 포함된 완전한 소스맵을 별도의 파일로 생성합니다. 이 옵션은 최고 품질의 소스맵을 생성하지만 빌드 프로세스가 느려집니다. source-map 별도의 파일에 칼람 매핑을 제외한 소스 맵을 생성합니다. 칼람 매핑을 생략하면 빌드 속도는 향상되지만 디버깅할 때는 약간의 불편함이 있습니다. 브라우저가 개발자 툴은 원래 소스 파일의 행을 가리킬 수 있으며, 특정 칼람(또는 문자열)을 .. 2018. 12. 31. ECMAScript 와 Javascript 구성 ECMAScript란 무엇인가? 한마디로 자바스크립트 규격을 말한다. (JavaScript를 구성하는 코어 또는 명세서라고도 불린다.) 브라우저 종류 또는 버전에 따라 지원하는 ECMAScript 규격이 다르다. (예를 들어 IE 9는 ECMAScript 5.0 까지 지원한다. http://kangax.github.io/compat-table/es5/) 역사 ES 1.0 : 1997년 6월 초판 ES 2.0 : 1998년 6월 ISO/IEC 16262 국제 표준과 동일한 규격 적용 ES 3.0 : 1999년 12월 try ~ catch 예외처리, 엄격한 오류 정의, 수치형 출력의 포매팅등 (가장 범용적인 버전) ES 4.0 : 중단됨 (10년 동안....) ES 5.0 : 2009년 12월 철저한 오류 .. 2018. 12. 31. React 란? React 란? 리액트는 자바스크립트와 (필요에 따라) XML을 이용해 조합형 사용자 인터페이스를 구축하는 엔진입니다. 간략히 말하자면 뷰에 특화된 라이브러리 React 동작 예) JSX → Javascript 변환 // JSX 코드 작성 return ( Hello World ) // 아래와 같이 javascript 로 변환됩니다. return React.createElement("h1", null, "Hello World"); React Event 흐름도 부모 컴포넌트에서 자식으로 속성을 통한 단방향 데이터 흐름 자식이 부모컴포넌트로 데이터를 전달해야 할 경우는 자식이 이용할 콜백 함수를 속성을 통해 전달하여 사용합니다. React 장점 편리한 반응형 렌더링 순수 자바스크립트를 이용한 컴포넌트 기반 개.. 2018. 12. 31. 이전 1 다음 728x90 반응형
