본문 바로가기

Programming321

개츠비(Gatsby) 구글 서치콘솔 등록 (Google Search Console) [ 목차 ]구글 서치콘설에 등록하기 위해서는 3단계를 거쳐야 합니다. 1. sitemap.xml 2. robots.txt3. Google Search Console 등록 1. Sitemap.xml 생성가장 먼저 sitemap.xml을 생성합니다. 생성 방법은 플러그인 추가로 쉽게 진행할 수 있습니다. gatsby-plugin-sitemap, gatsby-plugin-advanced-sitemap 플러그인을 추가해줍니다.npm i gatsby-plugin-sitemap// gatsby가 버전 5로 올라가면서 아래의 플러그인은 아직 설치가 안되고 있습니다.npm i gatsby-plugin-advanced-sitemapgatsby-config.js 에 플러그인을 추가해줍니다.module.exports = {.. 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.
C#(Winform) XML파일 읽기 프로그램 만들기 [ 목차 ] 오랫만에 간단히 PC에서 XML파일의 텍스트를 읽어올 일이 있어서, 간단히 닷넷 winform으로 만들어봤습니다. winform은 정말 오랫만이라, 또 잊어버리기 전에 기록으로 남깁니다. 해당 프로그램은 닷넷6.0, VSCode에서 만들어졌습니다. 1. 닷넷 Winform 시작 적당한 이름의 프로젝트 폴더를 만들고, 아래의 명령어어로 winform 프로젝트를 생성합니다. dotnet new winforms // 끝에 s가 들어감을 확인 2. Form1.Designer.cs 으로 요소 추가하기 우선 필요한 버튼, 파일경로를 나타내는 textbox, 그리고 추출 결과물을 표현할 textbox를 추가합니다. namespace wf01_xml; partial class Form1 { /// /// .. 2023. 7. 27.
개츠비(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.
파이썬 정적 사이트 생성기(SSG) 펠리칸 (Pelican) 시작하기 파이썬하면 요즘 ML/DL, 데이터분석 등으로 엄청난 인기를 끌고 있는데요. 웹프로그래밍에서도 매우 많은 인기가 있습니다. 우리나라에서는 점유율이 많이 못미치지만, 해외에서 Django, FastAPI등은 매우 좋은 반응을 보이고 있습니다. 오늘 소개할 도구는 Django나 FastAPI와 같은 서버도구는 아닌, 파이썬으로 만들어진 정적사이트 생성기 펠리칸(Pelican)입니다. 1. 설치 우선 일반적인 파이썬 프로젝트 시작방법과 마찬가지로 가상환경을 만들어줍니다. (pycharm을 활용하면 쉽게 가상환경이 만들어집니다. VSCode로 진행하면 조금 까다로우니, 다른 포스팅을 참고하세요). 가상환경이 만들어지면 아래의 pip install ~ 로 pelican을 설치합니다. pip install peli.. 2023. 7. 25.
자바스크립트 정적사이트 생성기 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.

티스토리툴바