Development
-
[Vue.js] 다국어 처리(i18n)Development/Vue.js 2022. 4. 29. 18:36
Vue I18n 모듈 사용하여 다국어 처리를 할 수 있습니다. 아래 공식 문서를 참고해주세요. https://kazupon.github.io/vue-i18n/installation.html#compatibility-note Installation | Vue I18n Installation Compatibility Note Direct Download / CDN https://unpkg.com/vue-i18n@8 (opens new window) unpkg.com (opens new window) provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specif..
-
[SCSS] 중첩Development/SCSS 2021. 11. 4. 12:39
SCSS에는 편리한 중첩 방법이 있습니다. codepen을 통해 직접 작성해보겠습니다. https://codepen.io/wdpmong/pen/XWaeYYr scss 중첩 ... codepen.io 위 코드와 같이 중첩하여 사용할 수 있습니다. CSS로 변환하면 아래와 같은 코드가 됩니다. .container ul li { font-size: 50px; } .container ul li .name { color: skyblue; } .container ul li .description { color: pink; } 위와 같이 중복되는 후손 선택자들을 SCSS를 사용한다면 줄일 수 있습니다. 만약 자식 선택자로 명시를 해줘야 한다면, 아래와 같이 SCSS 문법에서 > 를 사용하면 됩니다. CSS로 변환하면..
-
[SCSS] 주석 처리 방법Development/SCSS 2021. 11. 3. 15:46
codepen은 간단한 코딩 하기에 용이합니다. codepen을 통해 직접 작성해보겠습니다. https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 먼저, CSS탭에서 설정 버튼을 클릭한 후 SCSS로 설정해줍니다. SCSS에서는 두 가지의 주석 처리 방법이 있습니다. 1. /**/ 2. // 1번과 같은 경우에는 컴파일(변환)해도 css코드로 남아있고, 2번과 같은 경우에는 컴파일(변환)하면 c..
-
[JS] 구조분해할당Development/Javascript 2021. 10. 12. 09:04
구조분해할당 또는 비구조화할당 이라고 합니다. 아래 MDN 문서를 참고해주세요. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. developer.mozilla.org 구조분해할당은 객체 또는 배열의 속성을 변수에 담을 수 있는 표현식입니다. 객체로 사용해보겠습니다. const user = { id: 'hyemin', nickname:'혜민', age: 31, email: 'hyemin@test.tes..
-
[JS] Object.assignDevelopment/Javascript 2021. 10. 8. 00:36
객체(object)의 명령어인 assign에 대해 정리합니다. MDN 공식 문서 참고해주세요. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign Object.assign() - JavaScript | MDN Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다. developer.mozilla.org 하나 이상의 출처 객체로부터 대상 객체로 복사할 때 사용합니다. var fruit = { name: 'Banana', color: 'Yellow' } var food = { name: 'Banana', ..
-
[JS] filterDevelopment/Javascript 2021. 10. 6. 22:22
filter라는 메소드는 배열 데이터의 아이템들을 특정한 기준에 의해 필터링(true)해서 새로울 배열데이터로 반환해줍니다. MDN의 공식 문서를 참고해보세요. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter Array.prototype.filter() - JavaScript | MDN filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. developer.mozilla.org 필터링하여 새로운 배열을 하기 때문에, 새로운 배열을 반환합니다. 기존 배열(원본 데이터)에는 영향에 없습니다. const nums = [1, 2, 3]; const f..
-
[JS] map, forEachDevelopment/Javascript 2021. 10. 5. 23:13
배열을 통해 많이 사용되는 map과 foreach에 대해 정리합니다. 아래 MDN 공식 문서를 참고해보세요. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map Array.prototype.map() - JavaScript | MDN map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. developer.mozilla.org https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach Array.prototype.forEach() - J..
-
[Vue.js] Computed 속성Development/Vue.js 2021. 10. 1. 23:45
Vue.js의 공식 문서를 참고하여 정리합니다. https://v3.vuejs-korea.org/guide/computed.html#computed-%E1%84%89%E1%85%A9%E1%86%A8%E1%84%89%E1%85%A5%E1%86%BC Computed 속성과 Watch | Vue.js Computed 속성과 Watch Computed 속성 템플릿 내에 표현식을 넣으면 편리하지만, 간단한 연산을 위한 부분입니다. 템플릿 안에서 너무 많은 연산을 하면 코드가 비대해지고 유지보수가 어렵습니다. 중 v3.vuejs-korea.org Computed 계산된 데이터를 말합니다. template에 바로 넣기보다는 computed 속성을 활용하여 계산된 데이터들을 넣어서 사용해주면 유지보수가 쉽습니다. 먼저..