그냥 블로그

Next.js를 사용하다보니 Hydrate 용어를 많이 접하게 되었고, Next.js의 주요 동작 과정 중 하나라는 말에 한 번 정리해보기로 했습니다. ++ React와 비교도 한 번 찾아보고, 추가로 찾아볼 내용도 찾아보기. HydrationServer Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS 코드를 서로 매칭 시키는 과정   React (CSR) 리액트는 CSR 방식을 사용하고 있기 때문에, 처음 브라우저가 빈 HTML 파일을 받아 화면에는 아무것도 나타나지 않다가, 사용자 기기에서 렌더링이 완료되면 한 번에 화면을 보여준다.  CSR  * React index.html 파일을 보면, html에 아무것도 ..

1. Recoil Recoil을 사용하면 atoms에서 selectors를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 subscribe할 수 있는 state의 단위이며, selectors는 atoms의 상태값을 동기 또는 비동기 방식을 통해 변환한다.  Atom state에 대한 정보를 나타내는 객체,key : atom을 식별하는데 사용되는 고유한 문자열, 어플리케이션 전체에서 다른 atom과 selecor에 대해 고유함.default : atom의 초깃값 또는 Promisee 또는 동일한 타입의 값을 나타내는 다른 atom이나 selector. function atom({ key: string, default: T | Promise | ..

JSP 폴더 구조와 기능 API를 추가해야 하기 때문에, JSP의 폴더구조를 한 번 파악해야 할 것 같다... 우리 프로젝트는 계층형 구조로 되어 있음. 스프링 부트 1. 용어 정리DAODAO(Data Access Object)는 데이터 베이스에 접근하기 위한 객체. DataBase에 접근하기 위한 로직 & 비지니스 로직 분리를 위해 사용 DTODTO(Data Transfer Object)는 계층 간 데이터 교환을 하기 위해 사용하는 객체로, DTO는 로직을 가지지 않는 순수한 데이터 객체(getter & setter 만 가진 클래스) VOVO(Value Object)는 값 오브젝트로써 값을 위해 쓰인다. read-Only 특징(사용하는 도중에 변경 불가능하고, 오기 읽기만 가능)을 갖고 있다.=> DT..

메타 데이터란 ?메타데이터는 웹페이지에 대한 추가 세부정보를 제공한다. 페이지 방문자에게는 메타데이터가 표시되지 않지만, 페이지의 HTML, 일반적으로  요소 내에 삽입되어 뒤에서 작동한다. 검색 엔진 및 기타 시스템에 중요하다. 왜 중요할까?메타데이터는 SEO 향상에 중요한 역할을 한다. 적절한 메타데이터는 검색 엔진이 웹 페이지를 효과적으로 색인화해 검색 결과에서 순위를 높이는 데 도움이 된다.  메타 데이터 유형Title Metadata : 브라우저 탭에 표시되는 웹 페이지 제목을 담당한다. Page Title 설명 메타 데이터 : 이 메타데이터는 웹 페이지 콘텐츠에 대한 간략한 개요를 제공하며 검색 엔진 결과에 자주 표시된다. 키워드 메타 데이터 : 웹페이지 콘텐츠와 관련된 키웓드가 포함되어 있어..

https://nextjs.org/learn/dashboard-app/adding-search-and-pagination Learn Next.js: Adding Search and Pagination | Next.jsAdd search and pagination to your dashboard application using Next.js APIs.nextjs.org 검색 및 페이지 매김 추가URL 검색 매개변수를 사용하는 이유북마크 가능 및 공유 가능 URL 서버 측 렌더링 및 초기 로드 : URL 매개 변수를 서버에서 직접 사용해 초기 상태 렌더링 가능 -> 서버 렌더링 더 쉽게 처리 + 서버에서 웹 페이지의 초기 로드 시점에 클라이언트의 요청 URL을 분석하고 그에 따라 적절한 데이터를 미리 준비하..

https://nextjs.org/learn/dashboard-app/static-and-dynamic-rendering Learn Next.js: Static and Dynamic Rendering | Next.jsUnderstand how rendering works in Next.js, and make your dashboard app dynamic.nextjs.org 정적 렌더링?정적 렌더링을 사용하면 빌드 시(배포 시) 또는 재검증 중에 데이터 가져오기 및 렌더링이 서버에서 발생한다. 결과는 CDN(Content Delivery Network) 에 배포 및 캐시될 수 있습니다. CDN(Content Delivery Network) 많은 장소에 걸쳐 분산된 서버들의 그룹. 서버들은 데이터의 중복 ..