다다의 개발일지 6v6

클라이언트에서 fetch 요청 vs 서버에서 fetch 요청Next.js에서는 fetch()를 클라이언트와 서버에서 모두 사용할 수 있음. 하지만 실행되는 환경이 다르기 때문에 성능과 보안 측면에서 차이가 있음. 📌 핵심 차이점 요약 클라이언트에서 fetch() 요청서버에서 fetch() 요청실행 위치브라우저 (클라이언트)Next.js 서버 (Node.js)요청 횟수사용자가 페이지 방문할 때마다 요청서버에서 한 번 요청 후 결과 반환보안API 키가 브라우저에서 노출될 수 있음API 키를 숨길 수 있음성능네트워크 요청이 많아질 수 있음서버에서 미리 데이터 가져와서 빠름SEOCSR 방식이므로 SEO 불리함SSR로 SEO 최적화 가능 1. 클라이언트에서 fetch 요청하는 방식 📌 클라이언트에서 실행되는 ..

Nextjs API 서버 구축 ( json-server )  db.json 파일을 만들고 아래 코드를 터미널에 치면 된다~--watch는 변경될때마다 새로고침 해준다.npx json-server --port 9999 --watch db.json  Next.js의 컴포넌트 : 서버, 클라이언트 (이건 react 최신 버전에도 있다고 함)특별한 처리를 해주지 않으면 서버 컴포넌트(기본)로 간주한다.클라이언트 컴포넌트 처리: 컴포넌트 파일 맨 위에 "use client"; 서버, 클라이언트 컴포넌트에 대해서 더 상세히 알아보자.이 두 컴포넌트를 도입하여 성능과 개발 경험을 최적화할 수 있다. 서버 컴포넌트: 백엔드에서 렌더링되고 클라이언트로 HTML만 전달됨 → SEO 최적화, 빠른 로딩, 서버 자원 활용클라..

우리가 하고 싶은 건 페이지 전체 리로딩 없이 필요한 콘텐츠만 로딩하는 것인데이를 위해 Next.js에서 대신 를 사용하면 SPA(Single Page Application)처럼 동작할 수 있다 우선 태그를 사용하면 발생하는 문제점!페이지 전체가 새로고침됨기본적으로 태그를 사용하면 브라우저가 새로운 요청을 보내서 페이지 전체를 다시 로드한다.About 페이지 이동href="/about"을 클릭하면 서버에 요청을 보내고 페이지가 새로고침됨방문했던 페이지라도 다시 다운로드하여 렌더링하기 때문에 비효율적결과적으로기존 상태(state)가 초기화됨 (예: 입력 폼 내용, 로그인 상태 등)페이지 전환 속도가 느려짐   태그를 사용하면? (Next.js 방식)1️⃣ 클라이언트 사이드 내비게이션 (CSR) 적용i..

앱 라우팅(App Router) Next.js 13부터 디렉토리 기반의 라우팅 App Router가 도입됐다고 한다.기존의 pages/ 방식과 다르게, 파일과 폴더 구조만으로 자동으로 라우팅이 설정된다  기본 구조Next.js에서 app/ 폴더 안에 파일을 추가하는 것만으로 페이지를 생성할 수 있음📂 디렉토리 구조 예시/app ├─ layout.tsx # 모든 페이지에 공통 적용 (레이아웃) ├─ page.tsx # `/` (홈 페이지) ├─ about/ │ ├─ page.tsx # `/about` 페이지 ├─ blog/ │ ├─ page.tsx # `/blog` 페이지 │ ├─ post/ │ │ ├─ page.tsx # `/blo..

프론트엔드 개발자로서 역량을 탄탄하게 키우고 싶어서어떤 순서로 뭐를 어떻게 공부하면 좋을 지 가이드같은 게 있으면따라서 열심히 공부만 할 텐데..라고 생각하던 중 https://roadmap.sh/  개발자 로드맵 사이트를 발견했다. ㅜㅜㅠㅠㅠ 다들 즐겨찾기 해놓으세요!이제 틀은 나와있으니까 머리에 넣고 손으로 익히기만 하면 되는 것이다.여기 프론트엔드 뿐만 아니라 백엔드, 풀스택, ai 등등 많은 개발자들의 로드맵이 나와있고각 언어마다 어떤 순서로 배워가면 좋은지 나와있다.  제일 중요한 건 배우고 나서 꼭 프로젝트 하나 만들어 보는 것 추가)취업 공고에서 프론트엔드 역량으로 어떤 것을 원하는지 알아보았다.제일 중요한 HTML, CSS, JS 에 대한 이해도React(기본), Next.js(우대) ->..