개발자가 되고 싶은 새

내가 보려고 정리해본 Next.js App Router를 볼 때 알아두면 좋은 기본 개념

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 내부 진..

처음 프로젝트를 파악하는 과정! 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 )- 데이터 유효성 검사- 옵셔널 체이닝- 로딩 상태 관리- 기본값 설정

안녕하세요!  https://h2s0.tistory.com/103 리액트 차트 라이브러리 react-chartjs-2 Line Chart 설치, 여러 줄 (데이터 여러개) 라인차트 구현하기,오늘은 리액트 차트 라이브러리인 chartjs 를 사용해보겠습니다.! 사실 한 두번 정도 제 기준 꽤나 복잡한 걸 적용시켜보았는데찾을 때마다 정보가 많이 없어서 힘들었어요 ㅠㅠ 그리고 또 쓸 일h2s0.tistory.com 1편에서는 아래 중 data prop 에 대해서 알아보았는데요 이번 포스팅에서는 options 를 설정하여 아래 왼쪽의 이미지를 오른쪽의 이미지처럼 좀 더 디자인이 예쁘고 가독성이 좋게 바꿔보겠습니다!!! 레츠고!저희가 알아볼 옵션은 plugins 와 scales 입니다! 그 외에도 animatio..

오늘은 리액트 차트 라이브러리인 chartjs 를 사용해보겠습니다.! 사실 한 두번 정도 제 기준 꽤나 복잡한 걸 적용시켜보았는데찾을 때마다 정보가 많이 없어서 힘들었어요 ㅠㅠ 그리고 또 쓸 일이 있어서 코드 작성하려니까 정말 기억이 리셋되어서.... 기록해보려고 합니다!!!  https://www.chartjs.org/docs/latest/getting-started/installation.html Installation | Chart.jsInstallation npm (opens new window) (opens new window) CDN CDNJS (opens new window) Chart.js built files are available on CDNJS (opens new window): h..

react-spinners 를 사용하여 로딩 중인 상태를 개발하며 지피티랑 씨름하다가 생긴 궁금증.! useEffect 안에서 setLoading(true) 는 try 문 안에서 사용해야 할까? 밖에서 사용해야 할까?차이점이 무엇일까 🔽 try 문 안에서 사용하는 경우 🔽const [data, setData] = useState('');const [loading, setLoading] = useState(true);useEffect(() => { const fetchData = async () => { try { setLoading(true); const dataResponse = await api.get('/data'); setData(dataResponse.da..