개발자가 되고 싶은 새

안녕하세요, 히새입니다!오늘은 깃허브 액션을 사용해보려고 해요 제가 관리하는 사이트에 간헐적으로 기사를 업데이트 해줘야해서,코드에다가 명령어도 만들어두긴 했거든요..?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 설정..

안녕하세요 오랜만입니다. AI에게 대체될 고비를 넘?기고? 있는 청년으로써 블로그 포스팅이 뜸했죠 작업하다가 굉장한 잼컨인 것 같아 묵혀두었던 티스토리를 다시 열어보게 되었습니다. 개인적으로 혼자서도 해보고 싶은 거였는데 어쩌다가 회사일로? 하게 된 ?(누가하라하지는 않음 근데 좀 내가 해보고 싶은거랑 겹치는거 같길래 걍 업무시간에 하는중ㅋㅋ) n8n 으로 인스타그램 컨텐츠 자동화하기 !!! 뭐... 이거 다 해놓고 작성하는 포스팅이 아니라 저도 방법 찾아가면서 작성하는 포스팅이라따라한다고 하셔도 인스타 자동화까지... 하실 수 있을지는 장담못해여 일단 아래 과정을 참고하시어 Docker 에 n8n 을 설치하고 실행시켜주세요! n8n이란 무엇인가? n8n 로컬 실행 방법자동화 팬 여러분! Zapier..

data.map 오류뜰 때에 의외로 여러 가지 상황들이 생기는 것을 발견하고 작성해본다.개발하면서 수첩에 적어놨던 것들이라 이거보다 더 있었는데.. 추후에 에러를 만나거나 찾게 되면 수정하겠다일단은 종이 넘기기 전에 작성해두기! 🎈데이터 형식 확인하기🎈값이 없을 때 렌더링 확인 ( null, undefined )- 데이터 유효성 검사- 옵셔널 체이닝- 로딩 상태 관리- 기본값 설정