분류 전체보기 (65) 썸네일형 리스트형 SSR 되어있는지 검사 어떻게 해요? + 최적화 검사 브라우저에 F12 -네트워크- 전체페이지로딩해봤을 때 html이 다 있는지 확인해볼 수 있다.여기에 요소들이 비어있으면 SSR이 되지 않고 있다는 것이다.해당 페이지는 넥제 공홈이라 nextjs.org이고 , 개발할 땐 localhost를 눌러보면 된다. 안보이면 filter에 문서검색을 하면 된다. Lighthouse => 최적화 검사성능 , 접근성 , 권장사항 , 검색엔진 최적화 등을 볼 수 있다.다 100점은 나와야 되게 좋은건데, 성능은 70 넘기기도 굉장히 어려운 것이다. 근데 이거 다 이기는 게 있다.그것은 바로 스폰서다.몇백,몇천씩 구글이나 네이버에 돈주면 스폰서 띄준다. Next.js를 왜 쓰는가? 일단 CSR , SSR에 대한 개념을 알아야 한다. CSR (Client-Side Rendering)개념클라이언트(브라우저)에서 JavaScript를 사용하여 콘텐츠를 렌더링하는 방식입니다.초기 HTML 파일은 거의 비어 있고, JavaScript 파일을 로드하여 화면을 구성합니다.장점사용자 경험: 페이지 전환이 빠르고, 애플리케이션과 유사한 경험을 제공할 수 있습니다.서버 부하 감소: 초기 로드 이후에는 서버와의 통신이 줄어듭니다.유연성: 프론트엔드에서 다양한 기능을 쉽게 구현할 수 있습니다.단점SEO 문제: 검색 엔진 크롤러가 JavaScript를 제대로 실행하지 못하면 콘텐츠를 인덱싱하기 어렵습니다.초기 로드 시간: JavaScript 파일을 로드하고 실행하는 데 시간이 걸릴 수 있습니다.JS 의존.. [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 후기 1.2주차 후기2.배운 것들 링크 1. 2주차 후기직무교육을 한지 벌써 2주차가 끝났다.굉장히 빠른 속도로 진도를 나갔고 알고 있던 부분 , 모르는 부분 고루 있었다.React에 대해 잘안다고 생각했는데 많이 부족하다는 걸 느꼈다. 어색했던 동기들과 하나 둘 같이 지내며 친해진 거 같아서 좋았다.첫날보다 오프라인 인원이 조금 줄었으나 여전히 많은 사람들이 강의를 함께 들었다. 이번주는 자바스크립트 , 리액트까지 마무리를 했는데메모이제이션이라는게 특히 인상 깊었다. 최적화는 이런 식으로 진행되는거구나.내가 이런 부분이 부족한거구나.여기 들어오기 전에 나태해질 뻔 했다.뭐가 중요한지 몰라 뭘 공부해야할지 몰랐기 때문이다.유데미에 들어오게 된 건 정말 잘한 거 같다고 다시금 생각했다. 강사님의 강의는 여.. 서버 띄우는법 , 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-.. 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.. 메모이제이션 리액트는 상위 컴포넌트의 sate가 업데이트가 되면 그 하위 컴포넌트까지 제렌더링 된다.함수가 다시 호출되고, 값을 다시 부른다는 뜻이다.이렇게 되면 에너지 낭비이기 때문에 리액트에선 3가지 훅을 제공한다.이 3가지 훅은 값이나 함수를 메모리에 저장해 자원을 아낄 수 있다. useCallback(함수),useMemo(값),useReducer 각각 하나씩 살펴보겠다. useCallback 두가지 인자를 받는다.1.메모이제이션2.의존성 배열의존성 배열의 값이 변경되지 않는 한 , 동일한 함수 인스턴스를 반환한다. 사용방법const 변수선언 = useCallback(()=>{},[])const increment = useCallback(()->{ //이 함수 내부에서 발생하는 일이 //굉장히 비용이 많이 발.. 리액트 불변성 State나 props 같은 데이터를 변경할 때 ,기존 데이터를 직접 수정하지 않고 새로운 데이터를 생성하여 대체하는 것 불변성을 지켜야 하는 이유 - 가상 DOM의 효율성 - 이전상태 , 현재상태를 쉽게 비교해 변경 된 부분만 찾아내고 , 최소한의 DOM 조작이 가능하다. - 예측 가능성 : 상태 변화를 추적하기 쉽고 어떤 부분이 변경되었는지 파악하기 쉽다. - 데이터 흐름 단순화 : 데이터 흐름이 단순해지기에 앱의 안정성을 높일 수 있다. 지키는 방법1.객체나 배열을 직접 수정하지 않기새로운 객체를 생성하여 값을 복사 , 변경해야 할 부분만 수정한다.스프레드 연산자를 사용해 기존 객체를 복사하고 , 변경할 부분을 추가하거나 수정한다. 2.불변성을 보장하는 함수 사용map , filter , r.. useRef Ref = reference = 참조 = 다른 자료나 정보를 인용함 (필요한 정보를 얻기 위해 다른 자료를 살펴보는 것) 일단 이 훅에 기능이 두개 있다. (이러니까 어렵지..) 1.저장 공간으로서의 기능2.DOM요소를 선택하는 기능 1.저장 공간으로서의 기능useRef는 값을 저장하는 컨테이너 역할을 한다.이 저장공간에 저장된 값은 변경되어도 컴포넌트가 다시 렌더링 되지 않는다.(X) 변수가 바뀌어도 , ui를 다시 그려주지 않는다. (렌더링 하지 않아)useState를 쓰면 ui를 다시 그려주는 대신에 제랜더링이 일어난다. --> 렌더링 : 컴포넌트 함수가 다시 호출되는 과정 그러니까 컴포넌트를 계속해서 유지하고 싶은데 , 컴포넌트 안에 값 몇개만 바꾸고 싶을 때 쓰는 거다.컴포넌트의 라이프사이.. 이전 1 2 3 4 5 6 ··· 9 다음
