Electron을 구동하는 방법에서 Electron Forge를 사용해서 기존보다 쉽게 만들 수 있어요. Electron 사이트에는 Docs, API 위주로 찾아볼 때 많이 들어가고 Electron Forge에는 프로젝트 구성을 하기 위해 들어가요. 두 사이트 모두 디버깅을 위한 설정을 어떻게 하는지 알려주고 있어요. 저는 VS Code를 사용하고 있어서 이 프로그램에서 실행시키면서 디버깅을 할 수 있는 방법을 찾고 있었어요. Electron - Debugging in VSCode Electron Forge - Debugging with VS Code 두 사이트에 나온 예제 중 두개 다 하라는대로 하고 실행시켰을 때 브레이크포인트가 빨갛게 나오지 않고 회색깔로 나오면서 브레이크포인트에 잡히지 않았어요. 🥲 잘되지 않아서 Vite 환경을 추가했기 때문에 안되는 것 같아서 구글에 electron forge vite debug 라는 키워드로 검색했고 이를 통해 답을 찾을 수 있었어요. 제가 찾은 링크에서 유용했던 건 Vite template - code editor debugger can't hit breakpoints 라는 깃허브 이슈였어요. 여기서 알려준대로 설정하면 다음과 같아요. vite.main.config.ts와 launch.json에서 각각 한줄씩 추가해야 해요. // vite.main.config.ts export default defineConfig((env) => { // ...생략 const config: UserConfig = { // ...생략 build: { // ...생략 // 이 부분을 추가해주세요! sourcemap: forgeEnv.command == 'serve' ? true : false, } } } sourcemap을 launch.json에도 추가하면 돼요. { "configurations": [ { "type": "node", "request": "launch", "name": "Electron Main", "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.sh", "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.cmd" }, // runtimeArgs will be passed directly to your Electron application "runtimeArgs": [ "--sourcemap" // 이 부분을 추가해주세요! ], "cwd": "${workspaceFolder}", "console": "integratedTerminal" } ] } 이렇게 설정하시고 난 뒤에 디버깅 모드로 실행시키시면 브레이크포인트에 잡히실 거에요! 그럼 Electron Forge + Vite + React 환경에서도 편하게 디버깅하면서 개발할 수 있습니다! Success is not the key to happiness. Happiness is the key to success. If you love what you are doing, you will be successful.— Albert Schweitzer

블로그에 remark와 rehype 플러그인 추가해서 그에 맞게 개발을 끝낸 뒤, 블로그에 붙인 구글 GA를 봤는데 거의 저만 들어온 것 같았어요(방문자수 1-2명 🥲). 그래서 SEO를 통해 노출될 수 있도록 Next.js가 제공하는 방식을 추가했어요. sitemap 생성하기# NEXT.js - sitemap.xml에 설명된 것 중 Generating a sitemap using code (.js, .ts) 를 통해 만들었어요. 맨 처음에는 Generating multiple sitemaps도 적용했는데 상세 페이지를 갖는 posts, books 메뉴에 sitemap.ts를 만들었으나 제대로 되지 않더라구요. 그래서 방법을 찾다가. app/sitemap.ts 파일을 변경했어요. import { allBooks, allPosts } from "@/.contentlayer/generated"; import { BASE_URL } from "@/app/lib/definitions"; import { MetadataRoute } from "next"; export default function sitemap(): MetadataRoute.Sitemap { return [ { url: `${BASE_URL}/`, lastModified: new Date(), changeFrequency: "yearly", priority: 1, }, { url: `${BASE_URL}/about`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.8, }, { url: `${BASE_URL}/tags`, lastModified: new Date(), changeFrequency: "weekly", priority: 0.5, }, { url: `${BASE_URL}/get912000won`, lastModified: new Date(), }, ...allPosts.map((post) => ({ url: `${BASE_URL}/posts/${post.slug}`, lastModified: post.date, })), ...allBooks.map((book) => ({ url: `${BASE_URL}/books/${book.slug}`, lastModified: book.start_read_date === book.finish_read_date ? book.start_read_date : book.finish_read_date, })), ]; } 저는 contentlayer를 사용하고 있어서 이미 마크다운으로 작성한 게시글들에 대한 정보를 담은 객체들이 있어요. 그래서 편하게 allPosts와 allBooks를 불러와서 글을 데이터를 추가할 수 있었어요. robots 생성하기# NEXT.js - robots.txt에 설명된 것 중 Generate a Robots file를 사용했어요. sitemap 설정할 때보다 더 쉬워요. app/robots.ts 파일에 아래와 같이 만들었어요. import { MetadataRoute } from "next"; export default function robots(): MetadataRoute.Robots { return { rules: { userAgent: "*", allow: "/", }, sitemap: "https://get6.github.io/sitemap.xml", }; } 검색엔진 사이트에 등록하기# AI 답변을 통해 알게된 건 이렇게 만들면 끝나는 게 아니라 이제 크롤링될 수 있도록 검색엔진 사이트에 추가해야 한다고 하더라구요. 그래서 여러 검색엔진 사이트에 직접 등록해야해요. 자동으로 수많은 검색엔진에 등록해주는 서비스가 있는 것 같으나 제대로 해주는 지 테스트해보지 않았어요. 그래도 인터넷상에서 유명한 사이트에 추가할 수 있는 링크를 아래에 제공할게요! 구글 - Google Search Console 네이버 - Search Advisor 빙 - Webmasters Tools 바이두 - 百度站长工具 얀덱스 - Webmaster 저는 일단 구글과 네이버만 추가했어요. 모든 사이트들은 로그인 후 진행하는 걸 기본으로 하고 있어요. 원하는 사이트가 있다면 회원가입을 하시고 진행해주세요! 저는 구글과 네이버 모두 HTML 태그를 추가하는 형식을 골랐어요. HTML 파일을 업로드하는 방식은 NGINX 같은 웹 서버용에 해당한다고 생각돼요. 일반적이라면 태그를 header 태그 사이에 추가하면 되지만 저는 Next.js를 사용하고 있어서 따로 설정해줘야 했어요. export const metadata: Metadata = { // ...다른 설정들은 생략 verification: { google: "복사하라고 알려준 태그에서 content 부분", other: { // 복사하라고 알려준 태그에서 name 부분을 왼쪽에 적어주세요. 'naver-site-verification': "복사하라고 알려준 태그에서 content 부분", }, }, }; 호스팅되는 곳에 태그들이 올라간 뒤, 소유자 확인 버튼을 눌러주시면 완료돼요! 이후 각 사이트에서 제공하는 웹마스터 도구를 보면서 수집되는 데이터로 어떤 글이 인기가 많은지 보셔도 좋을거에요. God gave us the gift of life; it is up to us to give ourselves the gift of living well.— Voltaire

유럽여행 중에 서울과기대에서 예비창업패키지 서류 합격 메일을 받았었다. 메일 내용 중에선 26일 15시까지 사업계획서 PDF와 청구서류를 제출하라는 안내와 발표장소를 알려주는 내용이 있었다. 4월 2일(화)에 상상관 52홀에서 발표를 했다. 내가 첫번째 발표자였다. 그 이유는 나는 서류 제출을 마감일보다 2-3일 일찍 제출했었는데 나보다 빨리 낸 사람 중에선 합격자가 없었고 과제번호 순으로 순서가 정해져서 내가 과기대에서 첫번째로 발표하게되었다(첫번째로 발표하는게 비교군이 없어서 좋은지 안좋은지는 모르겠다. 떨어진 마당이라 안좋은 것 같다). 서울과기대에서는 발표시간이 15~20분 내외로 질의응답은 10분 내외로 안내를 받았지만, 막상 발표를 할때는 심사위원 중에 한분이 15분이 지났으니 발표를 멈추고 질의응답으로 넘어가라는 안내를 주셨다. 과기대 안내와는 달라서 당황했지만 따지면 불이익이 있을 것 같아 질의응답으로 넘어갔다. 질의응답은 충분히 준비하지 못했었다. 내가 준비한 건 18분 정도의 발표내용을 며칠동안 외우느라 매출이나 시장진입 같은 2-3개의 질문만 준비했었다. 질의응답에서는 생각치 못한 질문들이 많이 나왔다. 대기업 대비 경쟁력, AI 알고리즘, 아이템 기능에 대한 소개 등 여러 질문이 있었지만 다 기억나진 않고 대답도 어떻게 했는지 기억나지 않는다. 중간에 한 질문에 대해서는 답변을 하다 5초동안 말을 못하고 말문이 막혔었다. 그래도 좋은 심사위원분들도 계셔서 시간내에 발표 못한 부분도 말할 수 있도록 신경써주셔서 기분 좋게 마무리했었다. 그렇게 자책을 하며 불안과 기대로 일주일을 보냈다. 그동안 밀린 것들도 하고 충분히 쉬기도 했다. 그렇게 오지 않을 것 같던 4월 9일이 왔다. 4월 9일(화)날 결과 메일을 준다는 안내만 받아서 몇시에 오는지 알 수 없었다. 42서울에서 몇명이 예창을 지원해서 개포 클러스터에서 몇명을 만나 서로 사업아이템을 얘기하며 발표는 어떻게 했는지, 질문은 어땠는지 대화를 나눴다. 그러다가 혹시나 붙으면 스프린트를 팀원들과 진행해야 하기 때문에 스크럼 가이드를 정리하고 있었다. 오매불망 기다리다가 문자로 메일이 왔다는 사실을 알았다. 기대반 걱정반 떨리는 마음으로 메일을 들어가봤는데 아래와 같은 문구가 나를 반겼다. 금번 중소벤처기업부의 2024년 예비창업패키지(일반분야) 에 신청해 주셔서 감사드리며, 귀하는 서울과학기술대학교에서 진행한 선정(발표)평가 결과, 아쉽게도 선정되지 않았음을 안내드립니다. 처음엔 슬프지도 않았다. 어느정도는 예상을 해서 그랬을까? 차분한 마음으로 연락을 돌렸다. 결과를 같이 기다려주시는 분들과 도움주신 분들에게 예창에 떨어졌다고 알려드렸다. 나는 2명 중 1명에서 제쳐지는 쪽이었다. 슬프지만 이 결과를 바꿀 수 없었다. 왜 한국은 창업을 하고 싶어하는 사람들을 도와주면서도 이런 정부지원사업이 있어서 창업을 못하게 만드는 시스템이 있을까 하는 생각이 먼저 들었다. 선택을 받은 자들만이 나아가도록 만들어진 세상이라는 느낌이 이때 확 들었다. 물론 이 생각이 정답이 아니길 바란다. 여러가지 생각이 들었고 나는 다시 취업전선에 뛰어들어야 했다. 더이상 창업에 돈을 쓰고 시간을 쓸 수 있는 상태가 아니게 되었다. 직장을 다니면서 돈을 벌어야 한다. 곧바로 원티드와 점핏에서 선호하는 회사와 직무를 저장하며 다시 기회가 생기길 기다린다. 마치 게임 Scorn의 결말처럼 꿈도 희망도 없는 느낌이지만 말이다. Some people are born on third base and go through life thinking they hit a triple.— Barry Switzer