본문 바로가기

반응형

Programming

(316)
Vuepress2 정적 사이트 생성기 시작하기 [ 목차 ] 블로그 같은걸 만들다보니 순수 Vue.js보다는 SSR 또는 정적 사이트 생성기 SSG가 필요하게 되었습니다. React에는 유명한 Gatsby가, 그 이전에 Ruby에는 Jekyll 이라는 정적 사이트가 있었는데, Vue에는 마땅한게 없나 살펴보던 중 Vuepress 라는 걸 알게되었습니다. 오늘은 Vuepress를 이용하여 간단한 블로그를 생성해보겠습니다. Vuepress2 Home | VuePress v2.vuepress.vuejs.org 1. 설치 설치는 npm으로 간단히 아래와 같이 진행하면 됩니다. npm init npm install -D vuepress@next 2. 구성 처음 라이브러리를 설치하면 위 이미지처럼 아무것도 나타나지 않습니다. 여기에 몇가지 수동으로 폴더 및 파일..
자바스크립트 slice, splice ,split의 활용과 차이점 오늘은 자바스크립트에서 자르고 나누는 함수지만 헷갈리는 세가지 함수, slice, splice, split 에대해 알아보도록 하겠습니다. [ 목차 ] 1. slice() slice는 원하는 부분을 복사하여 새로운 배열로 리턴합니다. 원본을 변경시키지 않습니다. //slice(시작점, 끝점) ...0부터 시작 let my_array=['test1', 'test2','test3','test4']; second_array=my_array.slice(2,3) // output:['test3','test4'] 2. splice() splice는 원본이 수정됩니다. //splice(시작점, 잘라낼 갯수, 추가할 요소,,,n개) // 요소 제거 let my_array=['test1', 'test2','test3','..
Nuxt 프로젝트 Netlify에 배포하기 / 외부 도메인 적용하기 오늘은 Nuxt 프로젝트를 Netlify에 배포해보도록 하겠습니다. 동시에, 도메인 하나를 구매해서 적용해보겠습니다. [ 목차 ] 1. 도메인 구매 (hosting.kr) 저는 Hosting.KR이란 곳에서 도메인을 구매했습니다. 아래와 같이 이벤트중인 도메인 종류들도 있는데, 중간 즈음에 "도메인 가격안내"를 클릭하면 이벤트중인 싸고 좋은 것들도 찾으실 수 있습니다. 저는 likeapianist.blog라는 이름으로 블로그를 하나 만들어보겠습니다. 2. Netlify-Gitlap 연동 배포 사전에 Nuxt 프로젝트를 gitlap(또는 github)에 배포를 해 놓습니다. 어느정도 배포가 가능한 모양새는 갖추고 있어야겠죠? 본인의 깃 저장소를 고르고... Vue 프로젝트의 빌드는 "npm run buil..
자바스크립트 전개 연산자 (...) 전개연산자는 ES6에서 추가된 기능으로 배열이나 객체를 분해된 값으로 전달하는 기능입니다. 배열 등 모든 순환 가능한 것들은 펼쳐서 가져올 수 있습니다. 1. 배열 예 const arr1 = ['a', 'b', 'b']; const arr2 = ['d', 'e', 'f']; const arr3 = ['g', 'h', 'i']; const sum_array = [...arr1, ...arr2, ...arr3]; console.log(sum_array); // ['a', 'b', 'b', 'd', 'e', 'f', 'g', 'h', 'i'] 2. 객체배열 예 const obj_array=[ { name: "one", age: 1, }, { name: "two", age: 2, }, { name: "three..
자바스크립트 화살표 함수 (=>) 오늘은 자바스크립트 ES6에서 추가된 주요 기능 중 화살표함수( => )에 대해 알아보겠습니다. [ 목차 ] 1. 화살표 함수 기존의 function으로 함수를 표현하는 방식을 좀 더 간결하게 표현하기 위해 화살표( => ) 함수가 도입되었습니다. 아래의 두 함수는 모두 동일한 역할을 하는 함수입니다. const test1 = function(a,b){ return a+b; } const test2 = (a,b) => { return a+b; }; const test3 = (a,b) => a+b; 2. 화살표 함수 주의점(this) 일반적인 자바스크립트 함수에서의 this는 - 전역 객체 - 메소드 호출시 호출한 해당 객체 를 나타냅니다. // 일반 함수 const obj1 = { name: '홍길동',..
자바스크립트 filter 사용법 자바스크립트 filter 메소드에 대해 알아보겠습니다. Filter 메소드는 배열 내부를 순환하면서 특정 조건에 부합하는 요소들을 새로운 배열에 담아 반환합니다. 1. 기본사용법 result = my_array.filter (a => { return [조건]; }); const my_array = [1,2,3,4,5,6,7,8,9,10] const result = my_array.filter(a => { return a % 2 == 0; // a중 2로 나눈 나머지가 0(즉, 짝수)인 요소 }); console.log(result); // [ 2, 4, 6, 8, 10 ] 2. 객체 다루기 const my_array = [ {name:'홍길동', age:28}, {name:'이순신', age:37}, {..
자바스크립트 Reduce사용법 reduce 함수는 자바스크립트에서 배열 또는 리스트 안의 요소들을 정렬하거나 특정 조건에 부합하면 합계나 평균 등을 계산하는데 사용되는 함수입니다. 개인적으로 자주 쓰지는 않지만 잘 알고있으면 많이 유용하게 쓸 수 있을것 같아서 정리해놓겠습니다. 1. 기본사용법 result = my_array.reduce((acc, cur, i) => { return (acc~연산~cur); }, acc초기값); - acc: accumulate(누적값) - cur: current(현재값) - acc초기값: 누적하기 전에 시작값을 지정 const my_array = [1,2,3,4,5] const result = my_array.reduce((acc, cur, i) => { console.log(acc, i); retu..
자바스크립트 Map사용법 - 객체 배열(object array) 요소 변경하기 Javascript에서 객체배열(Object Array) 내부의 요소를 변경해야할 경우가 자주 발생합니다. 예를 들면 아래와 같은 객체 배열이 주어질 경우 특정 요소 또는 전체 요소의 age값을 변경할 필요가 있습니다. const obj_array=[ { name: "one", age: 1, }, { name: "two", age: 2, }, { name: "three", age: 3, } ] 이때 유용하게 사용할 수 있는 함수로 Map 메소드가 있습니다. Map은 내부에서 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용합니다. 1. 모든 요소의 값 변경하기 // age를 모두 4로 const result = obj_array.map(obj => { return {...obj, ..

반응형