그냥 블로그

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) 많은 장소에 걸쳐 분산된 서버들의 그룹. 서버들은 데이터의 중복 ..

해당 포스트는 다른 포스트들을 참고, 정리, 발췌한 개인 공부용 정리글입니다.   React Query 사용 이유Client Stateclint에서만 관리하는 정보들 (ex. input의 text)사용자가 선택한 언어, theme 등Server Stateserver에서 받아오는 모든 데이터 클라이언트에서 서버 데이터의 캐시를 관리loading, error state를 관리pagination, infinite scroll도 쉽게 처리할 수 있도록 지원prefetching을 쉽게 처리할 수 있도록 지원error 발생 경우 자동으로 재시도request가 성공하거나 실패했을 시 각각 callback을 정의 가능짧은 보일러플레이트 코드  React Server ComponentsReact Query에 들어가기 전..