개발자가 되고 싶은 새

내 티스토리는 검색되고 있을까? SEO 설정 시작해보기

안녕하세요, 히새입니다!이번 포스팅에서는 티스토리 블로그에 SEO를 설정해 본 과정을 정리해 보려고 합니다. 최근 포스팅했던 동네 치과의 AI 활용 사례를 보면서, 기술을 활용하는 방법이 생각보다 훨씬 다양하다는 걸 느꼈는데요.그러다 SEO와 GEO라는 개념에도 관심이 생겼습니다. 생각해 보니 그동안 블로그에 글만 작성했지,정작 내 글이 검색엔진에서 어떻게 발견되고 노출되는지는 한 번도 신경 써본 적이 없더라구요..? 그래서 이번 기회에 SEO부터 하나씩 설정해 보기로 했습니다!현재 티스토리의 SEO 설정 확인하기티스토리 관리자 - 꾸미기 - 스킨 편집 - HTMl 편집에 들어가 현재 설정을 확인해보았다.✅ 제목 (title) 설정✅ 모바일 화면 설정과 RSS 링크🔎 스킨 HTML에 meta descr..

대AI딸깍시대, 만드는 것보다 중요한 것은 어쩌면 발견하는 능력아닐까?

안녕하세요, 히새입니다!그동안은 코딩테스트 간단풀이나... 알게 되는 정보들을 정리하는 종류의 포스팅을 해왔는데요 대 딸깍 시대에 쏟아지는 서비스들을 보며 생각이 참 많이 들더라구요읽어주실 분이 없을지도 모르지만 이런 생각을 공유해보고자 오늘의 포스팅을 작성합니다. 올해 8월, "그늘로" 라는 서비스가 굉장히 화제였는데 올해 여름, 유난히 햇빛이 따가웠던걸로 기억합니다. 잠깐이라도 걸을 일이 있으면 열심히 나무 아래로 숨어서 걷고, 신호등도 멀찍이서 기다리고,이 정도 따가움이면 남자도 양산을 써도 괜찮은 것 같다,,는 회사 사람들의 말들을 들으며나무를 찾아다녔죠 그래서 그런지 이 서비스가 굉장히 인상 깊었습니다 실생활에서 내가, 높은 가능성으로 모두가 해결 할 생각조차 안해본 문제를 서비스화하다니!!!굉..

안녕하세요, 히새입니다!오늘은 깃허브 액션을 사용해보려고 해요 제가 관리하는 사이트에 간헐적으로 기사를 업데이트 해줘야해서,코드에다가 명령어도 만들어두긴 했거든요..?pnpm article:add "기사 링크" --pr// 기사 그대로 추출 -> 이미지 다운로드 해서 파일 생성 -> 커밋 -> 푸시 -> pr 생성이런 코드에 이런 일을 해주는 그런... 이미 ! 반자동화가 된 상태였어요 그 런 데..!아니 IDE 들어가서 저 명령어 치는게 귀찮으면 어떡하죠?(IDE 없이 터미널에서도 실행할 수 있지만, 어쨌든 열어야하니까!!!) 뭘 어떡해.. 안들어가게 만들어야지 그래서 시작해본, 깃허브 액션으로 자동화하기!!! 기존 CLIL 명령어는 옵션 없이 실행하면 기사와 이미지만 생성, --push 와 --pr ..

안녕하세요! 최근에 ai slop 정리하면서 css cascade 에 대해 알아보는 글을 작성했는데요, AI Slop 정리 - !important 남발을 줄위기 위한 CSS Cascade와 Cascade Layer오늘은 ai slop - !important 남발을 제거 중 공부하게 된 CSS Cascade 에 대한 포스팅입니다CSS Cascade 란?하나의 html 요소에 여러 css 규칙이 같은 속성을 지정하면 cascade 규칙에 따라 최종 스타일을 결정한h2s0.tistory.com 최근에 ai 를 활용하여서 제 아이디어들을 개발하고 있어요그러던 중 가장 작은 프로젝트들부터 코드를 좀 봐야겠다는 생각이 들어서https://quit.heeso.site/ 이거 코드를 조금 보고 있답니다,,! 임의의 ..

오늘은 ai slop - !important 남발을 제거 중 공부하게 된 CSS Cascade 에 대한 포스팅입니다CSS Cascade 란?하나의 html 요소에 여러 css 규칙이 같은 속성을 지정하면 cascade 규칙에 따라 최종 스타일을 결정한다.단순히 css 파일의 가장 아래에 있는 선언이 항상 적용되는 것이 아닌, 다음 순서로 우선순위를 판단한다. 1. `!important` 여부와 스타일 출처2. cascade layer 우선순위3. selector specificity4. CSS 작성 순서 Selector Specificity specificity는 selector가 대상을 얼마나 구체적으로 지정하는지를 나타내고, 다음 순서로 강해진다.div /* 요소 */.titl..

Root LayoutNext.js App Router의 최상위 layout.tsx는 과 를 직접 작성한다. {children}lang="ko"는 브라우저, 검색엔진, 스크린리더가 문서의 주 언어를 판단할 때 참고한다.HydrationNext.js는 서버에서 먼저 HTML을 만들어 브라우저에 전달할 수 있다.서버에서 HTML 생성→ 브라우저가 HTML 표시→ React JavaScript 연결→ 클릭, 상태 변경 등의 기능 활성화이 연결 과정을 hydration이라고 한다.React + Vite와 Next.js의 실행 구조 차이일반적인 React + Vite:index.html→ main.tsx→ App.tsx→ React Router→ 현재 페이지Next.js App Router:Next.js 내부 진..

1) 기술 스택과 실행 방법 확인- package.jsonscripts→ dev / build / lint / test 같은 실행·검사 명령dependencies→ Next.js, React, TanStack Query, Supabase 등 사용 기술scripts로 실행, 검사 명령과 dependencies에서 사용 기술을 확인한다. 이 프로젝트가 무엇으로 만들어졌고 어떻게 실행하는가를 파악하는 것 2) src/app 에서 페이지 지도 확인Next.js App Router 에서는 app 디렉터리의 폴더 구조가 URL 구조와 연결된다. src/app/page.tsx → /src/app/products/page.tsx → /productssrc/app/products/new/..

"왜 이 프로젝트에 Next.js 쓰셨어요?" 하면 "SEO 때문에요"까지는 자신 있게 말하는데, "그게 정확히 왜 그런데요?"라고 한 마디만 더 파고들면 말문이 막혔다. 리액트가 SPA고 Next.js가 SSR인 건 아는데, 그 차이가 실제로 뭘 의미하는지는 두루뭉실했던 것 같다.그래서 궁금했던 것들을 하나씩 파봤다. 질문했던 순서 그대로 정리해보았다!Q. SSR이면 로딩이 아예 없는 게 아닐까? 왜 더 빠른 걸까?로딩이 없어지는 게 아니었다. 누가 그 로딩 시간을 기다리느냐가 다른 것이었다.React (SPA): 브라우저가 거의 빈 HTML을 받는다 → JS를 다운로드한다 → JS가 실행되면서 화면을 그린다. 이 과정을 전부 사용자 브라우저 앞에서 한다.Next.js (SSR): 서버가 데이터를 fe..

안녕하세요~오늘은 lighthouse 로 nextjs 페이지의 성능 개선한 과정을 포스팅해보겠습니다! 저희 회사 홈페이지에 제품들이 늘어나서,새로운 페이지들을 추가하게 되었는데요. 간헐적으로 이미지가 늦게 보이는 현상을 발견했어요 제가 기획과 개발을 맡게 되어서 페이지들에 애정이 생기다보니,,,ㅎㅎ체감만으로 판단하지 않기 위해 Lighthouse CLI 로 측정 환경을 고정하고 병목을 하나씩 제거해보았습니다.먼저 배포된 페이지에서 Chrom DevTools 의 Lighthouse 를 측정하였습니다.여기에 나온 수치로 보면 큰 문제가 없어보이는데,초기 진입 과정에서 약 11MB 의 리소스가 전송되고 있었다.이 수치가 곧바로 성능 저하를 말하는 것은 아니지만, 첫 화면에 필요하지 않은 영상과 이미지까지즉시 ..

Node.js 는 JS 파일을 두 가지 방식으로 해석할 수 있다. - CommonJS(CJS) : require() / module.exports 쓰는 옛날 방식- ES Module (ESM): import / export 쓰는 표준 방식 { "type": "module" }이라는 설정이 있으면 .js 는 ES Module 로 해석된다import path from 'node:path';export default config;type이 없거나 "commonjs"라면 .js는 CommonJS로 해석된다 이게 프로젝트 전체 설정이라서, 한 프로젝트 안에서 CJS 파일과 ESM 파일을 섞어 쓰기가 애매해진다는 문제점이 있다 그래서 나온 해결책이 `.cjs` / `.mjs`pakcage.json 의 type 설정..