분류 전체보기130 웹뷰란? 웹뷰는 언제 쓰는걸까 웹뷰는 네이티브 앱 안에서 웹사이트를 띄우는 방법입니다.즉, 브라우저 창을 앱 안에 삽입한 것과 같아요. 웹뷰 컴포넌트 = 웹사이트(또는 웹앱)를 모바일 앱 안에서 띄울 수 있게 해주는 뷰(View) 컴포넌트 웹뷰는 앱 개발자가 구현하는 영역으로 Android에는 WebView 컴포넌트가, iOS에는 WKWebView 가 있어요. 웹앱 = 웹사이트 (그냥 크롬으로 들어감)웹뷰 = 앱 안에 있는 작은 브라우저 창네이티브 앱 = 완전 앱 언어로 만든 것 (Swift, Kotlin 등)하이브리드 앱 = 웹뷰 + 네이티브 기능 혼합웹앱을 모바일 크기로 개발하면 웹뷰인가?❌ 웹앱을 모바일 크기로 만든다고 해서 그 자체가 웹뷰는 아닙니다. 그건 단순히 반응형 웹앱이고, 브라우저에서 볼 수 있는 사이트야. ⭕웹뷰는 .. 2025. 4. 13. 왜 app 폴더 바로 밑에 route.ts가 올 수 없을까? 이건 App router의 폴더 기반 라우팅 규칙 때문입니다.app/route.ts는 루트 경로(/)에 해당하는 파일처럼 보일 수 있지만, Next.js에서는 파일이 아닌 폴더를 기준으로 라우팅 구조를 잡아요.따라서 app/page.tsx만 루트 경로(/)를 담당할 수 있어요. 올바른 구조 예시 app/├─ page.tsx // / 경로에 대응├─ api/│ └─ hello/│ └─ route.ts // /api/hello 경로에 대응 잘못된 구조 예시app/└─ route.ts ❌ // 어떤 경로로도 인식되지 않음 2025. 4. 10. 코드 스플리팅(code splitting)이란? 왜 필요할까? 코드 스플리팅이란앱 전체 코드를 한 번에 다 가져오지 말고, 필요한 것만 그때그때 나눠서 불러오자.자바스크립트 번들을 작게 나눠서 필요한 순간에만 불러오는 기술이다. 코드 스플리팅 왜 필요할까?기본적으로 React나 Next.js 같은 앱은 처음 빌드할 때 모든 컴포넌트, 라이브러리, 로직을 하나의 큰 JS 파일로 번들링합니다.하지만 앱이 커지면 이 파일도 점점 커지고, 결국 로딩 속도가 느려지고 UX가 나빠집니다.코드 스플리팅을 쓰면:초기 로딩 속도가 빨라짐페이지 전환 속도가 빨라짐불필요한 코드 실행 방지Next.js에서의 코드 스플리팅 Next.js는 페이지 기반 라우팅이므로, 페이지 단위 코드 스플리팅이 자동으로 적용돼요.✅ 즉, /about 페이지의 코드는 사용자가 실제로 그 페이지에 진입할 때까.. 2025. 4. 10. 하이브리드 렌더링이란? 하이브리드(hybrid)란 두 가지 이상의 요소를 합쳐 만든 것. 하이브리드 렌더링이란 하나의 앱 내에서 페이지별로 서로 다른 렌더링 방식을 사용할 수 있다는 뜻입니다.즉, 어떤 페이지는 SSR(Server Side Rendering), 어떤 페이지는 CSR(Client Side Rendering), 또 어떤 페이지는 SSG(Static Site Generation)으로 렌더링할 수 있습니다. 하나의 앱에서 모든 렌더링 방식을 조합해서 사용할 수 있나? ✅ 가능합니다.Nextjs는 한 앱 안에서 SSR, SSG, ISR, CSR 모두 조합해서 사용할 수 있는 프레임워크에요.실제로 대형 서비스들도 이렇게 페이지 단위로 가장 적절한 렌더링 방식을 섞어서 사용하고 있습니다. 그래서 페이지 별로 가장 적절한 방.. 2025. 4. 9. Next.js의 pages router 와 app router 차이 Next.js의 Router 방식에는 pages router, app router방식이 있다.두 방식 모두 페이지가 서버에서 렌더링 되고, 파일 기반으로 경로를 설정한다. (=파일기반 라우팅) 파일 기반 라우팅의 장점폴더 이름이 곧 URL 경로가 되므로 직관적이다. (app/about/page.js => /about)[id].js 처럼 파일이름만으로 동적라우트 간결하게 정의. Pages Router (기존 방식)폴더 구조: pages/ 폴더 내의 파일이 라우팅을 담당pages/index.tsx → /, pages/about.tsx → /about레이아웃 재사용 어려움 (_app.tsx, _document.tsx에 모두 몰아서 처리)서버 컴포넌트 없음동적 라우팅 및 중첩 레이아웃 구현이 불편데이터 패칭 방.. 2025. 4. 8. 왜 app router 에서는 index.js 아닌 page.js로 바뀌었을까? Pages Router에서는 index.js가 엔트리 포인트(루트 역할)이지만, App Router에서는 page.js 가 루트 페이지이다.그 이유는 App router에서 역할 중심 파일 네이밍 규칙을 정했기때문이다.목적파일 이름설명페이지 컴포넌트page.js해당 경로의 실제 화면 구성레이아웃layout.js중첩되고 재사용 가능한 레이아웃로딩 상태loading.js서버 컴포넌트 로딩 시 보여줄 UI에러 처리error.js해당 경로에서 에러 발생 시 처리404 처리not-found.js해당 경로에 리소스 없을 때 >> layout.js, loading.js, error.js, not-found.js 같은 파일명으로 명확한 역할 분리가 가능하다. ✅ 요약pages/에선 파일 이름이 URL을 결정→ ind.. 2025. 4. 8. 이전 1 2 3 4 5 6 ··· 22 다음
