React Docs (beta) 번역 및 정리 더보기 1. Built-in React APIs 1-1. createContext 📍createContext 컴포넌트가 읽거나 제공할 수 있는 context를 생성한다 const SomeContext = createContext(defaultValue) 📍createContext(defaultValue) 컴포넌트 외부에서 호출하여 context를 생성한다 import { createContext } from 'react'; const ThemeContext = createContext('light'); ✅매개변수 defaultValue - 일치하는 context provider가 없을 때 context가 가질 값 - 의미있는 기본값이 없으면 null을 명시하..

📍구현할 것 1. 좌우 버튼 클릭 시 다음 슬라이드로 넘어감 (React) 2. 슬라이드가 변경될 때 부드럽게 이동 (CSS) 3. 자동 슬라이딩 (React) 📍구현 먼저 슬라이드 컨텐츠 컴포넌트 생성

📍Styled-components는.. ✅장점 - React 친화적 (React를 위해 만들어짐) - style이 자동으로 주입된 컴포넌트를 만들 수 있음 - props를 통한 다이나믹 스타일링 가능 :disabled or :hover 상태에 따라 스타일링 변화 ✅단점 (Next.js 측면에서) - SSR 지원을 위한 추가 설정 필요 - 컴파일 이후 스타일에 랜덤한 클래스명이 생성되어 디버깅이 어려움 📍_document.tsx를 수정하여 SSR 지원 ✅기본적으로 CSR 방식으로 동작하는 styled-components를 SSR 방식으로 동작하게 수정 import Document, { Head, Html, Main, NextScript } from 'next/document' import { ServerS..

📍완성된 이미지 📍구현 2개의 element가 필요하다 - 그라데이션 element - 백그라운드 element 그라데이션 element는 회색 - 흰색 - 회색 이렇게 그라데이션 되게 스타일링한다 background element (회색) 위로 그라데이션 element가 지나가게 하면 된다 - 이때, 시작 지점은 | 그라데이션 | 백그라운드 | { return ( ); }; export default Skeleton; - Skeleton.scss .skeleton-box { display: inline-block; height: 1em; // 부모 요소와 같게 position: relative; overflow: hidden; background-color: #DDDBDD; &::after { posi..

Next.js 공식문서 읽기 📍프리렌더링이란? ⭐모든 HTML 페이지를 미리 생성 (client-side에서 JavaScript로 만들지 않음) - 페이지가 브라우저에 의해 로드되면, 각각의 HTML 페이지는 최소한의 JavaScript 코드를 보유 - 이후 이 코드가 수행되며 페이지를 완전하게 만듬 (이것이 Hydration 과정) ⭐프리 렌더링은 성능과 SEO 측면에서 유리 📍프리렌더링 이루어지는 것 확인하기 React (CRA 환경) 페이지 vs Next.js 환경의 페이지 비교 1️⃣두 페이지에 접속하여 JavaScript 비활성화 - 크롬 개발자도구 열기 - crtl + shift + p - javascript 검색하여 Disable JavaScript 클릭 2️⃣결과 확인 - CRA 페이지는 ..

📍에러 에디터에서는 에러가 없었는데, 배포하려고 하니 vercel 에서 에러를 띄웠다 에러 메시지 found page without a react component as default export in pages/index.styled.ts styled-copmonents 를 쓰고 있는데, pages 폴더에 있는 index.tsx를 스타일링 하기 위해 index.styled.ts를 만든 것이 화근이었다 📍pages 폴더 주의사항 ⭐Next.js 프로젝트에서 pages 폴더는 routing 공간이므로, 각각의 파일이 page가 된다 따라서 index.styled.ts 파일이 존재하면 안된다! 디폴트 페이지 확장자 : .tsx, .ts, .jsx, .js 이며 next.config.js 에서 추가 가능 mo..