파피루스

페이지(page) 몇 장 쓰세요?1) MPA (Multi Page application) : 새로운 페이지를 요청할 때마다 정적 리소스를 다운받아 렌더링하는 방식 2) SPA (Single Page application): 필요한 데이터가 있을 때마다 비동기로 받아와, 동적으로 현재 화면에 재렌더링 하는 방식      TTV ? TTI? TTV (Time To View) : 첫 페이지 로딩 시간TTI  (Time To Interact) : 인터렉션 (버튼 클릭, 슬라이드 이동 등) 가능한 상태로의  로딩 시간    페이지(page) 어디에서 만드나요?1) CSR (Client Side Rendering) : 클라이언트(브라우저)에서 페이지를 동적 생성하는 방식장단점+👍최초 한번이 느리고, 그 이후의 상..

Next Js의 6가지 원칙 (특징, 장점)1. out-of-the-box functionality requiring no setup : 어려운 셋팅 이제 그만2. js everywhere + all functions are wrriten in JavaScript : 자바스크립트 어디서든3. automatic code-splitting and server-rendering4. configurable data-fetching : 데이터 패칭 설정을 제공하겠다5. anticipating requests : 사용자 요청을 예측가능하게 한다6. simplifying deployment : 배포 쉽게 Next Js 기능들HMR : 애플리케이션 실행 중일 때 특정 모듈의 변경사항을 실시간으로 교체지원하는 렌더링 방..

사용 예시import Image from 'next/image' export default function Page() {    return ( ) } props이름isRequiredtypeexamplesrcOstringsrc="/profile.png"widthOinteger (px) heightOinteger (px) altOstring loader functionloader={imageLoader}fill booleanfill={true}sizes stringsizes="(max-width: 700px" 100vw, 33vw"quality integerquality={80}priority booleanpriority={true}placeholder stringplaceholder="blur"styl..

제어판에서 전체적으로 설정을 건들였더니, 창 이동이 안된다 아 세상에.. 이 단축키가 없어지게 설정할 수도 있는거라니 제어판 > 접근성 센터 > 보다 쉽게 작업에 집중할 수 있도록 설정 > 창을 쉽게 관리하기 > 화면 가장자리로 이동할 때 창이 자동으로 배열되지 않도록 방지 체크 해제

https://www.miricanvas.com/v/13e2buh [plan] commerce디자인 전문가가 아니어도 무료 템플릿으로 손쉽게 원하는 디자인을 할 수 있어요.www.miricanvas.com

nextJs > Image tagnext의 IMAGE 태그는 상위 요소 중 position이 static 하지 않은 요소 기준으로 그린다. css >> aspect-ratio : OOOcss >> object-fit : OOO object-cover : 비율 유지한채로 넣기object-conatin : 비율 유지unoptimized : 리사이징을 안하고 싶을 때 useRouter : router.push로 페이지 이동시 단점seo 불가 (다른 페이지 탐색을 하지 않는다.)seo 점수 높히는 방법내부 링크 (내 사이트에서 내 사이트로 이동하는 것)외부 링크 (타 사이트에서 내 사이트로 이동하는 것) : 이게 더 점수가 높을 것으로 예상typescript genericexport type SDeal = ..

JSX: Javascript를 확장시켜 만든 새로운 문법으로, 트랜스파일러(ex. babel)를 필수로 거쳐야 자바스크립트 런타임이 이해할 수 있는 JS 코드로 변환된다. xml 스타일의 트리 구문으로  JSX 구성 예시function HelloWorld () {  return (hello world);} babel로 컴파일 할 경우 JSX는 React.createElement로 요소를 만든다. // 리팩토링 전function HelloWorld ({ isHead, children }) {  return isHead       ? ({children})       :  ({children})}// 리팩토링 후function HelloWorld ({ isHead, children }) {  return R..

components ui libhttps://ui.shadcn.com/https://mui.com/tailwindcss 동적 css 도와주는 libhttps://cva.style/docscva 사용해보기 // 첫번째 인자 : 조합과 무관한 className // 두번째 인자 : 조합 const chipVariants = cva( ["text-sm", "border", "rounded-full", "px-2.5", "py-0.5"], { variants: { intent: { primary: "bg-blue-500 border-blue-500 text-white", secondary: "bg-gray-500 border-gray-500 ..