Front-End54 넥스트 라우팅,라우터,라우트 라우팅사용자가 요청한 URL을 보여주는 행위 //페이지 이동 행동! 라우터라우팅을 하기 위해 관리하고 처리하는 도구ex ) next/router(13) , next/navigation(14) 라우터 라우트특정 컴포넌트 , URL 간의 매핑을 나타낸다.일반적으로 페이지의 경로와 해당 경로에 표시할 컴포넌트를 정의하는데 사용 된다.react -> router/index.tsxapp router = next14부터 도입된 놈임.acme.com/dashboard/settings전체 : url path/ 대쉬보드안에 내용물 : 세그먼트 (settings , dashboard)페이지생성 넥제 앱라우터 치명적 단점은page.tsx가 남발된다는 것이다.그래서 페이지에 대한 이름을 바꿔놓는 것이다. page.t.. 2024. 7. 29. SSR 되어있는지 검사 어떻게 해요? + 최적화 검사 브라우저에 F12 -네트워크- 전체페이지로딩해봤을 때 html이 다 있는지 확인해볼 수 있다.여기에 요소들이 비어있으면 SSR이 되지 않고 있다는 것이다.해당 페이지는 넥제 공홈이라 nextjs.org이고 , 개발할 땐 localhost를 눌러보면 된다. 안보이면 filter에 문서검색을 하면 된다. Lighthouse => 최적화 검사성능 , 접근성 , 권장사항 , 검색엔진 최적화 등을 볼 수 있다.다 100점은 나와야 되게 좋은건데, 성능은 70 넘기기도 굉장히 어려운 것이다. 근데 이거 다 이기는 게 있다.그것은 바로 스폰서다.몇백,몇천씩 구글이나 네이버에 돈주면 스폰서 띄준다. 2024. 7. 29. Next.js를 왜 쓰는가? 일단 CSR , SSR에 대한 개념을 알아야 한다. CSR (Client-Side Rendering)개념클라이언트(브라우저)에서 JavaScript를 사용하여 콘텐츠를 렌더링하는 방식입니다.초기 HTML 파일은 거의 비어 있고, JavaScript 파일을 로드하여 화면을 구성합니다.장점사용자 경험: 페이지 전환이 빠르고, 애플리케이션과 유사한 경험을 제공할 수 있습니다.서버 부하 감소: 초기 로드 이후에는 서버와의 통신이 줄어듭니다.유연성: 프론트엔드에서 다양한 기능을 쉽게 구현할 수 있습니다.단점SEO 문제: 검색 엔진 크롤러가 JavaScript를 제대로 실행하지 못하면 콘텐츠를 인덱싱하기 어렵습니다.초기 로드 시간: JavaScript 파일을 로드하고 실행하는 데 시간이 걸릴 수 있습니다.JS 의존.. 2024. 7. 29. [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 후기 1.2주차 후기2.배운 것들 링크 1. 2주차 후기직무교육을 한지 벌써 2주차가 끝났다.굉장히 빠른 속도로 진도를 나갔고 알고 있던 부분 , 모르는 부분 고루 있었다.React에 대해 잘안다고 생각했는데 많이 부족하다는 걸 느꼈다. 어색했던 동기들과 하나 둘 같이 지내며 친해진 거 같아서 좋았다.첫날보다 오프라인 인원이 조금 줄었으나 여전히 많은 사람들이 강의를 함께 들었다. 이번주는 자바스크립트 , 리액트까지 마무리를 했는데메모이제이션이라는게 특히 인상 깊었다. 최적화는 이런 식으로 진행되는거구나.내가 이런 부분이 부족한거구나.여기 들어오기 전에 나태해질 뻔 했다.뭐가 중요한지 몰라 뭘 공부해야할지 몰랐기 때문이다.유데미에 들어오게 된 건 정말 잘한 거 같다고 다시금 생각했다. 강사님의 강의는 여.. 2024. 7. 26. 서버 띄우는법 , http통신 json-server라는 놈을 사용한다.다운 방법https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node.js.yml). Latest version: 1.0.0-beta.1, last published: 2 months ago. Start using json-server inwww.npmjs.com이쪽에 들어가서 보면 된다.1.일단 라이브러리 설치한다.npm install json-.. 2024. 7. 26. Context API 어떤 상태(state)를 전체적으로 공유하기 위함이다. 3가지만 기억하면 된다.1.createContext 만들기2.Provider(껍데기) 만들기3.내가 쓸 곳에 씌워주기. 1.createContext 만들기const UserContext = createContext(초기값) 2.껍데기 만들기export default function AtuhProvider({children} : {children : Type}) {안에서 state와 state함수 return ( {children} )} 3.내가 쓸 곳에 놓기.//app.tsx 심화적으로 보겠다.import { createContext, useState } from "react";import getAuthDataFromLocalSto.. 2024. 7. 26. 이전 1 2 3 4 5 6 ··· 9 다음
