본문 바로가기
반응형

Programming/Javascript31

개츠비(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.
자바스크립트 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.
프론트엔드 프레임워크 비교 (Angular / React / Vue / Svelte) 프론트엔드 프레임워크 하면 Angular / React / Vue 그리고 최근 부각되고 있는 Svelte가 있는데요. 전문 개발자는 아니지만 조금은 손대본 경험을 토대로(Angular제외..) 특성을 알아보도록 하겠습니다. Stackoverflow Ranking에서 여러 프로그래밍 언어 및 프레임워크에 대한 점유율, 선호도 등 자세한 정보는 확인하실 수 있습니다. 해당 정보에 따르면 웹 프레임워크의 점유율은 아래 그래프와 같습니다. 이 중에 프론트엔드 프레임워크만 보면 React가 제일 상단에 있고, jQuery, Angular, Vue 그리고 한참 아래쪽에 Svelte가 있네요 역시 Stackoverflow Ranking에 따르면 이번엔 Svelte가 제일 위에 있고, 그다음 React,.. 2022. 11. 1.
Javascript 주요 팁 1. 조건이 필요할 때 => 3항 연산자 score > 5 ? 'Good': 'Bad'; // 조건이 true이면 'Good', false이면 'Bad' 2. 조건이 필요할 때 => nullish coalescing const message = text ?? 'Nothing to display'; //text가 있으면 text, 없으면(null, undefined) 'Nothing to display' //함수 default parameter : null 인 경우에는 null을 출력 function printMessage(text = 'Nothing to display'){ console.log(text); } // Logical Or || leftExpr ?? right Expr // falsy(nul.. 2021. 8. 7.
Gatsby 시작하기 (with Typescript) 0. Gatsby-cli 설치 npm install -g gatsby-cli 1. Gatsby 프로젝트 생성 gatsby new [프로젝트명] or npx gatsby-cli new [프로젝트명]// gatsby-cli설치 없이 수행할 때 yarn remove gatsby-plugin-manifest gatsby-plugin-gatsby-cloud // 필요없는 라이브러리 삭제 2. 타입스크립트 설치 yarn add typescript --dev yarn add gatsby-plugin-typescript 3. gatsby-config.js 파일 수정 module.exports = { siteMetadata: { title: `Gatsby Default Starter`, description: `Kick.. 2021. 7. 4.
Color Palette - palette.js palette.js : gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow, ornage 일부는 적어놓고 붙여써야겠습니다. const palette = { gray: [ '#f8f9fa', '#f1f3f5', '#e9ecef', '#dee2e6', '#ced4da', '#adb5bd', '#868e96', '#495057', '#343a40', '#212529', ], cyan: [ '#e3fafc', '#c5f6fa', '#99e9f2', '#66d9e8', '#3bc9db', '#22b8cf', '#15aabf', '#1098ad', '#0c8599', '#0b7285', ], }; export default pa.. 2021. 6. 21.
Netlify Serverless function 작성 보안을 위해 API Key가 노출되지 않도록 API 요청 부분을 서버리스 함수로 작성하도록 하겠습니다. 추가로 API Key는 환경변수로 등록하여 Github 등으로 올릴 때 노출되는 것을 막기위해 추가적으로 보안설정을 하겠습니다. 1.netlify-cli 설치 npm i -D netlify-cli 2.netlify.toml # Netlify Dev # https://cli.netlify.com/netlify-dev/#netlifytoml-dev-block # 제품 모드 [build] command = "npm run build" functions = "functions" # Netlify 서버리스 함수가 작성된 디렉토리를 지정합니다. publish = "build" # 프로젝트 빌드 결과의 디렉토리를 .. 2021. 6. 17.
헤로쿠 백엔드, Netlify 프론트엔드 배포 1. 백엔드 헤로쿠에 백엔드를 배포할 경우 CORS(Cross Origin Resource Sharing) 문제를 해결하기 위해 라이브러리를 설치해야 합니다. Koa로 작업할 경우 'koa2-cors' 를 설치해주면 됩니다. 그리고 라우팅 설정 부분에서 아래의 구문을 추가해줍니다. import cors from 'koa2-cors'; app.use(cors()); 2. 프론트엔드 Github의 소스를 자동으로 배포해주는 Netlify의 경우에도 일부 수정할 부분이 필요합니다. Local에서 작업할 경우에는 같은 localhost에서 데이터를 주고 받아서 몰랐었는데, 이제 헤로쿠의 백엔드 데이터를 받아와야 하기 때문에 조금 달라져야 합니다. 그래서 필요한 것이 _redirects파일 입니다. /public.. 2021. 6. 15.
Svelte / Snowpack template 프로젝트 만들기 1. 프로젝트 생성 npm init -y 2. 관련 package 설치 npm i -D snowpack svelte @snowpack/plugin-svelte ( 템플릿 구성용 ) npm i -D @snowpack/plugin-optimize ( html, js 난독화 및 최적화 ) npm i -D @snowpack/plugin-babel ( 바벨 ) npm i -D @snowpack/plugin-sass ( sass ) npm i -D bootstrap@next ( 부트스트랩 ) Svelt for VS Code 패키지 설치 ( 코드 하이라이트 ) 3. package.json 파일 script 추가 "scripts": { "dev": "snowpack dev", "build": "snowpack buil.. 2021. 5. 20.
Webpack template 프로젝트 만들기 1. 프로젝트 생성 npm init -y 2. 관련 플러그인 설치 npm i -D webpack webpack-cli webpack-dev-server@next npm i -D html-webpack-plugin ( html을 포함하여 build할 수 있도록 도와주는 플러그인 ) npm i -D copy-webpack-plugin ( static 폴더에 있는 이미지 파일을 인식시킬 수 있는 플러그인 ) npm i -D css-loader style-loader ( css 파일을 main.js 에서 인식시켜주는 파일 ) npm i -D sass-loader sass ( sass 파일 읽고, 해석해주는 플러그인 ) npm i -D postcss autoprefixer postcss-loader ( 스타일 후.. 2021. 5. 20.
캐러셀 만들기 - with Owl Carousel owl carousel 한 화면에 여러개의 이미지를 나타내며 돌아가는 기능을 합니다. 1. 다운로드 owlcarousel2.github.io/OwlCarousel2에서 압축 파일을 다운로드 합니다. 필요한 파일은 dist\assets폴더 내부의 css파일과 src\js폴더에 있는 js 파일입니다. 그리고 jquery파일도 필요하니 다운받아놓습니다. Home | Owl Carousel | 2.3.4 Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your need.. 2021. 2. 24.
캐러셀 만들기 - with bxSlider 1. bxSlider 프러그인 다운로드 bxslider.com에서 다운로드에서 다운로드 가능합니다. 링크로 연결하는 방법이 기본으로 나와있는데, The other ways에 직접 다운로드하여 사용할 수 있도록 다운로드 경로도 제공합니다. 그리고 jquery도 필요하니, 다운받아놓습니다. jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com 2. 복사하기 압축을 풀면 dist 폴더 안에 있는 css파일과 js파일을 원하는 폴더로 옮겨서 사용합니다. 주의할 점은 images 폴더를 css 파일들을 옮겨놓은 폴더에 함께 복사해 놓아야 한다는 점입니다. 이 이미지는 스타일시트에서 사용하는 이미지들입니다. 3.. 2021. 2. 24.
무료 간트 차트 라이브러리 Gantt chart library ourcodeworld.com/articles/read/434/top-5-best-free-jquery-and-javascript-dynamic-gantt-charts-for-web-applications 2020. 12. 2.
Node강좌 - 미들웨어 1. 미들웨어미들웨어는 http요청과 routing 사이에 들어가는 작업입니다.예)var express = require('express'); var app = express(); var user = require('./routes/user'); // 미들웨어 작성 var myLogger = function (req, res, next) { console.log(req.url); next(); }; // 미들웨어 사용 app.use(myLogger); app.get('/', function (req, res) { res.send('Hello World'); }); app.use('/user', user); app.listen(3000, function () { console.log('Example App.. 2020. 8. 9.
Node강좌 - express 설치 / router설정 1. 설치 npm install --save express 2. main.js var express = require('express'); var app = express(); var user = require('./routes/user'); app.get('/', function (req, res) {// 기본 root('/') 는 main.js에서 routing res.send('Hello World'); }); app.use('/user', user); // 나머지 접근은 router(/routes/user)에서 routing app.listen(3000, function () { // 3000 포트로 서버 실행 console.log('Example App is listening on port 30.. 2020. 8. 9.
mongoDB Atlas Test DB 만들기(React 강좌 중에서..) 안녕하세요, 리액트를 한번 배워볼까 해서 동영상을 따라 시도해보고 있는데, 처음 MongoDB 연결하는 부분부터 막히네요. 예전에는 사용자만 생성해도 test Database가 만들어졌던 것 같은데, 최근 방법이 바뀌었나봅니다. 방법은.. 1. clusters->collections 메뉴로 이동하여 create database 를 클릭해줍니다. 2. Database이름: test, Database Collections: devices 으로 생성해줍니다. 3. 그리고 소스를 실행해서 확인합니다. const express = require('express') const app = express() const port = 5000 const mongoose = require('mongoose') mongoos.. 2020. 7. 12.
electron 배포파일 만들기(electron-builder) 1. electron-builder 설치 npm install electron-builder --dev-save 2. package.json파일 수정 "scripts" 부분에 "deploy"를 추가하고, "build" 부분을 추가합니다. { "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron .", "deploy":"electron-builder --windows nsis:ia32" }, "repository": "https://github.com/electron/electron-quic.. 2020. 7. 5.
electron 실행파일 만들기(electron-packager) 1. Electron-packager 설치 npm install electron-packager --save-dev 2. package.json파일 수정 - "scripts" 내부의 "build" 부분을 추가해 줍니다. phonebook이라고 되어있는 부분이 실행앱 이름이 됩니다. { "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron .", "build": "electron-packager . phonebook" }, "repository": "https://github.com/elec.. 2020. 7. 5.
반응형