본문 바로가기

Front-End

 (55)
캐싱(caching) 캐싱 - 자주 사용되거나 시간이 많이 소요되는 데이터를 임시 저장소에 저장한다.이때 저장 된 데이터를 캐시라고 부른다. 캐싱의 유형은 크게 4가지가 있다. 브라우저 캐싱웹 브라우저가 웹페이지 리소스를 로컬에 저장페이지 로딩 속도를 향상 시키는 방법이다. CDN 캐싱콘텐츠 배포 네트워크(CDN)을 사용하여 전 세계 여러 서버에 데이터를 분산 저장.CDN 제공업체: Cloudflare, Akamai, AWS CloudFront 등.정적 파일(이미지,동영상,css,JS)를 각 지역의 CDN서버에 저장해 로드 시간 단축 서버사이드 캐싱서버에서 자주 사용되거나 시간이 많이 소요되는 데이터를 임시저장, 이후 요청시 빠르게 응답메모리 캐싱: 데이터를 서버의 메모리에 저장하여 빠르게 접근.ex)Redis, Memcac..
병렬 패칭 , Suspense 예를 들어 4초가 걸리는 비동기통신 자료가 있다고 하자.4초동안 걸리는 이유는 직렬로 비동기를 돌려서 그런거라고 하자.그냥 그렇다고 하자.이런 경우엔 시간 단축을 할 수 있다.병렬로 데이터를 받는 것이다. Promise.all을 사용하면 된다. Promise.all: 만약 하나라도 거부되면 전체가 거부된다. try , catch문 사용하면 문제 없음.// 두 개의 API 엔드포인트를 호출하여 결과를 병렬로 받아오는 함수async function fetchParallel() { // 첫 번째 API와 두 번째 API 엔드포인트 const url1 = 'https://api.example.com/data1'; const url2 = 'https://api.example.com/data2'; ..
404 ,error , loading 각각 페이지 만드는 방법에 대해 알아보겠다. 404설정을 안하면 버셀에서 제공해주는 404페이지를 그대로 따라간다. 만드는 방법은 src/app 하위에 "not-found.tsx"를 만드는 것이다.컴포넌트채로 보여준다고 보면 된다. Error이것 역시 404와 방식은 똑같다.error.tsx 만들면 된다.에러는 'use client' 붙혀줘야 함! Loading로딩도 똑같다. 같은 경로에 Loading.tsx를 만들어주면 된다.로딩 컴포넌트 만드는 거 굉장히 중요하다.이것도 레이아웃.tsx처럼 , 가장 가까운 놈의 경로 공유를 한다.같은 폴더에 있는 놈을 쓰게 된다.
layout.tsx 레이아웃은 시스템 파일이다. 시스템 파일 : 운영 체제 및 시스템 소프트웨어가 제대로 동작하기 위해 필요한 파일이거 경로마다 사용이 가능하다.  기본적으로 root에 있는 레이아웃의 설정을 따라가게 되는데예를 들어 라우터폴더 안에 , layout.tsx를 만들면 , 그 안에 page.tsx는 안쪽 layout.tsx를 따라가게 된다.src/app/blog/layout (blog 폴더 내에 있는 page.tsx는 이 놈을 따라간다.)src/layout.tsx (전체적으론 이놈)  결론 : 레이아웃은 경로마다 생성해서 중첩 할 수 있다.
리액트 서버컴포넌트 , 클라이언트 컴포넌트 넥제 서버컴포넌트 안에서도 변수 사용이 가능하다. RSC (Default)react-server-component데이터 패칭 ! axos나 fetch api를 사용해서 하는 작업을 용도로.server Actions RCC (선택사항)react-Client-component 사용자와 상호작용하기 위한 컴포넌트useState , useEffect등 훅 사용가능.  넥제가 이렇게 두개가 나뉘는 이유는각각의 역할이 다르기 때문이다. 컴포넌트 트리를 구현할 때 신경써야 하는 부분 서버(상단) - 클라이언트(하단) 이렇게는 적용이 괜찮은데 클라(상단) - 서버(하단) 이렇게 트리구조가 되면 ,서버는 client 컴포넌트가 되는 것이다. 클라컴포는 서버컴포넌트에서 실행된다.요약 : 서버컴(상) - 클라(하) => 이..
넥스트 라우팅,라우터,라우트 라우팅사용자가 요청한 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..
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 의존..

티스토리툴바