[Next.js] getStaticProps vs getServerSideProps 완벽 비교
·
프로그래밍/Next.js
[Next.js] getStaticProps vs getServerSideProps 완벽 비교Next.js는 페이지 단위로 데이터 패칭 전략을 선택할 수 있습니다.그중 가장 자주 쓰이는 함수는 getStaticProps와 getServerSideProps입니다.이번 글에서는 두 함수의 차이점과 선택 기준을 예제와 함께 정리해봅니다.✅ 1. getStaticProps - 정적 생성 (SSG)getStaticProps는 빌드 타임에 데이터를 가져와 정적 HTML을 생성합니다.한 번 빌드하면 그 내용은 CDN에 배포되며, 모든 유저가 동일한 HTML을 받습니다.export async function getStaticProps() { const data = await fetchData(); // API 호출 ..
[Next.js] 라우팅 완전 정복 정적/동적 페이지부터 Link까지
·
프로그래밍/Next.js
[Next.js] 라우팅 완전 정복 – 정적/동적 페이지부터 Link까지Next.js는 파일 기반 라우팅을 제공합니다.pages 폴더 안에 파일을 만들기만 해도 자동으로 URL이 생성되며, 정적, 동적, 중첩 라우팅까지 모두 처리할 수 있습니다.이번 글에서는 Next.js 라우팅 시스템의 기본 개념과 실전 사용법을 정리합니다.✅ 1. 정적 라우팅pages/about.tsx 파일을 만들면 /about 경로가 자동 생성됩니다.파일 구조 = URL 구조라는 점이 Next.js의 핵심입니다.// pages/about.tsxexport default function About() { return About Page;}위 파일을 만들면 브라우저에서 /about 경로로 접근 가능합니다.✅ 2. 중첩 라우팅폴더를 이..
[Next.js] 왜 써야 할까? – SSR, SSG, SEO에 강한 리액트 프레임워크
·
프로그래밍/Next.js
[Next.js] 왜 써야 할까? – SSR, SSG, SEO에 강한 리액트 프레임워크React 기반 프로젝트를 시작할 때 Next.js를 고려해본 적 있나요?Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), SEO 최적화 기능을 갖춘 프레임워크로, 퍼포먼스와 사용자 경험을 동시에 잡을 수 있는 강력한 도구입니다.이번 글에서는 실무에서 Next.js를 도입해야 하는 이유를 기능별로 정리해봅니다.✅ 1. SSR – 서버 사이드 렌더링의 이점Next.js는 페이지 요청 시 서버에서 HTML을 생성해주는 SSR 기능을 기본 지원합니다.이 방식은 첫 페이지 로딩 속도를 빠르게 하고, 검색 엔진이 내용을 바로 인식할 수 있어 SEO에 유리합니다. 빠른 Time-to-First-Byte ..
[Python] pandas로 CSV, JSON, Excel 완전 정복 – 파일 불러오기부터 저장까지 실전 예제
·
프로그래밍/Python
[Python] pandas로 CSV, JSON, Excel 완전 정복 – 파일 불러오기부터 저장까지 실전 예제파이썬으로 데이터 분석을 시작한다면 CSV, JSON, Excel 파일을 다루는 법은 필수입니다.이 글에서는 pandas 라이브러리를 활용해 세 가지 주요 파일 형식을 불러오고 가공한 뒤 저장하는 방법을 실제 코드와 함께 소개합니다.업무 자동화나 데이터 전처리에 필요한 기본기를 정리해봤습니다.✅ 1. pandas로 다양한 파일 불러오기import pandas as pd# CSV 불러오기df_csv = pd.read_csv("data.csv")# JSON 불러오기df_json = pd.read_json("data.json")# Excel 불러오기 (sheet 지정 가능)df_excel = pd.r..