Fall in IT.

안녕하세요. 오늘은 Javascript에서 객체를 복사하는 방법에 대해서 알아보겠습니다. 객체를 복사하는 방법에는 얕은 복사 방법이있고 깊은 복사 방법이 있습니다. 얕은 복사와 깊은 복사 얕은 복사란, 객체의 첫 번째 부분만 복사하는 것을 의미합니다. Object의 내장객체인 assign() 함수를 사용하여 구현합니다. 깊은 복사란, nested한 객체의 모든 하위 객체까지 복사하는 것을 말합니다. JSON.parse()와 JSON.stringify() 함수를 사용하여 구현합니다. 코드 /** * 얕은 복사 * * @param {*} obj */ function shallowObjectCopy(obj) { let copyObj = {}; Object.assign(copyObj, obj) return co..

Javascript의 Array 내장객체인 shift, unshift, push, pop에 대해서 알아보겠습니다. 코드 /** * shift() & pop() * * shift: 배열의 가장 첫 번째 원소를 제거하고 제거된 요소를 반환 * pop: 배열의 가장 마지막 원소를 제거하고 제거된 요소를 반환 */ let arr = [1, 2, 3]; let firstElement = arr.shift(); console.log(firstElement); // expected output: 1 console.log(arr); // expected output: [2, 3] let lastElement = arr.pop(); console.log(lastElement); // expected output: 3 c..

자바스크립트의 배열에서 특정 원소가 포함 되어있는지 확인하는 방법 // Sample Code let arr = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]; /** * # 1. Use indexOf() * 해당 원소의 index 값도 필요할 경우에 사용 */ console.log(arr.indexOf(2)); // 2 console.log(arr.indexOf(4)); // -1 /** * # 2. Use includes() * 간단히 값의 유무만 확인하는 경우에 사용 */ console.log(arr.includes(2)); // true console.log(arr.includes(4)); // false 참조 https://developer.mozilla.org/ko/docs/We..

문제 자바스크립트의 Number객체의 내장 함수인 toString() 함수와 전역 함수인 parseInt() 함수를 사용하면, 진수변환을 간단하게 처리할 수 있습니다. 사용 방법 /** * 진수 변환 * * 10진수를 진수 변환할때는 Number객체의 내장 함수인 toString()을 사용한다. * 10진수 외의 다른 진수를 10진수로 변환할때는 전역 함수인 parseInt()을 사용한다. */ // 1. 10진수 -> 2진수 let 십진수 = 125; console.log(`1. 10진수(${십진수}) -> 2진수(${십진수.toString(2)})`); // 1111101 // 2. 10진수 -> 8진수 console.log(`2. 10진수(${십진수}) -> 8진수(${십진수.toString(8)}..

안녕하세요. 오늘은 자바스크립트의 배열에서 중복값을 제거하는 다양한 방법에 대해서 알아보도록 하겠습니다. 코드 /** * 배열의 중복값을 제거하는 다양한 방법 * 1. `Set` * 2. `Filter` * 3. `Reduce` * * @param arr */ function solution(arr) { // # 1. Set let set = new Set([...arr]); //expected output: [1, 3, 5, 2, 4] console.log([...set]); // # 2. Filter let ret = arr.filter((item, index) => arr.indexOf(item) === index); //expected output: [1, 3, 5, 2, 4] console.lo..

안녕하세요. ORM을 사용하게 되면 raw query를 전혀 사용하지 않을 수 있지만, 간혹 사용해야 하는 상황이 발생하기도 합니다. 오늘은 Nodejs의 ORM인 Sequelize에서 raw query 사용하는 방법에 대해서 알아보도록 하겠습니다. Dynamic SQL을 사용한 나쁜 예 let query = ` SELECT * FROM user LEFT JOIN team ON user.team_id = team.id WHERE user.id = ${userId} `; let user: User = await sequelize.query( query, { replacements: {personId: person.id}, type: Sequelize.QueryTypes.SELECT, raw: true })..

최근 웹개발을 할때는 Angular, React, Vue 이 세 가지 프레임워크를 많이 이용합니다. 때로는, Typescript도 함께 사용하기도 하는데요, 이때 인터넷 익스플로러(IE)에서는 웹사이트가 동작하지 않는 경우가 종종 발생합니다. 에러를 확인해보면 Symbol is undefined 또는 Symbol이 정의되지 않았습니다. 라고 나오게 됩니다. 해당 문제는 babel-polyfill을 추가하면 해결할 수 있습니다. 해결방법 babel-polyfill 설치 $ npm install babel-polyfill 웹사이트의 엔트리 파일 위치에 babel-polyfill을 추가 (index.js 또는 index.ts 등) import 'babel-polyfill' 참조 https://www.npmjs..

safari에서 new Date() 사용할때 주의할점 Date 객체는 자바스크립트에서 많이 사용되는데요, 주의해야할 사항이 있습니다. String 타입의 날짜를("2019-03-15") Date 객체에 담아서 사용할때, 크롬과 사파리가 다르게 동작합니다. "yyyy-mm-dd"의 형태로 입력받을 경우 Safari와 Chrome 모두 정상동작하지만, "yyyy-m-dd"의 형태로 입력받을 경우 Safari에서는 error, Chrome에서는 정상동작하게 됩니다. let date = new Date("2019-03-15"); let date = new Date("2019-3-15"); // safari error!

HTML의 select 태그 사용시 기본값을 설정하는 방법 예제 ``` 선택해주세요. 아빠 엄마 ``` 참조 https://stackoverflow.com/questions/3518002/how-can-i-set-the-default-value-for-an-html-select-element How can I set the default value for an ..

box-sizing 이란? 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성 box-sizing 속성을 사용하면 엘리먼트의 패딩과 테두리가 너비에 영향을 주지 않습니다. 이렇게 하면 모든 엘리먼트가 직관적인 방식으로 크기가 설정되기 때문에 아에 전역 설정으로 사용하곤 합니다. * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } box-sizing 설정 값 box-sizing: content-box | border-box | initial | inherit content-box border와 padding을 제외하고 content 영역을 기준으로 박스 사이즈가 결정된다. border-box..