Showing Posts From

Nextjs

React와 Next.js 중에 뭘 써야 하는데

React와 Next.js 중에 뭘 써야 하는데

React와 Next.js 중에 뭘 써야 하는데 아침부터 막힌다 출근했다. 오늘 새 프로젝트 킥오프. 팀장님이 말했다. "이번 건 Next.js로 갑시다." 어? 우리 지금까지 React 썼잖아. 뭐가 다른데.회의실에서 돌아왔다. 일단 노션 켰다. 'React vs Next.js' 검색했다. 아티클 100개 나온다. 다 읽을 수 없다. ChatGPT한테 물었다. "Next.js가 뭔가요?" 답: "Next.js는 React 프레임워크입니다." ...그래서? 사실 React도 헷갈린다 솔직히 말하면 React도 아직 헷갈린다. useEffect 의존성 배열. 빈 배열이면 한 번만 실행. 값 넣으면 그거 바뀔 때마다 실행. 맞나? 맞긴 한데 실전에서 쓰면 무한 루프 돌아간다. 왜 그런지 모른다. 선배가 "React 기본기부터 다시 보세요" 했다. 알겠다고 했다. 안 봤다. 이제 Next.js를 배워야 한다. React도 모르는데.점심시간. 편의점 갔다. 삼각김밥 2개. 유튜브 켰다. "Next.js 10분 완벽 정리" 10분이 아니다. 30분이다. 거짓말하지 마. 영상 보는데 모르는 단어 나온다. "SSR", "SSG", "ISR". ...뭔데. 선배한테 물어봐야 하는데 오후 3시. 선배 자리 옆 지나갔다. 물어볼까. 아니다. 바빠 보인다. 4시. 다시 지나갔다. "저기... 선배님." "응?" "Next.js랑 React 차이가 뭔가요?" 선배가 웃는다. "아 그거? 간단해." 간단하다는 말 들으면 간단한 적이 없다."Next.js는 React 위에 올라간 프레임워크야. 서버 사이드 렌더링 지원하고." "아..." "라우팅도 파일 기반으로 되고, API 라우트도 만들 수 있어." "네..." "근데 너 React Router 써봤어?" "네. 쓴 것 같은데요." "그거랑 비교하면 이해 빠를 거야." 안 빠르다. 블로그 읽기 시작 자리 돌아왔다. 구글 검색 시작. "React vs Next.js 차이" 첫 번째 글. 영어다. 닫았다. 두 번째 글. 한국어다. 읽는다. "React는 라이브러리, Next.js는 프레임워크입니다." 뭐가 다른데. 라이브러리랑 프레임워크. 또 검색한다. "라이브러리 vs 프레임워크" "라이브러리는 내가 호출, 프레임워크는 나를 호출." ...무슨 소리야. 세 번째 글. 그림 많다. 좋다. "CSR vs SSR" CSR은 Client Side Rendering. 브라우저에서 렌더링. SSR은 Server Side Rendering. 서버에서 렌더링. 그래서 뭐가 좋은데. "SSR은 SEO에 유리합니다." SEO가 뭔데. 또 검색. Search Engine Optimization. 검색 엔진 최적화. 아... 구글 검색 잘 되게 하는 거구나. 그럼 무조건 SSR 써야 하는 거 아냐? 아니래. 경우에 따라 다르래. 어떤 경우에. 예제 코드 보기 유튜브 다시 켰다. "Next.js 시작하기" 따라 한다. npx create-next-app@latest설치 중. 5분 걸린다. 완료. 실행한다. npm run devlocalhost:3000 열린다. 뭔가 나온다. 오... 신기하다. 근데 이게 React랑 뭐가 다른지 모르겠다. 코드 본다. app 폴더 있다. page.tsx 있다. 어? 우리 회사는 pages 폴더 쓰는데. 검색한다. "Next.js app directory vs pages directory" 아. 버전이 다르다. App Router랑 Pages Router. 둘 다 배워야 하나. 머리 아프다. 회의 시간 5시. 회의 시작. 팀장님: "Next.js로 하는 이유는 SEO 때문입니다." 아 그거 아까 봤다. 팀장님: "그리고 Image Optimization도 자동으로 되고요." 이미지 최적화? 그게 뭔데. 선배: "Font도 자동으로 최적화되죠." 다들 고개 끄덕인다. 나도 끄덕인다. 이해 못 했다. 팀장님: "신입님, 이번 프로젝트 메인 페이지 맡아보세요." "네... 네." 끝났다. 자리 돌아왔다. 멘붕이다. 다시 공부 시작 퇴근까지 2시간. 일단 Next.js 공식 문서 켠다. 영어다. 한국어 있나. 있다. 번역 이상하다. 그냥 영어 본다. 번역기 돌린다. "Getting Started" export default function Page() { return <h1>Hello, Next.js!</h1> }이건 React랑 똑같은데. 다음 페이지. "Routing" "Next.js uses file-system based routing." 파일 기반 라우팅. 뭔 소리야. 설명 읽는다. 아... app/about/page.tsx 만들면 /about 경로 생긴다. 오 신기하다. React에선 Router 설정 따로 했는데. <Route path="/about" component={About} />이렇게. Next.js는 그냥 파일 만들면 끝. 이거 하나는 편하네. 실습 시작 노션 닫는다. VSCode 연다. 새 프로젝트 만든다. create-next-app. 이번엔 제대로 본다. TypeScript? Yes. ESLint? Yes. Tailwind CSS? Yes. (쓸 줄 모르는데) App Router? Yes. 설치 완료. 폴더 구조 본다. app/ layout.tsx page.tsx public/ ...layout.tsx 연다. 뭔가 많다. RootLayout. children 받는다. 아... 이게 전체 레이아웃이구나. page.tsx 연다. 메인 페이지. 수정해본다. export default function Home() { return <h1>테스트</h1> }저장. 브라우저 새로고침. "테스트" 나온다. 된다! 기분 좋다. 뭔가 한 것 같다. 라우팅 테스트 폴더 만든다. app/test/page.tsx export default function Test() { return <h1>테스트 페이지</h1> }저장. /test 접속. 된다! 오... 이거 되게 직관적인데? React Router는 설정 파일 따로 만들어야 했는데. 이건 그냥 폴더만 만들면 되네. 좋다. 이해했다. 조금. dynamic route 해본다. app/post/[id]/page.tsx export default function Post({ params }: { params: { id: string } }) { return <h1>Post {params.id}</h1> }/post/1 접속. "Post 1" 나온다. /post/123 접속. "Post 123" 나온다. 오... React Router에선 useParams 썼는데. 여긴 props로 받네. 다르다. 근데 이해 간다. 데이터 fetching 막힘 다음. 데이터 가져오기. 블로그 글 봤다. "Next.js에선 async component 쓴다" 뭔 소리야. 코드 본다. async function getData() { const res = await fetch('https://api.example.com/data') return res.json() }export default async function Page() { const data = await getData() return <div>{data.title}</div> }어? component에 async? React에선 안 됐는데. useEffect에서 fetch 했는데. 혼란스럽다. 검색한다. "Next.js async component" "Server Component에서 가능합니다." Server Component? 또 새로운 개념. Client Component도 있대. "use client" 쓰면 Client Component. 안 쓰면 Server Component. ...뭐가 다른데. Server Component vs Client Component 블로그 3개 읽었다. 정리한다. Server Component:서버에서 실행 useState, useEffect 못 씀 데이터 fetching 편함Client Component:브라우저에서 실행 useState, useEffect 씀 상호작용 필요할 때아... 그러니까. 버튼 클릭, input 입력 → Client Component. 그냥 데이터 보여주기 → Server Component. 이해 간다. 조금. 근데 실전에서 어떻게 나누지. 모르겠다. 일단 넘어간다. 7시 퇴근 퇴근 시간. 가방 챙긴다. 오늘 배운 것:Next.js는 React 위 프레임워크 파일 기반 라우팅 Server Component, Client Component아직 모르는 것:언제 Next.js 쓰고 언제 React 쓰는지 SSR, SSG, ISR 차이 Image, Font 최적화 API Routes Middleware ...많다. 내일 또 배워야지. 집 가는 지하철. 앉았다. 인프런 켰다. "Next.js 완벽 가이드" 10분 듣다가 잤다. 집 도착 11시. 씻고 침대 누웠다. 노션 켠다. "오늘 배운 것" 적는다. 2024.01.15 - Next.js 기본 세팅 - 파일 기반 라우팅 - dynamic route - Server Component 개념내일 할 것:메인 페이지 디자인 보고 컴포넌트 나누기 데이터 fetching 방법 더 찾아보기 선배한테 SSR 물어보기노션 닫는다. 유튜브 켠다. 알고리즘 영상 본다. Next.js 관련 영상 뜬다. "Next.js 13 정복하기" 북마크 했다. 안 본다. 자야지. 근데 걱정된다. 내일 팀장님이 진행 상황 물어보면 뭐라 하지. "레이아웃 잡고 있습니다" 하면 되려나. 일단 자자. 내일 일은 내일. 며칠 뒤 수요일. 프로젝트 3일 차. 메인 페이지 반 완성했다. 아직 데이터 연결 안 했다. 하드코딩이다. 선배가 코드리뷰 남겼다. "여기 Client Component로 할 필요 없어요. Server Component로 바꾸세요." 아... 맞다. 버튼 없는데 "use client" 썼다. 습관적으로 썼다. React 하듯이. 수정한다. 또 리뷰 왔다. "Image 태그는 next/image 쓰세요." 아 그거 있었지. import Image from 'next/image'<Image src="/logo.png" alt="logo" width={200} height={100} />width, height 필수래. 모르고 안 썼다가 에러 났다. 수정 완료. 다시 올린다. 조금씩 이해 중 목요일. 오늘은 API 연결한다. fetch 써서 데이터 가져온다. async function getPosts() { const res = await fetch('https://api.example.com/posts') return res.json() }오... 된다. useEffect 없이 되네. 편하다. loading.tsx 만들었다. 로딩 화면 자동으로 나온다. error.tsx 만들었다. 에러 처리 자동. 신기하다. 이런 것도 되네. React에선 다 직접 만들었는데. 아직도 헷갈림 그래도 아직 모르는 거 많다. 캐싱이 어떻게 되는지. revalidate가 뭔지. generateStaticParams가 뭔지. 선배가 "공식 문서 보세요" 한다. 본다. 어렵다. 예제 코드 복사해서 쓴다. 이해는 나중에. 결론 결론 내린다. React vs Next.js 언제 쓰냐. 아직 모르겠다. 근데 조금은 알겠다.간단한 SPA → React SEO 필요 → Next.js 서버 로직 필요 → Next.js 빠른 프로토타입 → React이 정도? 맞는지 모르겠다. 선배한테 물어봐야지. 내일.어제도 오늘도 내일도, 모르는 건 당연하다. 일단 만든다. 에러 나면 고친다. 그게 배우는 거다.

Next.js vs React, 신입은 둘 다 헷갈린다

Next.js vs React, 신입은 둘 다 헷갈린다

Next.js vs React, 신입은 둘 다 헷갈린다 면접 때 했던 말 "React 할 줄 아세요?" "네, 할 줄 압니다." 거짓말은 아니었다. 부트캠프에서 6개월 동안 React 했다. 컴포넌트 만들고 state 쓰고 props 넘기고. Todo 앱도 만들었다. 영화 검색 앱도 만들었다. 포트폴리오에 당당하게 썼다. 근데 회사 왔더니 Next.js다. "우리 Next.js 쓰는데, React 할 줄 알면 금방이에요." 선배가 웃으며 말했다. 나도 웃었다. 속으로는 'Next.js가 뭐지?' 했다.첫날 코드 열었을 때 /pages /api index.js _app.js _document.js이게 뭐지. 부트캠프에서 본 구조가 아니다. src 폴더는? components 폴더는? App.js는 어디 갔나? 선배가 설명했다. "pages 폴더에 파일 만들면 자동으로 라우팅돼요. /about 만들려면 about.js 만들면 돼요." "아... 네네." React Router 공부한 건 뭐지. useNavigate 쓰라고 했는데. BrowserRouter 감싸라고 했는데. 다 필요 없단다. getServerSideProps가 뭔데 export async function getServerSideProps(context) { const res = await fetch('https://api...') const data = await res.json() return { props: { data } } }선배가 보낸 코드다. "이 함수 안에서 데이터 받아오면 돼요. 서버에서 실행되니까 API 키 노출 안 돼요." 서버에서 실행된다고? 나는 useEffect 안에서 fetch 하는 것만 알았다. 컴포넌트 마운트될 때 데이터 받아오는 거. 그게 React 아닌가? "아 그건 클라이언트 사이드 렌더링이고, 이건 서버 사이드 렌더링이에요." 클라이언트... 서버... 렌더링... 부트캠프에서 들어본 것 같기도 하고.그래서 뭐가 다른데 퇴근하고 검색했다. "Next.js는 React 프레임워크입니다." React가 라이브러리면 Next.js는 프레임워크. 뭔 차이지. 더 검색했다.React: 라우팅 직접 해야 함 (React Router)Next.js: 파일 기반 라우팅React: 클라이언트 사이드 렌더링Next.js: 서버 사이드 렌더링, 정적 생성, 클라이언트 사이드 렌더링 다 됨React: SEO 약함Next.js: SEO 좋음음... 알겠는데 모르겠다. 결국 ChatGPT한테 물었다. "5살 어린이에게 설명하듯이 알려줘." 답변 읽었다. 여전히 모르겠다. 실무에서 느낀 차이 일주일 지났다. 태스크 받았다. "상품 상세 페이지 만들기." Next.js에서는 이렇게 했다.pages/products/[id].js 파일 만듦 getServerSideProps에서 상품 데이터 받아옴 컴포넌트에서 props로 받아서 렌더링끝. React였으면?컴포넌트 만들고 React Router로 라우팅 설정하고 useParams로 id 받고 useEffect에서 fetch하고 useState로 데이터 저장하고 로딩 상태 처리하고더 복잡하다. 그런데 Next.js가 쉬운 건 아니다. 뭔가 자동으로 해주는 게 많아서 이해가 안 된다. "왜 이렇게 돌아가는 거지?"를 모른다.헷갈리는 순간들 상황 1: 컴포넌트에서 라우터 쓸 때 // React import { useNavigate } from 'react-router-dom'; const navigate = useNavigate();// Next.js import { useRouter } from 'next/router'; const router = useRouter();비슷한데 다르다. 자동완성 믿고 쳤다가 에러 났다. 상황 2: Link 컴포넌트 // React <Link to="/about">About</Link>// Next.js <Link href="/about">About</Link>to인지 href인지 매번 헷갈린다. 둘 다 써봤다. 당연히 에러 났다. 상황 3: 이미지 최적화 // React <img src="/logo.png" />// Next.js <Image src="/logo.png" width={100} height={100} />Next.js는 Image 컴포넌트 쓰라고 한다. width, height 필수래. 왜 필수인지는 나중에 알았다. 최적화 때문이라는데. 처음엔 귀찮아서 그냥 img 태그 썼다. 선배가 PR에 코멘트 남겼다. "Image 컴포넌트 써주세요." 고쳤다. 선배들 대화 엿듣기 점심시간. "이번에 SSG로 바꿀까 SSR 유지할까?" "트래픽 보고 판단해야지. ISR도 고려해봐." "Vercel 배포하면 자동으로 최적화되니까 괜찮을 거야." 나는 김밥 씹으면서 고개만 끄덕였다. SSG? SSR? ISR? Vercel? 또 모르는 단어들이다. 퇴근하고 검색했다.SSG: Static Site Generation (정적 사이트 생성) SSR: Server Side Rendering (서버 사이드 렌더링) ISR: Incremental Static Regeneration (증분 정적 재생성)한글로 쓰니까 더 어렵다. 결국 깨달은 것 Next.js는 React를 포함한다. React로 할 수 있는 건 Next.js에서도 다 된다. useState, useEffect, 컴포넌트, props, 다 된다. 거기에 추가 기능이 있는 거다.파일 기반 라우팅 서버 사이드 렌더링 이미지 최적화 API 라우트 등등그래서 "React 할 줄 알면 Next.js도 할 수 있다"는 말이 틀린 건 아니다. 하지만 쉬운 것도 아니다. React 개념 제대로 모르는데 Next.js 기능까지 배우려니 머리 터진다. 지금 내 상태 입사 8개월. Next.js 프로젝트 3개 했다. 아직도 헷갈린다. getStaticProps와 getServerSideProps 언제 쓰는지 헷갈린다. dynamic import는 왜 쓰는지 모르겠다. prefetch는 뭔지 감도 안 온다. 그래도 한 가지는 안다. 면접 때 했던 "React 할 줄 압니다"는 거짓말이었다는 것. 제대로 아는 게 아니었다. 겉핥기였다. 지금도 마찬가지다. Next.js 쓰긴 쓰는데 제대로 아는 건 아니다. 선배가 짠 코드 복붙해서 조금씩 수정하는 수준이다. 신입의 생존법 모르면 물어본다. "이거 왜 getServerSideProps 쓰는 거예요?" "이 페이지는 왜 getStaticProps 안 쓰나요?" "Link 컴포넌트 prefetch 기본값이 true라는데 성능 괜찮나요?" 처음엔 물어보기 무서웠다. "이런 것도 몰라?" 할까 봐. 근데 선배들 반응은 의외로 괜찮다. "좋은 질문이네요. 왜냐하면..." 설명 들으면 50%는 이해된다. 나머지 50%는 나중에 이해된다. 모르는 건 노션에 적는다. "getServerSideProps: 매 요청마다 서버에서 데이터 받아옴. 실시간 데이터 필요할 때." 이렇게 쌓다 보면 언젠가 내 것이 될 거다. 아마도. 한 가지 확실한 것 React와 Next.js는 다르다. 비슷하지만 다르다. React는 라이브러리. 자유도 높다. 내가 다 설정해야 한다. Next.js는 프레임워크. 정해진 구조가 있다. 그 안에서 작업한다. 어느 게 더 나은가? 모르겠다. 회사가 쓰는 걸 쓴다. 신입은 선택권이 없다. 그냥 적응한다. 헷갈려도 계속 쓴다. 그러다 보면 익숙해진다. 아직은 헷갈리지만.면접 때 "Next.js 할 줄 아세요?" 물어보면 뭐라 대답할까. "React는 하는데 Next.js는 헷갈려요"가 정답일 것 같다. 솔직하게.