본문 바로가기
반응형

Programming/Javascript96

개츠비(Gatsby) Disqus 댓글기능 달기 이번엔 개츠비(Gatsby) 블로그에 Disqus 댓글 기능을 추가해보도록 하겠습니다. [ 목차 ] 1. Disqus.com에 댓글 추가할 사이트정보 입력 Disqus.com에 로그인 후 Site Admin 으로 이동하여 기본 정보들을 입력하여 내 사이트를 추가해줍니다. 그리고 설치방법을 찾아보면 Gatsby에 반영하는 방법이 나옵니다. [ Site Admin > 내 사이트 선택 > Installation > Gatsby 선택 ] Disqus에서는 아래와 같은 형식으로 안내를 합니다. 단 config에서 괄호가 두개 들어가야합니다. 안내와 조금 차이가 있습니다. import { Disqus } from 'gatsby-plugin-disqus'; const Template = () => ( /* Page .. 2023. 8. 4.
개츠비(Gatsby) 구글 서치콘솔 등록 (Google Search Console) [ 목차 ] 구글 서치콘설에 등록하기 위해서는 3단계를 거쳐야 합니다. 1. sitemap.xml 2. robots.txt 3. Google Search Console 등록 1. Sitemap.xml 생성 가장 먼저 sitemap.xml을 생성합니다. 생성 방법은 플러그인 추가로 쉽게 진행할 수 있습니다. gatsby-plugin-sitemap, gatsby-plugin-advanced-sitemap 플러그인을 추가해줍니다. 두번째 플러그인은 '@next'옵션으로 최신 플러그인을 설치합니다. npm i gatsby-plugin-sitemap // gatsby가 버전 5로 올라가면서 아래의 플러그인은 아직 설치가 안되고 있습니다. npm i gatsby-plugin-advanced-sitemap gatsb.. 2023. 8. 4.
개츠비(Gatsby) 마크다운 파일과 이미지 처리하기 사실...여러 예제와 뤼튼 AI를 이용해서 하루 종일 고생하며 방법을 찾아봤는데, 지금도 왜 되었는지 잘 모르겠습니다. 예제를 따라 해도 안되던게 갑자기 됩니다. 우선 코드만 남겨놓습니다. 1. 마크다운 파일 읽어오는 옵션 'gatsby-source-filesystem'은 기본적으로 설치되었을겁니다. 마크다운 파일들을 모아놓는 곳을 아래와 같이 설정해줍니다. // gatsby-config.js module.exports = { siteMetadata: { ... }, plugins: [ ..., { resolve: `gatsby-source-filesystem`, options: { name: `posts`, path: `${__dirname}/content/posts`, }, }, ... ], }; 2.. 2023. 7. 30.
개츠비(Gatsby) 마크다운 블로그 만들기 시작하기 정적사이트 생성기(SSG, Static Site Generator)에 대해 공부하다보니 다시 Gatsby에 대한 흥미가 돌기 시작해서 오랫만에 Gatsby로 프로젝트를 만들어봤습니다. 예전에 이걸 공부했던 적이 있었나 싶을 정도로 하나도 기억이 안나더군요. React에 대한 두려움으로 React 계통의 프레임워크들은 무조건 멀리했었던 것 같기도 하고, 사실은 Gatsby, GraphQL에 대해 정확히 공부한적이 없었던 것 같기도 하네요. 그래서 오늘은 설치하고 마크다운 문서 표기하기까지 알게된 내용을 정리해볼까 합니다. [ 목차 ] 1. Gatsby란? Gatsby는 서두에 말했듯이 React에 기반한 정적사이트 생성기(SSG, Static Site Generator)입니다. 예전부터 Ruby on Ra.. 2023. 7. 26.
자바스크립트 정적사이트 생성기 11ty (eleventy 일레븐티) 시작하기2 이번 포스팅에서는 지난 포스팅에 이어 11ty를 좀더 활용해서 layout을 구성하고, CSS를 적용하는 방법을 알아보도록 하겠습니다. 1. .eleventy.js파일 생성 프로젝트 루트에 .eleventy.js 파일을 생성합니다. 여기서 Input / Output 폴더와 CSS 파일의 경로를 지정해줍니다. module.exports = function(eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/style.css"); return { dir: { input: "src", includes: "_includes", data: "_data", output: "_site" } }; }; 2. 폴더 구성 폴더구성은 아래와 같이 /src/폴더 하위에 작.. 2023. 7. 24.
자바스크립트 정적사이트 생성기 11ty (eleventy 일레븐티) 시작하기 정적사이트 생성기가 여러개다보니 이것저것 시도해봅니다. 그중에 이번엔 11ty라는 정적사이트 생성기에 대해 알아보겠습니다. 사용법이 매우 쉽습니다. [ 목차 ] 1. 설치 프로젝트로 쓸 폴더를 생성 후 11ty를 깔아줍니다. (기본적으로 Node는 깔려있어야 합니다.) npm init -y npm install @11ty/eleventy --save-dev 2. 샘플 파일 생성 2가지 파일을 생성해야합니다. 리눅스라면 아래의 명령어로 생성이 가능한데, 윈도우 환경이면 직접 두 파일을 만듭니다. # index.html echo 'Page titleHi' > index.html #README.md echo '# Page header' > README.md 3. 서버 실행 npx @11ty/eleventy -.. 2023. 7. 23.
정적 사이트 생성기 (SSG, Static Site Generator) 로 나만의 블로그를 만들어보자 [ 목차 ] 오늘은 정적사이트 생성기 (SSG, Static Site Generator)에 대해 알아보겠습니다. 1. 정적사이트(SSG) 생성기란? 정적사이트 생성기는 말 그대로 정적 사이트를 생성하는 도구를 말하는데요, 정적 사이트란 항상 동일한 내용을 보여주는 사전에 빌드된 HTML, Javascript 및 CSS 코드로 구성된 사이트를 일컫는 말입니다. 이러한 웹페이지는 이미 서버 측에서 미리 렌더링된 후 브라우저에 제공되기 때문에 페이지를 더 빠르게 로드할 수 있습니다. 그래서 개인 블로그 등 컨텐츠 변화가 자주 일어나지 않는 소규모 웹사이트 제작시 많이 이용되고 있습니다. 대표적인 도구로는 Jekyll, Gatsby, Hugo 등이 있습니다. 이것만 알면 뭔가 부족한거 같아서 몇가지 개념을 좀 .. 2023. 7. 20.
vuepress 구글 서치 콘솔 등록하기 - 구글검색 최적화(SEO) [ 목차 ] 내 사이트가 Netlify에 배포된 이후에도 아직 검색이 안되고 있습니다. 주소가 아니면 아직 접근할 방법이 없네요. 구글에 노출시키는 작업이 필요합니다. 이걸 설정해주는게 구글 서치 콘솔(Google Search Console)입니다. 여기에 등록해주면 구글에서 검색도 되고, 그 외에 모니터링도 가능해집니다. 오늘은 서치 콘솔에 등록하고, sitemap.xml, robots.txt 파일을 적용하는 방법에 대해 알아보겠습니다. 1.구글 서치콘솔 등록 구글 서치콘솔에 로그인한 후 속성 추가를 해 줍니다. [ 속성 유형 선택 ] 다음으로 속성 유형에서 "URL 접두어" 부분으로 가서 추가하고자 하는 URL을 적어주고 "계속" 을 클릭해줍니다. [ 소유권 확인 ] 다음으로 소유권 확인창이 뜹니다... 2023. 7. 12.
vuepress 1.9.9 버전 시작하기 (태그 기능 달기) Node 18버전에서 vuepress 1.9.9 버전 설치에 오류가 있어서 포기했다가, 다시 Node 16버전으로 낮춰서 설치했습니다. 아직 Beta버전인 2.0.0 보다 오류가 적은 것 같습니다. 설치하니 기본적으로 검색 툴이 활성화되고, Vue 컴포넌트 추가도 components 폴더에 만드니 별다른 설정없이 인식이 됩니다. 그리고 무엇보다도 태그 요소 추가가 너무 쉽게 진행됩니다. Vuepress2로 하려고 시도하며 공부해서인지 금방금방 작성이 되네요. 다시 Vuepress 1으로 재작성해야겠습니다...ㅠㅠ 1. 설치 npm init npm i -D vuepress@next 2. ./docs/README.md 파일 생성 ### Hello Vuepress 3. ./gitignore 파일 생성 node.. 2023. 7. 12.
Vuepress2에서 vue 컴포넌트 만들어서 등록/사용하기 1. 플러그인 추가 npm i -D @vuepress/plugin-register-components@next 2. .vuepress/config.js파일에 플러그인 추가 import { registerComponentsPlugin } from '@vuepress/plugin-register-components' import { getDirname, path } from '@vuepress/utils' // const __dirname = getDirname(import.meta.url) // 인식 오류시 사용 export default { title:"Hello, Vuepress", plugins: [ registerComponentsPlugin({ componentsDir: path.resolve(_.. 2023. 7. 6.
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. 구성 처음 라이브러리를 설치하면 위 이미지처럼 아무것도 나타나지 않습니다. 여기에 몇가지 수동으로 폴더 및 파일.. 2023. 7. 4.
자바스크립트 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','.. 2023. 6. 29.
Nuxt 프로젝트 Netlify에 배포하기 / 외부 도메인 적용하기 오늘은 Nuxt 프로젝트를 Netlify에 배포해보도록 하겠습니다. 동시에, 도메인 하나를 구매해서 적용해보겠습니다. [ 목차 ] 1. 도메인 구매 (hosting.kr) 저는 Hosting.KR이란 곳에서 도메인을 구매했습니다. 아래와 같이 이벤트중인 도메인 종류들도 있는데, 중간 즈음에 "도메인 가격안내"를 클릭하면 이벤트중인 싸고 좋은 것들도 찾으실 수 있습니다. 저는 likeapianist.blog라는 이름으로 블로그를 하나 만들어보겠습니다. 2. Netlify-Gitlap 연동 배포 사전에 Nuxt 프로젝트를 gitlap(또는 github)에 배포를 해 놓습니다. 어느정도 배포가 가능한 모양새는 갖추고 있어야겠죠? 본인의 깃 저장소를 고르고... Vue 프로젝트의 빌드는 "npm run buil.. 2023. 6. 23.
자바스크립트 전개 연산자 (...) 전개연산자는 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.. 2023. 6. 22.
자바스크립트 화살표 함수 (=>) 오늘은 자바스크립트 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: '홍길동',.. 2023. 6. 22.
자바스크립트 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}, {.. 2023. 6. 20.
자바스크립트 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.. 2023. 6. 17.
자바스크립트 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, .. 2023. 6. 16.
서버리스 앱만들기 - 3.Vue.js 앱 Netlify에 배포하기 서버리스 앱 만들기의 마지막 단원으로 Vue.js 프론트 앱을 배포해보도록 하겠습니다. 1. 앱 만들기 Vue 앱을 만들어줍니다. vue create node_post_vue . // .을 찍으면 현재 폴더에 프로젝트를 생성합니다. vue add router // 곧바로 router 라이브러리를 함께 설치해줍니다. 필요한 라이브러리를 아래와 같이 설치해줍니다. npm i vuex axios 간단히 백엔드에서 보내오는 데이터를 읽어다 표현해주는 것만 할건데도 Store를 구성하고 각 컴포넌트에서 Store state를 이용해야하는게 좀 불편해 보이네요. 그래도 한번만 세팅해놓으면 다음부터는 비교적? 편하게 작업을 할 수 있다고 생각하고 진행하셔요^^;; (1) ./src/main.js import { cr.. 2023. 5. 20.
서버리스 앱만들기 - 2.Node 서버(Qoddi)에서 PostgresqlDB(CockroachDB) 데이터 읽어오기 제목이 참 힘드네요... 데이터는 적당히 입력이 되었다고 하면, Node(Express)를 통해서 데이터를 넘겨주는 서버를 만들어보겠습니다. 1 .env 파일 CockroachDB연결정보는 사이트에서 제공하는 connection string을 그대로 붙이는게 편리합니다. 비밀번호도 찾아서 잘 넣어주시구요. PORT=3000 NODE_ENV='development' SECRET=mysecretkeytest COCKROACHDB_CONNECT_URL='postgresql://:@wind-raccoon-4725.8nk.cockroachlabs.cloud:26257/defaultdb?sslmode=verify-full' 2. postRoute.js Connection String에 정의된대로 연결하니 오히려 더.. 2023. 5. 20.
서버리스 앱만들기 - 1. CockroachDB Serverless 데이터베이스 시작하기 모든 서비스 클라우드에서 구동하기를 해보려고, 이번엔 Database를 찾고 있습니다. 이번에도 역시 무료가 어느정도 가능한 서비스를 찾다보니 CockroachDB라는 것을 찾게 되었습니다. Cockroach Labs, the company building CockroachDB Cockroach Labs, the company building CockroachDB CockroachDB is a distributed database with standard SQL for cloud applications. CockroachDB powers companies like Comcast, Lush, and Bose. www.cockroachlabs.com Cockroach라면 우리말로 바퀴벌레인데요, 단어를 알게.. 2023. 5. 18.
Vue todolist 만들기 - 8. Backend 연동을 위해 Frontend 수정하기 1. store/store.js 수정 store.js 파일에 url request가 가능하도록 각 기능마다 axios 기능을 추가해줍니다. 아울러, 최초 Load시에는 DB의 정보들을 불러올 수 있도록 onLoad함수를 추가해주었습니다. import { createStore } from 'vuex'; import axios from 'axios'; axios.defaults.baseURL = 'http://localhost:3000'; axios.defaults.headers.post['Content-Type']='application/json;charset=utf-8'; axios.defaults.headers.post['Access-Control-Allow-Origin']='*'; export con.. 2023. 5. 5.
Vue todolist 만들기 - 7. Express로 Backend 구성하기 이번에는 Express.js를 이용해서 Backend를 구성해보도록 하겠습니다. Backend 서버는 Express지만, 그 외에도 추가로 MongoDB에 적당한 클러스터 생성이 필요합니다. 그리고 Kakao 로그인 연동을 위해 Kakao Developers 사이트에서 앱 생성이 필요합니다. 이부분은 많은 지문을 필요로 하는 부분이라 여기서 다루지는 않겠습니다. 1. 환경파일(.env) 생성 Backend 프로젝트 폴더에 .env 파일을 생성해서 비밀 환경정보 등을 저장합니다. PORT=3000 NODE_ENV='development' MONGO_URI='mongodb+srv://몽고디비ID:몽고디비PW@cluster0.juisc.mongodb.net/test' KAKAO_ID=00sdfsdf6432sd.. 2023. 5. 5.
Vue todolist 만들기 - 6. Kakao 로그인 구현 Kakao 로그인을 프론트에서 작업하고, 사용자 정보 중 이름, 메일주소 등 몇가지만 백엔드에 등록하는 방식으로 진행하겠습니다. 이를 위해서는 우선 main.js에 아래의 코드를 추가해야 합니다. 1. main.js import { createApp } from 'vue' import App from './App.vue' import { store } from './store/store.js' import router from './router' createApp(App) .use(router) .use(store) .mount('#app') // 아래 추가 window.Kakao.init('ce8a7d7f75e0322350135c938a5f7182'); 2. components/KakaoLogin.vu.. 2023. 5. 4.
Vue todolist 만들기 - 5. Post 수정기능 Post를 수정하는 기능을 구현하겠습니다. 1. components/EachofPost.vue 수정 v-if 기능을 이용하여 edit모드인지 아닌지에 따라 다른 화면을 보여주도록 구성합니다. v {{ id }} {{ titleOfPost }} v x {{ bodyOfPost }} by {{ creator }} 2. store/store.js import { createStore } from 'vuex'; import axios from 'axios'; axios.defaults.baseURL = 'http://localhost:3000'; axios.defaults.headers.post['Content-Type']='application/json;charset=utf-8'; axios.defaults... 2023. 5. 4.
Vue todolist 만들기 - 4. Store 적용하기...Post추가/삭제 Store를 적용해보겠습니다. npm i vuex axios // axios는 나중에 backend 통신을 위해 미리 설치 1. store/store.js 기본 post 리스트를 생성하고, 포스트 추가/삭제기능을 구현해놓는다. 기능은 추후 Backend와의 연동을 위해 actions에 구현해놓습니다.import { createStore } from 'vuex'; // import axios from 'axios'; export const store = createStore({ // export default createStore({ state:{ posts: [ {_id: '1', title: 'apple', body: 'Im apple', creator: 'apple'}, {_id: '2', title.. 2023. 5. 4.
Vue todolist 만들기 - 3. Vue 프로젝트 상세구성 1. router/index.js 수정 불필요한 라우팅을 삭제합니다. import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/HomeView.vue'; const routes = [ { path:'/', name: 'Home', component: Home } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router; 2. 불필요한 view도 삭제합니다. views/AboutView.vue --삭제 3. App.vue 수정 4. views/HomeView.vue.. 2023. 5. 4.
Vue todolist 만들기 - 2. Vue 프로젝트 만들기 1. Vue 프로젝트 생성 vue_front 폴더로 이동하여 vue_프로젝트를 생성합니다. cd vue_front npm i -g @vue/cli // vuejs 프로젝트가 처음일 경우 글로벌로 vue cli를 설치해줍니다. vue create . // 현재의 폴더에 vue 프로젝트를 생성합니다. 2. Vue-router 설치 vue-router를 설치하면 프로젝트 구조가 조금 달라집니다. 따라서 vue-router를 먼저 설치하고 진행합니다. vue add router 3. vuex / axios 설치 및 port 설정 npm i vuex axios package.json의 scripts 부분을 수정하여 4000번 포트에서 서비스하도록 수정합니다. "scripts": { "serve": "vue-cli.. 2023. 5. 4.
Vue todolist 만들기 - 1. 환경세팅 Vue.js를 이용해 백엔드/로그인 연동까지 가능한 Todolist를 만들도록 하겠습니다. 폴더구조는 아래와 같이 하나의 프로젝트 폴더에 backend와 frontend를 모아놓고 시작하겠습니다. TODO_APP - express_back - vue_front 2023. 5. 4.
프론트엔드 프레임워크 비교 (Angular / React / Vue / Svelte) 프론트엔드 프레임워크 하면 Angular / React / Vue 그리고 최근 부각되고 있는 Svelte가 있는데요. 전문 개발자는 아니지만 조금은 손대본 경험을 토대로(Angular제외..) 특성을 알아보도록 하겠습니다. Stackoverflow Ranking에서 여러 프로그래밍 언어 및 프레임워크에 대한 점유율, 선호도 등 자세한 정보는 확인하실 수 있습니다. 해당 정보에 따르면 웹 프레임워크의 점유율은 아래 그래프와 같습니다. 이 중에 프론트엔드 프레임워크만 보면 React가 제일 상단에 있고, jQuery, Angular, Vue 그리고 한참 아래쪽에 Svelte가 있네요 역시 Stackoverflow Ranking에 따르면 이번엔 Svelte가 제일 위에 있고, 그다음 React,.. 2022. 11. 1.
반응형